блочная верстка

48

def

29 августа 2007, 09:34

1492

Такой вопрос: когда верстаешь блоками, то как сделать так, чтобы при уменьшении размера окна, блоки придвигались друг другу только до определенной степени, а дальше вели себя как таблица, ну т.е никак не реагировали на ресайз окна, иначе div'ы наплывают друг на друга или "перескакивают" под соседний блок, вообщем дизайн полносутью разваливается. Как это можно реализвать? Спасибо.

для примера кусок кода:

<div id="menu" style=""> 

    <div style="float:left "> 

        <a href="#">сслыка</a> 

        <a href="#">сслыка</a> 

        <a href="#">сслыка</a> 

        <a href="#">сслыка</a> 

    </div> 

     

    <table style="float:right; "> 

    <tr> 

        <td><input type="text" style="float:left; " class="clinp"></td> 

        <td><input type="button" class="BButt" ></td> 

        <td width="5"></td><td style="padding-right: 10px; " ><a href=#>ссылка </a></td> 

    </tr></table> 

    </div> 

</div> 

 

#menu { 

    background-image:url(../images/menu.gif); 

    height: 30px; 

    width: 100%; 

    clear: both;  

    margin-bottom: 15px; 

    vertical-align: top;     

    padding-top: 3px;     

    background-repeat:repeat-x; 

}

570

Dreammaker

29 августа 2007, 11:09

#1

может position: relative поможет?

Хотя именно в дивной вёрстке я не силён :)

209

Ayavryk

29 августа 2007, 11:11

#2

Теория:

<div style="width:60%"> RIGHT </div>

</div>

Практика:

для IE добавляете хак min-width Его можно посмотреть здесь здесь: http://xhtml.ru/2005/06/11/max-width/ И хак против прыгающих блоков здесь: http://www.artlebedev.ru/tools/technogrette/html/fix_floats_in_ie/

Для гарантии добавляете во внутренние блоки overflow:hidden.

И еще любимая ссылка - "собрание глюков плавающей верстки IE6" http://designformasters.info/posts/css-float-theory-and-practice/

Тынгыр, мынгыр, комсомол (http://erum.ru). Ехари, ехари, (жалобно) аяврик. /народная тунгусская песня/

D

48

def

29 августа 2007, 12:22

#3

position: relative поможет

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

2Dreammaker

спасибо, сейчас почитаю ссылки

14

x3w

31 августа 2007, 11:36

#4

#container {
margin: 0px;
position: absolute;
top: 0px;
left: 0px;
width:/*тут и пишишь что тебе надо хоть 100% в ширину хоть 800px и будет он гибкий*/;
}
#left {
top:0px;
width:180px;
}
#center {
margin:0px 200px 0px 200px;
display:table;
position: absolute;
top: 0px;
left: 0px;
}
#right {
position: absolute;
top: 0px;
right: 0px;
width:180px;
}
<body>
<div id="container">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</body>

Изменяюсь может чего и на мазюкал здесь просто писал по памяти...

Уникальный контент (http://www.sfportal.net/image.html?id=0) это важно! Сайт эксперимент под программы (http://www.sfportal.net).

M

376

Miracle

31 августа 2007, 19:13

#5

Люди, а подскажите пожалуйста такую вещь, по теме, хочу что бы внизу был футер при не полном заполнении страницы, те что бы после футера небыло пустоты. Как это сделать.

Если страница большего объема чем "страница" то футер не должен быть внизу страницы браузера.

Надеюсь понятно написал. Спасибо.

отец сыночка, лапочки дочки и еще одного сыночка

Google об использовании CSS Google объяснил, когда нужно Google: расположение внутренних ссылок

95

Ткач

31 августа 2007, 20:39

#6

x3w:
Изменяюсь может чего и на мазюкал здесь просто писал по памяти...

не очень удачное решение делать в абсолютах всё.

во первых баги будут в разных браузерах, во вторых код с ошибками

Разработка и создание сайтов. Красиво, функционально, недорого. (http://time-online.ru/) ICQ 388-474-890)

95

Ткач

31 августа 2007, 20:42

#7

Miracle:
Люди, а подскажите пожалуйста такую вещь, по теме, хочу что бы внизу был футер при не полном заполнении страницы, те что бы после футера небыло пустоты. Как это сделать.

Если страница большего объема чем "страница" то футер не должен быть внизу страницы браузера.

Надеюсь понятно написал. Спасибо.

делай два контейнера: один верхний, второй футер (внизу)

в верхенем задавай высоту 100% и пропиши margin-bottom: -100px; (сколько высота у футера)

ну у футера ссответсвенно высота должна такой и быть

M

376

Miracle

1 сентября 2007, 04:05

#8

Ткач:
делай два контейнера: один верхний, второй футер (внизу)
в верхенем задавай высоту 100% и пропиши margin-bottom: -100px; (сколько высота у футера)
ну у футера ссответсвенно высота должна такой и быть

Спасибо, но не сработало... :)

Если я правильно конечно понял.

Все запихиваем в один контейнер #header (#top, #menu ...) и отдельно #footer

#header {height: 100% } на этом этапе уже должно развести - а нет :)

Мож ще что-то?:)

95

Ткач

1 сентября 2007, 05:59

#9

Miracle,

style:

html {min-height: 100%;}
body {
min-height: 100%; height: 100%; width: 100%; min-width: 100%; margin: 0; padding: 0;
}
div.main {height: 100%; min-height: 100%; margin-bottom: -100px;}
*html div.main {height: 100%;}
div.pere {clear: both;}
div.pre { height: 100px;}
div.foot {height: 100px; border: 1px solid black;}

html:

<body>
<div class="main"> 

<div class="">Тут сам контент собственно</div>
<div class="pere"></div>
<div class="pre"></div>

</div>

<div class="foot"></div>
</body>

M

376

Miracle

1 сентября 2007, 06:50

#10

спасибо. так сработало.

правда для ФФ при высоте футера в 100 пикселей

margin-bottom: +73px;}

а для ие

margin-bottom: +80px;}

пока не понимаю почему так

Open AI тестирует память для ChatGPT

Зачем быть уникальным в мире, где все можно скопировать