Misplaced header and missing images

Dev Shed Forums Sponsor:

March 15th, 2013, 09:57 AM

janbe30

Registered User

Join Date: Mar 2013

Posts: 2

Time spent in forums: 24 m 56 sec
Reputation Power: 0

Misplaced header and missing images

Hi,
I am having a little issue with some headers being misplaced on the site I am working on and also an image that's supposed to show below each one of them is not showing. I've attached an image of the site where you can see all the images at the top which is what I want but the "To join" next to the Pinterest image shouldn't be there. It should be together with "the Deadicated...". Also, I have an image 'images/ink-line.png' that is supposed to show up below each one of the headers at the bottom and it's just not showing. I checked and yes I have the image in the right folder.

You can take a look at the website here: https://www.dropbox.com/s/2ufu5z5z9grymxi/site2.jpg

Here's part of my HTML code:

Code:

<!-- main-content -->
<div id="main-content">    
    <h1> Check out all our DEADicated sites: </h1>
    <div class="sites">
        <a href="http://www.thedeadicated.tumblr.com" target="_blank">
        <img src="images/sites/tumblr.jpg" width="215" height="150" alt="Tumblr"/></a>
        <p> Tumblr </p>
    </div>
    <div class="sites">
        <a href="http://www.twitter.com/thedeadicated" target="_blank">
        <img src="images/sites/twitter.jpg" width="215" height="150" alt="Twitter"/></a>
        <p> Twitter </p>
    </div>
    <div class="sites">     
        <a href="http://www.youtube.com/user/DeadicatedRepository" target="_blank">
        <img src="images/sites/youtube.jpg" width="215" height="150" alt="YouTube"/></a>
        <p> YouTube </p>
     </div>

    <h2> To join TheDEADicated, click <a href="http://musichype.com/artists/dead-sara" target="_blank">HERE</a>! </h2>
    <h2> To get your own DEADicated wristband, click <a href="http://store.cinderblock.com/the-deadicated-rubber-bracelet.html" target="_blank">HERE</a>! </h2>
    <h2> Can't get enough of Dead Sara?! <a href="http://www.facebook.com/pages/Dead-Sara-Addiction-Treatment-facility/337823746314667?group_id=0" target="_blank">Dead Sara Addiction Treatment Facility</a> </h2>
    <h2> Email us at: TheDEADicated@TheDEADicated.org </h2>

</div> <!-- close main-content -->

And my CSS for the main-content and headers:

Code:

#main-content{
    padding: 50px 50px 30px 50px;
    background: #fff url('images/shadow.png') repeat-x;
    min-height: 800px;
}

#main-content h2{
    margin-top: 30px;
    padding-bottom: 8px;
    background: url('images/ink-line.png') no-repeat left bottom;
    clear: both;
}

I am not sure what the problem is and I am so close to being done with that page. Any kind of help would be greatly appreciated. Thanks!

March 15th, 2013, 05:53 PM

Kravvitz

CSS & JS/DOM Adept

Dev Shed God 30th Plane (19500 - 19999 posts)

Join Date: Jul 2004

Location: USA

Posts: 19,831

Time spent in forums: 6 Months 1 Day 19 h 19 m 2 sec
Reputation Power: 4192

Welcome to DevShed Forums, janbe30.

It seems that we need to see more of your stylesheet to diagnose this.

__________________
Spreading knowledge, one newbie at a time. I'm available for hire at Dynamic Site Solutions.

Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

Remember people spend most of their time on other people's sites (so don't violate web design conventions).

March 15th, 2013, 08:18 PM

janbe30

Registered User

Join Date: Mar 2013

Posts: 2

Time spent in forums: 24 m 56 sec
Reputation Power: 0

Quote:

Originally Posted by Kravvitz

Welcome to DevShed Forums, janbe30.

It seems that we need to see more of your stylesheet to diagnose this.

Thanks! This is the whole stylesheet:

Code:



body {
background: url('images/deadicated_bg.jpg') no-repeat;
background-color: #000;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-size: 1em;
margin: 0px;
}

#container {
display: block;
height: auto;
width: 856px;
background-color: #fff;
margin: 0px auto; /* this is short hand - first value applies to top/bottom, 2nd to left/right */
}

#header{
background: #fff no-repeat center top;	
padding: 3px 3px;
}

#nav{
margin: 0;
padding: 0;
height: 45px;
background: url('images/nav-bg.png') repeat-x;
}

#nav ul{
list-style-type:none;
margin: 0 10px;	
}

#nav li{
float: left;
}

#nav a{
	display: block;
	padding: 13px 30px 9px 30px;
	margin: 0px 10px;
	color: #fff;
	font-weight: bold;
	font-size: 1.3em;
	text-decoration: none;
}

#nav a:hover{
	background: url('images/nav-bg-over.png') repeat-x;
	color: #CD5555;
}

#nav a:active{
	color: #fff;
}

#main-content{
	padding: 50px 50px 30px 50px;
	background: #fff url('images/shadow.png') repeat-x;
	min-height: 800px;
}

#main-content h2{
	margin-top: 30px;
	padding-bottom: 8px;
	background: url('images/ink-line.png') no-repeat left bottom;
	float: left;
	width: 100%;
	display: block !important;
}

#footer p{
	margin: 0px;
	padding: 13px 30px 11px 30px;
	color: #fff;
	background: url('images/nav-bg.png');
}

.sites{
	float:left;
	width:215px;
	background: #eee;
	text-align:center;
	margin: 0px 13px 15px 0px;
	border: 1px solid #ccc;
	padding:10px;
}

.sites p{
	margin:0px;
	padding:10px;
	font:bold;
}

.sites a{
	border-bottom: 5px solid #000;
	border-top: 5px solid #000;
	display:block;
}

.sites a:hover{
	border-bottom-color: #CD5555;
	border-top-color: #CD5555;
}

Misplaced header and missing images

Developer Shed Advertisers and Affiliates