| |
|
|
| | Сделал сайт на DIV http://www.test.naglfar.ru/, но в FF проблемы с отображением области контента, емкость уезжает под шапку. Также если посмотреть на него с помощью IE там будут 2 белые полоски (в FF их почему-то нет) их мне надо растянуть по контенту. В общем нужно сделать также, как и этот сайт
http://www.naglfar.ru/
CSS:
body {
font: 12px arial;
background: #666666;
color:white;
margin: 0;
padding: 0;
}
.body #container {
width: 900px;
background: #000000;
margin: 0 auto;
text-align: center;
}
.body #header {
background: #444444;
}
.body #logo{
float:left;
}
.body #logobg{
float:right;
width: 715px;
height:200px;
background:url(logobg.gif);
}
.body #lsidebar {
float: left;
width: 150px;
height: 550px;
background: #000000;
}
.body #rsidebar {
float: right;
width: 150px;
height: 550px;
background: #000000;
}
.body #main_content {
background: red;
margin: 0 150px;
padding: 0 10px;
text-align: justify;
}
.body #content1 {
width: 580px;
height: 30px;
background: url(content/content1.gif);
}
.body #content2 {
float: left;
width: 28px;
height: 48px;
background: url(content/content2.gif);
}
.body #content {
width:500px;
background: blue;
margin: 0 48px 0 28px;
padding: 0 0;
text-align: justify;
}
.body #content3 {
float: right;
width: 52px;
height: 48px;
background: url(content/content3.gif);
}
.body #block1 {
float: left;
width: 29px;
background: white;
}
.body #block2 {
float: right;
width: 52px;
background: white;
}
.body #content4 {
width: 580px;
height: 29px;
background: url(content/content4.gif);
}
.body #footer_top {
width: 900px;
height:70px;
background: url(footer_top.gif);
}
.body #footer_bottom{
width: 900px;
height:51px;
background: url(footer_bottom.gif);
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
|
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Готический портал Naglfar (DIV version)</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body class="body">
<div id="container">
<div id="header">
<div id="logo"><img src="logo.gif"></div>
<div id="logobg"></div>
</div>
<div id="lsidebar">
<br />
<div><a href="news.php"><img src="menu/news.gif" border="0"/></a></div>
<div><a href="video.php"><img src="menu/video.gif" border="0"/></a></div>
<div><a href="bands.php"><img src="menu/bands.gif" border="0"/></a></div>
<div><a href="bands.php"><img src="menu/gallery.gif" border="0"/></a></div>
<div><a href="bands.php"><img src="menu/forum.gif" border="0"/></a></div>
<div><a href="bands.php"><img src="menu/links.gif" border="0"/></a></div>
<div><a href="bands.php"><img src="menu/contacts.gif" border="0"/></a></div>
</div>
<div id="rsidebar">Right sidebar</div>
<div id="main_content">
<div id="content1"></div>
<div id="content2"></div>
<div id="content3"></div>
<div id="content">background color on this div will only show
for the length of the content. If you'd
like a dividing line instead, place a
border on the right side of the
#mainContent div if it will always contain
more content.
Donec eu mi sed turpis feugiat feugiat
. Integer turpbackground color on this div
will only show for the length of the
content. If you'd like a dividing line
instead, place a border on the right side of the #mainContent div if it will
always contain more content.
Donec eu mi sed turpis feugiat feugiat.
Integer turpis arcu, pellentesbackgr
ound color on this div will only show
for the
length of the content. If you'd like a
dividing line instead, place a border on
the right side of the #mainContent div if
it will always contain more content.
Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesbackground
color on this div will only show for the
length of the content. If you'd like a
dividing line instead, place a border on
the right side of the #mainContent div if
it will always contain more content.
Donec eu mi sed turpis feugiat
feugiat. Integer turpis arcu, pellentesis
arcu, pellentesq</div>
<div id="block1"></div>
<div id="block2"></div>
<div id="content4"></div>
</div><br class="clearfloat" />
<div id="footer_top"></div>
<div id="footer_bottom"></div>
</div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: 117195m
(20.06.2007 в 09:20)
| | | Берите отсюда пример http://www.dynamicdrive.com/style/layouts/category/C10/ и у вас ничего разъезжаться не будет. | |
| |
|
|
| |
|
|
| |
для: ilyaILF
(20.06.2007 в 19:09)
| | | С построением костяка -- проблем нет. Все упирается именно в то чтобы сделать растяжение контента и чтобы он не улезал под шапку. | |
| |
|
|
