Positioning Issues

camcool21 · #1 Dec 5th, 2006, 02:58

Hey folks!

Decided to help do a redesign for this site http://www.max-nation.com
Anyway I'm pretty new to the whole makin webpages thing so I might need help a bunch...But onto the question!

This is what I got so far(not much) http://www.freewebs.com/max-nation/Index.html

Alright I want that logo to fit right next to the photograph at the top of the page...How do u do that?

HTML(so far)

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Max-Nation ~ The Unofficial Maxim Afinogenov Appreciation Website</title>
<link rel="stylesheet" type="text/css"
href="http://www.freewebs.com/max-nation/Max%2DNation.css" />
</head>
<body>
<div id="logo">
<img src="http://www.freewebs.com/max-nation/slug%20with%20background%20blue.jpg" alt="Sabres Logo" />
</div>
<div id="container">
<img src="http://www.freewebs.com/max-nation/max.jpg" alt="Maxim Afinogenov" />
</div>
</body>
</html>

CSS (so far)

Code: Select all

body
{
background-color: #002039; 
margin: 0px;
padding: 0px;
}
#container
{
width: 591px;
margin: auto;
text-align: left;
background-color: #ff9E21
}
#logo
{
position: aboslute;
left: 0px;
top : 0px;
}

drd · #2 Dec 5th, 2006, 09:14

Hi,

Id add the id="logo" to the image so then you don't need it to be in a separate div:

<img src="" id="logo" alt="" />

Basically, if you use position absolute by itself, it will work from the edge of the screen, unless you put the logo in a div that is set to position: relative.

So, if you want your logo in the container div, do this:

#container {
position: relative
}

img#logo {
position: absolute;
left: 0px;
top : 0px
}

Note I also changed the CSS slightly so the logo is specified as the image.

Hope that helps!

camcool21 · #3 Dec 5th, 2006, 20:08

didn't work

Now the large photograph overlaps the logo at the top left corner.

Here is the link again http://www.freewebs.com/max-nation/index.html

HELP PLEASE

drd · #4 Dec 6th, 2006, 08:39

Yeah its because the logo is on a different "layer" now it has the position: absolute added.
You need to move the photo down. If you want the container in the centre it needs the margin: 0 auto set and text-decoration: center in the body. Give the container some top padding to shift the photo down, or the photo some top margin to make it clear the logo.

camcool21 · #5 Dec 7th, 2006, 19:49

thx makes sense now

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
IE and FF Issues...	Aaron1988	Web Page Design	0	May 10th, 2008 15:52
Serious issues in IE7	Daimz	Web Page Design	2	Aug 21st, 2007 12:38
More IE6 FF issues!	Lego	Web Page Design	7	Apr 21st, 2007 20:19
CSS Issues. Can you help me out?	escaflowne11	Web Page Design	7	Sep 13th, 2006 13:18
More issues.	mreine	Webforumz Suggestions and Feedback	7	Mar 13th, 2006 02:49

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Positioning Issues