Вид для печати
собственно вот: (черт, я один сталкиваюсь с тем, что в IE 7.0 перестает работать ENTER?
Резиновость во всех направлениях должна присутствовать... Буду благодарен за ссылку на пример где то сделано... Если нет, то придется воевать таблицами
neocrome.ru/datas/users/157-window.jpg
[Only registered and activated users can see links. Click Here To Register...] - изначально все было резиновым, но потом сказали немного переделать.. в общем, подправить что-то не проблема..Цитата:
Резиновость во всех направлениях должна присутствовать... Буду благодарен за ссылку на пример где то сделано...
[Only registered and activated users can see links. Click Here To Register...] -резина
к тому же полно css-галерей, где можно посмотреть примеры, ну, например, из "наших" -http://cssbox.ru
забудьте вы про таблицы, есди они используются не по назначению..Цитата:
... Если нет, то придется воевать таблицами
у меня все.. :hi:
вот что-то похожее, урок от Дэна Седерхольма.
XHTML:
CSS:Код:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style>
@import url("style.css");
</style>
</head>
<body>
<div class="container">
****<p class="desc">This box is:</p>
****<p class="link">[Only registered and activated users can see links. Click Here To Register...]</p>****
</div>
</body>
</html>
IMAGES:Код:.container {
****float: left;
****color: #666;
****background: url(images/rounded-right.gif) no-repeat top right;
}
.desc {
****margin: 0;
****padding: 9px 9px 0 9px;
****background: url(images/rounded-left.gif) no-repeat top left;
}
.link {
****margin: 0;
****padding: 0 0 0 9px;
****background: url(images/rounded-left.gif) no-repeat bottom left;****
}
.link em {
****display: block;
****padding: 0 9px 9px 0;
****font-style: normal;
****background: url(images/rounded-right.gif) no-repeat bottom right;****
}
.container a {
****font-size: 130%;
****color: #E70;
}
[attachment=5564:attachment]
[attachment=5565:attachment]
Но такой способ подходит не всегда, я обычно чтобы сделать скругленные углы при резиновости блока по всем осям, в этот блок вкладываю маленькие изображения уголков которые абсолютным позиционированием расставляю по углам, не забыв при этом указать для самого блока position: relative;
удачи...
Zigzag, а можно узнать, в каких лучаях вы применяете "sliding doors" и в каких случаях 2ой способ?Цитата:
Но такой способ подходит не всегда
[/quote]Цитата:
Originally posted by Zigzag@Feb 28 2007, 12:36
я обычно чтобы сделать скругленные углы при резиновости блока по всем осям, в этот блок вкладываю маленькие изображения уголков которые абсолютным позиционированием расставляю по углам, не забыв при этом указать для самого блока position: relative;
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Имхо, наиболее предпочтительный способ. [Only registered and activated users can see links. Click Here To Register...]
Позволяет обойтись без большого фонового изображения.
ответ вам дал Aykroyd [Only registered and activated users can see links. Click Here To Register...]
да боюсь с данным рисунком он не катит... приведенный код - я так кнопки сделал, оно же в высоту не тянется?!
вот что хрестоматия о таблицах говорит:
[Only registered and activated users can see links. Click Here To Register...]
[/quote]Цитата:
Originally posted by booka@Mar 1 2007, 03:35
оно же в высоту не тянется?!
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Всё тянется. Причем любым из предложенных способов.
ладно... сделал пока таблицей, там просто изврат получится если на div... результат тут:
booka.jino-net.ru/booka/index.html
кстати - кто тут админит? по крайней мере в IE 7 хедер и футер косячат углами
booka
скажу по-секрету... скоро всё будет идеально [Only registered and activated users can see links. Click Here To Register...]
а этим дизайном уже нет смысла заниматься... ну изжил он себя
[/quote]Цитата:
Originally posted by booka@Mar 3 2007, 11:19
ладно... сделал пока таблицей, там просто изврат получится если на div... результат тут:
booka.jino-net.ru/booka/index.html
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Не смотрел, не интересно...
Позволю себе процитировать недавнюю проповедь своего коллеги:
<div class='quotetop'>Цитата</div>© ZigzagЦитата:
Да пребудет с вами сила великих (X)HTML и CSS, да не отрекайтесь от основ истинных отца нашего W3C, да не ленитесь проверять дело рук ваших инструментом отца нашего, да приложите сил к прочтению талмудов наших от евангелиста нашего Зельдмана! И воздастся вам тогда точно по делам вашим![/b]
:read:
ну хорошо если так [Only registered and activated users can see links. Click Here To Register...] вопросик опять у меня... посмотрел на свою ссылку в IE 6 - почему-то блоки справа сползают вниз... у левого div ширина 70%, у правого margin в 75%... таблицы если удалить, то все в норме... от чего так может быть?
с ентим разобралсо... и в чем нелюбовь такая к таблицам, без них же иногда никак...
[/quote]Цитата:
Originally posted by booka@Mar 3 2007, 17:33
в чем нелюбовь такая к таблицам, без них же иногда никак...
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Ну опять пошло-поехало... :crazy:
На самом деле в данном контексте совершенно не применимы такие понятия как "любовь" или "нелюбовь". Примерно таким же вопросом задавался в свое время и я сам. Не далее, чем минувшей осенью. Без таблиц никак только в том случае, если они используются по своему прямому назначению – для представления табличных данных. Но не для раскладки элементов на странице...
Обязательно к прочтению:
[Only registered and activated users can see links. Click Here To Register...]
вечный спор [Only registered and activated users can see links. Click Here To Register...] мне кажется надо подписать "биль о свободной верстке"... я согласен, что на div получается короче намного, но я свой извращенский блок пока не придумал как сделат ьбез таблиц...
[/quote]Цитата:
Originally posted by booka@Mar 3 2007, 18:40
вечный спор [Only registered and activated users can see links. Click Here To Register...] мне кажется надо подписать "биль о свободной верстке"...
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Никакого спора. Просто есть стандарты, есть понятие "семантики", есть мнения многих авторитетных людей... А как кому верстать – профессионально и по стандартам или таблицами "по старинке" – это уже личное дело каждого...
[/quote]Цитата:
Originally posted by booka@Mar 3 2007, 18:40
я согласен, что на div получается короче намного
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Не только короче. То, что короче – это далеко не самое главное преимущество блочной модели. Есть много других важных причин, по которым CSS-верстка гораздо предпочтительнее макетных таблиц...
[/quote]Цитата:
Originally posted by booka@Mar 3 2007, 18:40
но я свой извращенский блок пока не придумал как сделат ьбез таблиц...
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
А и не надо изобретать велосипед. Все уже изобретено. Если Вам, конечно, не лень почитать соответствующую специализированную литературу...
[/quote]Цитата:
Originally posted by Aykroyd@Feb 28 2007, 11:51
Имхо, наиболее предпочтительный способ.* [Only registered and activated users can see links. Click Here To Register...]
Позволяет обойтись без большого фонового изображения.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Что то я не понял ..
А разве при увеличении / уменьшении блока , те абсолютные дивы с уголками будут двигаться вместе с ним ? Или я туплю ?
конечно будут, т.к. они будут абсолютном позиционированием прикреплены к координатной сетке родительского блока
как сделать такого плана вложенные закругленные блоки?
[Only registered and activated users can see links. Click Here To Register...]
[/quote]Цитата:
Originally posted by Xylitolq@Dec 9 2007, 07:58
как сделать такого плана вложенные закругленные блоки?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Любым из двух способов, представленных выше в этой теме.
оба блока резиновые, тянутся по высоте и ширине
белый блок независимо тянется внутри серого
Ну и пусть тянется... кто ему мешает...
Цитата:
Originally posted by Xylitolq@Dec 9 2007, 02:58
[b]как сделать такого плана вложенные закругленные блоки?
[Only registered and activated users can see links. Click Here To Register...]
Поменяете div-ы 1, 2, 3 и 4 на изображения и будет вам счастьеКод:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>Великая мудрость закона гладких углов</title>
<style type="text/css" media="all"><!--
.main {position: relative; width: 200px; height: 300px; background-color: Lime;}
.text {position: relative; width: 180; height: 240px; background-color: blue; margin: 10px;}
.topleft {position: absolute; top: 0; left: 0; width: 25px; height: 25px; background-color: red;}
.topright {position: absolute; top: 0; right: 0; width: 25px; height: 25px; background-color: red;}
.bottomleft {position: absolute; bottom: 0; left: 0; width: 25px; height: 25px; background-color: red;}
.bottomright {position: absolute; bottom: 0; right: 0; width: 25px; height: 25px; background-color: red;}
h3 {margin: 0 0 0 1.5em;}
--></style>
</head>
<html>
****<body>
*<div class="main">
*****<h3>Block #1</h3>
* *****<div class="text">
* * *
* * *
* * *
* * *
* *****</div>
* *
* *
* *
* *
*</div>
****</body>
</html>
А делается это за счёт того, что в блоке котором требуется сделать абсолютное позиционирование элементов задаёте значение position: relative; и тогда элементы которые требуется спозиционировать будут позиционироваться в указанном блоке а не теле документа.
бэкгранудном картинки пускать?
Если вы извращенец, то да =) Шучу, с одной стороны хорошо background использовать потому что символов в коде меньше а css кэшируется, с другой стороны я использую изображения (подстраховываюсь) если сайт будут просматривать через портативные устройства то для них можно другой стиль создать и спрятать изображения:Цитата:
Originally posted by Xylitolq@Dec 9 2007, 14:44
[b]бэкгранудном картинки пускать?
<div class="topright">#2</div> = <img class="topright" src="topright.gif" alt="" />
Тут вопрос семантики по мне, это папа просветить может, Aykroyd в этом вопросе рулит
[/quote]Цитата:
Originally posted by Xylitolq@Dec 9 2007, 19:44
бэкгранудном картинки пускать?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Если вы НЕ извращенец, то да =) :read:
Извращенец Рёга =)Цитата:
Originally posted by Aykroyd@Dec 10 2007, 01:08
[b]Если вы НЕ извращенец, то да =)* :read:
Ну, совсем без извращений тоже нельзя...)