#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    2
    Rep Power
    0

    Unhappy 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!
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4304
    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.

    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).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    2
    Rep Power
    0
    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;
    }

IMN logo majestic logo threadwatch logo seochat tools logo