[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Нужен вот такой дизайн сверстать
WhiteKnight
В общем мне надо сверстать такую верстку.
Шапка (широкая) должна быть прижата к верху
Подвал (широкий) прижат к низу
между ними контент фиксированной ширины 1024
В Хроме подобрал размеры и все норм, в ИЕ 8 все расползлось.
Помогите, с этой версткой.

Скрин в Хроме
http://img198.imageshack.us/img198/4584/dsfam.jpg

Скрин в ИЕ
http://img41.imageshack.us/img41/480/83556031.jpg

html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<link
rel="stylesheet" href="style.css" type="text/css" media="all">
<meta
http-equiv="Content-Type" content="text/html; charset=UTF-8">

</head>
<body>
<div
id="header">
header
</div>
<div
id="wrapper">
<div
id="content">
Skills to Pay the Bills
If you want to be the best, you have to learn from the best. At Tuts+ we believe in getting the best to share their skills and techniques. Whether it’s industry professionals and experts or skilled amateurs who have a trick to blow you away, anyone who’s good enough can write for a Tuts+ site.
We offer sites on a range of creative niches including Photoshop and Graphics, Vectors and Illustration, Web Development and Design, Motion Graphics, Flash and ActionScript, Computer Graphics, Photography and Audio Production. Select a site from the Our Sites navigation above.
We accept tutorials from both readers and commissioned writers and pay some of the best rates on the web. Learn more about writing for a Tuts+ site.
<br /><br />
Skills to Pay the Bills
If you want to be the best, you have to learn from the best. At Tuts+ we believe in getting the best to share their skills and techniques. Whether it’s industry professionals and experts or skilled amateurs who have a trick to blow you away, anyone who’s good enough can write for a Tuts+ site.
We offer sites on a range of creative niches including Photoshop and Graphics, Vectors and Illustration, Web Development and Design, Motion Graphics, Flash and ActionScript, Computer Graphics, Photography and Audio Production. Select a site from the Our Sites navigation above.
We accept tutorials from both readers and commissioned writers and pay some of the best rates on the web. Learn more about writing for a Tuts+ site.
<br /><br />
Skills to Pay the Bills
If you want to be the best, you have to learn from the best. At Tuts+ we believe in getting the best to share their skills and techniques. Whether it’s industry professionals and experts or skilled amateurs who have a trick to blow you away, anyone who’s good enough can write for a Tuts+ site.
We offer sites on a range of creative niches including Photoshop and Graphics, Vectors and Illustration, Web Development and Design, Motion Graphics, Flash and ActionScript, Computer Graphics, Photography and Audio Production. Select a site from the Our Sites navigation above.
We accept tutorials from both readers and commissioned writers and pay some of the best rates on the web. Learn more about writing for a Tuts+ site.
</div>
</div>
<div
id="footer">
footer
</div>
</body>
</html>



css
/* -----------------------------------------------------------  RESET STYLES */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
:focus {
outline: 0;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html {height: 100%}
body
{
font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
width: 100%;
height: 100%;
}
a {
color: blue;
outline: none;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
p {margin: 0 0 18px}
img
{
border: none;
}
input {vertical-align: middle}
/* ------------------------------------------------------------------------- */

#wrapper {
width: 1024px;
margin: 0 auto;
min-height: 83%;
height: auto !important;
height: 100%;

}

body {
color: #333;
font-family: sans-serif;
font-size: 16px;
}

#header {
height: 150px;
background: #333;
}

#content {
background: #fff;
padding: 0 0 100px;
}

#footer {
height:113px;
background: #333;
margin: -100px auto 0;
}








Спустя 35 минут, 40 секунд (7.01.2010 - 11:38) WhiteKnight написал(а):
эту проблему решил. другая.
почему в во всех браузерах пишу что так
margin: 0 auto;
что так
text-align: center;

и блок по центру

а в ИЕ не по центру, как быть с ним ?

Спустя 16 минут, 54 секунды (7.01.2010 - 11:55) Romms написал(а):
Смотря как писать... для дива нужно так:
Цитата
margin: 0 auto;

А если ты хочеш, например, чтобы спан сидел посредине то нужно для его родителя сказать:
Цитата
text-align: center;

это как я знаю...

Спустя 11 минут, 16 секунд (7.01.2010 - 12:07) Gabriel написал(а):
WhiteKnight
text-align: center;
ну если ты так пишеш и у тебя весь блок по центру выравнивается то ты гений ибо это выравнивает текст по центру а не блок.
а насчет margin:0 auto; ты сначала без нолика попробуй а если не выйдет то напиши так
margin-left:auto;
margin-right:auto;
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.