Need CSS Help - Position DIV absolutely (off center) horizontally across multiple resolutions

StackOverflow https://stackoverflow.com/questions/18500766

  •  26-06-2022
  •  | 
  •  

Question

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>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="http://test.southernventures.com/contact"><font face="georgia" color="#8a0304">LISTINGS</font></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="http://test.southernventures.com/contact"><font face="georgia" color="#8a0304">AGENTS</font></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="http://test.southernventures.com/contact"><font face="georgia" color="#8a0304">SEARCH MLS</font></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="http://test.southernventures.com/contact"><font face="georgia" color="#8a0304">RENTALS</font></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="http://test.southernventures.com/contact"><font face="georgia" color="#8a0304">HISTORY</font></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="http://test.southernventures.com/contact"><font face="georgia" color="#8a0304">CONTACT</font></a></div>
Was it helpful?

Solution

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&quot;">HOME</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://test.southernventures.com/contact"><font face="georgia" color="#8a0304">LISTINGS</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://test.southernventures.com/contact"><font face="georgia" color="#8a0304">AGENTS</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://test.southernventures.com/contact"><font face="georgia" color="#8a0304">SEARCH MLS</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://test.southernventures.com/contact"><font face="georgia" color="#8a0304">RENTALS</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://test.southernventures.com/contact"><font face="georgia" color="#8a0304">HISTORY</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<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;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top