5 Replies - 698 Views - Last Post: 30 September 2008 - 01:29 AM

#1 ivanjay205  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 03-September 08

Web Site will not Center

Posted 19 September 2008 - 08:50 AM

For some reason I cannot get my web site to center using the normal methods.

Here is the master asp page for the web site:

<%@ Master Language="VB" %>

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

<script runat="server">

</script>
<script type="text/javascript" src="scripts/marquee.js"></script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title>Studio-e Design Group Intranet</title>
	<link rel="stylesheet" href="stylesheet.css" type="text/css" />	
</head>
<body>
<form id="form1" runat="server">
<div id="container">
	<div id="header">
	</div>
	<div id="menu">
	</div>
	<div class="externallinks">
		<table>
			<tr><th colspan="12">
				<br />ELECTRONIC REFERENCE MATERIAL
				</th></tr><tr><td>&nbsp;</td></tr>
			<tr>
				<td><img alt="Graphic Standards" src="Images/Graphic_Standards.gif" /></td>
				<td><img alt="Building Codes" src="Images/Building_Codes.gif" /></td>
				<td><a href="Data/ADA_Standards.pdf" target="_blank"><img alt="ADA Guidelines" src="Images/ADA_Guidelines.gif" /></td>
				<td><a href="http://www.djec.org/aia_clg/index.htm" target="_blank"><img alt="AIA Layering" src="Images/AIA_Layering.gif" /></a></td>
				<td><a href="Data/BOMA_Guidelines.htm" target="_blank"><img alt="BOMA Guidelines" src="Images/BOMA_Guidelines.gif" /></a></td>
				<td> <a href="http://www.nfpa.org/aboutthecodes/list_of_codes_and_standards.asp" target="_blank"><img alt="NFPA Manual" src="Images/NFPA_Manual.gif" /></a> </td>
				<td><a href="http://products.construction.com/portal/server.pt?open=512&objID=204&PageID=252&cached=true&mode=2&querySearch=drywall&searchSource=IS" target="_blank"><img alt="Sweets Catalog" src="Images/Sweets_Catalog.gif" /></a></td>
				<td><a href="http://www.epa.gov/greenbuilding/" target="_blank"><img alt="Green Building" src="Images/Green_Buildings.gif" /></a></td>
				<td><a href="http://www.merriam-webster.com/" target="_blank"><img alt="Websters Dictionary" src="Images/Websters_Dictionary.gif" /></a></td>
				<td><a href="http://thesaurus.reference.com/" target="_blank"><img alt="Roget's Thesaurus" src="Images/Rogets_Thesauraus.gif" /></a></td>
				<td><img alt="Tips and Tricks" src="Images/Tips_And_Tricks.gif" /></td>
				<td><img alt="Help Desk" src="Images/Help_Desk.gif" /></td>
			</tr><tr>
				<td>Graphics Standards</td>
				<td>Building Codes</td>
				<td>ADA Guidelines</td>
				<td>AIA Layering</td>
				<td>BOMA Guidelines</td>
				<td>NFPA Manual</td>
				<td>Sweets Catalog</td>
				<td>Green Building</td>
				<td>Websters Dictionary</td>
				<td>Roget's Thesaurus</td>
				<td>Tips and Tricks</td>
				<td>Help Desk</td>
			</tr>
		</table>
	</div>			
	<div class="internallinks">
		<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
		
		</asp:ContentPlaceHolder>
	</div>
</div>
</form>
</body>
</html>


Here is the stylesheet

p
{
	font-family: 'Times New Roman';
	font-size: medium;
	font-weight: normal;
	color: #FFFFFF;
}
body
{
	background-image: url( '/Images/STRINGGY_GIF.jpg' );
	text-align:center;
}
a
{
	font-family: 'Times New Roman';
	color: #FFFFFF;
	text-decoration: none;
}
img
{
	border-style: none;
	width: 56px;
	height: 70px;
	text-align: center;
}
ul
{
	line-height: 35px;
}
#header
{
	height: 148px;
	width: 1012px;
}
#menu
{
	height: 27px;
	width: 1009px;
}
.externallinks
{
	height: 262px;
	width: 1012px;
	text-align: center;
}
.internallinks
{
	height: 339px;
	width: 1013px;
}
.four_column_layout
{
	float:left;
	width:25%;
	text-align:left;
	height: 248px;
}
#container
{
	background-image: url('Images/background.jpg');
	background-repeat: no-repeat;
	font-family: 'Times New Roman';
	color: #FFFFFF;
	font-size: large;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	height: 779px;
	width: 1019px;
}


Thanks!!

This post has been edited by ivanjay205: 19 September 2008 - 08:52 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Web Site will not Center

#2 marcells23  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 6
  • View blog
  • Posts: 143
  • Joined: 22-August 07

Re: Web Site will not Center

Posted 19 September 2008 - 09:02 AM

try adding

margin-left:auto;
margin-right:auto;

to the container css
Was This Post Helpful? 0
  • +
  • -

#3 ivanjay205  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 03-September 08

Re: Web Site will not Center

Posted 19 September 2008 - 10:33 AM

View Postmarcells23, on 19 Sep, 2008 - 09:02 AM, said:

try adding

margin-left:auto;
margin-right:auto;

to the container css


Thank you so much, that worked perfectly. It has been killing me trying to figure it out!
Was This Post Helpful? 0
  • +
  • -

#4 b.ihde  Icon User is offline

  • D.I.C for life
  • member icon

Reputation: 44
  • View blog
  • Posts: 1,070
  • Joined: 29-September 08

Re: Web Site will not Center

Posted 29 September 2008 - 07:21 AM

another question:

is it possible to fix the problem that way?? :

Create another div (like div.center) in CSS with
text-align: center;

and put the content to center in this div element..

thanks for comments!
Was This Post Helpful? 0
  • +
  • -

#5 jaxx751  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 18-September 08

Re: Web Site will not Center

Posted 29 September 2008 - 09:14 AM

View Postb.ihde, on 29 Sep, 2008 - 07:21 AM, said:

another question:

is it possible to fix the problem that way?? :

Create another div (like div.center) in CSS with
text-align: center;

and put the content to center in this div element..

thanks for comments!


I believe that should work just fine. text-align: center; should apply to any child elements in the div. So if you have:

.center {
text-align: center;
width: 100%;
}

.image {
background-image: url(image.jpg);
width: 60px;
height: 60px;
}

[...]

<div class="center">

<div class="image">
</div>

</div>



the div that is the image will be centered within the div "center." Beyond that any text inside of "image" will NOT be centered... It's its own element and you can apply it's own style to it. I suggest that instead of creating a div to center something as this can cause problems down the line if you have super complex code, is instead do this:

.image {
background-image: url(image.jpg);
width: 60px;
height: 60px;
margin: 0 auto;
}

[...]

<div class="image">
</div>



hope that makes sense, and I'm right as well... heh. been a while since I've designed websites.

edit: nevermind. this doesn't work because the image is a background.... don't listen to me.. :(

it's times like these where it would be beneficial to memorize the box model. http://www.w3.org/TR/CSS2/box.html

This post has been edited by jaxx751: 29 September 2008 - 09:16 AM

Was This Post Helpful? 0
  • +
  • -

#6 b.ihde  Icon User is offline

  • D.I.C for life
  • member icon

Reputation: 44
  • View blog
  • Posts: 1,070
  • Joined: 29-September 08

Re: Web Site will not Center

Posted 30 September 2008 - 01:29 AM

hey Jaxx thanks for that comment!

In my created website, i did use the "center-div" to center other divs
and even images. Just everything within the "center-div" gets centered.

an example:
<div class="center">

<img src="Path/" alt="Image" />
</div>



Your right, if my code gets bigger and bigger, i would use the the margin function. It is much easyer to keep the overview :)

Of course the text of another div within the "center-div" will not be centered. But the question was about how to center the elements of the website, so it doesn't matter :P
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1