Блочная верстка. Вопросы к профессионалам., страница 2

Тема: Блочная верстка. Вопросы к профессионалам.

цитата
22/09/09 в 21:20

erobrand
pinnokio писал:

Первое что пришло в голову: присвой каждому из пунктов свой дополнительный класс, который определит положение пункта меню.
Примерно вот так
не привязан ни к размеру ячеек, ни к размеру блока. Ну, разве что, размер будет мал для трех пунктов: они тогда друг на друга "налезут".

не работает, опера, ресайз окна

http://clip2net.com/page/m0/1955943

цитата
22/09/09 в 21:21

erobrand
вариантов решения много, всё зависит от условий, надо видеть конкретную картинку=)

Оффтопик: сори, дабл

цитата
22/09/09 в 21:32

pinnokio
erobrand писал:

не работает, опера, ресайз окна
http://clip2net.com/page/m0/1955943

При ресайзе оно так себя и в мозилле будет вести. На скрине: ну, это уже жесткий ресайз окна получился. ))
А в идеале, конечно же, необходимо видеть конкретную полную задачу.
Я всего лишь нарисовал модель, показав человеку возможное направлении для движения.

цитата
22/09/09 в 22:00

FXIX
Попробуй

html:

<ul>
<li class="left">меню left</li>
<li class="right">меню right</li>
<li class="center">меню center</li>
</ul>

css:

ul {overflow:hidden; list-style-type:none;}
li {width:100px; height:50px; border:1px #000 solid;}
li.left {float:left;}
li.right {float:right;}
li.center {margin:0 auto;}

цитата
22/09/09 в 22:11

Dorian
pinnokio писал:

да не проблема, если в ходе адаптирования под проект возникнут вопросы или затруднения - стучись. Чем сможем - поможем

2 Dorian, а что, мало инфы? Кажись, и так кучу набросали всего. куда уж больше?

Хорошего много не бывает ))
Если знаешь стоящие ресурсы, то скинь, буду признателен не только я))

цитата
22/09/09 в 22:15

pinnokio
FXIX писал:

Попробуй
html:
<ul>
<li class="left">меню left</li>
<li class="right">меню right</li>
<li class="center">меню center</li>
</ul>
css:
ul {overflow:hidden; list-style-type:none;}
li {width:100px; height:50px; border:1px #000 solid;}
li.left {float:left;}
li.right {float:right;}
li.center {margin:0 auto;}

Не плохой вариант, но человек просил что бы пункты были не привязаны к жесткой ширине: не зависели от кол-ва букв.

цитата
22/09/09 в 22:16

pinnokio
Dorian писал:

Хорошего много не бывает ))
Если знаешь стоящие ресурсы, то скинь, буду признателен не только я))

я выше уже постил.

цитата
23/09/09 в 06:56

FXIX
Так:

html:

Код:

<ul>
<li class="left"><span>меню left</span></li>
<li class="right"><span>меню right</span></li>
<li class="center"><span>меню center</span></li>
</ul>

css:

Код:

body, ul, li, span {padding:0; margin:0;}
ul {overflow:hidden; list-style-type:none;}
li {padding:30px 40px;}
span {border:1px #000 solid;}
li.left {float:left;}
li.right {float:right;}
li.center {text-align:center;}

цитата
23/09/09 в 08:44

Dorian
//

Последний раз редактировалось: Dorian (28/09/09 в 08:50), всего редактировалось 1 раз

цитата
23/09/09 в 09:07

Skat
по меню тут может быть два варианта..
первый если только простой текст типа ссылка1 ссылка2 и ссылка3 то очень просто делается, ежели элементы меню будут иметь сво-ва блоков то тут сложнее, и код примерное такой

Код:

/* START_DEFAULT_STYLES */
html {padding:0;margin:0;font-size:62.5%;}
body {background:#fff;font: 12px Arial, Helvetica, sans-serif;margin: 0;padding: 0;color: #4e4b4b;}
ul, ol {margin:0;padding:0;}
li {margin:0;padding:0 10px;}
/* END_DEFAULT_STYLES */
#menu {
text-align: center;
padding: 20px;
}
#menu li {
padding: 15px;
border: 1px solid #333333;
list-style-type: none;
display:inline-block;
min-height: 50px;display: -moz-inline-stack;display: inline-block;vertical-align: top;margin: 3px;zoom: 1;*display: inline;_height: 50px; position:relative;z-index:99;
}

.left {
float: left;
}
.right {
float: right;
}

такая конструкция для li дает очень широкие возможности по вставки практически любого содержимого в эти контейнеры

Код:

<div id="menu">
<ul>
<li class="left"><div><a href="#">Left Any Siz</a></div></li>
<li class="right"><div><a href="#">Right Any Siz</a></div></li>
<li class="cntr"><div><a href="#">Center Any Size</a></div></li>
</ul>
</div>

ну для html не забываем док тайп указывать

цитата
23/09/09 в 09:11

3Sky
да, вообще это все интересует с разными стилями,
сорри, что сразу не написал, использовать приходится
в тубодизах, аля указать время, голоса, рейтинг и прочее
под роликом

цитата
23/09/09 в 09:23

Skat

тогда заморачиваться так не стоит, там фиксированную ширину лучше задать и float'ы и выровнять как нужно

цитата
15/10/09 в 16:17

Dorian
Очередной вопрос:

Код:

<div class="line-1px-1"></div>
<div class="height-10px"></div>
<div class="line-1px-2"></div>

.line-1px-1 {
background-color: #000000;
height: 1px;
width: 800px;
}
.line-1px-2 {
background-color: #000000;
height: 1px;
width: 800px;
}
.height-10px {
height: 10px;
width: 800px;
background-color: #CCCCCC;
}

Вопрос: Как сделать так, чтобы в IE 6 это дело отражалось так же, как в и в IE 7,8?
При этом важно, чтобы стуктурная разметка осталась та же.

цитата
15/10/09 в 16:33

pinnokio
Dorian писал:

Очередной вопрос:

Код:

<div class="line-1px-1"></div>
<div class="height-10px"></div>
<div class="line-1px-2"></div>
.line-1px-1 {
background-color: #000000;
height: 1px;
width: 800px;
}
.line-1px-2 {
background-color: #000000;
height: 1px;
width: 800px;
}
.height-10px {
height: 10px;
width: 800px;
background-color: #CCCCCC;
}

о_О а не проще ли было сократить сию конструкцию до вида
Код:

<div class="height-10px"></div>

.height-10px {
height: 10px;
width: 800px;
background-color: #CCCCCC;
border-top:1px solid #000;
border-bottom:1px solid #000;
}

Вопрос #2: Если уж решили делатьтаким образом, зачем дважды создается аналогичный класс? В чем разница между этими классами .line-1px-1 и .line-1px-2? Имхо, Достаточно использовать один и тот же класс.

И по сабжу: если уж решили не менять ничего в структуре HTML попробуй просто обнулить для классов .line-1px-1 и .line-1px-2 размер шрифта.
Код:

font-size:0px;

Последний раз редактировалось: pinnokio (15/10/09 в 16:42), всего редактировалось 1 раз

цитата
15/10/09 в 16:39

Dorian
Нет.
Дело в том, что вместо черного фона в этих дивах должны быть графические файлы высотой в один пиксель.
А сделать бордер для дива картинкой нельзя.

цитата
15/10/09 в 16:44

pinnokio
Пока правил свое сообщение, не увидел ответа на первый вопрос

Я так понимаю, и второй вопрос в данном случае не актуален

Видимо, используются разные фоновые изображения.

цитата
15/10/09 в 16:48

Dorian
pinnokio писал:

если уж решили не менять ничего в структуре HTML попробуй просто обнулить для классов .line-1px-1 и .line-1px-2 размер шрифта.
Код:

font-size:0px;

Помогло, но не сильно )) Почему-то в IE6 высота 2px. В IE 7,8 нормально.

цитата
15/10/09 в 16:51

pinnokio
хм, занятно

дополнительно можешь попробовать "прижать" все это float. Вправо или влево, это уж как там по структуре нужно.

цитата
15/10/09 в 16:51

Dorian
pinnokio писал:

Пока правил свое сообщение, не увидел ответа на первый вопрос

Я так понимаю, и второй вопрос в данном случае не актуален

Видимо, используются разные фоновые изображения.

Да, совершенно верно! )))

цитата
15/10/09 в 16:53

pinnokio
ах, да, и margin padding обнули ;)

цитата
15/10/09 в 16:53

Dorian
del

цитата
15/10/09 в 16:56

Dorian
pinnokio писал:

ах, да, и margin padding обнули ;)

не помогает :-)

цитата
15/10/09 в 17:00

pinnokio
можешь выложить куда-нибудь сверстанную оригинальную страницу?

цитата
15/10/09 в 17:05

Dorian
Там точно такой же код, с той лишь разницей, что в верхнем и нижнем диве используется фоновое изображение.
Вообще странно. Я уж по-всякому перепробовал.

цитата
15/10/09 в 17:23

pinnokio
именно как фоновое, посредством background в css? или картинка вставляется в html?

Стр. « первая < 1, 2, 3, 4 > последняя »

Новая тема Ответить

Эта страница в полной версии