My first try at positioning elements with CSS - a non-table approach to page layout

**eventide** · 11-20-2012 05:54 AM

Hi all,

I'm really not having too much luck at all with my first attempt at CSS-only page layout.

Here's the URL for what I'm working on: http://dev.eventidewebdesign.com/ken...n/newhome2.php

Here's the code for the whole page:

HTML Code:

<!DOCTYPE html>

<html lang="en">

	<head>
		<title>Home Page</title>
	</head>
	<body style="margin: auto; width: 1000px; font-size: .8em;>
		
		<div id="header" style="display: inline; height: 200px; background-image: url(images/header.png); background-repeat: no-repeat; background-attachment: fixed; background-position: center 5px;">
		</div>
		
		<h2>Proof the image is there:</h2>
                <p>The below image should be at the top of the page!</p>
		<img src="images/header.png" />
	</body>
</html>

I can't get the image to display. (Aside from the <img> tag to show it's really there,) I can get it to display as a background image of the <body> tag, but I thought it would be better practice to put it in a <div> as a child of <body>. Also, I have to put a nav menu and image in a div immediately below the header image on the left side of the page (they will mesh seamlessly and look like they are one image).

What am I missing here?

**simplypixie** · 11-20-2012 08:00 AM

Firstly can I please advise that if you are going to go down the route of using CSS (which you should) then please start as you mean to go on (or should) and don't style inline - put all your styles in an external stylesheet. With regard to your style problem, you can put all your separate background style properties in one like so (basing on moving your styles to a stylesheet, not using inline)

Code:

#header {
  background: url('images/header.png') no-repeat fixed center 5px;
  height: 200px;
}

Try this and see if it works (put it inline if you must to test first).

**eventide** · 11-20-2012 08:25 AM

I should have added a disclaimer!

Yes, I will move everything to a separate stylesheet eventually. When I'm just getting started I do inline styling because it's easier than switching back and forth between files as I make constant adjustments. When I'm happy with everything, I'll separate the CSS out.

I tried your suggested code, but it didn't work. See here.

**simplypixie** · 11-20-2012 09:12 AM

OK

However, looking at your source code (keeping things inline for you at the moment) your code is incorrect as you have not declared style. Try

Code:

<div id="header" style="background: url('images/header.png') no-repeat fixed center 5px; height: 200px;"></div>

**eventide** · 11-20-2012 09:25 AM

Well, that is embarrassing! I even found a missing double quote to close the <body> styling!

But I fixed those and that still didn't get the image to show...

I tried adding "display: inline:" to the image div, but that didn't have an effect, either.

**simplypixie** · 11-20-2012 09:50 AM

I have just altered the css in your page (online) and removed the display: inline and the image appears

**eventide** · 11-20-2012 03:13 PM

This has been resolved by an awesome dude over at HTML forums. For a view of what I wanted ultimately, go to http://dev.eventidewebdesign.com/ken...de/newhome.php. You'll have to hurry if you want to see it, though, as I'm about to move those files to get ready for continuing my work on this project...

If I've moved them and you'd like to see the result email me via my profile and I'll get back to you.

Thread: My first try at positioning elements with CSS - a non-table approach to page layout

Thread Tools

Display

My first try at positioning elements with CSS - a non-table approach to page layout

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions