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

x11 · July 28, 2009

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

Мой макет:

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

Вот 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>

текст

</div>

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

</div>

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

rus · July 28, 2009

Ну вот еще тебе целых 38 способов.

Great Rash · July 28, 2009

Новейший способ! Мои эксперименты с <canvas>:

http://forum.mweb.ru/viewtopic.php?f=1&t=6099 (первый пост, Berezkin - эт я)

rus · July 28, 2009

Новейший способ! Мои эксперименты с <canvas>:
http://forum.mweb.ru/viewtopic.php?f=1&t=6099 (первый пост, Berezkin - эт я)

В сети рекомендуют писать просто <!DOCTYPE html>

Это и есть html 5.0

x11 · July 29, 2009

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

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

Great Rash · July 29, 2009

Это и есть html 5.0

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

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

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

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

psywalker · July 31, 2009

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

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

Edited July 31, 2009 by psywalker

s0rr0w · July 31, 2009

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

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

x11 · July 31, 2009

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

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

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

А в опере

Там я выделил пробел этот пробел в 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

psywalker · July 31, 2009

Недавно одной девушке писал способ интересный, лови, разберись, сделай под себя, вроде под твою задачу как раз!

http://psywalker.ru/Forum/ugl/1/main.html

x11 · July 31, 2009

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

IE -

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

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

psywalker · July 31, 2009

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)

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

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

Sign In

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

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information