4 Replies - 1823 Views - Last Post: 18 March 2013 - 05:14 PM

#1 janb30  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 04-October 09

Misplaced header and missing images

Posted 13 March 2013 - 06:14 AM

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.

Posted Image

Here's my HTML:
<!-- 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:
#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. I am pretty new to web design. Help please?

I just noticed the image is not working but if you go to this link you should be able to see it. https://www.dropbox....rymxi/site2.jpg

Thanks!

Is This A Good Question/Topic? 0
  • +

Replies To: Misplaced header and missing images

#2 galtech  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 3
  • View blog
  • Posts: 13
  • Joined: 16-March 13

Re: Misplaced header and missing images

Posted 16 March 2013 - 03:27 PM

Hi Janb30,

To fix the issue with To Join appearing in the wrong place, you can edit the following HTML line as follows:
<h2 style="clear:left;"> To join TheDEADicated, click <a href="http://musichype.com/artists/dead-sara" target="_blank">HERE</a>! </h2>



You can also add the section of CSS code into your style sheet as part of the h2 element.

Regarding the placement of the image under the h2 element, I would recommend something like the following CSS:
.headerdecoration { background: url(images/ink-line.png) no-repeat left bottom



In the HTML:
<h2 class="headerdecoration"></h2>



Hope this helps

All the best,

galtech
Was This Post Helpful? 0
  • +
  • -

#3 janb30  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 04-October 09

Re: Misplaced header and missing images

Posted 17 March 2013 - 01:30 PM

Thank you so much galtech! I was able to fix that with your help :)/>
Now I am just trying to figure out why the last row of images (see image: https://www.dropbox....qky3/site1.jpg) is not centered like the rest of the rows.

CSS:
.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;
}



And the HTML code is the same for all of them:
 </div>
        <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>



I am only having this issue with the last row. It's so weird! Any ideas as to why this might be happening??
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3642
  • View blog
  • Posts: 12,619
  • Joined: 12-December 12

Re: Misplaced header and missing images

Posted 17 March 2013 - 03:23 PM

It is hard to tell from the code-snippets that you have supplied. Are you able to provide a link to the live-page?

I suggest that you validate your HTML and CSS using the links in my signature. A broken/unclosed tag, or malformed css, could possibly cause such behaviour.

Is there another element that follows the images that might push the image-row to the left.

But, as I say, it is hard to tell.
Was This Post Helpful? 0
  • +
  • -

#5 galtech  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 3
  • View blog
  • Posts: 13
  • Joined: 16-March 13

Re: Misplaced header and missing images

Posted 18 March 2013 - 05:14 PM

Something like this might help when centering the images:

.sites{
width:215px;
background: #eee;
margin: 0px auto;
border: 1px solid #ccc;
padding:10px;
}
.sites img{
float:left;
}



regards,

galtech
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1