[Newb] - Layout Troubles

HTML & CSS
1

Hey guys, Long time lurker, First time poster :slight_smile:

I’m a newbie to Design / Dev so please excuse me, It’s School Holidays at the moment and I’ve spent a large portion of my time creating mockups in photoshop, And I’m at the stage where I’m happy with
what I’ve designed and want to start putting it together.

I’ve cut my images out of photoshop and have them saved and ready to go, My problem is when I begin to start coding, I can’t get my images / elements to ‘sit right’;
eg. My logo that is 137x137px will take up a whole line, And force my h1 (that I want to sit next to the logo) to either drop a line or just move somewhere else (then pushes my nav somewhere else :rolleyes:)

I know Google is my best friend, But I just can’t seem to find exactly what I’m looking for… If someone could point me in the right direction in regards to what I should be looking at, It would be greatly appreciated

~neaz

2

You want to use a tool like FireBug so you can inspect elements on the page. You will be able to see things like margins and padding which are probably causing your elements to not be positioned right too.

3

My logo that is 137x137px will take up a whole line, And force my h1 (that I want to sit next to the logo) to either drop a line or just move somewhere else (then pushes my nav somewhere else :rolleyes:)

The page starts at the top left and continues down the page.
The image is a logo that is an inline block by default (if you insert another image it will be alongside.
H1 is a block element with full width default with margins and padding that varies according to the browser.

if you want H1 to sit next to your logo then try floating both the logo and H1:



<body>

<div style="background-color: #9ff" >

   <img src="where_ever/logo.png" style="float: left; width: 137px; height: 137px; border: solid 5px #f00" alt="blurb" />

   <h1 style="float:left; background-color: #9f9; color: #f00;">
        Title goes here
   </h1>
</div>

</body>
</html>

When H1 is floated the property changes to inline-block and the width defaults to the character widths.

4

Awesome, Thanks for your help John… Appreciate it! :slight_smile:

5

Thank you for the feedback, it is a real incentive to help others :slight_smile:

It was a pleasure to be of help and looking forward to seeing your new web site in the review section :slight_smile:

Try this:

http://learnXinYminutes.com/docs/css/