Jump to content
  • 0

Скругленные углы

x11

Asked by x11,

 Share

Question

x11 Explorer

x11

Posted
Posted

Знаю, скругленные углы это заежьженая пластинка, но ничего конкретного по этому поводу не нашел, кроме одного, если кто знает прамир, дайте ссылку плз. Вот нашел это

Мой макет:

775410.jpg

Проблема в том что левый нижний угол дублируется в диве, как на рисунке.

Вот CSS:

#content {

width: 927px;

height: auto;

padding: 0 0px;

/*background: #f8e6cc*/

background: #2a3742 url(images/bgg.png) repeat-x top center; /*полоса для градиента, если в ней причина, можно убрать*/

}

.corners {

background: url(images/left_top.png) top left no-repeat;

}

.corners div {

background: url(images/right_top.png) top right no-repeat;

}

.corners div div {

background: url(images/right_bot.png) bottom right no-repeat;

}

.corners div div div {

background: url(images/left_bot.png) bottom left no-repeat;

border: 1px green solid;

}

.right {

float: right;

width: 530px;

text-align: justify;

padding-top: 20px;

font-size: 14px;

.left {

float: left;

width: 220px;

padding-top: 10px;

А вот в шаблоне:

div id="content">

<div class="corners"><div><div><div>

<div class="left">

меню

</div>

<div class="right">

текст

</div>

</div></div></div></div>

<div style="clear: both;"> </div>

</div>

<div id="footer"> ......

Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0
x11 Explorer

x11

Posted
  • Author
Posted

Большое спасибо, вчера не имел один способ, а сегодня целых 39 :D

До этого верстой заниматься не приходилось, так мне даже в голову не приходило что IE - кость в горле. А хоть в 7/8 они его исправили?

Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

Posted
Posted
Это и есть html 5.0

Это я уже выяснил давно :D

вообще было б интересно почитать подробней про HTML 5. Только не на W3C ибо их спецификации не приспособлены для чтения человеком. Живым людям эти тексты выносят мозг.

До этого верстой заниматься не приходилось, так мне даже в голову не приходило что IE - кость в горле. А хоть в 7/8 они его исправили?

ИЕ7 не менее глючный чем ИЕ6. В ИЕ8 наметился прогресс, но до Мозиллы ему как до Китая раком.

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted (edited)
ИЕ7 не менее глючный чем ИЕ6. В ИЕ8 наметился прогресс, но до Мозиллы ему как до Китая раком.

Что ИЕ7 глючный, я согласен, но вот то, что проблемы в ИЕ6 возникают гораздо чаще - это факт! За собой заметил, что если стараться верстать с умом, то проблем с ИЕ7 вообще не будет, а с ИЕ6 всё равно придётся повозиться, так как всё таки в нём есть куча засадных багов, которые отсутствуют в ИЕ7 и требуют времени на исправление...

Edited by psywalker
Link to comment
Share on other sites
  • 0
s0rr0w Explorer

s0rr0w

Posted
Posted
Что ИЕ7 глючный, я согласен, но вот то, что проблемы в ИЕ6 возникают гораздо чаще - это факт! За собой заметил, что если стараться верстать с умом, то проблем с ИЕ7 вообще не будет, а с ИЕ6 всё равно придётся повозиться, так как всё таки в нём есть куча засадных багов, которые отсутствуют в ИЕ7 и требуют времени на исправление...

В целом правильно, только для статических страниц. Для динамики же... ИЕ7 все равно глючит. Особо радует position: absolute, при котором элементы начинают самостоятельно путешествовать по странице.

Link to comment
Share on other sites
  • 0
x11 Explorer

x11

Posted
  • Author
Posted

Майкрософт такой большой, блин, и не может выделить людей довести до ума свои браузеры? Я вообще в шоке с этого. Я тут пару дней парюсь, и уже просто офигевший :D

Опять не пойму в чем дело. Вобщем взял пример тут

Для IE есть строка, в Фаерфоксе работает и в IE работает норм, низушка выглядит как нужно:

aa8b7865171d.jpg

А в опере

e9553fd82b0d.jpg

Там я выделил пробел этот пробел в CSS нужен был чтобы IE правильно уголки отображал.

Вот CSS:

.tl {
	background: url(images/tl.png) 0 0 no-repeat;
}
.tr {
	 background: url(images/tr.png) 100% 0 no-repeat; 
}
.bl {
	background: url(images/bl.png) 0 100% no-repeat;
}
.br {
	 background: url(images/br.png) 100% 100% no-repeat; 
}
.clear {
	font-size: 1px; height: 0px;
}

И html:

...
<div class="bl"><div class="br"><div class="tl"><div class="tr">   -   это дивы с уголками
<div class="left">
...
</div>
<div class="right"> 
...
</div>
<div style="clear: both;"> </div>

</div></div></div></div>	 -  это закрываются дивы с уголками

<div class="clear"> </div>   -  вот это для эксплорера, и опера почему-то отображает его как в нижнем скрине

Вобщем помогите разобраться, как исправить

IE 83.gif97.gif98.gif

Link to comment
Share on other sites
  • 0
x11 Explorer

x11

Posted
  • Author
Posted

Пример что по ссылке не работает в IE

IE - 33.gif

ребята из Виллабаджо уже всё сверстали на таблицах и ху..т друг друга в квейк

Т.е. вы имеете ввиду что таблицами верстать быстрее?

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

1)

Пример что по ссылке не работает в IE

Всё правильно, я же говорил, что надо сделать под себя, в данном случае нужно было просто дописать overflow: hidden; к div.box em, div.box em b 

			div.box em, div.box em b { 
				background: url(s.gif) no-repeat;
				height: 11px;
				display: block;
				overflow: hidden;
			}

2)

ребята из Виллабаджо уже всё сверстали на таблицах и ху..т друг друга в квейк

Т.е. вы имеете ввиду что таблицами верстать быстрее?

Нет, я просто люблю юмор :D

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept