1 reply [Last post]
gwh
Offline
Regular
Last seen: 12 years 9 weeks ago
Timezone: GMT+10
Joined: 2005-05-14
Posts: 46
Points: 11

Hi everyone,

I need to put a button link on the left and right sides of the browser window, so I guess it would be attached to the body tag. I marked up the html as follows but I'm not sure if it will work if both links are in the one div as they will be on opposite sides of the window:

        <div id="nav_supp">
    <h4>Supplementary navigation</h4>
    <ul id="nav_supp">
      <li id="site_entry"><a href="../index.php">Site entry</a></li>
      <li id="business_site"><a href="../business/index.php">Consumer site</a></li>
    </ul>
  </div>

I have the following css as a starting point:

div#nav_supp h4 {
	text-indent: -9999px;
}
 
div#nav_supp ul li {
	text-indent: -9999px;
}
 
div#nav_supp li#site_entry a {
	position: absolute;
	left: 0px;
	top: 0px;
	display: block;
	background: url(../images/site_entry_btn.gif) no-repeat top left;
	width: 30px;
	height: 127px;
}
 
div#nav_supp li#consumer_site a {
	position: absolute;
	right: 0px;
	top: 0px;
	display: block;
	background: url(../images/consumer_site_btn.gif) no-repeat top right;
	width: 30px;
	height: 127px;
}

But this just moves them both to the left of their container div which is my outerWrapper div.

I'm not sure how to solve this. I'm pretty sure I'd need to revise the html and the css but can't figure it out. Appreciate any help.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi gwh, They will be

Hi gwh,
They will be positioned from the top left of any of their parents that are positioned (relative or absolute)
To position them where you want you will need to put them in the body outside (either before or after) any other elements.
You should also add position:relative; to the body, although it may not be necessary.
Why not make it easy on yourself and remove the list and just add the links to the body.