IMHO.WS - Сложная верстка на HTML

IMHO.WS (https://www.imho.ws/index.php)

- Веб-программирование (https://www.imho.ws/forumdisplay.php?f=29)

- - Сложная верстка на HTML (https://www.imho.ws/showthread.php?t=114899)

Сложная верстка на HTML

Подскажите, возможно ли такое сделать с помощью HTML и CSS? Так чтобы это корректно смотрелось в разных браузерах. И желательно без графики и таблиц.

Alexxxander, врядли. с таблицами можно, без врядли. сомниваюсь, что в css есть подобный элемент списка, чтобы его просто выставить (квадратик). А остальное, в общем-то реализуемо

Alexxxander, а сохранить страницу с css не пробовал?
давай сюда код может че и придумаем?

хотя я тек думаю на твоем примере без джава-скрипт не обошлось

agRav, а причем тут js к верстке?

Псих, присмотрись к меню мне кажеться там и
*.js работает в связке динамик html так сказать
ведь нет сомнения что дерево меню раскрываеться и закрываеться

Цитата:

Сообщение от agRav (Сообщение 1352872)

ведь нет сомнения что дерево меню раскрываеться и закрываеться

этого не требуется.

Нужно просто сделать нечто подобное, возможно, с небольшими отклонениями.

Цитата:

Сообщение от agRav (Сообщение 1352815)

а сохранить страницу с css не пробовал?
давай сюда код может че и придумаем?

Такой страницы нет. Ее нужно сделать.

ну берем значит и рисуем квадратик с элеметном уголок

и в css в свойствах элемента li прописываем эту каринку
далее перед каждым линком в html прописываем, <li>

ну а заголовки можно так

Код:

.buttred {

background: #770033;

font-family:Arial; 

font-weight:bold; 

text-decoration:none; 

text-align:center; 

font-size:12; 

width:90; 

color:white;

font-size:12px;

ну подправишь цвета , длинну

вроде так

Цитата:

Сообщение от Alexxxander (Сообщение 1352661)

И желательно без графики и таблиц.

Цитата:

Сообщение от agRav (Сообщение 1352953)

ну берем значит и рисуем квадратик с элеметном уголок

А на сколько желательно, это принципиально? просто в принципе, можно конечно извратиться, особенно с абсолютным позиционированием, и квадратики DIV'ами закрашенными сделать и с полосками так поступить... только действительно ли нужен такой изврат?

я извиняюсь за невнимательность
ну можно и кнопки buttons под квадратики замаскировать
но вот только как сказал:

Цитата:

Сообщение от Hubbitus (Сообщение 1353359)

только действительно ли нужен такой изврат?

в чем идея ? может что полегче и получше придумаем?

Цитата:

Сообщение от agRav (Сообщение 1353700)

в чем идея ? может что полегче и получше придумаем?

Идея именно в этом: сделать с помощью html и css такую верстку. Лучше конечно, не использовать неправильные конструкции (типа buttons).
Повторяю: ничего раскрывать не должно — обычный статичный текст.

Насколько я понимаю, если сделать в списочным символом графический элемент, при изменении размера шрифта (интерлинъяжа) линия разорвется. Не хотелось бы привязываться к размеру шрифта.

Есть еще один вариант верстки, он попроще:

Цитата:

Сообщение от Alexxxander (Сообщение 1354700)

Есть еще один вариант вёрстки, он попроще:

Ну попроще, сделаете сами. А пример реализации первоначального вот:

Код:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />



<style>

div        {padding: 0; margin: 0;}



#maindiv        {

        width: 200;

        font-family: Arial;

        font-size: 13px;

        line-height: 1.5em;

}



#maindiv_grey        {

        width: 200;

        font-family: Arial;

        font-size: 13px;

        line-height: 1.5em;

}



#d_header, #d_header_red        {

        width: 100;

        height: 1.5em;

        color: white;

        text-align: center;

        background-color: #949494;

        vertical-align: middle;

        }



#d_header_red        {

        background-color: #7B002F;

        }



#v_line        {

        background-color: #7B002F;

        width: 1px;

        height: 2.42em;

        margin-top: -1.5em;

        padding: 0;

        margin-left: 3px;

        float: left

}



#maindiv_grey #v_line        {

        background-color: #949494;

}



#h_line        {

        border-top: 1px solid #7B002F;

        font-size: 0;

        width: 8px;

        height: 1px;

        margin-top: 11px;

        float: left;

        background-color: white;

}



#maindiv_grey #h_line        {

        border-top: 1px solid #949494;

}



#quad        {

        background-color: #949494;

        width: 9px;

        height: 9px;

        margin-top: 7px;

        float: left;

        font-size: 0; /*Долбанный IE*/

}



#d_item        {

        margin-left: 1.7em;

        color: #949494;

        font-weight: bold

        }



#sub_item        {

        margin-left: 1.4em;

        font-size: 10px;

        line-height: 1em

        }

</style>

</head>



<body>

<div id="maindiv_grey">

        <div id="d_header">образование</div>

        <div id="v_line"></div>

        <div id="h_line"></div><div id="quad"></div>



        <div id="d_item">новости</div>

</div>



<div id="maindiv">

        <div id="d_header_red">бизнес</div>

        

        <div id="v_line"></div>

        <div id="h_line"></div><div id="quad"></div>

        <div id="d_item">новости компаний</div>



        <div id="v_line"></div>

        <div id="h_line"></div><div id="quad"></div>

        <div id="d_item">кросс-культура</div>

        <div id="sub_item">Если Ваш партнер - un`italiano vero</div>



        <div id="v_line"></div>

        <div id="h_line"></div><div id="quad"></div>

        <div id="d_item">маркетинг</div>



        <div id="sub_item">"Звездные врата" большого рынка</div>



        <div id="v_line"></div>

        <div id="h_line"></div><div id="quad"></div>

        <div id="d_item">менеджмент</div>

        <div id="sub_item">Удержать дистанцию!</div>

</div>



</body>

</html>

Примеры (долго лежать не будут, по крайней мере не гарантирую)
http://ru.bir.ru/imho/div/divS.htm по моему мнению более "правильный" вариант, потому что используются единицы измерения относительно величины используемого текста, однако, долбанный IE не отображает это как задумано. В нем почему-то нельзя сделать высоту div меньше строчки текста, даже если в нем нету никакого текста... по моему бред, но так уж есть. Протестировано в ФФ 2.0.0.1 и Опера 9.10

http://ru.bir.ru/imho/div/divS_IE.htm Вариант "менее правильный" (см выше), в коде выше именно он располагается. Зато отображается одинаково к браузерам выше еще и в ИЕ 6.0

Большое спасибо за пример!

Но увы! В IE, кроме прочего, если поставить «Не учитывать размеры шрифтов...», верстка «поедет».

Если в любом другом браузере размер шрифта изменить (увеличить), то и в них, естественно поедет. Дак а что Вы хотели?? Я сразу спрашивал - зачем такой изврат? Но Вам хотелось, и я представил пример. С парой-тройкой табличек проблема решается легко.

понятно, спасибо!