hoping for some help in position DIV's correctly across multiple resolutions.
If you visit my test site at http://test.vtisvc.com, What I basically need is for the red "menu" links to fit properly in the white bar. They are at an appropriate height (set simply with a margin-top: 131px; property in the DIV) but, I cannot figure out how to make it so they are correctly positioned horizontally on different resolution monitors. Right now, there is just a margin-left: set with a value that makes it appear correct on my monitor - can anyone help me out?
I gather that what I need to do is somehow nest the #banner-text div with it's absolute position, or set margins inside of another div that is relative, but I can't exactly figure out how to do that... I may even be using too many DIVs, I'm just not sure... I cobbled this much together just through guesswork. Really appreciate someone showing me the light!
Here is my 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;
}
And here is my HTML in the 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>
Move your div with id "banner-text" into the banner-icon div and change the css in the style.css as below:
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;
}