Jump to content


Box Layout using CSS problem?

Started by Dekkon, Jul 15 2008 03:16 AM

3 replies to this topic

#1 Dekkon

    Young Padawan

  • Members
  • Pip
  • 5 posts

Posted 15 July 2008 - 03:16 AM

I was trying to get a layout similar to this: http://nettuts.s3.am..._Form/demo.html

Here is what I have so far [Index.htm]:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Scam List</title>
</head>
<body>
	<div class="main">
	<a id="right" href="register.php">Register</a>
	</div>
</body>
</html>

[Style.css]:
@charset "utf-8";
/* CSS Document */

body {
	font: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;  
}

#main {
	border-style: solid;
	border-width: 3px;
	background-color: #999999;
}

.right {
	text-align: right; 
}

I am a beginner, but how do I get that box shape form and it aligned in the middle.

Thanks.

#2 Apache

    P2L Jedi

  • Twodded Staff
  • PipPipPip
  • 778 posts
  • Location:London, UK

Posted 22 July 2008 - 11:24 AM

Hi Dekkon,

this is a simple case of you have your ID's and Classes mixed up. In your HTML, your div has a CLASS of main, however in your CSS, the hash (#) means ID. Your link has an ID of right assigned, however in CSS, a period (.) infront of a name means that it is a CLASS.

# = ID
. = CLASS

Give this a read if you are still confused: http://www.w3.org/TR...html#class-html

#3 derek.sullivan

    Jedi In Training

  • Members
  • PipPip
  • 341 posts
  • Gender:Male
  • Location:Georgia
  • Interests:preaching, programming, music, friends, outdoors, moves, books

Posted 22 July 2008 - 11:27 AM 

<style type="text/css">
#main {

background-color: #FFFFFF;
border: #CCCCCC 1px solid;
padding: 2px;
margin: 0 auto;

}
</style>

<div id="main">
Content Here
</div>

#4 Ghost

    Honored P2L Member

  • P2L Staff
  • PipPipPip
  • 675 posts
  • Gender:Male
  • Location:Australia

Posted 22 July 2008 - 10:20 PM

View Postbigdfbc2008, on Jul 23 2008, 02:27 AM, said:

<style type="text/css">
#main {

background-color: #FFFFFF;
border: #CCCCCC 1px solid;
padding: 2px;
margin: 0 auto;

}
</style>

<div id="main">
Content Here
</div>
That's only going to center it in Firefox. For IE, you'll want to set the text-align to center for body, then to left for the content.

So something more along the lines of:

css
body{
margin: 0;
padding: 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#main{
margin: 20px auto 0 auto;
text-align: left;
width: 744px;
border: 1px solid #959596;
background: #fff;
padding: 8px;
}

html
<div id='main'>
Content goes here...
</div>

Back to Programming and General Web Design · Next Unread Topic →


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users

  1. Pixel2Life Forum
  2. → Help Section
  3. → Programming and General Web Design