Создание сайта с 3 div с центральным контентом и 2 "буферами", чтобы заполнить горизонтальное пространство напоминания - PullRequest
Новая
       40

Создание сайта с 3 div с центральным контентом и 2 "буферами", чтобы заполнить горизонтальное пространство напоминания

0 голосов
/ 19 ноября 2010

Я делаю css-сайт и хочу выглядеть так: 3 вертикальных деления. ЛЕВОЙ ЦЕНТРАЛЬНЫЙ ПРАВО .В center div находится содержимое сайта, и я хочу, чтобы left и right div заполняли пространство между центром и границами браузера.

Вот мой код. 

    #container
{
 width:100%;
 background-color:#000;
}
.center
{
 width:1000px;
 height:400px;
 background-color:#F90;
 margin: 0px auto;
 overflow: auto;
}
.spacer-left
{ 
 width:100%;
 height:400px;
 background-color:#F90;
 float:left;
}
.spacer-right
{ width:100%;
 height:400px;
 background-color:#F90;
}

А вот и 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>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div class="spacer-left"></div>
<div class="center" style="background-color:#F30;"></div>
<div class="spacer-right"></div>
<div style="clear:both"></div>
</div>
</body>
</html>

Я пробовал с 2-мя делениями, и проблем не былоСлева с поплавком: слева и шириной в пикселях, а справа со 100% шириной без поплавка.Это сработало.Но как сделать это с 3 делами.Заранее спасибо!

Ответы [ 2 ]

1 голос
/ 19 ноября 2010

Спасибо за помощь, Себастьян, но я разобрался в другом.Вот как теперь выглядит код, и он работает. 

#container
{
    width:1000px;
    background-color:#000;
    margin:0 auto;
}
.center
{
    width:100%;
    height:400px;
    background-color:#F90;
    margin: 0px auto;
    overflow: auto;
}
.spacer
{   
    width:50%;
    height:400px;
    background-color:#F90;
    float:left;
}
.head_warp
{
    width:100%;
    display:block;
    height:400px;
    margin:0 auto;
    padding:0;
    position:absolute;
    top: 0;
    left: 0;
    text-align:center;
    z-index:-9999;
}

и 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>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="head_warp">
<div class="spacer"></div>
<div class="spacer" style="background-color:#F06"></div>
</div>
<div id="container">
<div class="center" style="background-color:#F30;"></div>
</div>
</body>
</html>

Еще раз спасибо за помощь.Я напишу здесь снова, если есть проблема с моим решением.

0 голосов
/ 19 ноября 2010

Обновление: другая альтернатива ответу ниже, с использованием трех делений и z-индекса.

http://jsfiddle.net/SebastianPataneMasuelli/mzvB4/1/

если вы пытаетесь создать сайт с содержимым в центре div, вы можете скопировать этот макет, используя просто: 

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

с помощью css: 

html {height: 100%;   }
.center { width:750px; margin: 30px auto; height: 100%; }

играть с этим здесь: http://jsfiddle.net/SebastianPataneMasuelli/mzvB4/

из имен классов .spacer_left и .spacer_right Я предполагаю, что эти div - пустые разделители и не нужны.

это хороший ресурс для базовых макетов CSS: http://www.csseasy.com/

...