SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast Albablue89's Avatar
    Join Date
    Jul 2005
    Location
    Scotland
    Posts
    98
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)

    Stacking DIV on top

    I'm rather rusty, haven't done much lately and can't remember how to get this working.

    The contents are inside a wrap width: 75%; and margin: 0px auto;

    The headerbar spans across the width of the wrap with a background image.

    I'm trying to get my site_logo banner (header height x 1000px) to sit on the left hand side of this header, and add Image Logo's vertically centred on the right hand side of the header. However, I'm looking for these Image Logo's to sit fixed exactly off the right side of the header and above the site_logo. So for example, the page is zoomed in using the browser, the banner flows below these Image Buttons and the overflow off the DIV is hidden.

    HTML Code:
    <div class="headerbar">
    	<div class="site_logo">
    			<a href="{U_INDEX}" title="{L_INDEX}">{SITE_LOGO}</a></div>
    	
    	<div class="image_logos>
    		<a href="index.php" title="Logo" target="_blank">
    			<img alt="Logo" height="60" width="120" src="{T_IMAGESET_PATH}/charitylogos/cb_logo_.png">
    		</a>
    	</div>
    </div>
    Code:
    .headerbar {
    	height: 175px;
    	background-image: url("{T_THEME_PATH}/images/headerbar.gif");
    	margin-bottom: 0px;
    	background-repeat: repeat-x;
    }
    
    .site_logo {
    	position: relative; top: 0; left: 0;
    	width: 100%;
    	display: block;
    	overflow: hidden;
    	z-index: 1;
    }
    
    .image_logos {
    	position: fixed; top: 10px; right: 20px;
    	display: block;
    	overflow: hidden>
            z-index: 2;
    Hope that makes sense. I'd very appreciated some guidance on this.

    Thanks,

  2. #2
    SitePoint Enthusiast Albablue89's Avatar
    Join Date
    Jul 2005
    Location
    Scotland
    Posts
    98
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Any positioning tips please?

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Your code example contains a few errors (these may have been typos when your message was prepared, but this is where we have to start):

    Missing a close quote:
    Code:
    <div class="image_logos">
    Potpourri of punctuation:
    Code:
    .image_logos {
    	position: fixed; top: 10px; right: 20px;
    	display: block;
    	overflow: hidden>
            z-index: 2;
    should be:
    Code:
    .image_logos {
    	position: fixed; top: 10px; right: 20px;
    	display: block;
    	overflow: hidden;
            z-index: 2;
    }
    It would be more helpful if you could post a link to the page or show more of the code.

  4. #4
    SitePoint Enthusiast Albablue89's Avatar
    Join Date
    Jul 2005
    Location
    Scotland
    Posts
    98
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Sorry, My apologies, those were silly typo's I made while starting this thread.

    HTML Code:
    <div class="headerbar">
           <div class="site_logo">
                 <a href="{U_INDEX}" title="{L_INDEX}">{SITE_LOGO}</a></div>
           
           <div class="image_logos">
              <a href="index.php" title="Logo" target="_blank">
                 <img alt="Logo" height="60" width="120" src="{T_IMAGESET_PATH}/charitylogos/cb_logo_.png">
              </a>
           </div>
    </div>
    Code:
        .headerbar {
           height: 175px;
           background-image: url("{T_THEME_PATH}/images/headerbar.gif");
           margin-bottom: 0px;
           background-repeat: repeat-x;
        }
    
        .site_logo {
           position: relative; top: 0; left: 0;
           width: 100%;
           display: block;
           overflow: hidden;
           z-index: 1;
        }
    
        .image_logos {
           position: fixed; top: 10px; right: 20px;
           display: block;
           overflow: hidden;
           z-index: 2;
        }
    The fixed positioning of the Image Logo's on the right hand side, fixing them to the browser window, However I want them fixed inside the Headerbar on the right hand side and stay on top of the banner (if it flows over with browser being zoomed in (CTRL and +) ).

    Like this Image here: http://i48.tinypic.com/b8mha8.png

    Thanks for your help, This seems very easy, just my positioning skills aren't up to scratch.

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Albablue89, I'd recommend floating the object containers rather than positioning them. This demo gives a couple of examples.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
    http://www.sitepoint.com/forums/showthread.php?929421-Stacking-DIV-on-top
    Thread: Stacking DIV on top
    Nov 29, 2012 08:06
    Albablue89
    -->
    <head>
        <title>template</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta http-equiv="content-language" content="en-us">
        <style type="text/css">
    
    .headerbar {
        height: 175px;
        background-color:#dee;
        background-image: url("{T_THEME_PATH}/images/headerbar.gif");
        background-repeat: repeat-x;
        margin-bottom: 0px;
    }
    .site_logo {
        float:left;
        padding-top:10px;
        padding-left:10px;
    }
    .image_logos {
        float:right;
        outline:1px dotted #f00;   /* container layout testing */
    }
    .image_logos a {
        display:inline-block;
        float:right;               /* try it without this float:right */
        border:2px solid #88f;
        background-color:#fff;
        margin-top:10px;
        margin-right:10px;
    }
    .image_logos img {
        display:block;
    }
        </style>
    </head>
    <body>
    <div class="headerbar">
        <div class="site_logo">
            <a href="{U_INDEX}" title="{L_INDEX}">{SITE_LOGO}</a>
        </div>
        <div class="image_logos">
            <a href="index.php" title="Logo" target="_blank">
                <img alt="Logo1" height="60" width="120" src="{T_IMAGESET_PATH}/charitylogos/cb_logo_.png">
            </a>
            <a href="index.php" title="Logo" target="_blank">
                <img alt="Logo2" height="60" width="120" src="{T_IMAGESET_PATH}/charitylogos/cb_logo_.png">
            </a>
        </div>
    </div>
    </body>
    </html>


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
  •