1 Replies - 334 Views - Last Post: 10 October 2012 - 03:09 AM

#1 dejadejavu  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 09-October 12

images not aligning/should this be a container?

Posted 09 October 2012 - 05:00 PM

Alright, so I'm sure this is a simple fix, but I'm not very familiar with HTML/CSS and I've spent an embarrassingly long amount of time trying to figure this out today. Any help would be greatly appreciated.

I've been given a layout of how things are supposed to look, but they're all images. None of the HTML/CSS was included.

This is how the top of the page should look: http://i47.tinypic.com/2ykfm2c.jpg

Due to my lack of talent, this is how it really looks: http://i48.tinypic.com/zuh9ax.jpg

So far, I have gathered that I'm not supposed to put the images in the head. So, I built a div that was 970x130px. (I took the div out before I took the picture above, the images were in the head at that time.) Then, I tried to align the pictures with align=left, align=bottom, and align=top. The social media buttons were thrown way to the right, outside of the div's width. The grey horizontal line isn't center and the logo on the left is TOO far to the left.

I'm not even certain that I did the div CSS correctly? I named the div "top":

top{
width:970px;
height:160px;
padding:10px;
float:top;
}




This is what the buttons look like with the above code for the div:
http://i47.tinypic.com/biryvc.jpg

Is This A Good Question/Topic? 0
  • +

Replies To: images not aligning/should this be a container?

#2 RudiVisser  Icon User is offline

  • .. does not guess solutions
  • member icon

Reputation: 1001
  • View blog
  • Posts: 3,555
  • Joined: 05-June 09

Re: images not aligning/should this be a container?

Posted 10 October 2012 - 03:09 AM

Hmmm that header could be written a little something like this (I'm writing this off the top of my head so obviously don't use inline styling provided, and it may also not work).

You're correct in that you should store everything in a container with a fixed height and align your images / text accordingly, it doesn't seem like you've done that in your image?

... wait before I go into that, when you say you 'named' your div 'top', what do you mean? You can't use a name attribute in CSS, and the CSS you provided would only style an element of type <top>. It would need to use class="top" on the div (or id) and then have .top (or #top) in your CSS.

So anyway it could look a little something like this:
<div style="height: 160px; padding: 10px;">
    <!-- logo -->
    <img src="/images/logo.png" alt="World's Largest Golf Tournament" style="float: left" />
    <!-- right side 2 horizontal split -->
    <div style="float: right; height: 100px; text-align: right">
        <a><img .. /></a>
        <a><img .. /></a>
        <a><img .. /></a>
        <a><img .. /></a>
    </div>
    <div style="float: right; height: 60px; text-align: right">
        <a>Linky</a>
        <a>Linky</a>
    </div>
</div>

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1