CSS - Center?

Discussion in 'Web Design and Development' started by mjstew33, Oct 18, 2006.

  1. mjstew33 macrumors 601

    mjstew33

    Joined:
    May 29, 2005
    Location:
    Illinois
    #1
    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
     
  2. ITASOR macrumors 601

    ITASOR

    Joined:
    Mar 20, 2005
    Location:
    Oneida, NY
    #2
    Under div.mjstew, add

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

    that should center it.
     
  3. mjstew33 thread starter macrumors 601

    mjstew33

    Joined:
    May 29, 2005
    Location:
    Illinois
  4. ThunderLounge macrumors 6502

    ThunderLounge

    Joined:
    Sep 20, 2006
    #4
    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.
     
  5. mjstew33 thread starter macrumors 601

    mjstew33

    Joined:
    May 29, 2005
    Location:
    Illinois
  6. mjstew33 thread starter macrumors 601

    mjstew33

    Joined:
    May 29, 2005
    Location:
    Illinois
    #7
    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>
     
  7. mjstew33 thread starter macrumors 601

    mjstew33

    Joined:
    May 29, 2005
    Location:
    Illinois
  8. mnkeybsness macrumors 68030

    mnkeybsness

    Joined:
    Jun 25, 2001
    Location:
    Moneyapolis, Minnesota
    #9
    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; }
     
  9. mjstew33 thread starter macrumors 601

    mjstew33

    Joined:
    May 29, 2005
    Location:
    Illinois
    #10
    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>
     
  10. mnkeybsness macrumors 68030

    mnkeybsness

    Joined:
    Jun 25, 2001
    Location:
    Moneyapolis, Minnesota
  11. mjstew33 thread starter macrumors 601

    mjstew33

    Joined:
    May 29, 2005
    Location:
    Illinois
    #12
    okay.. do i just take the line out? do i replace it with something?
     
  12. mnkeybsness macrumors 68030

    mnkeybsness

    Joined:
    Jun 25, 2001
    Location:
    Moneyapolis, Minnesota
    #13
    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.
     

Share This Page