Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > помогите сверстать 4е волшебные колонки на DIVах

Автор: Vaulter 6.1.2007, 01:36

понадобилась такая структура страницы (в силу резиновости)
/-------------------------------------- страница ---------------------------------------------------------------------------------------/
/-----170px-----/----макс. растяжимый блок -----/-----------------------200px------------------------/----------100---------/
/--------------------------------------------------------------------------------------------------------------------------------------------/

как такое сверстать на дивах?
начал с этого:

Код


    <div id='head'>
        <div id='headleftleft'>
            <div id='headleftcenter'>
                <img id='minwidth174' src='img/minwidth174.gif' width=174 height=1/>
                <div id='headleftright'>
                    <div id='headright'>
                    </div>
                </div>
                
            </div>
        </div>
    </div>

а в CSS как начал лазить smile

ейбогу... половина IE не делает как надо (а в офисе все на нем сидят smile

)
короче ужас...
как сделать незнаю...
бьюсь 10 час!
помогите smile

Автор: Wolf1994 6.1.2007, 10:31

Боюсь, что взаимосвязные смежные ячейки возможно сделать, только на таблицах.

лёгкий offtop.
В чём принципиальность вёрстки на div?

Автор: PARROT 6.1.2007, 15:52

http://webmascon.com/topics/coding/43a.asp

Автор: Vaulter 6.1.2007, 18:42

Wolf1994, да ни вчем smile

сам сижу и думаю, а ну это все в баню!

PARROT, о! добрый человече

Автор: Vaulter 6.1.2007, 20:08

все гениальное просто:

Код


<style>
#head {height:140px;width:100%;margin:0;padding:0;border-collapse:collapse;
            background: #002a4d url("img/headleftcenter.jpg") repeat-x;
            }
#headleftleft {background: #002a4d url("img/headleftleft.jpg") no-repeat;
            position:absolute;top:0;left:0;
            height:140px; width: 125px;}
#headleftright {background: #002a4d url("img/headleftright.jpg") no-repeat;
            position:absolute;top:0;right:212px;height:140px; width:389px;}
#headright {background: white url("img/romewar.ru.jpg") no-repeat; position:absolute; top:0;right:0;
            height:140px; width: 212px;}
</style>
    <div id='head'>
        <div id='headgraph'>
            <div id='headleftleft'></div>
            <div id='headleftright'></div>
            <div id='headright'></div>
        </div>
</div>

если кому понадобится ;)
+ мне smile