SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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:

    Code:
    <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.

    Code:
    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:

    Code:
    <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:

    Code:
    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. #2
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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

  4. #4
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •