Нужна помощь CSS - позиционируйте DIV абсолютно (не по центру) горизонтально в нескольких разрешениях
Надеясь на некоторую помощь в правильном положении DIV в нескольких разрешениях.
Если вы посетите мой тестовый сайт по адресу http://test.vtisvc.com/, то мне в основном нужно, чтобы красные ссылки "меню" правильно помещались на белой панели. Они находятся на соответствующей высоте (задается просто с помощью margin-top: 131px; свойство в DIV), но я не могу понять, как сделать так, чтобы они правильно располагались горизонтально на мониторах с разным разрешением. Прямо сейчас, есть только поле слева: установлено значение, которое делает его правильным на моем мониторе - кто-нибудь может мне помочь?
Я понимаю, что мне нужно как-то вложить div # banner-text с его абсолютной позицией или установить поля внутри другого div, который является относительным, но я не могу точно понять, как это сделать... Я могу даже если бы я использовал слишком много DIV, я просто не уверен... Я столько всего сгладил, только догадываясь. Очень ценю, что кто-то показывает мне свет!
Вот мой CSS...
#banner-wrap
{
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 50;
}
#banner-container
{
height: 204px;
background: url('http://test.vtisvc.com/wp-content/uploads/2013/08/header_hoodbar8.png');
background-repeat: no-repeat;
background-position: center;
}
#banner-logo
{
width: 940px;
margin-left: auto;
margin-right: auto;
z-index: 60;
}
#banner-icon
{
width: 940px;
margin: 0 auto;
position: relative;
z-index: 70;
}
#banner-text
{
position: fixed;
width: 940px;
top: 0;
left: 0;
margin-top: 131px;
margin-left: 330px;
z-index: 80;
}
И вот мой HTML в header.php
<body>
<div id="banner-wrap">
<div id="banner-container">
<div id="banner-logo">
<div id="banner-icon">
<center><img src="http://test.vtisvc.com/wp-content/uploads/2013/08/header_logo3.png" style="float:center"></center></div>
</div></div></div>
<div id="banner-text">
<a href="http://test.vtisvc.com"><font face="georgia" color=#8a0304">HOME</font></a>
<a href="http://test.southernventures.com/contact"><font face="georgia" color="#8a0304">LISTINGS</font></a>
<a href="http://test.southernventures.com/contact"><font face="georgia" color="#8a0304">AGENTS</font></a>
<a href="http://test.southernventures.com/contact"><font face="georgia" color="#8a0304">SEARCH MLS</font></a>
<a href="http://test.southernventures.com/contact"><font face="georgia" color="#8a0304">RENTALS</font></a>
<a href="http://test.southernventures.com/contact"><font face="georgia" color="#8a0304">HISTORY</font></a>
<a href="http://test.southernventures.com/contact"><font face="georgia" color="#8a0304">CONTACT</font></a></div>
1 ответ
Переместите ваш div с id "banner-text" в div banner-icon и измените CSS в style.css, как показано ниже:
HTML
<div id="banner-icon">
<center>
<img src="http://test.vtisvc.com/wp-content/uploads/2013/08/header_logo3.png" style="float:center">
<div id="banner-text">
<a href="http://test.vtisvc.com"><font face="georgia" color="#8a0304"">HOME</font></a> <a href="http://test.southernventures.com/contact"><font face="georgia" color="#8a0304">LISTINGS</font></a> <a href="http://test.southernventures.com/contact"><font face="georgia" color="#8a0304">AGENTS</font></a> <a href="http://test.southernventures.com/contact"><font face="georgia" color="#8a0304">SEARCH MLS</font></a> <a href="http://test.southernventures.com/contact"><font face="georgia" color="#8a0304">RENTALS</font></a> <a href="http://test.southernventures.com/contact"><font face="georgia" color="#8a0304">HISTORY</font></a> <a href="http://test.southernventures.com/contact"><font face="georgia" color="#8a0304">CONTACT</font></a>
</div>
</center>
</div>
CSS
#banner-text {
position: relative;
width: 940px;
top: 0;
left: 0;
margin-top: -44px;
margin-left: -346px;
z-index: 80;
}