HTML5, создавая панель фильтров левой, правой и верхней центральной категории?

75
4

То, что я пытаюсь сделать, это создать каталог. Мне нужна левая боковая панель, чтобы отфильтровывать ее чем-то, правую боковую панель, чтобы отфильтровывать ее чем-то снова и верхнюю центральную панель, чтобы отфильтровывать ее чем-то снова, пока контент будет посередине.

Вот мой html-код

<!doctype html>
<html lang="eng">
<head>
<meta charset="utf-8" />
<title>My directory</title>
<link rel ="stylesheet"href = "main.css">
</head>
<body>
<div id = "big_wrapper">
<header id="top_header">
<h1>My directory<h1>
</header>

<nav id="tabs">
<ul>
<li>Home</li>
<li>Ad enquiry</li>
<ul>
</nav>
<aside id = "sidebar1" > <!--sidebar-->

<h2>Filter by Location</h1>
<p>Suva</p>
<p>Nadi</p>
<p>Lautoka</p>
</aside>

<section id="content"> <!--content-->

<article> <!--similar information, own layout-->
<header>
<hgroup>
<h2>Aramco Construction</h1>
<hgroup>
</header>

<p>Industry : Construction</p>
<p>Location : Suva</p>
<p>Link : N/A</p>

<footer>
</footer>
</article>

<article> <!--similar information, own layout-->
<header>
<hgroup>
<h2>Classic Pools</h1>
<hgroup>
</header>

<p>Industry : Construction</p>
<p>Location : Suva</p>
<p>Link : N/A</p>

<footer>
</footer>
</article>

</section>

<aside id = "leftbar" > <!--sidebar-->

<h2>Filter by xxxxx</h1>
<p>lol</p>

</aside>
<aside id = "rightbar" > <!--sidebar-->

<h2>Filter by yyy</h2>
<p>yolo</p>

</aside>
<aside id = "topbar" > <!--sidebar-->

<h2>Filter by Alphabet</h2>
<p>A</p>
<p>B</p>
<p>C</p>

</aside>

<footer id="footer_lol">
Copyright Shuyaib 2014
</footer>.
</div>
</body>
</html>

мой код css

*{
margin:0px;
padding:0px;

}
h1{
font: bold 20px Tahoma;
}
h2{
font: bold 14px Tahoma;
}
header, section, footer, aside, nav, article, hgroup{
display:block;
}

body{
text-align:center;
}

#big_wrapper
{
border: 1px solid black;
width:1000px;
margin:20px auto;
text-align:left;
}
#top_header
{
background:yellow;
border: 1px solid blue;
padding:20px;
}
#tabs
{
background:blue;
color:white;
}
#tabs li
{
display:inline-block;
list-style:none;
padding: 5px;
font: bold 14px Tahoma;

}
#leftbar
{
float:left;
width:150px;
margin:20px 0px;
padding:30px;
background:blue;
}
#rightbar
{
float:right;
width:150px;
margin:750px 0px;
padding:30px;
background:blue;
}
#topbar
{
float:centre;
width:500px;
margin:20px 0px;
padding:30px;
background:blue;
}
#content
{
float: left;
width:250px;
margin-left:250px;
margin-top:40px;
background: red;

}

#footer_lol
{
clear:both;
text-align:center;
padding:20px;
border-top:2px solid green;

}

проблема в том, что я хочу 150 пикселей для моего левого бара, 150 для моего правого бара и оставшихся 700 пикселей для моего центра, так как контент попадает поверх моего левого бара и так возится с ним вокруг, я не могу его выровнять правильно? Любые рекомендации?

спросил(а) 2014-07-15T19:02:00+04:00 6 лет, 9 месяцев назад
1
Решение
61

вместо использования жестко закодированных значений, почему бы не попробовать возиться с использованием процентов? Я действительно считаю, что ваше дополнение также возится с полями. вы можете попробовать ширину 120px и 30px padding. Просто некоторые предложения!

ответил(а) 2014-07-15T19:05:00+04:00 6 лет, 9 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема