Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Aug 2009
    Posts
    160
    Thanks
    42
    Thanked 2 Times in 2 Posts

    Need help: trying z-index/image placement

    My wife asked me to help her with a header for a page she's working...but I can't seem to get it to work? The main header image [header_template_3.png] has a transparent portion to the immediate right of the yellow swoosh, and I'm trying to place an image [slide_pics.JPG] in the <h1> below the header background image, so that the <h1> image will only show through the transparent portion of header_template_3 [I'm ultimately gonna put a slideshow in place of the <h1> image *if* I can get this working, lol!].

    Can anyone see where I'm going wrong? I think I have everything positioned...is the fact that header_template_3 is the background screwing it up??

    Here's the url: http://www.yenko.net/R4/test.html

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,740
    Thanks
    22
    Thanked 1,837 Times in 1,821 Posts
    Hello chevy_ls_6

    Love the ls6! I'm a mopar man myself, I've had lot's of Cudas, Challengers and Chargers. The fastest car I ever had was a 1970 SuperBee. I built a bored out 400 (bigger bore than a 440 and the same stroke as a 383) for it and put a 6pack on it - love those big blocks.
    Now I just drive stuff that has a warranty . I have a 2010 Dodge Ram right now.

    For your header, it's all about the stacking order. If you put the image as a background of #header, then you can't stack it. Try it like this instead -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	color: #666666;
    	background: #ffffff;
    	font: 12px Arial, Helvetica, Verdana, Sans-serif;
    }
    #page-container {
    	width: 960px;
    	margin: 0 auto;
    	position: relative;
    	background: #2F0DD7;
    }
    #header {
    	height: 263px;
    	background: #00268c;
    }
    #under {
    	height: 164px;
    	width: 960px;
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: 2;
    }
    #over {
    	height: 263px;
    	width: 450px;
    	position: absolute;
    	top: 0;
    	right: 0;
    	z-index: 1;
    }
    </style>
    </head>
    <body>
        <div id="page-container">
            <div id="header"> 
                <img src="http://www.yenko.net/R4/header_template_3.png" alt="school images" width="960" height="164" id="under" /> 
                <img src="http://www.yenko.net/R4/slide_pics.JPG" alt="school smurf" id="over" /> 
            <!--end header--></div>
        <!--end page-container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Aug 2009
    Posts
    160
    Thanks
    42
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Excavator View Post
    Hello chevy_ls_6

    Love the ls6! I'm a mopar man myself, I've had lot's of Cudas, Challengers and Chargers. The fastest car I ever had was a 1970 SuperBee. I built a bored out 400 (bigger bore than a 440 and the same stroke as a 383) for it and put a 6pack on it - love those big blocks.
    Now I just drive stuff that has a warranty . I have a 2010 Dodge Ram right now.
    Those 6-pack cars are bad news! I think I got paired up with a 440-6 car at every event for like 4-5 years? LOL!

    Anyway, thanks for the help, as that solved it...and then I went and added a slideshow, and it won't function! When I first uploaded it it stuttered through the partial pictures then stopped, and it's been dead in the water since...anyone have any ideas?

    http://www.yenko.net/R4/test.html

    Also, if anyone can tell me why my sidenav and content divs are screwed up I'd appreciate it!!!!

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,740
    Thanks
    22
    Thanked 1,837 Times in 1,821 Posts
    Quote Originally Posted by chevy_ls_6 View Post
    Also, if anyone can tell me why my sidenav and content divs are screwed up I'd appreciate it!!!!
    You don't close your #header in the right place. The way it is now, #header is enclosing your entire site.
    You also string together SidenavSidenavSidenav for quite a long ways with no spaces. Without a space, there is nowherre for a linebreak so it overflows your #sidenav.

    Have a look at you code with some comments and indenting, both of which will help keep track of the structure of the document -

    Code:
    <body>
        <div id="page-container">
            <div id="header"> 
            		<img src="http://www.yenko.net/R4/header_template_3.png" alt="Alton R-IV" width="960" height="164" id="under" /> 
                <div id="slideshow">
                    <img src="http://www.yenko.net/R4/slideshow/slide_pic1.PNG" alt="" width="480" height="164" id="over" class="active" />
                    <img src="http://www.yenko.net/R4/slideshow/slide_pic2.PNG" alt="" width="480" height="164" id="over" class="active" />
                    <img src="http://www.yenko.net/R4/slideshow/slide_pic3.PNG" alt="" width="480" height="164" id="over" class="active" />
                <!--end slideshow--></div> 
            		<div id="topnav">Topnav</div>
            <!--end header--></div>
        <div id="sidenav">
        	<p>
                Sidenav Sidenav Sidenavvvv Sidenav Sidenav Sidenav Sidenav Sidenavv Sidenav 
                Sidenavv Sidenav Sidenav Sidenavv Sidenav Sidenav Sidenav Sidenav
            </p>
        <!--end sidenav--></div>
        <div id="content">
        	<p>
                Content will go hereContent will go hereContent will go hereContent will go hereContent 
                will go hereContent will go hereContent will go herevContent will go hereContent will go 
                hereContent will go hereContent will go hereContent will go hereContent will go hereContent 
                will go hereContent will go hereContent will go hereContent will go hereContent will go 
                hereContent will go hereContent will go hereContent will go hereContent will go hereContent 
                will go hereContent will go hereContent will go hereContent will go here
            </p>
        <!--end content--></div>
        	<div id="footer">Footer</div>
        <!--end page-container--></div>
    </body>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    Aug 2009
    Posts
    160
    Thanks
    42
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Excavator View Post
    You don't close your #header in the right place. The way it is now, #header is enclosing your entire site.
    You also string together SidenavSidenavSidenav for quite a long ways with no spaces. Without a space, there is nowherre for a linebreak so it overflows your #sidenav.

    Have a look at you code with some comments and indenting, both of which will help keep track of the structure of the document -
    You're exactly right on all counts...I had corrected some while you were posting, but your lesson about "tidyness" is duly noted, and spot on.

    Typical *great* answers/help here from CF, thanks, y'all...I'm still learing & plugging along!

    Now, about that slideshow...?!ZXI@<! [EDIT: nevermind, I hadn't closed my script...DUH!]
    Last edited by chevy_ls_6; 12-10-2010 at 08:12 PM.


  •  

    Posting Permissions

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