Web Design Forums

88mph · 31-03-2008, 14:46

whats wrong with this????

trying to get the content and logo to centre align

HTML Code:



body 	{			
			background-image: url("../images/background.gif");
			background-color: white;
}
#logo {
	margin: 0 auto;
}


#content {
	position:absolute;
	background: url("../images/pagebackground.gif")  no-repeat left top;
	width: 787px;
	margin: 0 auto;
	height: 500px;
}
#boarderbackground {

	background: url("../images/boarderbackground.gif")  repeat-y left;
	
}
#signature {
		background: url("../images/pagebackgroundbase.gif")  no-repeat left bottom;
}

which is attatched too

HTML Code:

<body class="default">
		<div id="header">
			<img id="logo" src="images/logo.gif" alt="Mild Fuzz - Multimedia" height="133" width="337" name="logo" ></IMG>
		</p>
			-------------This is the Header
			<div id="title">
				----Title----
			</div>
			<div id="tagline">
				----Tagline----
			</div>
		</div>
		<p>
			
		<div id="content">
			--this is the content
			<div id="boarderbackground">
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus arcu. Vivamus ultricies. Pellentesque volutpat arcu quis est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum sit amet odio id diam vehicula imperdiet. Quisque interdum adipiscing lectus. Donec auctor justo nec arcu. Cras sed neque. Donec massa. Pellentesque mollis justo pretium metus. Cras non justo. Aenean faucibus turpis vel libero. Nunc placerat, neque quis commodo accumsan, eros erat venenatis lacus, feugiat posuere velit lacus nec est. Sed tempor aliquam magna. Curabitur varius consequat purus. Nulla hendrerit, quam a interdum luctus, lacus massa rutrum libero, cursus rutrum dui ligula non orci. Nunc sodales, eros non lacinia faucibus, elit dolor eleifend pede, quis dapibus lorem massa sit amet risus. Curabitur mauris mi, tincidunt id, fringilla vel, consequat non, sapien. Cras ut nulla id orci vulputate blandit. Curabitur non dui. Integer ultricies nisl a lorem. Aliquam lectus erat, commodo eu, egestas nec, molestie dictum, justo. Vestibulum congue enim a diam. Nullam purus. Vivamus iaculis. Nulla facilisi. Morbi id enim. Aenean non urna. Curabitur diam lorem, euismod ut, eleifend facilisis, volutpat pharetra, justo. Ut venenatis diam et nibh. Fusce tristique, nulla pellentesque mattis tempus, nisi odio semper lorem, vitae mollis dui pede eget nisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nec felis. Fusce tincidunt ultricies sapien. Phasellus semper aliquam quam. Suspendisse potenti. In hac habitasse platea dictumst. Pellentesque vehicula augue in justo. Etiam eros lorem, condimentum eget, gravida commodo, sollicitudin in, urna. Maecenas ut elit in enim tincidunt pretium. Integer sem est, interdum et, fringilla nec, mattis nec, est. Suspendisse potenti. Maecenas erat ligula, tempus et, varius sit amet, dignissim et, nisi. Curabitur purus. Pellentesque tristique purus sit amet nisi. Praesent tempus aliquet nulla. Curabitur ultrices vulputate risus. Donec et lorem. Praesent luctus congue eros. Curabitur lacinia cursus risus. Sed pharetra, odio sed congue faucibus, purus neque suscipit nulla, a ultrices velit justo ac dolor. Nulla facilisi. Donec convallis semper urna. Quisque vitae risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam non sapien non diam ultricies convallis. Donec vestibulum urna vehicula arcu. Phasellus vel mauris. Vestibulum vel odio commodo urna rhoncus dignissim. Quisque congue, orci in malesuada rutrum, nisl lacus elementum odio, pulvinar vestibulum lorem ligula nec velit. Proin molestie, erat id suscipit sollicitudin, est augue rhoncus metus, nec dignissim velit sem sit amet nisi. Sed bibendum. Vestibulum vestibulum. Cras malesuada commodo eros. Sed sed elit. Aenean vehicula condimentum lorem. Mauris iaculis velit vitae lectus facilisis bibendum. Aliquam tempor felis. Nunc id orci. Morbi posuere, felis id consequat lacinia, quam justo condimentum neque, id auctor orci enim nec nulla. Integer tempus dignissim sem. Aenean sit amet velit sed purus vehicula lacinia. Etiam porta leo at erat tempor ultrices. Sed vestibulum velit eget ipsum. Etiam justo est, iaculis ut, convallis vitae, varius et, turpis. Phasellus et mauris id neque sodales condimentum.
				<div id="leftandcentre">
					<div id="leftcol">
						----left Col----
					</div>
					<div id="centrecol">
						----centre col--
					</div>
				</div>
				<div id="rightcol">
					----Right Column
				</div>
			</div>
			<div id="signature">
				--this is where the image tag for my signature will go
			</div>
		</div>
	</body>

88mph · 31-03-2008, 14:59

right, changed

Code:

#content {
	position:absolute;
	background: url("../images/pagebackground.gif")  no-repeat left top;
	width: 787px;
	margin: 0 auto;
	height: 500px;
}

to ...

Code:

#content {
	position:relative;
	background: url("../images/pagebackground.gif")  no-repeat left top;
	width: 787px;
	margin: 0 auto;
	height: 500px;
}

and that made the content box centre, tried adding position: relative; to the #logo rule, but to no avail??

chaos.dave · 31-03-2008, 16:00

try:

Code:

#logo {
         margin: 0 auto;
         display: block;

bluesage · 31-03-2008, 17:49

I would simply style the header div to center its content. then the divs within that, text-align left.

ex.

Code:

 
#header {
text-align:center;
}

#title, #tagline {
text-align:left;
}

would remove those <p> elements, as they are neither closed or opened properly, which may be a cause for problems.

88mph · 31-03-2008, 18:09

picked up the p's in the validator, cheers

sorted now!!

many thanks

bazzle · 31-03-2008, 18:59

You should format your code better so we can see whats nested inside what etc and get to the root of the problem as I can't make much sense from that mess.

Tripper44 · 08-04-2008, 17:00

This is what i use to sort IE and FF

IE
-----------------
html, body {
text-align: center;
}

FF
-----------------
.container {
width: 800px;
height: 500px;
margin-left: auto;
margin-right: auto;
}

.sleep · 08-04-2008, 17:12

Quote:

Originally Posted by Tripper44

This is what i use to sort IE and FF
FF
-----------------
.container {
width: 800px;
height: 500px;
margin-left: auto;
margin-right: auto;
}

margin: 0px auto; // Condense your two lines to one
text-align:left; // Bring alignment back to left after everything's been centered

Limbo · 08-04-2008, 17:26

why do it different for Firefox and IE Tripper 44? - there's only VERY rare occasions for conditionals IMO - surely this aint one...

To reiterate -

body {text-align:center;}
#yourcontainers {margin:0 auto; text-align:left;}

88mph · 09-04-2008, 08:39

Solved

31-03-2008, 17:49	#4 (permalink)
bluesage Senior Member Join Date: Dec 2006 Location: Switzerland Posts: 356	I would simply style the header div to center its content. then the divs within that, text-align left. ex. Code: #header { text-align:center; } #title, #tagline { text-align:left; } would remove those <p> elements, as they are neither closed or opened properly, which may be a cause for problems. __________________ www.benshu.ch // Evolving with Style

08-04-2008, 17:26	#9 (permalink)
Limbo Dizzy spell Join Date: Feb 2005 Posts: 5,659	why do it different for Firefox and IE Tripper 44? - there's only VERY rare occasions for conditionals IMO - surely this aint one... To reiterate - body {text-align:center;} #yourcontainers {margin:0 auto; text-align:left;} __________________ CSS Search Engine

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

31-03-2008, 16:00	#3 (permalink)
chaos.dave "Everybody's Dead Dave" Join Date: Dec 2007 Location: Loughborough, UK Posts: 132	try: Code: #logo { margin: 0 auto; display: block;

31-03-2008, 18:09	#5 (permalink)
88mph Great Scott!! Join Date: Feb 2008 Posts: 223	picked up the p's in the validator, cheers sorted now!! many thanks

31-03-2008, 18:59	#6 (permalink)
bazzle Senior Member Join Date: Aug 2007 Location: Derby uk Posts: 585	You should format your code better so we can see whats nested inside what etc and get to the root of the problem as I can't make much sense from that mess.

08-04-2008, 17:00	#7 (permalink)
Tripper44 Registered User Join Date: Sep 2005 Posts: 14	This is what i use to sort IE and FF IE ----------------- html, body { text-align: center; } FF ----------------- .container { width: 800px; height: 500px; margin-left: auto; margin-right: auto; }

09-04-2008, 08:39	#10 (permalink)
88mph Great Scott!! Join Date: Feb 2008 Posts: 223	Solved

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)