[Help] CCS Question

March 1, 2005

Hey everyone-

I have a CSS template that I made that I'd like to use for a website. The issue here is that it's built for 1024x 768 resolution; therefore, any computer using a higher resolution than that sees my website in the top left corner of their browser. Is there any code that I can use to center the entire site in the center of the browser window? Thanks for any help.

-godpunk

March 1, 2005

You can center it horizontally very easily by adding a:

margin-left: 50%;

margin-right: auto;

to the main container selector.

You will also need to add text-align:center; so that IE listens to that centering statement, it will treat the selector attribute that apparently affects text only. The downside to this is that any inherited text alignment in the contained selectors in the main container will be set to center, so you will need to specify from thereon where you want your text to be, right, center or left.

Vertically however is not an easy thing to do as internet explorer will crap on your vertical alignment.

Hope that helps.

EDIT: I am sure they make much more sense at Simplebits

March 2, 2005

Hmm...well I did what the link told me to, and no dice. Am I just being retarded? would posting the entire code here help?

-godpunk

March 2, 2005

I thought to center it it would be

body {margin: 0 auto 0 auto;}

But in order for that to work in Internet Explorer, you need to add as the first line

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

March 2, 2005

Or the html doctype for that matter. (and yes, Wizard, you couldve done it that way too )

Post the code, Godpunk, lets see what we can do.

March 3, 2005

you merely need some code like this:

body { text-align:center; margin:0; }

#container { margin: 0 auto; }

with your xHTML doctype on the top, and a container div with that id in the body..

March 3, 2005

isnt that basically what has been said? :confused:

March 3, 2005

isnt that basically what has been said? :confused:

No...you said margin-left: 50%, and wizard didn't mention text-align center.

Oh. BTW, you should change your text align for the things inside of the container div, else they be centered!

March 3, 2005

ergo, it had been said, right?

even your extra tip... you seem to be posting only redundantly nowadays

March 4, 2005

Ok, sorry for the delay; here is the code as it stands...the attempted modifications are included. Hopefully someone will be able to see where i went wrong!

<html>

<head><title>A Treasure Trove of Crap</title>





<style type="text/css">



A:link

{ font-family: Verdana; font-size: 10; font-weight: bold; text-decoration: none; color:#FFF04E; }

A:visited

{ font-family: Verdana; font-size: 10; font-weight: bold; text-decoration:none; color:#FFF04E; }

A:active

{ font-family: Verdana; font-size: 10; font-weight: bold; text-decoration: line-through; color:#FFF04E; }

A:hover

{ font-family: Verdana; font-size: 10; font-weight: bold; color: white;

	text-decoration: none; }

   </style>





<style type="text/css">

<!--

BODY {

font-family: Verdana;

font-size: 10;

color:black;

scrollbar-face-color: #222222;

scrollbar-highlight-color: #222222;

scrollbar-3dlight-color: #222222;

scrollbar-darkshadow-color: #222222;

scrollbar-shadow-color: #222222;

scrollbar-arrow-color: #FFF04E;

scrollbar-track-color: #222222;

}



.container {

   margin-left: 50%;

   margin-right: auto;

   } 



.entriesdate {

		font-family: Verdana, Helvetica, Tahoma;

	font-size: 12 px;

	color:#FFFFFF; 

		letter-spacing:0.1em;

		font-weight:bold; 

		text-align:center;}

.entriestitle {

	font-family: Verdana, Helvetica, Tahoma;

	font-size: 12 px;

	color:#000000;

		letter-spacing:0.1em;

		font-weight:bold;

		text-align:center;}

.navtitle {

	font-family: Verdana, Helvetica, Tahoma;

	font-size: 12 px;

	color:#FFFFFF; 

	text-decoration:none; 

	letter-spacing:0.3em; 

	font-weight:bold; 

	text-align:center; }

.sidebar {

		font-family: Verdana;

	font-size: 10 px;

	color:#000000;}

-->



</STYLE>



</head>

<body>

   <div id="container">

<body bgcolor="#000000">

<img name="index" src="http://www.digikitten.com/playhousev2/files/godpunk/crap.jpg"  STYLE="position: absolute; Z-INDEX: 1; LEFT: 0px; TOP: 0px">

<div id="Layer1" style="position:absolute; left:115px; top:141px; width:535px; height:409px; overflow: auto; padding: 5px; z-index:2; filter: chroma(color=#222222);">



	<p> </p>

<Blogger>



<BlogItemTitle><p class="entriestitle"><u><$BlogItemTitle$></u></p></BlogItemTitle>

<BlogDateHeader><p class="entriesdate"><$BlogDateHeaderDate$></p></BlogDateHeader>

<$BlogItemBody$>




<div align="right">

<BlogItemCommentsEnabled>

   <a href="<$BlogItemCommentCreate$>" 

   <$BlogItemCommentFormOnClick$>>

   <$BlogItemCommentCount$> comments</a>

</BlogItemCommentsEnabled>

</div>




<div align="center">__________________________________________________________________</div>




<Br>





</blogger>

</div>



<div id="Layer1" style="position:absolute; left:769px; top:141px; width:195px; height:419px; overflow:auto; z-index:2; filter: chroma(color=#222222)"> 

  <p class="navtitle">About Adam</p>

  <div align="center"><p class="sidebar">I'm 22 and in my senior year at Carroll College in Helena, Montana. After I graduate, I hope to spend my career getting Democrats elected.</p></div>

<p class="navtitle">Today I Feel...</p>



<div align="center"><a href="http://www.unkymoods.com" target="_top"><img src="http://www.unkymoods.com/moodimgsrv.php?mID=44758"  border=0></a></div>

<p class="navtitle">Instant Messenger</p>

<div align="center"><p class="sidebar">click to add me</p></div>

<div align="center">

<!-- Begin Online Status Indicator code -->

<!-- http://www.onlinestatus.org/ -->

<A HREF="http://snind.gotdns.com:8080/message/msn/rhythm_rock_shocker@hotmail.com">

<IMG SRC="http://snind.gotdns.com:8080/msn/rhythm_rock_shocker@hotmail.com"

align="absmiddle" border="0" ALT="MSN Online Status Indicator"

onerror="this.onerror=null;this.src='http://snind.gotdns.com:8080/image/msnunknown.gif';"></A>

<!-- End Online Status Indicator code -->





<!-- Begin Online Status Indicator code -->

<!-- http://www.onlinestatus.org/ -->

<A HREF="aim:goim?screenname=iliveforweez">

<IMG SRC="http://snind.gotdns.com:8080/aim/iliveforweez"

align="absmiddle" border="0" ALT="AIM Online Status Indicator"

onerror="this.onerror=null;this.src='http://snind.gotdns.com:8080/image/aimunknown.gif';"></A>

<!-- End Online Status Indicator code -->





<!-- Begin Online Status Indicator code -->

<!-- http://www.onlinestatus.org/ -->

<A HREF="ymsgr:sendIM?godpunk935">

<IMG SRC="http://snind.gotdns.com:8080/yahoo/godpunk935"

align="absmiddle" border="0" ALT="Yahoo Online Status Indicator"

onerror="this.onerror=null;this.src='http://snind.gotdns.com:8080/image/yahoounknown.gif';"></A>

<!-- End Online Status Indicator code --></div>

  <p> </p>

  <p>


  </p>

  </div>



</body>

</html>

</div>

 </body>

-godpunk

March 4, 2005

and

March 4, 2005

Try this:

<html>

<head>
	<title>A Treasure Trove of Crap</title>
	<style type="text/css">

	a:link { 
		font-family: Verdana; 
		font-size: 10; 
		font-weight: bold; 
		text-decoration: none; 
		color:#FFF04E; 
	}

	a:visited {
		font-family: Verdana; 
		font-size: 10; 
		font-weight: bold; 
		text-decoration:none; 
		color:#FFF04E; 
	}

	a:active { 
		font-family: Verdana; 
		font-size: 10; 
		font-weight: bold; 
		text-decoration: line-through; 
		color:#FFF04E; 
	}

	a:hover { 
		font-family: Verdana; 
		font-size: 10; 
		font-weight: bold; 
		color: white;
		text-decoration: none; 
	}

	body {
		font-family: Verdana;
		font-size: 10;
		background-color: #000;
		color:black;
		scrollbar-face-color: #222222;
		scrollbar-highlight-color: #222222;
		scrollbar-3dlight-color: #222222;
		scrollbar-darkshadow-color: #222222;
		scrollbar-shadow-color: #222222;
		scrollbar-arrow-color: #FFF04E;
		scrollbar-track-color: #222222;
	}

	#container {
		position: absolute;
		left: 50%;
		margin-left: -515

	} 

	.entriesdate {
		font-family: Verdana, Helvetica, Tahoma;
		font-size: 12 px;
		color:#FFFFFF; 
		letter-spacing:0.1em;
		font-weight:bold; 
		text-align:center;
	}

	.entriestitle {
		font-family: Verdana, Helvetica, Tahoma;
		font-size: 12 px;
		color:#000000;
		letter-spacing:0.1em;
		font-weight:bold;
		text-align:center;
	}

	.navtitle {
		font-family: Verdana, Helvetica, Tahoma;
		font-size: 12 px;
		color:#FFFFFF; 
		text-decoration:none; 
		letter-spacing:0.3em; 
		font-weight:bold; 
		text-align:center; 
	}

	.sidebar {
		font-family: Verdana;
		font-size: 10 px;
		color:#000000;
	}

	</style>
</head>

<body>
	<div id="container">
		<img name="index" src="http://www.digikitten.com/playhousev2/files/godpunk/crap.jpg"  STYLE="position: absolute; Z-INDEX: 1; LEFT: 0px; TOP: 0px">
		<div class="Layer1" style="position:absolute; left:115px; top:141px; width:535px; height:409px; overflow: auto; padding: 5px; z-index:2; filter: chroma(color=#222222);">
			<p></p>
			<Blogger>
				<BlogItemTitle>
					<p class="entriestitle">
						<u><$BlogItemTitle$></u>
					</p>
				</BlogItemTitle>
				<BlogDateHeader>
					<p class="entriesdate"><$BlogDateHeaderDate$></p>
				</BlogDateHeader>
				<$BlogItemBody$>


					<div align="right">
						<BlogItemCommentsEnabled>
							<a href="<$BlogItemCommentCreate$>" 
							<$BlogItemCommentFormOnClick$>>
							<$BlogItemCommentCount$> comments</a>
						</BlogItemCommentsEnabled>
					</div>


					<div align="center">__________________________________________________  ________________</div>




			</Blogger>
		</div>
		<div class="Layer1" style="position:absolute; left:769px; top:141px; width:195px; height:419px; overflow:auto; z-index:2; filter: chroma(color=#222222)"> 
			<p class="navtitle">About Adam</p>
			<div align="center">
				<p class="sidebar">
					I'm 22 and in my senior year at Carroll College in Helena, 
					Montana. After I graduate, I hope to spend my career getting 
					Democrats elected.
				</p>
			</div>
			<p class="navtitle">Today I Feel...</p>
			<div align="center">
				<a href="http://www.unkymoods.com" target="_top">
					<img src="http://www.unkymoods.com/moodimgsrv.php?mID=44758"  border=0>
				</a>
			</div>
			<p class="navtitle">Instant Messenger</p>
			<div align="center">
				<p class="sidebar">click to add me</p>
			</div>
			<div align="center">
				<!-- Begin Online Status Indicator code -->
				<!-- http://www.onlinestatus.org/ -->
				<a href="http://snind.gotdns.com:8080/message/msn/rhythm_rock_shocker@hotmail.com">
					<img src="http://snind.gotdns.com:8080/msn/rhythm_rock_shocker@hotmail.com" align="absmiddle" border="0" ALT="MSN Online Status Indicator" onerror="this.onerror=null;this.src='http://snind.gotdns.com:8080/image/msnunknown.gif';">
				</a>
				<!-- End Online Status Indicator code -->
				<!-- Begin Online Status Indicator code -->
				<!-- http://www.onlinestatus.org/ -->
				<a href="aim:goim?screenname=iliveforweez">
					<img src="http://snind.gotdns.com:8080/aim/iliveforweez" align="absmiddle" border="0" ALT="AIM Online Status Indicator" onerror="this.onerror=null;this.src='http://snind.gotdns.com:8080/image/aimunknown.gif';">
				</a>
				<!-- End Online Status Indicator code -->
				<!-- Begin Online Status Indicator code -->
				<!-- http://www.onlinestatus.org/ -->
				<a href="ymsgr:sendIM?godpunk935">
					<img src="http://snind.gotdns.com:8080/yahoo/godpunk935" align="absmiddle" border="0" ALT="Yahoo Online Status Indicator" onerror="this.onerror=null;this.src='http://snind.gotdns.com:8080/image/yahoounknown.gif';">
				</a>
				<!-- End Online Status Indicator code -->
			</div>
			<p> </p>
			<p>


			</p>
		</div>
	</div>
</body>
</html>

March 4, 2005

I have an issue with your scrollbar color CSS that is for IE...

But anyways, you didn't try what I suggested. (and the thing wizard said)

Anyways, I can't read your code wholly, because it stretches the layout so far I can't possible scroll and view at the same time on my 1024x768 12" screen...

March 4, 2005

Hi Tadis-

Thanks for the work you did...unfortunately I can't try it out because I can't seem to copy the new code in the browser! :S

Is there any way you could dump it into a text file and attach it to the boards? It's kinda lame how 'Select All' won't work in the window without selecting the entire page. Thanks!

-godpunk

March 4, 2005

here you go bud, just rename to html

New.txt

March 5, 2005

Thanks Tadis, that worked great!

Now I know Seph said vertical alignment is harder because of explorer being finicky, but does anyone know anything about this? I'd like to align it vertically too, if possible. Thanks again for all your help, everyone!

-godpunk

March 5, 2005

if you are using HTML and not xHTML you can do

but I highly unrecommened it!!!

March 5, 2005

Do you know where in the code I would place that? Thanks.

-godpunk

March 5, 2005

God, someone needs to fix this code view. I couldnt read past teh first paragraph... and i have a considerably big res...

GodPunk: I suggest you avoid using the vertical alignment as the only way to go about it (That i have encountered) is to give the container a fix height (this way you know exactly where you place it) which will ruin accesibility (people will see a messed up site when zooming, and when visiting with smaller than planned browsers)

Personally, I would avoid this method. If you absolutely must have vertical alignment and cannot do without it, then a table-based hack is probably the best way to go. Otherwise, I'd just put some extra padding on the top of the body, as vertical centering will only make much difference if you have a gimongous monitor (and they deserve to be punished because they make me jealous anyway )

[Help] CCS Question

Recommended Posts

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Please sign in to comment