Absolutely positioning two image links to the left and right of the browser window

HTML & CSS
1

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. The code below is how I marked up the html 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>

The css below is what I used as a starting point, but this just moves them both to the left of their container div which is my outerWrapper div.

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;
}

The following is where the html code appears in relation to the surrounding code in my layout:

<body>

<div id="fullWidthHeader">
	<div id="tile_trans">
    	<div id="inner"> </div>
  </div>

</div>
<div id="outerWrapper">
  <div id="branding">
    <h1><a href="index.php">Kelly Country</a></h1>

    <div id="nav_main" class="round">
    <h2>Main navigation</h2>
    <ul id="nav_bar">
      <li id="link1"><a href="#">link1</a></li>
      <li id="link2"><a href="#">link2</a></li>
      <li id="link3"><a href="#">link3</a></li>
      <li id="link4"><a href="#">link4</a></li>
      <li id="link5"><a href="#"> link5</a></li>
      <li id="link6"><a href="#"> link6 </a></li>
      <li id="link7" class="last"><a href="#"> link7 </a></li>
          </ul>
  </div>
    <div id="nav_sub">
    <h2>Sub navigation</h2>
    <ul id="nav_bar">
      <li id="link1"><a href="#"> link1 </a></li>
      <li id="link2"><a href="#"> link2</a></li>
      <li id="link3" class="last"><a href="hours.html"> link3 </a></li>
    </ul>
  </div>
  <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>

You can see that appears within and at the end of the div#outerWrapper element.

The following is the css that’s applied to the above elements so you can see how these rules might relate to how the problem is solved:


body {
  background-color: #fff;
  color: #333;
  font: 75%/1.3 Arial, Helvetica, sans-serif; 
  text-align: center;
  position: relative;
}

div#fullWidthHeader {
  background: url(../images/pattern.gif) repeat;
  height: 352px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

div#tile_trans {
  width: 100%;
  height: 352px;
  background: url(../images/tile_trans.png) repeat;
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

div#inner {
  width: 100%;
  height: 49px;
  background: url(../images/pattern_tile_top.png) repeat-x;
}


div#outerWrapper {
  background-color: transparent;
  margin: 0 auto 0;
  text-align: left;
  width: 900px;
  min-height: 476px;
  position: relative;
  z-index: 3;
  overflow: auto;
}


h2, h3,  h4 { 
font-weight : bold; 
}

h3{ 
font-weight : normal; 
}


p { 
font-size : 100%; 
padding-bottom: 10px;
}



/*---------------------Branding---------------------*/

div#branding {
	position: relative;
	height: 124px;
}

div#branding h1 {
	width: 224px;
	height: 114px;
	background: url(../images/logo.png) no-repeat left bottom;
	margin-bottom: 10px;
}

div#branding h1 a {
	display: block;
	width: 224px;
	height: 124px;
	text-indent: -9999px;
}


/*---------------------Main Navigation---------------------*/


div#nav_main {
position: absolute;
top: 89px;
/*left: 368px;*/
left: 270px;
bottom: 0;
right: 0;
background: url(../images/nav_grad.jpg) repeat-x 0 0;
}

ul#nav_bar {
padding-left: 20px;
}

ul#nav_bar li {
display: inline;
width: auto;
list-style: none;
margin-right: 0.5em;
padding-right: 0.75em;
border-right: 1px solid #fff;
font-weight: bold;
text-align: center;
}


ul#nav_bar a {
line-height: 35px;
font-weight: normal;
color: #00274C;
text-decoration: none;
}


ul#nav_bar li.last {
border-right: 0;
}


div#nav_main h2 {
position: absolute;
top: -9999px;
}


/*---------------------Sub Navigation---------------------*/

div#nav_sub {
position: absolute;
top: 8px;
/*left: 368px;*/
left: 570px;
}

div#nav_sub ul#nav_bar li {
display: inline;
width: auto;
list-style: none;
margin-right: 0.5em;
padding-right: 0.75em;
border-right: 1px solid #fff;
font-weight: bold;
text-align: center;
}


div#nav_sub ul#nav_bar a {
line-height: 35px;
font-weight: normal;
color: #00274C;
text-decoration: none;
}


div#nav_sub ul#nav_bar li.last {
border-right: 0;
}


div#nav_sub h2 {
position: absolute;
top: -9999px;
}

/*------------Supplementary Navigation---------*/

div#nav_supp
{
width:100%;
position: absolute;
top: 0;
left: 0;
}

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;
}

I wondered if anyone could help me find an answer to this problem?

Appreciate any assistance.

2

Hi, this might be to obvious but why don’t you float them left and right? Or is there a particular reason you want to use AP?

3

Hi,

Positioned elements are positioned in respect to the nearest parent that has a position defined (either absolute or relative). If none exists then (and only then) will the element be placed in respect of the viewport.

You have placed the absolute elements inside a parent that has position:relative applied and so all positioning will be in respect of this parent and not the viewport.

Either remove the position:relative from the parent or move the absolute elements outside the current context so that the body is the parent.

However if you place these links on the left and right side of the browser you will need to protect them from being overwritten by other content. You may be better off floating them as mentioned above but of course depends on what your designs look like :slight_smile:

4

Yeah I managed to move the html outside the wrapper div and then it was all positioned in relation to the body element which is what I wanted, so thanks again.