When I add a certain .css element, it dissapears?

**KDH** · 09-12-2012, 01:58 PM

Hi everybody. I am trying to turn a .psd into a website using mainly divs and css and I am not sure where I am going wrong. This is my very first time doing this as well. I am starting from the top of my page and working my way down. Right now I have this for the html:

<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="main">

<div id="header">
<div class="logo"><img src="http://../images/logo.png" /></div>
<div class="social"><a href="#"><img src="../images/ico1.png" /></a><a href="#"><img src="../images/ico1.png" /></a><a href="#"><img src="../images/ico1.png" /></a></div>
</div>

<div id="banner">
<div class="banner_details">
</div></div>

and this is the css:

/**** Header ****/

#header { margin: 0 auto; position: relative;}
.logo {width: 162px; float: left;}
.social {width:350px; float: right; position: relative; text-align:right;}
.social img {padding: 0 10px 0 0;}

/**** BANNER ****/

#banner {margin: 0 auto;}
.banner_details {width:100%; height:334px; float:left; top:0; left:0; z-index:5; background:url(../images/banner.png) repeat-x 0 0;}

So my header shows up fine with a logo on the left and the 3 social icons on the right but when I add the banner in(which is going to stretch across the entire page) it does not show up. It shows up in my design panel in dreamweaver but when I upload it it acts like there is no reference to the banner at all. There is no broken image icon or anything, it just acts like there is no image. I know my image link is correct so I am not sure what I am doing wrong but it is driving me crazy!!!

**jedaisoul** · 09-12-2012, 02:17 PM

I suspect that the problem could be the use of position:relative.

**calder12** · 09-12-2012, 08:23 PM

Position the banner_details absolute.

**rtrethewey** · 09-13-2012, 12:04 AM

I'd double-check the URL for the banner image. Remember that when you use relative addresses in CSS, the URL is based on the location of the stylesheet which may easily be different than the parent HTML document. After you also check to insure that the image file exists on the server, try using a complete URL (ie. 'http://www.example.com/images/banner.png').

**jedaisoul** · 09-13-2012, 05:45 AM

Just spotted:

<img src="http://../images/logo.png" />

This is a mix of relative and absolute addressing. I'd try removing the "http://". Also the "../" is redundant, but should not do any harm.

Thread: When I add a certain .css element, it dissapears?

Thread Tools

Display

When I add a certain .css element, it dissapears?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions