CSS: Postioning Elements

[WarKirby]

Hi folks.

 

We're having some problems positioning an element

 

See on our home page:

http://roshni.org.uk/Home/

 

On the right hand side, we have our navigation bar. Eg Home | About Us | Get Involved etc...

Farther down the page, we have a Text Size control. We're wanting to move that up into the navigation bar.

 

We've spent the past three hours struggling unsuccessfully with it, to little avail.

The Nav bar is loaded from a central file which is included on all pages.

 

The code for it is roughly:

 

	
        <div class="nav1">
	<div id="nav-bar">
		<ul class="navigation">
			<LOTS OF PHP HERE TO CREATE THE NAV BUTTONS>
		</ul>
	</div>
</div>

I cut out the PHP in the middle purely for readability, as it's pretty meaningless to the layout of the page. If anyone thinks it's relevant I can provide it.

Somewhere in there, we need to fit in our <div id="text-size"> which contains the code for the text size control

 

The CSS for all these parts is:

.nav1{
     width:100%;
   	 background:#fff url(/content/images/Web/buuton_holder_grad_bottom.gif) repeat-x;
     height:54px;
}
#text-size{
position:relative;
top:50px;
text-align:left;
float:left;
}
#nav-bar{
     width:1000px;
     margin:0 auto;
     height:54px;
     overflow:hidden;
     position:relative;
text-align: right;
}
.navigation{
     list-style: none;
     margin:0;
     right: 0;
     padding:10px 3px 5px 0;
     position: absolute;
     line-height:20px;
 width: 1000px;
 border: 0px;
 text-align:right;
 font-weight:bold;
}

.navigation ul{
     position:absolute;
     right:0;
     top:30px;
     list-style:none;
     margin:0;
     padding:0;
     float: right;
 font-weight:bold;
}

.navigation li{
     display: inline;
 font-size:13px;
     padding:0 10px;
	background:url(/content/images/Web/separator-black1.gif) no-repeat 100% 0;
}
.navigation a{color:#193550;
font-weight:bold;}

.navigation a.active {border-bottom: 2px solid #193550; }
.navigation a:hover {text-decoration:underline; color: #FF6600; }


.navigation ul li{
padding:0 12px 0 14px;
background:url(/content/images/Web/separator-black.gif) no-repeat 0 50%;
}
.navigation ul a{color:#193550;
font-size:11px;
font-weight:normal;
}
/*---Nav-barEnd---*/
/*---Header---*/

 

So, what we've tried is:

 

1. putting our text size code inside the nav1 div. This causes it to appear on the far left of the screen outside the normal viewing area. We can offset  it towards the centre with a left margin, but this doesn't look right at varying screen resolutions because that area expands to fill wider screens. We've tried align="center" in the div html, and text-align:center in the CSS, hoping to put it in the middle and offset it left, but both of these did nothing.

 

2. Putting our text deeper, into the nav-bar div. This resulted in it appearing above the nav bar, on the lower left corner of the white banner. And it refused to move when given a margin.

 

3. Creating a new div around the entire top section of the site, and putting the text size div into that, then trying to margin it into place with CSS. Again, it refused to move

 

We've also tried a lot of messing around with float properties and widths, but we can't seem to figure it out.

Basically, we want the text-size level with the nav bar vertically, and aligned with the left side of the white banner horizontally. Any idea how we can do this?

 

[nano]

Could you not create a new list item within your unordered list with class navigation?

 

Then just place your text size div inside that UL, and give the list item a class so you can style it differently to the normal list items?

 

Or just place it below the UL and float it right, float your nagivation left, then float an overall wrapper right?

[WarKirby]

Hi nano, thank you for the assistance.

 

We were unable to get that solution working exactly, putting the div inside an <li> caused the rest of the navigation bar to mess up. However you did set us on the right track, and in the end our solution was to put the <div> within the list, but not as a list element (<li>)

 

basically, like this

 

    <div class="nav1">
      <div id="nav-bar">
         <ul class="navigation">
            <LOTS OF PHP HERE TO CREATE THE NAV BUTTONS>
            <OUR TEXT SIZE SCRIPT HERE>
         </ul>
      </div>
   </div>

 

thank you