Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Newbee help- centering a box

Status
Not open for further replies.

DaRNCaT

Technical User
Dec 18, 2002
566
NZ
This is the second time I've used CSS to build a site, the first time, everything was in absolute positioning, so it was easy.
This time, I want to center the content in the equivilent of a 1px boarder table (table stays the same size, background expands, table stays in center of page)
I've got the box class, which *seems* to work ok so far- although I'm not entirly sure if I'm doing it right. But if I center it, it centers EVERYTHING, and I just want the outside holding box centered. Do I center everything, and align everything else to the left, or is their an easier way?
also, I'm confused as to what I should be using- static, relative, etc, I don't want to use absolute, as it's got to move with the page.

Before anyone says google and wcc I did, I don't understand most of the stuff I've found, I think I'm just TOO used to tables.(plus I couldn't find anything on centering)

Code:
.box {
	background-color: #FFFFFF;
	border: 1px solid #000000;
	width: 760px;
	height: 100%;
	position: static;

}
body {
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	background-color: #FFCC00;
}
.imagespace {
	position: static;
	padding: 10px;



}

The imagespace class, I'm trying to get some spacing between the header images, but it's not doing anything.

cheers.

----------------------------------------
Sometimes, when my code just won't behave, I take it outside and make it listen to britney spears music, and when it comes back it's really well behaved. I wonder if it's suffering from post tramatic stress syndrome now..
 
To horizontally center your box, you need to do two things.
1. Center the box for CSS supporting standards-complaint browsers (Mozilla, Opera, FF, IE6 with correct doctype)
2. Center the box to cater for other browsers (IE5.5 and below)

Note that you should always put one of the correct doctypes at the beginning of the page to force clients to use standards-compliant rather than quirks mode. Change your code like this:
Code:
body {
    font-family: Arial, Helvetica, sans-serif;
    color: #000000;
    background-color: #FFCC00;
    text-align: center; /* catering for IE5.5 and older */
}

.box {
    text-align: left; /* so that text is not centered anymore */
    background-color: #FFFFFF;
    border: 1px solid #000000;
    width: 760px;
    height: 100%;
    position: static;
    margin: 0 auto; /* meaning top and bottom margins are 0, left and right are auto, which centers the box in standard browsers */

}
.imagespace {
    padding: 10px;
    position: static;
}
 
By correct doctypes I assume you mean

Code:
<red><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"></red>
<html>
<head>
<title>CSS Layout trial 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="layout.css" rel="stylesheet" type="text/css">

I'm also having problems with a: links, I used a tutorial which showed how to create link sytles for seperate areas, but it isn't working for me, I guess it's something simple as I've expanded on what they have shown.
Basically I want to make nice rollover buttons without using images, so, boxes with a boarder, changes colour with the states. It shows the box, no background colour, and the link is standard browser default.

Code:
.nav {
	padding: 2px;
	height: 17px;
	width: 112px;
	border: 1px solid #000000;
}
.nav a:link {
	color: #000000;
	text-decoration: none;
	background: #FFCC00;
	font-size: 10px;
	font-weight: bold;
}/*normal links in the text*/
.nav a:visited {
	color: #000000;
	text-decoration: none;
	background: #FFCC66;
	font-size: 10px;
	font-weight: bold;
}
.nav a:hover {
	color: #000000;
	text-decoration: underline;
	background: #66CCFF;
	font-size: 10px;
	font-weight: bold;
}
.nav a:active {
	color: #000000;
	text-decoration: underline;
	background: #FFFFFF;
	font-size: 10px;
	font-weight: bold;
}


in the html I'm testing it like so::

<a class="nav" href="#">link</a>

----------------------------------------
Sometimes, when my code just won't behave, I take it outside and make it listen to britney spears music, and when it comes back it's really well behaved. I wonder if it's suffering from post tramatic stress syndrome now..
 
A correct doctype is one of these, using both lines to include the URI of the base document.

Without the second line IE will be in "quirks" mode. The second line sets "standards" mode which means it (almost) behaves correctly.

to use the
Code:
<a class="nav" href="#">link</a>
the definition should be
Code:
a.nav:link {
with
Code:
.nav a:link {
you use
Code:
<div class="nav">
<a href="#">link</a>
</div>



Chris.

Indifference will be the downfall of mankind, but who cares?
A website that proves the cobblers kids adage.
Nightclub counting systems

So long, and thanks for all the fish.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top