Адалт кутюрье
С нами с 16.04.06
Сообщения: 1322
Рейтинг: 827
|
 Добавлено: 22/09/09 в 21:20 |
| pinnokio писал: | Первое что пришло в голову: присвой каждому из пунктов свой дополнительный класс, который определит положение пункта меню.
Примерно вот так
не привязан ни к размеру ячеек, ни к размеру блока. Ну, разве что, размер будет мал для трех пунктов: они тогда друг на друга "налезут". |
не работает, опера, ресайз окна
http://clip2net.com/page/m0/1955943
|
|
|
|
| |
Адалт кутюрье
С нами с 16.04.06
Сообщения: 1322
Рейтинг: 827
|
| Добавлено: 22/09/09 в 21:21 |
вариантов решения много, всё зависит от условий, надо видеть конкретную картинку=)
Оффтопик: сори, дабл
|
|
|
|
| |
С нами с 11.11.08
Сообщения: 3606
Рейтинг: 402
|
| Добавлено: 22/09/09 в 21:32 |
При ресайзе оно так себя и в мозилле будет вести. На скрине: ну, это уже жесткий ресайз окна получился. ))
А в идеале, конечно же, необходимо видеть конкретную полную задачу.
Я всего лишь нарисовал модель, показав человеку возможное направлении для движения.
|
|
|
|
Выгодные туры в Прагу на kanikul.net
Горящие туры в Египет можно найти на сайте kanikul.net
|
0
|
|
| |
Добрых Дел Мастер
С нами с 03.05.08
Сообщения: 3143
Рейтинг: 1227
|
| Добавлено: 22/09/09 в 22:00 |
Попробуй
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;}
|
|
|
|
| |
:o)
С нами с 10.12.06
Сообщения: 1171
Рейтинг: 160
|
| Добавлено: 22/09/09 в 22:11 |
| pinnokio писал: | да не проблема, если в ходе адаптирования под проект возникнут вопросы или затруднения - стучись. Чем сможем - поможем 
2 Dorian, а что, мало инфы? Кажись, и так кучу набросали всего. куда уж больше? |
Хорошего много не бывает ))
Если знаешь стоящие ресурсы, то скинь, буду признателен не только я))
|
|
|
|
| |
С нами с 11.11.08
Сообщения: 3606
Рейтинг: 402
|
| Добавлено: 22/09/09 в 22:15 |
| 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;} |
Не плохой вариант, но человек просил что бы пункты были не привязаны к жесткой ширине: не зависели от кол-ва букв.
|
|
|
|
Выгодные туры в Прагу на kanikul.net
Горящие туры в Египет можно найти на сайте kanikul.net
|
0
|
|
| |
С нами с 11.11.08
Сообщения: 3606
Рейтинг: 402
|
| Добавлено: 22/09/09 в 22:16 |
| Dorian писал: | Хорошего много не бывает ))
Если знаешь стоящие ресурсы, то скинь, буду признателен не только я)) |
я выше уже постил.
|
|
|
|
Выгодные туры в Прагу на kanikul.net
Горящие туры в Египет можно найти на сайте kanikul.net
|
0
|
|
| |
Добрых Дел Мастер
С нами с 03.05.08
Сообщения: 3143
Рейтинг: 1227
|
| Добавлено: 23/09/09 в 06:56 |
Так:
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;} |
|
|
|
|
| |
:o)
С нами с 10.12.06
Сообщения: 1171
Рейтинг: 160
|
| Добавлено: 23/09/09 в 08:44 |
//
Последний раз редактировалось: Dorian (28/09/09 в 08:50), всего редактировалось 1 раз
|
|
|
|
| |
С нами с 06.03.05
Сообщения: 6216
Рейтинг: 7375
 
|
| Добавлено: 23/09/09 в 09:07 |
по меню тут может быть два варианта..
первый если только простой текст типа ссылка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 не забываем док тайп указывать
|
|
|
|
| |
zza
С нами с 19.10.03
Сообщения: 9911
Рейтинг: 4827
|
| Добавлено: 23/09/09 в 09:11 |
да, вообще это все интересует с разными стилями,
сорри, что сразу не написал, использовать приходится
в тубодизах, аля указать время, голоса, рейтинг и прочее
под роликом
|
|
|
|
| |
С нами с 06.03.05
Сообщения: 6216
Рейтинг: 7375
|
| Добавлено: 23/09/09 в 09:23 |
тогда заморачиваться так не стоит, там фиксированную ширину лучше задать и float'ы и выровнять как нужно
|
|
|
|
| |
:o)
С нами с 10.12.06
Сообщения: 1171
Рейтинг: 160
|
| Добавлено: 15/10/09 в 16:17 |
Очередной вопрос:
| Код: | <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?
При этом важно, чтобы стуктурная разметка осталась та же.
|
|
|
|
| |
С нами с 11.11.08
Сообщения: 3606
Рейтинг: 402
|
| Добавлено: 15/10/09 в 16:33 |
| 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?
При этом важно, чтобы стуктурная разметка осталась та же.
|
о_О а не проще ли было сократить сию конструкцию до вида
| Код: | <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 размер шрифта.
Последний раз редактировалось: pinnokio (15/10/09 в 16:42), всего редактировалось 1 раз
|
|
|
|
Выгодные туры в Прагу на kanikul.net
Горящие туры в Египет можно найти на сайте kanikul.net
|
0
|
|
| |
:o)
С нами с 10.12.06
Сообщения: 1171
Рейтинг: 160
|
| Добавлено: 15/10/09 в 16:39 |
Нет.
Дело в том, что вместо черного фона в этих дивах должны быть графические файлы высотой в один пиксель.
А сделать бордер для дива картинкой нельзя.
|
|
|
|
| |
С нами с 11.11.08
Сообщения: 3606
Рейтинг: 402
|
| Добавлено: 15/10/09 в 16:44 |
Пока правил свое сообщение, не увидел ответа на первый вопрос
Я так понимаю, и второй вопрос в данном случае не актуален Видимо, используются разные фоновые изображения.
|
|
|
|
Выгодные туры в Прагу на kanikul.net
Горящие туры в Египет можно найти на сайте kanikul.net
|
0
|
|
| |
:o)
С нами с 10.12.06
Сообщения: 1171
Рейтинг: 160
|
| Добавлено: 15/10/09 в 16:48 |
| pinnokio писал: | если уж решили не менять ничего в структуре HTML попробуй просто обнулить для классов .line-1px-1 и .line-1px-2 размер шрифта.
|
Помогло, но не сильно )) Почему-то в IE6 высота 2px. В IE 7,8 нормально.
|
|
|
|
| |
С нами с 11.11.08
Сообщения: 3606
Рейтинг: 402
|
| Добавлено: 15/10/09 в 16:51 |
хм, занятно
дополнительно можешь попробовать "прижать" все это float. Вправо или влево, это уж как там по структуре нужно.
|
|
|
|
Выгодные туры в Прагу на kanikul.net
Горящие туры в Египет можно найти на сайте kanikul.net
|
0
|
|
| |
:o)
С нами с 10.12.06
Сообщения: 1171
Рейтинг: 160
|
| Добавлено: 15/10/09 в 16:51 |
| pinnokio писал: | Пока правил свое сообщение, не увидел ответа на первый вопрос
Я так понимаю, и второй вопрос в данном случае не актуален Видимо, используются разные фоновые изображения. |
Да, совершенно верно! )))
|
|
|
|
| |
С нами с 11.11.08
Сообщения: 3606
Рейтинг: 402
|
| Добавлено: 15/10/09 в 16:53 |
ах, да, и margin padding обнули ;)
|
|
|
|
Выгодные туры в Прагу на kanikul.net
Горящие туры в Египет можно найти на сайте kanikul.net
|
0
|
|
| |
:o)
С нами с 10.12.06
Сообщения: 1171
Рейтинг: 160
|
| Добавлено: 15/10/09 в 16:53 |
del
|
|
|
|
| |
:o)
С нами с 10.12.06
Сообщения: 1171
Рейтинг: 160
|
| Добавлено: 15/10/09 в 16:56 |
| pinnokio писал: | | ах, да, и margin padding обнули ;) |
не помогает :-)
|
|
|
|
| |
С нами с 11.11.08
Сообщения: 3606
Рейтинг: 402
|
| Добавлено: 15/10/09 в 17:00 |
можешь выложить куда-нибудь сверстанную оригинальную страницу?
|
|
|
|
Выгодные туры в Прагу на kanikul.net
Горящие туры в Египет можно найти на сайте kanikul.net
|
0
|
|
| |
:o)
С нами с 10.12.06
Сообщения: 1171
Рейтинг: 160
|
| Добавлено: 15/10/09 в 17:05 |
Там точно такой же код, с той лишь разницей, что в верхнем и нижнем диве используется фоновое изображение.
Вообще странно. Я уж по-всякому перепробовал.
|
|
|
|
| |
С нами с 11.11.08
Сообщения: 3606
Рейтинг: 402
|
| Добавлено: 15/10/09 в 17:23 |
именно как фоновое, посредством background в css? или картинка вставляется в html?
|
|
|
|
Выгодные туры в Прагу на kanikul.net
Горящие туры в Египет можно найти на сайте kanikul.net
|
0
|
|
| |
