Jump to content
  • 0

Правильное позиционирование


Tref_mast
 Share

Question

Приветствую! Есть верстка. Суть в том, что верхняя часть сайта(почти до половины) - фон. Эта часть должна быть резиновая. На этой самой части расположены другие блоки(меню, левая-правая части и контент). Еще этот фон желательно сделать фикс по высоте. Вот код:

HTML


<div id="wrapper">
<div id="header"></div>
<div id="top_menu"></div>
<div id="main">
<div id="left"></div>
<div id="content"></div>
<div id="right"></div>
</div>
</div>

CSS


#wrapper {
min-width: 1000px;
max-width: 1400px;
margin: 0 auto;
overflow: hidden;
}
#header{
height: 442px;
background: #cccccc;
}
#top_menu{
width: 1000px;
height: 65px;
background: #000000;
margin: 0 auto;
}
#main{
width: 1000px;
margin: 0 auto;
overflow: hidden;
}
#left{
width: 200px;
float: left;
height: 100px;
background: green;
}
#content{
width: 500px;
float: left;
background: magenta;
}
#right{
width: 200px;
float: left;
height: 150px;
background: yellow;
}

Получается что то вроде: Вот

То есть верхняя часть нормально реагирует на разрешение экрана. Теперь нужно сделать так чтобы на серый фон налазили все остальные. Пробовал для #top_menu прописать position:relative; ну и подогнать, получается так: Тык

То есть остается пустое пространство, а когда остальное двигаю также вверх, то снизу очень много пустого места, а мне этого не нужно. Вместо relative, пробовал absolute, пустоты нет, но немогу правильно сдвинуть влево. Постоянно едет, при любом масштабировании. Помогите пожалуйста! Как решить эту проблему. Заранее благодарен!

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

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
Answer this question...

×   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