Toggle sidebar Toggle sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

CSS - Center?

FocusAndEarnIt

FocusAndEarnIt

macrumors 601
Original poster
Here's the code, I basically want the site to get centered. Right now: http://mjstew.net/site.html
Code: 
<html>
<head>
<title>Matt Stewart -- Photographer & Musician</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- All Source Code © Matt Stewart 2006 -->
<style type="text/css">
<!--
div.mjstew {
	margin:auto;
	position:absolute;
	left:0px;
	top:0px;
	width:794px;
	height:600px;
}


div.mjstew-logo {
	position:absolute;
	left:301px;
	top:0px;
	width:193px;
	height:52px;
}

div.title {
	position:absolute;
	left:242px;
	top:76px;
	width:300px;
	height:29px;
}

div.id1 {
	position:absolute;
	left:0px;
	top:113px;
	width:794px;
	height:107px;
}

div.id2 {
	position:absolute;
	left:0px;
	top:220px;
	width:794px;
	height:94px;
}


div.id3 {
	position:absolute;
	left:1px;
	top:314px;
	width:793px;
	height:99px;
}

div.links {
	position:absolute;
	left:0px;
	top:413px;
	width:170px;
	height:22px;
}

div.about {
	position:absolute;
	left:40px;
	top:435px;
	width:130px;
	height:52px;
}

div.photography {
	position:absolute;
	left:301px;
	top:435px;
	width:201px;
	height:52px;
}

div.music {
	position:absolute;
	left:622px;
	top:435px;
	width:121px;
	height:52px;
}

div.copyright {
	position:absolute;
	left:220px;
	top:582px;
	width:348px;
	height:18px;
}
-->
</style>
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;"
<!-- Slices -->
<div class="mjstew">
	<div class="mjstew-logo">
		<div align="center"><img src="images/mjstew_logo.jpg" width="193" height="52" alt="mjstew.net">
	  </div>
	</div>
	<div class="title">
		<img src="images/title.jpg" width="300" height="29" alt="Photographer & Musician">
	</div>
	<div class="id1">
		<img src="images/1.jpg" width="794" height="107" alt="">
	</div>
	<div class="id2">
		<img src="images/2.jpg" width="794" height="94" alt="">
	</div>
	<div class="id3">
		<img src="images/3.jpg" width="793" height="99" alt="">
	</div>
	<div class="links">
		<img src="images/links.jpg" width="170" height="22" alt="">
	</div>
	<div class="about">
		<a href="http://mjstew.net">
			<img src="images/about.gif" width="130" height="52" border="0" alt="About - Links Not Working."></a>
	</div>
	<div class="photography">
		<a href="http://mjstew.net">
			<img src="images/photography.gif" width="201" height="52" border="0" alt="Photography - Links Not Working."></a>
	</div>
	<div class="music">
		<a href="http://mjstew.net">
			<img src="images/music.gif" width="121" height="52" border="0" alt="Music - Links Not Working."></a>
	</div>
	<div class="copyright">
		<img src="images/copyright.jpg" width="348" height="18" alt="All Content Copyright Matt Stewart © 2006 -- ALL RIGHTS RESERVED.">
	</div>
</div>
</body>
</html>
Anyone know what I need to do to center it? Seems like it would be simple? 🙁

THIS CSS FIXED - NEW PROBLEM, SCROLL DOWN
 
Code: 
div.mjstew {
	margin-right: auto;
	margin-left: auto;
	position: absolute;
	top:0px;
	width:794px;
	height:600px;
}

If you tell this div to be absolutely positioned left, at 0px, it's going to do that.
 
I am SO frustrated. Another CSS problem.
now what am i doin' wrong? 🙁 it needs to be centered.
Code: 
<html>
<head>
<title>music</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- Style -->
<style type="text/css">
<!--

#music {
	position: absolute;
	width:800px;
	height:600px;
}

#mjstew {
	position:absolute;
	left:0px;
	top:0px;
	width:103px;
	height:37px;
}

#works {
	position:absolute;
	left:699px;
	top:37px;
	width:101px;
	height:24px;
}

#piano {
	position:absolute;
	left:33px;
	top:125px;
	width:335px;
	height:405px;
}

#comingsoon {
	position:absolute;
	left:390px;
	top:125px;
	width:410px;
	height:318px;
}

#copyright {
	position:absolute;
	left:203px;
	top:578px;
	width:378px;
	height:22px;
}

-->
</style>
<!-- End of Style -->
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: px; margin-right: 0px;">
<!-- Slices) -->
<div id="music">
	<div id="mjstew">
		<img src="images/mjstew.jpg" width="103" height="37" alt="">	</div>
	<div id="works">
		<img src="images/music.jpg" width="101" height="26" alt="">	</div>
		<div id="piano">
		<img src="images/piano.jpg" width="335" height="405" alt="Image  © www.eRiding.net">	</div>

	</div>
	<div id="comingsoon">
		<img src="images/comingsoon.jpg" width="410" height="318" alt="">	</div>
	<div id="copyright">
		<img src="images/copyright.jpg" width="378" height="22" alt="">	</div>

</div>
<!-- End of Slices -->
</html>
 
don't use absolute positioning if you don't have to.

first, remove all of the style attributes here
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: px; margin-right: 0px;">

then, use this css...
Code: 
body { text-align: center; background: #FFF, margin: 0; padding: 0; }
div#music { width: 800px; margin: 0 auto; }
 
Didn't work. 🙁

Here's the code now...
Code: 
<html>
<head>
<title>music</title>
<style type="text/css">
body { 	
	text-align: center; 
	background: #FFF; 
	margin: 0; 
	padding: 0;

}
 
#music {
	width: 800px; 
	margin: 0 auto;
}

#mjstew {
	position:absolute;
	left:0px;
	top:0px;
	width:103px;
	height:37px;
}

#works {
	position:absolute;
	left:699px;
	top:37px;
	width:101px;
	height:24px;
}

#piano {
	position:absolute;
	left:33px;
	top:125px;
	width:335px;
	height:405px;
}

#comingsoon {
	position:absolute;
	left:390px;
	top:125px;
	width:410px;
	height:318px;
}

#copyright {
	position:absolute;
	left:203px;
	top:578px;
	width:378px;
	height:22px;
}


</style>
</head>
<div id="music">
	<div id="mjstew">
		<img src="images/mjstew.jpg" width="103" height="37">	</div>
	<div id="works">
		<img src="images/music.jpg" width="101" height="26">	</div>
		<div id="piano">
		<img src="images/piano.jpg" width="335" height="405" alt="Image  © www.eRiding.net">	</div>

	</div>
	<div id="comingsoon">
		<img src="images/comingsoon.jpg" width="410" height="318">	</div>
	<div id="copyright">
		<img src="images/copyright.jpg" width="378" height="22">	</div>

</div>
</html>
 
i think you need to pretend that absolute positioning doesn't exist. they do nothing but cause problems.

read up on how to use floats, then remake everything.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back