Zymic Webmaster Forums > Building A Container To Keep Site Centered

k.digennaro

Aug 3 2008, 07:58 PM

I guess I don't completely under stand how to build a container around a page. Right now I have a layout that I centered on my screen, I want to add a container around it so that its center on everyones screen. Right now I'm not sure if its the container code thats messed up or my google adsense code. Here's a live example http://www.nascentdescent.com.

I'm not sure if I'm being clear, but basically if you look at the live example you'll see that the layout is centered, but its at the bottom of the ad. I want the ad to be to the left of the page. Basically I want to move the layout up so there is no scrolling.

Here's my code.

CODE

/*--------------CSS Document--------------*/

/*---------------Welcome Page---------------*/
body {
              background-color: #000000;
}

a{
color:white;
text-decoration:none;
}

#container {
    height: auto;
    width: auto;
    margin-right: auto;
    margin-left: auto;
}

#header {
              background: #000000 url(images/header.png) no-repeat;
              width: 695px;
              height: 107px;
              margin-left: 250px;
                      padding:0 0;
}
#bodytitle {
              font:bold 55px Arial, Helvetica, sans-serif;
                            color: white;
              padding: 0 200px 0 350px;

}
#center {
              background: #000000 url(images/center.png) no-repeat;
              width: 697px;
              height: 355px;
              margin-left: 249px;
              padding:0 0;
}
#bodyslogan {
              font:bold 12px Arial, Helvetica, sans-serif;
              color: white;
              padding: 0 0 0 350px;
}
#footer {
              background: #000000 url(images/footer.png) no-repeat;
              width: 696px;
              height: 97px;
              margin-left: 250px;
              padding:0 0;
}
#bodyhome {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
                      font-size: 35px;
              padding-top:150px;
              padding-left:400px;

}
#bodyshows {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
                      font-size: 35px;
              padding-top:5px;
              padding-left:400px;
}
#bodybio {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
                      font-size: 35px;
              padding-top:5px;
                      padding-left:400px;

}
#bodyphotos {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
                      font-size: 35px;
              padding-top:5px;
              padding-left:400px;

}
#bodyforum {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
                         font-size: 35px;
              padding-top:5px;
              padding-left:400px;

}
#bodyenter {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
                      font-size: 35px;
              margin-left:300px;

}
#copyright {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
                      font-size: 12px;
                      margin-left:460px;
}

/*----------------Welcome Page Ends---------------*/

/*----------------HomePage Begins---------------*/

/*----------------HomePage Ends-----------------*/

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Welcome to NascentDescent!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="enter.css" />
        <script type="text/javascript">
        </script>
        <script type="text/javascript"
        src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
        </script>

</head>
<body>

<div id="container">
         <div id="header">
         </div>

         <div id="center">
                                  <div id="bodyhome"><a href="http://www.reverbnation.com/nascentdescent">01 Home</a></div>
                                 <div id="bodyshows"><a href="http://www.reverbnation.com/nascentdescent">02 Shows</a></div>
                                 <div id="bodybio"><a href="http://www.reverbnation.com/nascentdescent">03 Bio</a></div>
                                 <div id="bodyphotos"><a href="http://www.reverbnation.com/nascentdescent">04 Photos</a></div>
                                 <div id="bodyforum"><a href="http://www.nascentdescent.com/phpBB-3.0.2/phpBB3">05 Forum</a></div>
         </div>

         <div id="footer">
         <div id="bodyenter"><a href="http://www.reverbnation.com/nascentdescent">Enter</a></div>
         </div>

         <div id="copyright">Copyright 2008 DiGennaroDesigns All rights reserved</div>

</div>


</body>
</html>

Thanks again,
Kevin

Andrew

Aug 3 2008, 09:14 PM

Well Kevin, you can't have your ads in the header and expect them to line up with any content in the body.

What I would do is take the ad codes and put then in their own div tag, and name it #ads or something. And you'll have to set in the css { float: left; } for the #ads.

Also you'll have to set in the css {float: right; } for the #container

And then to center EVERYTHING, I'd make a #wrapper around everything

k.digennaro

Aug 3 2008, 09:29 PM

ah, i thought i had to have the ad in the header ill try that, thanks trippin

edit: ive never done a wrapper, i understand the concept of it but could you post an example of wat the code to a wrapper would look like?

Thanks,
Kevin

edit again: I floated the ads to the left and the container to the right but it doesn't seem like it did anything.

CODE

/*--------------CSS Document--------------*/

/*---------------Welcome Page---------------*/
body {
              background-color: #000000;
}

a{
                            color:white;
                            text-decoration:none;
}

#container {
                    height: auto;
                       width: auto;
                    margin-right: auto;
                    margin-left: auto;
                          float:right;
}

#header {
              background: #000000 url(images/header.png) no-repeat;
              width: 695px;
              height: 107px;
              margin-left: 250px;
                      padding:0 0;
}
#bodytitle {
              font:bold 55px Arial, Helvetica, sans-serif;
                            color: white;
              padding: 0 200px 0 350px;

}
#center {
              background: #000000 url(images/center.png) no-repeat;
              width: 697px;
              height: 355px;
              margin-left: 249px;
              padding:0 0;
}
#bodyslogan {
              font:bold 12px Arial, Helvetica, sans-serif;
              color: white;
              padding: 0 0 0 350px;
}
#footer {
              background: #000000 url(images/footer.png) no-repeat;
              width: 696px;
              height: 97px;
              margin-left: 250px;
              padding:0 0;
}
#bodyhome {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
                      font-size: 35px;
              padding-top:150px;
              padding-left:400px;

}
#bodyshows {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
                      font-size: 35px;
              padding-top:5px;
              padding-left:400px;
}
#bodybio {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
                      font-size: 35px;
              padding-top:5px;
                      padding-left:400px;

}
#bodyphotos {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
                      font-size: 35px;
              padding-top:5px;
              padding-left:400px;

}
#bodyforum {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
                         font-size: 35px;
              padding-top:5px;
              padding-left:400px;

}
#bodyenter {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
                      font-size: 35px;
              margin-left:300px;

}
#copyright {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
                      font-size: 12px;
                      margin-left:460px;
}

#NDEnter{
                             float:left;
}

#right side{
                           float:left;
}

/*----------------Welcome Page Ends---------------*/

/*----------------HomePage Begins---------------*/

/*----------------HomePage Ends-----------------*/

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Welcome to NascentDescent!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="enter.css" />
</head>
<body>

<div id="NDEnter">
<script type="text/javascript">
        </script>
        <script type="text/javascript"
        src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
        </script>
</div>

<div id="right side">
<script type="text/javascript">
        </script>
        <script type="text/javascript"
        src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
        </script>
</div>

<div id="container">
  <div id="wrapper">
         <div id="header">
         </div>

         <div id="center">
                                  <div id="bodyhome"><a href="http://www.reverbnation.com/nascentdescent">01 Home</a></div>
                                 <div id="bodyshows"><a href="http://www.reverbnation.com/nascentdescent">02 Shows</a></div>
                                 <div id="bodybio"><a href="http://www.reverbnation.com/nascentdescent">03 Bio</a></div>
                                 <div id="bodyphotos"><a href="http://www.reverbnation.com/nascentdescent">04 Photos</a></div>
                                 <div id="bodyforum"><a href="http://www.nascentdescent.com/phpBB-3.0.2/phpBB3">05 Forum</a></div>
         </div>

         <div id="footer">
         <div id="bodyenter"><a href="http://www.reverbnation.com/nascentdescent">Enter</a></div>
         </div>

         <div id="copyright">Copyright 2008 DiGennaroDesigns All rights reserved</div>

</div>
</div>


</body>
</html>

Andrew

Aug 4 2008, 08:38 PM

because you need to have them all in a div. It can't float left if it doesn't have a div to be floating left IN.

And I just called it a wrapper div, you can name it anything you want, and you can have empty divs. You don't have to specify any coding in the css. Just make the section for it and leave it blank unless something needs to be changed. #wrapper { }

k.digennaro

Aug 4 2008, 09:34 PM

aw, that makes sense thanks trip, I think I got it looking pretty good, its not quite centered, i just need to mess with it a bit.

www.nascentdescent.com

Andrew

Aug 4 2008, 11:07 PM

It's still below the ads... I think it's because my screen resolution is smaller than yours. I have 1024x768 (against my will, just have a shitty monitor)

k.digennaro

Aug 4 2008, 11:42 PM

hmmmm, on both mine and my parents it fits, let me run a test and ill edit this topic

edit: you seem to be right, any suggestions on how I can modify this code so that it will center the 'container' on buddies screen, is there like a 'center' code i can use instead of margins/padding?

Thanks again trippin,
Kevin

Andrew

Aug 5 2008, 07:14 AM

You don't actually need to pad things to make them centered.
Use #divname { margin: 0px auto; }
That centers whatever is in the div.

k.digennaro

Aug 5 2008, 09:30 PM

hmmm i tried it out trippin, it seems to be 'better' but still it doesnt line up quite right. In my browser I see one ad on the right and one on the left. and then the layout in the middle of both, thats the way i want it, but when i look on browsershots.org none of them look quite right.

Heres the code again, made a couple changes. the layout no longer floats left because i want it in the middle. So i have one ad floating right and one left.

CODE

body {
              background-color: #000000;
}

a{
                            color:white;
                            text-decoration:none;
}

#container {
                    height: 0 auto;
                       width: 0 auto;
                    margin-right: 0 auto;
                            margin-left: 0 auto;
                            margin-top: 0 auto;
}

#ads1{
                             float:left;
}

#ads2{
                             float:right;
}

#wrap{

}

#header {
              background: #000000 url(images/header1.png) no-repeat;
              width: 695px;
              height: 107px;
              margin-left: 250px;
                      padding:0 0;
}

#bodytitle {
              font:bold 55px Arial, Helvetica, sans-serif;
                            color: white;
              padding: 0 200px 0 350px;

}
#center {
              background: #000000 url(images/center1.png) no-repeat;
              width: 697px;
              height: 355px;
              margin-left: 250px;
              padding:0 0;
}
#bodyslogan {
              font:bold 12px Arial, Helvetica, sans-serif;
              color: white;
              padding: 0 0 0 350px;
}
#footer {
              background: #000000 url(images/footer1.png) no-repeat;
              width: 696px;
              height: 97px;
              margin-left: 250px;
              padding:0 0;
}
#bodyhome {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
                      font-size: 35px;
              padding-top:150px;
              padding-left:400px;

}
#bodyshows {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
                      font-size: 35px;
              padding-top:5px;
              padding-left:400px;
}
#bodybio {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
                      font-size: 35px;
              padding-top:5px;
                      padding-left:400px;

}
#bodyphotos {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
                      font-size: 35px;
              padding-top:5px;
              padding-left:400px;

}
#bodyforum {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
                         font-size: 35px;
              padding-top:5px;
              padding-left:400px;

}
#bodyenter {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
                      font-size: 35px;
              margin-left:300px;

}
#copyright {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
                      font-size: 12px;
                      margin-left:460px;
}

#NDEnter{
                             float:left;
}

#centered{
                            margin:0 auto;
}

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Welcome to NascentDescent!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Welcome to NascentDescent.Com home of the heavy alternative rock band out of Cincinnati,Ohio. Check us out!">
<meta name="keywords" content="music,MUSIC,Music,Band,BAND,band,Rock,ROCK,rock,ALTERNATIVE,alternative,Alte
rnative,TUNES,Tunes,tunes,nascent,NASCENT,Nascent,DESCENT,Descent,descent,Nascen
t-Descent,NASCENT-DESCENT,nascent-descent,ALTERNATIVE-ROCK,alternative-rock,Alternative-Rock,garage-band,GARAGE-BAND,Garage-Band,recording,RECORDING,Recording,unsigned,UNSIGNED,Unsigned,forum,FORUM,Forum,
Forums,FORUMS,forums,artist,ARTIST,Artist,artists,ARTISTS,Artists">
<link rel="stylesheet" type="text/css" href="enter1.css" />
</head>
<body>

<div id="ads1">

         <div id="NDEnter">
            <script type="text/javascript">
                </script>
                <script type="text/javascript"
                src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
                </script>
        </div>
</div>

<div id="ads2">
        <div id="NDEnter">
            <script type="text/javascript">
                </script>
                <script type="text/javascript"
                src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
                </script>
    </div>
</div>

<div id="centered">
<div id="container">

    <div id="wrap">
         <div id="header">
         </div>

         <div id="center">
                                  <div id="bodyhome"><a href="http://www.reverbnation.com/nascentdescent">01 Home</a></div>
                                 <div id="bodyshows"><a href="http://www.reverbnation.com/nascentdescent">02 Shows</a></div>
                                 <div id="bodybio"><a href="http://www.reverbnation.com/nascentdescent">03 Bio</a></div>
                                 <div id="bodyphotos"><a href="http://www.reverbnation.com/nascentdescent">04 Photos</a></div>
                                 <div id="bodyforum"><a href="http://www.nascentdescent.com/phpBB-3.0.2/phpBB3">05 Forum</a></div>
         </div>

         <div id="footer">
         <div id="bodyenter"><a href="http://www.reverbnation.com/nascentdescent">Enter</a></div>
         </div>

         <div id="copyright">Copyright 2008 DiGennaroDesigns All rights reserved</div>

</div>
</div>
</div>

</body>
</html>

Thanks,
Kevin

MrTouz

Aug 5 2008, 11:01 PM

to center an eleme t the correct way (valid)

CODE

margin:0 auto;
padding:0;
text-align:center;

In some website they say it's padding:0 auto; just like the margin but I never been able to validate auto via padding.
Also suggest having the width and height to auto.

k.digennaro

Aug 5 2008, 11:33 PM

thanks mrtouz, but that doesnt seem to work, it doesnt center it on my screen, but this does.

CODE

              height:0 auto;
              width:0 auto;
              margin-right:0 auto;
              margin-left:0 auto;
              margin-top:0 auto;
              padding:0 auto;

edit: it seems that in most other browsers my design is off to the right, still between the ads but closer to the ad on the right.

flyboy

Aug 5 2008, 11:44 PM

CODE

*{margin: 0px; padding:0px;}

This should set your document up pretty nicely and it should be centered in all browsers. Just place above code at top of css document.

MrTouz

Aug 6 2008, 09:34 AM

QUOTE(k.digennaro @ Aug 5 2008, 11:33 PM)

thanks mrtouz, but that doesnt seem to work, it doesnt center it on my screen, but this does.

CODE

              height:0 auto;
              width:0 auto;
              margin-right:0 auto;
              margin-left:0 auto;
              margin-top:0 auto;
              padding:0 auto;

edit: it seems that in most other browsers my design is off to the right, still between the ads but closer to the ad on the right.

you have 3 margins, you could do : margin:0 auto;
and again, padding:0 auto; is not valid. its padding:0;.

Can you try to add : float:left; to the element... just to see if it respond...

Andrew

Aug 6 2008, 06:22 PM

Hey kevin, if you could change your [*code] tags to [*codebox] (sans asterisks) since there is SO much code (it makes the box pretty short, but scrolling). I think it would make this thread alot easier to read.

MrTouz

Aug 6 2008, 07:31 PM

I was going to ask how to do it

because yes, its hard to read... have to scroll all the way down all the time.

k.digennaro

Aug 6 2008, 10:02 PM

Thanks guys, yeah sorry about the code trippin, i always see people with the scroll box for the code just didnt know how to use it

Unfortuanlty right now im at a stand still until I can use browsershots again, because I can only test the page in 3 screen sizes and ther all almost the same size. But it looks like its centered on my screen. http://www.nascentdescent.com. I started another page since I couldnt really move on with th e coding of the enter page http://www.nascentdescent.com/home.html

For the the code on the enter page this is what ive got.

CODE

*{margin: 0px; padding:0px;}

body {
              background-color: #000000;
}

a{
							color:white;
							text-decoration:none;
}

#container {
    			    height:0 auto;
              width:0 auto;
							margin:0 auto; 
							padding:0;
							float:left;	 
}

#ads1{
		 					float:left;
}

#ads2{
		 					float:right;
}

#wrap{
						
}

#header {
              background: #000000 url(images/header1.png) no-repeat;
              width: 695px;
              height: 107px;
              margin-left: 250px;
	      			padding:0 0;
}

#bodytitle {
              font:bold 55px Arial, Helvetica, sans-serif;
							color: white;
              padding: 0 200px 0 350px;
                           
}
#center {
              background: #000000 url(images/center1.png) no-repeat;
              width: 697px;
              height: 355px;
              margin-left: 250px;
              padding:0 0;
}
#bodyslogan {
              font:bold 12px Arial, Helvetica, sans-serif;
              color: white;
              padding: 0 0 0 350px;
}
#footer {
              background: #000000 url(images/footer1.png) no-repeat;
              width: 696px;
              height: 97px;
              margin-left: 250px;
              padding:0 0;
}
#bodyhome {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
	      			font-size: 35px;
              padding-top:150px;
              padding-left:400px;
							
}
#bodyshows {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
	      			font-size: 35px;
              padding-top:5px;
              padding-left:400px;							
}
#bodybio {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
	      			font-size: 35px;
              padding-top:5px;
	      			padding-left:400px;
	                     							
}
#bodyphotos {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
	      			font-size: 35px;
              padding-top:5px;
              padding-left:400px;
							
}
#bodyforum {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
	     				font-size: 35px;
              padding-top:5px;
              padding-left:400px;
							
}
#bodyenter {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
	      			font-size: 35px;
              margin-left:300px;
							
}
#copyright {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
	      			font-size: 12px;
	      			margin-left:460px;
}

#NDEnter{
				 			float:left;
}

#centered{
							margin:0 auto;
}

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Welcome to NascentDescent!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Welcome to NascentDescent.Com home of the heavy alternative rock band out of Cincinnati,Ohio. Check us out!">
<meta name="keywords" content="band, playing, good, started, shower stall, playing guitar, guitar, stall, friend, shower, been, 
start, recording, material, compared bands been, bands been, compared bands, fairly, along, newmusic, MUSIC, Music, Band, BAND,
 band, Rock, ROCK, rock, ALTERNATIVE, alternative, Alternative, TUNES, Tunes, tunes, nascent, NASCENT, Nascent, DESCENT, Descent, 
descent, Nascent-Descent, NASCENT-DESCENT, nascent-descent, ALTERNATIVE-ROCK, alternative-rock, Alternative-Rock, garage-band,
 GARAGE-BAND, Garage-Band, recording, RECORDING, Recording, unsigned, UNSIGNED, Unsigned, forum, FORUM, Forum, Forums, FORUMS, 
forums, artist, ARTIST, Artist, artists, ARTISTS, Artistsenjoy, freinds, long, music, times, andrew, grant, life, band, playing, grant andrew,
 long freinds, never forget, life long freinds, member band, freindships, rock, made, really, still, Album: Standing Tall Soon to come the release of our first album, "Standing Tall". Most of the songs on this album are about life and how it's always dragging people down with it. We've all had these 
experiences and all you can do is fight through them. I've always fought through them with my music and 
my sports. 
This album features about 11 tracks including: Scars,
 Paranoide, Sunny Days, and Rescheduled. All these songs speak strongly towards life and the goods 
and the bads of it.
 Just remember, Stay strong,
 Stand, team, street, street team, join, want, concerts, fans, want help, free, help may get, get, may get, 
help may, anything, 
help, may, unless, 
member, don\t, do">
<link rel="stylesheet" type="text/css" href="enter1.css" />			
</head>
<body>

<div id="ads1">
		 
		 <div id="NDEnter">
    		&lt;script type="text/javascript"><!--
				google_ad_client = "pub-5055084209343908";
				/* NDEnter */
				google_ad_slot = "3486852820";
				google_ad_width = 120;
				google_ad_height = 600;
				//-->
				</script>
				&lt;script type="text/javascript"
				src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
				</script>
		</div>
</div>

<div id="ads2">		
		<div id="NDEnter">
    		&lt;script type="text/javascript"><!--
				google_ad_client = "pub-5055084209343908";
				/* NDEnter */
				google_ad_slot = "3486852820";
				google_ad_width = 120;
				google_ad_height = 600;
				//-->
				</script>
				&lt;script type="text/javascript"
				src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
				</script>
    </div>			
</div>

<div id="centered">
<div id="container">
  
	<div id="wrap">
		 <div id="header">
		 </div>

		 <div id="center">
		 						 <div id="bodyhome"><a href="http://www.reverbnation.com/nascentdescent">01 Home</a></div>
								 <div id="bodyshows"><a href="http://www.reverbnation.com/nascentdescent">02 Shows</a></div>
								 <div id="bodybio"><a href="http://www.reverbnation.com/nascentdescent">03 Bio</a></div>
								 <div id="bodyphotos"><a href="http://www.reverbnation.com/nascentdescent">04 Photos</a></div>
								 <div id="bodyforum"><a href="http://www.nascentdescent.com/phpBB-3.0.2/phpBB3">05 Forum</a></div>
		 </div>
    
		 <div id="footer">
		 <div id="bodyenter"><a href="http://www.reverbnation.com/nascentdescent">Enter</a></div>
		 </div>

		 <div id="copyright">Copyright 2008 DiGennaroDesigns All rights reserved</div>

</div>
</div>
</div>


</body>
</html>

k.digennaro

Aug 6 2008, 11:28 PM

nope still not center, im wondering if its because i used px to pad the layout, instead of %s maybe ill change it, because for instance on an 800px wide monitor its just not possible for this design to fit, if i used percents it should be more fluid.

edit: I fixed the css so that its uses %s i think because i was using pixel it was overlapping with the right ad because it didnt have enough room on smaller monitors.

ill edit this once my screen shot uploads on browsershots.. its taking for ever lol

k.digennaro

Aug 7 2008, 12:47 AM

alright so this problem is almost fixed!! lol it seems that everything is centered in the layout, but when i put it on a say 1024px wide monitor only the the ad on the right is visible. Is there a way to modify the ads so they shrink down and fit a smaller screen?

Thanks,
Kevin

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Welcome to NascentDescent!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Welcome to NascentDescent.Com home of the heavy alternative rock band out of Cincinnati,Ohio. Check us out!">
<meta name="keywords" content="band, playing, good, started, shower stall, playing guitar, guitar, stall, friend, shower, been, start, recording, material, compared bands been, bands been, compared bands, fairly, along, newmusic, MUSIC, Music, Band, BAND, band, Rock, ROCK, rock, ALTERNATIVE, alternative, Alternative, TUNES, Tunes, tunes, nascent, NASCENT, Nascent, DESCENT, Descent, descent, Nascent-Descent, NASCENT-DESCENT, nascent-descent, ALTERNATIVE-ROCK, alternative-rock, Alternative-Rock, garage-band, GARAGE-BAND, Garage-Band, recording, RECORDING, Recording, unsigned, UNSIGNED, Unsigned, forum, FORUM, Forum, Forums, FORUMS, forums, artist, ARTIST, Artist, artists, ARTISTS, Artistsenjoy, freinds, long, music, times, andrew, grant, life, band, playing, grant andrew, long freinds, never forget, life long freinds, member band, freindships, rock, made, really, still, Album: Standing Tall Soon to come the release of our first album, "Standing Tall". Most of the songs on this album are about life and how it's always dragging people down with it. We've all had these experiences and all you can do is fight through them. I've always fought through them with my music and my sports. This album features about 11 tracks including: Scars, Paranoide, Sunny Days, and Rescheduled. All these songs speak strongly towards life and the goods and the bads of it. Just remember, Stay strong, Stand, team, street, street team, join, want, concerts, fans, want help, free, help may get, get, may get, help may, anything, help, may, unless, member, don\t, do">
<link rel="stylesheet" type="text/css" href="enter1.css" />			
</head>
<body>

<div id="ads1">
		 
		 <div id="NDEnter">
    		<script type="text/javascript"><!--
				google_ad_client = "pub-5055084209343908";
				/* NDEnter */
				google_ad_slot = "3486852820";
				google_ad_width = 120;
				google_ad_height = 600;
				//-->
				</script>
				<script type="text/javascript"
				src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
				</script>
		</div>
</div>

<div id="ads2">		
		<div id="NDEnter">
    		<script type="text/javascript"><!--
				google_ad_client = "pub-5055084209343908";
				/* NDEnter */
				google_ad_slot = "3486852820";
				google_ad_width = 120;
				google_ad_height = 600;
				//-->
				</script>
				<script type="text/javascript"
				src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
				</script>
    </div>			
</div>

<div id="centered">
<div id="container">
  
	<div id="wrap">
		 <div id="header">
		 </div>

		 <div id="center">
		 						 <div id="bodyhome"><a href="http://www.reverbnation.com/nascentdescent">01 Home</a></div>
								 <div id="bodyshows"><a href="http://www.reverbnation.com/nascentdescent">02 Shows</a></div>
								 <div id="bodybio"><a href="http://www.reverbnation.com/nascentdescent">03 Bio</a></div>
								 <div id="bodyphotos"><a href="http://www.reverbnation.com/nascentdescent">04 Photos</a></div>
								 <div id="bodyforum"><a href="http://www.nascentdescent.com/phpBB-3.0.2/phpBB3">05 Forum</a></div>
		 </div>
    
		 <div id="footer">
		 <div id="bodyenter"><a href="http://www.reverbnation.com/nascentdescent">Enter</a></div>
		 </div>

		 <div id="copyright">Copyright 2008 DiGennaroDesigns All rights reserved</div>

</div>
</div>
</div>


</body>
</html>

CODE

*{margin: 0px; padding:0px;}

body {
              background-color: #000000;
}

a{
							color:white;
							text-decoration:none;
}

#container {
    			    height:0 auto;
              width:0 auto;
							margin:0 auto; 
							padding:0;
							float:left;	 
}

#ads1{
		 					float:left;
}

#ads2{
		 					float:right;
}

#wrap{
						
}

#header {
              background: #000000 url(images/header1.png) no-repeat;
              width: 695px;
              height: 107px;
              margin-left: 20%;
							margin-top:2.5%;
	      			padding:0;
}
#center {
              background: #000000 url(images/center1.png) no-repeat;
              width: 697px;
              height: 355px;
              margin-left: 20%;
							padding:0;
}
#footer {
              background: #000000 url(images/footer1.png) no-repeat;
              width: 696px;
              height: 97px;
              margin-left: 20%;
              padding:0;
}
#bodyhome {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
	      			font-size: 35px;
              padding-top:20%;
              padding-left:57%;
							
}
#bodyshows {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
	      			font-size: 35px;
              padding-top:1%;
							padding-left:57%;							
}
#bodybio {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
	      			font-size: 35px;
							padding-top:1%;
	      			padding-left:57%;
	                     							
}
#bodyphotos {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
	      			font-size: 35px;
							padding-top:1%;
              padding-left:57%;
							
}
#bodyforum {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
	     				font-size: 35px;
							padding-top:1%;
              padding-left:57%;
							
}
#bodyenter {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
	      			font-size: 35px;
              margin-left:45%;
							
}
#copyright {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
	      			font-size: 12px;
	      			margin-left:44%;
}

#NDEnter{
				 			float:left;
}

#centered{
							margin:0 auto;
}

edit: This is what you see in a 1024px wide monitor in IE7

*Screen shot has been shrunk to 85% so you can see it.

Andrew

Aug 7 2008, 07:30 PM

Looks like this on my computer, FF3 and IE8 (in ie7 compatibility mode)

k.digennaro

Aug 7 2008, 07:46 PM

hmmmm, is your montior like 800px? I really want optimize this layout to work in various screen sizes, but iono what else to do, ive done everything i could think of. Any suggestions?

I think the problem is that the ads are 120 px wide each so thats, 240 pxs, plus the layout which is 695px wide. This design only works on monitors over 1000pxs wide... wat can i do to make it 'work'? Should i simply resize the images in the layout and make it like 500pxs wide?

Thanks,
Kevin

edit:............... i resized the images to 500pxs wide and thers not a visible change on my monitor, but its still not working on a 800px monitor.... all the margin and padding is done with %s so that shouldnt be affecting anything, total i have an ad on the left thats 120px plus the center layout which is 500px plus the right ad thats another 120px. shouldnt this fit? thats only 740px.

k.digennaro

Aug 7 2008, 09:41 PM

hmmmm seems like thers a differnece now, it really doesnt look good on my screen... its no longer centered and its tiny...

Andrew

Aug 7 2008, 09:55 PM

Looks good on my 1024x768 screen.

k.digennaro

Aug 7 2008, 11:29 PM

man iono wats going on, this just isnt working the way i want it to, i just basically want everything center. But I cant seem to get it so it will work. I think my code most be wrong somewhere, or somethings gotta be changed to make it more fluid does any one see my mistake? or know what i can do to fix this?

Thanks so much,
Kevin

CODE

*{margin: 0px; padding:0px;}

body {
              background-color: #000000;
}

a{
							color:white;
							text-decoration:none;
}

#container {
    			    height:0 auto;
              width:0 auto;
							margin:0 auto; 
							padding:0;
							float:left;	 
}

#ads1{
		 					float:left;
}

#ads2{
		 					float:right;
}

#wrap{
						
}

#header {
              background: #000000 url(images/header2.png) no-repeat;
              width: 600px;
              height: 92px;
              margin-left: 35%;
							margin-top:5%;
	      			padding:0;
}
#dfdd{
							
}
#center {
              background: #000000 url(images/center2.png) no-repeat;
              width: 600px;
              height: 306px;
							margin:0 auto; 
							padding:0;
							float:left;
}
#footer {
              background: #000000 url(images/footer2.png) no-repeat;
              width: 600px;
              height: 84px;
              margin-left: 35%;
							padding:0;
}
#bodyhome {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
	      			font-size: 35px;
              padding-top:20%;
              padding-left:57%;
							
}
#bodyshows {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
	      			font-size: 35px;
              padding-top:1%;
							padding-left:57%;							
}
#bodybio {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
	      			font-size: 35px;
							padding-top:1%;
	      			padding-left:57%;
	                     							
}
#bodyphotos {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
	      			font-size: 35px;
							padding-top:1%;
              padding-left:57%;
							
}
#bodyforum {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
	     				font-size: 35px;
							padding-top:1%;
              padding-left:57%;
							
}
#bodyenter {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
	      			font-size: 35px;
              margin-left:45%;
							
}
#copyright {
              font:bold 11px/27px Arial, Helvetica, sans-serif;
              color: white;
	      			font-size: 12px;
	      			margin-left: 58%;
}

#NDEnter{
				 			float:left;
}

#NDEnter1{
				 			float:left;
}

#centered{
							margin:0 auto;
}

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Welcome to NascentDescent!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Welcome to NascentDescent.Com home of the heavy alternative rock band out of Cincinnati,Ohio. Check us out!">
<meta name="keywords" content="band, playing, good, started, shower stall, playing guitar, guitar, stall, friend, shower, been, start, recording, material, compared bands been, bands been, compared bands, fairly, along, newmusic, MUSIC, Music, Band, BAND, band, Rock, ROCK, rock, ALTERNATIVE, alternative, Alternative, TUNES, Tunes, tunes, nascent, NASCENT, Nascent, DESCENT, Descent, descent, Nascent-Descent, NASCENT-DESCENT, nascent-descent, ALTERNATIVE-ROCK, alternative-rock, Alternative-Rock, garage-band, GARAGE-BAND, Garage-Band, recording, RECORDING, Recording, unsigned, UNSIGNED, Unsigned, forum, FORUM, Forum, Forums, FORUMS, forums, artist, ARTIST, Artist, artists, ARTISTS, Artistsenjoy, freinds, long, music, times, andrew, grant, life, band, playing, grant andrew, long freinds, never forget, life long freinds, member band, freindships, rock, made, really, still, Album: Standing Tall Soon to come the release of our first album, "Standing Tall". Most of the songs on this album are about life and how it's always dragging people down with it. We've all had these experiences and all you can do is fight through them. I've always fought through them with my music and my sports. This album features about 11 tracks including: Scars, Paranoide, Sunny Days, and Rescheduled. All these songs speak strongly towards life and the goods and the bads of it. Just remember, Stay strong, Stand, team, street, street team, join, want, concerts, fans, want help, free, help may get, get, may get, help may, anything, help, may, unless, member, don\t, do">
<link rel="stylesheet" type="text/css" href="enter1.css" />			
</head>
<body>

<div id="ads1">
		 
		 <div id="NDEnter">
    		<script type="text/javascript"><!--
				google_ad_client = "pub-5055084209343908";
				/* Better ad */
				google_ad_slot = "0785774928";
				google_ad_width = 120;
				google_ad_height = 600;
				//-->
				</script>
				<script type="text/javascript"
				src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
				</script>
		</div>
</div>

<div id="ads2">		
		<div id="NDEnter1">
    		<script type="text/javascript"><!--
				google_ad_client = "pub-5055084209343908";
				/* ad4 */
				google_ad_slot = "1950704040";
				google_ad_width = 120;
				google_ad_height = 600;
				//-->
				</script>
				<script type="text/javascript"
				src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
				</script>
    </div>			
</div>

<div id="centered">
<div id="container">
  
	<div id="wrap">
		 <div id="header">
		 </div>

		 <div id="center">
		 						 <div id="bodyhome"><a href="http://www.reverbnation.com/nascentdescent">01 Home</a></div>
								 <div id="bodyshows"><a href="http://www.reverbnation.com/nascentdescent">02 Shows</a></div>
								 <div id="bodybio"><a href="http://www.reverbnation.com/nascentdescent">03 Bio</a></div>
								 <div id="bodyphotos"><a href="http://www.reverbnation.com/nascentdescent">04 Photos</a></div>
								 <div id="bodyforum"><a href="http://www.nascentdescent.com/phpBB-3.0.2/phpBB3">05 Forum</a></div>
		 </div>
    
		 <div id="footer">
		 <div id="bodyenter"><a href="http://www.reverbnation.com/nascentdescent">Enter</a></div>
		 </div>

		 <div id="copyright">Copyright 2008 DiGennaroDesigns All rights reserved</div>

</div>
</div>
</div>


</body>
</html>