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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts

    graphic not displaying with absolute positioning

    Hey all,

    I have a masthead div which I set as a reference point using position relative. Now I want to display two images, one a login and one a logo. The login graphic is actually two graphics that change position depending on hovering state. The other is just an image of a logo. Now when I try to display the page, the logo doesn't appear at all, and the login graphic displays but it appears another instance of it is hanging off the page. I attached the result. Here is the coding causing the issue:

    Code:
    <style type="text/css">
    	* {
    		margin: 0;
    		padding: 0;
    	}
    	
    	body {
    		font: normal normal normal .9em 'Trebuchet MS', Tahoma, Verdana, 'Optima', sans-serif;
    		background-color: #fff;
    	}
    	
    	#wrapper {
    		width: 1024px;
    		position: relative; 
    		left: 50%;
    		margin-left: -512px;
    	}
    	
    	#masthead {
    		height: 130px;
    		position: relative;
    		background: #b8e5d1 url(mastgrad.png) top left no-repeat;
    	}
    	
    	#logo {
    		position: absolute;
    		left: 300px;
    		top: 30px;
    	}
    	
    	#logo a {
    		height: 316px;
    		width: 183px;
    		display: block;
    		background: url(logo.png) top left no-repeat;
    		border: none;
    	}
    	
    	#logIn {
    		position: absolute;
    		left: 875px;
    		top: 30px;
    	}
    	
    	#logIn a:link, #logIn a:visited {
    		height: 27px;
    		width: 114px;
    		display: block;
    		background: #65c298 url(logingradsprites.png) top left no-repeat;
    		border: none;
    		text-align: center;
    		font: bold normal small-caps .8em Trebuchet, Tahoma, Verdana, 'Optima', sans-serif;
    		/* text-transform: uppercase; */
    		text-shadow: #3c3c3c 2px 2px 3px;
    		color: white;
    		text-decoration: none;
    	}
    	
    	#logIn a:hover, #logIn a:active {
    		background-position: bottom left;
    	}
    	
    	
    </style>
    </head>
    <body>
    	<div id="wrapper">
    		<div id="masthead">
    			<div id="logIn">
    				<a href="contact.htm" title="login">LOGIN</a>
    			<div>
    				<div id="logo">
    					<a href="index.html" title="logo"></a>
    				</div>
    		</div>
    	</div>
    </body>
    </html>
    Thanks for any response
    Attached Thumbnails Attached Thumbnails graphic not displaying with absolute positioning-mastheadissue.jpg  
    Last edited by johnmerlino; 05-10-2010 at 09:24 PM.

  • #2
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts
    Actually it suddenly appeared now. Does element placement in the html matter at all when working with relative and absolute positioning in this way? Is this the best way to lay out a masthead in this case? Keep in mind I ultimately want to place some javascript as well in the masthead to have images rotate repeatedly, showcasing a "product". Initially I was contemplating floats but then I thought given all the stuff I want to have layered on top of the background in the masthead - relative/absolute positioning was the way to go.


  •  

    Tags for this Thread

    Posting Permissions

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