Sidebar 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
May 29, 2005
4,629
1,114
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
 
Under div.mjstew, add

left:50%;
margin-left:-397;

that should center it.
 
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>
 
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