• 0

How to line up images / links on a website?


Question

Hi everyone. I am working on a website at the moment, and have not been able to figure out how to get some images / links to like up in a row. It keeps throwing them onto other lines. I am using HTML and CSS. I was wondering if anyone knew what I might be doing wrong and how I could do this right.

Thanks again,

Here is a picture from within Dreamweaver.

WindowClipping77.png

I really appreciate any help anyone can give me with this.

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

Without knowing what your HTML and CSS look like, no one can really help you. I also recommend avoiding using the "Design View" in Dreamweaver. Just use a current browser (Firefox, Chrome, Safari, Opera, et al.) to do you 'live testing' in.

You can just copy/paste your code here so I can take a quick looksie to see.

Link to comment
Share on other sites

  • 0

Thank you very much for your help. It looks odd in the browser too.

This is Chrome.

WindowClipping78.png

Here is the HTML.

<div class="certifications_area">

<div class="certificationscontent_area">

<div class="certificationstext_area">

<div class="certifications1">

<div class="certifications_iicrc">

<a href="http://www.iicrc.org" class="certifications_iicrc"></a>

</div>

<div class="certifications_leadsafe">

<a href="http://www.epa.gov/oppt/lead/index.html" class="certifications_leadsafe"></a>

</div>

</div>

<div class="certifications1">

</div>

</div>

</div>

</div>

Here is the CSS:

.certifications_area{

width:316px;

float:left;

padding:10px 0 0 8px;

}

.certificationscontent_area{

width:316px; background:#535353; float:left;

}

.certificationstext_area{

padding:20px 0 0 24px; float:left;

width:280px;

}

.certifications1{

width:280px;

padding-bottom:10px;

}

.certifications_iicrc{

font:bold 12px/24px Arial, Helvetica, sans-serif;

color:#fff;

text-decoration:none;

width:65px;

height:75px;

display:block;

text-align:center;

background-image: url(../images/iicrc.jpg);

background-repeat: no-repeat;

background-position: 0 0;

}

.certifications_leadsafe{

font:bold 12px/24px Arial, Helvetica, sans-serif;

color:#fff;

text-decoration:none;

width:114px;

height:75px;

display:block;

text-align:center;

background-image: url(../images/leadsafe.jpg);

background-repeat: no-repeat;

background-position: 0 0;

margin-left: 5px;

}

Thanks Again, if there is anything else that would help or that I can do, please let me know. The site was progressing fairly well up until this point.

Also, I realize the HTML is a bit messy, I was working to clean that up as well. It was originally used for other content.

Link to comment
Share on other sites

  • 0

on both of your images css styles ".certifications_iicrc" & ".certifications_leadsafe" add the following line

float: left

Thank you very much, that fixed it. I didn't realize it was that simple.

Thanks again for your help. :)

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.