Jump to content

Резиновый каркас


Scrum
 Share

Recommended Posts

скажите что такой реализации не было, что я зря потратил время.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
html, body {
margin: 0;
padding: 0;
height: 100%;
color: #fff;
font: 12px Verdana, Arial, Helvetica, sans-serif;
border: 0;
}
#carrier {
height: 100%;
}
#head, #footer {
background: #404040;
color: orange;
height: 35px;
padding-top: 15px;
text-align: center;
position: relative;
}
#content {
height: 100%;
margin: -50px 0 -50px 200px;
background: #660000;
display: table;
}
#menu {
float: left;
margin: 20px 0;
}
.substrate {
height: 50px;
}
/*]]>*/
</style>
</head>

<body>
<div id="carrier">
<div id="head">head</div>
<div id="menu">
<ul>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
</ul>
</div>
<div id="content">
<div class="substrate"></div>
<p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus </p>
<p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus </p>
<div class="substrate"></div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>

Link to comment
Share on other sites

чего-то кнопочка редактировать куда то пропала.

Сами понимаете в 7 часов утра не особо хотелось описывать.

Решил реализовать простенький каркас где:

1.хеад и футтер фиксированной высоты (можно то же резиновый но мало где применим).

2.меню и контент занимают оставшуюся часть экрана.

3.футтер всегда прижат к низу.

На сколько помню такой каркас можно было реализовать таблицами в quirk mode, либо с использованием хаков или js

Основные требования:

1.Валидность

2.Кросс под еи 6 и выше, фф, опера, сафари. (в еи 7 и фф 2 не проверял. у кого найдется (время и желание протестить) милости прошу высказываться)

3.Без использования хаков, жс, экспрешен.

немного дополнил.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
html, body {
margin: 0;
padding: 0;
height: 100%;
color: #fff;
font: 12px Verdana, Arial, Helvetica, sans-serif;
border: 0;
}
#carrier {
height: 100%;
}
#head, #footer {
background: #404040;
color: orange;
height: 35px;
padding-top: 15px;
text-align: center;
position: relative;
}
#content {
height: 100%;
margin: -50px 0 -50px 197px;
padding-left: 8px;
background: #660000;
display: table;
}
#menu {
float: left;
width: 200px;
height: 100%;
margin: -50px -3px -50px 0;
background: #D6D6D6;
}
ul {
list-style-type: none;
}
.substrate {
height: 50px;
}
/*]]>*/
</style>
</head>

<body>
<div id="carrier">
<div id="head">
head
</div>

<div id="menu">
<div class="substrate"></div>

<ul>
<li><a href="#">menu</a></li>

<li><a href="#">menu</a></li>

<li><a href="#">menu</a></li>

<li><a href="#">menu</a></li>
</ul>

<div class="substrate"></div>
</div>

<div id="content">
<div class="substrate"></div>

<p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus</p>

<p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus</p>

<div class="substrate"></div>
</div>

<div id="footer">
footer
</div>
</div>
</body>
</html>

Link to comment
Share on other sites

  • 4 weeks later...

Ну всмысле для контента надо давать min-height а не height ведь если height на 100% окна а контент на пару строк больше, то он вылезет, по этому min-height а для ИЕ height через хак(или условные комменты) так как он пониает height как min-height. Что у меня не так?

Вот без min-height для контейнера:

45d5fb9ee292a29421.jpg

А вот с ним:

89d2183b2861483417.jpg

Link to comment
Share on other sites

  • 1 month later...

Вариант работает... но наткнулся на проблему, если в футер вставить картинку по высоте дива - под дивом образуется несколько пикслей белого пространства, при этом появляется прокрутка в обоих браузерах. IE на компе нету, проверял в Opera 9.63, FF 3.

изменение для кода:

css: #head, #footer:

height: 50px;

padding-top: 0px;

Html:

<div id="footer"><img height="50"></div>

Link to comment
Share on other sites

  • 2 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy