Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > помогите сверстать 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
 smile  smile все гениальное просто:
Код

<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

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)