How do i do this?

**maxiscool** · Sep 28, 2007, 21:50

Look at revision3.com (using as an example.) How do I get that same raised page in the center of the browser window effect with css?

**bdude** · Sep 28, 2007, 22:02

That would be a centered div. To center a div use

HTML Code:

<div style='margin: 0 auto'>

**Centauri** · Sep 29, 2007, 00:06

It is simply this background image in the centre of the body, and the container div that holds everything is centred as bdude suggested :

Code:

#container {
	font-size: 85%;
	line-height: 1.6em;
	position: relative;
	width: 770px;
	margin: 40px auto;
}

Pretty simple stuff.

**Dr John** · Sep 29, 2007, 04:18

You don't even need a background image - just two slightly different colours for the body background and the centred container background. simpler, and easier to play around with variations in colour.

**maxiscool** · Sep 29, 2007, 08:19

and how do I get it so that the container looks raised?

**Paul O'B** · Sep 29, 2007, 09:02

and how do I get it so that the container looks raised?

Unless we are misunderstanding your exact meaning I think your question has been answered very nicely in the above posts.

The raised effect is just part of the background image. Make an image as shown in Centauris post and the repeat it vertically on the body at the central position. Then place your page layout on top to match.

Code:

body {
    background: #000 url(background.jpg) repeat-y center top;
}

**maxiscool** · Sep 29, 2007, 09:29

the effect is not coded. it is just a differential between the colors, right?

**Centauri** · Sep 29, 2007, 19:15

If you look VERY closely at the graphic, it has a shadow effect either side of the central colour - this is what makes it look as though the central area is raised.

**maxiscool** · Sep 30, 2007, 21:13

ok, I am one step closer. I have figured out how to make it centered, but now how do I make the surrounding space a different color?

Here is my CSS.

Code:

/*
CSS
*/

body {
  line-height: 125&#37;;
  padding: 15px;
  background-color: #1A1A1A
}

#container {
  width: 800px;
  margin: 0px auto;
}

p {
  color: #FFF;
  margin: 15px;
}

#tagline p {
  color:#5C5C5C;
  font-family: hevletica, veranda;
  text-align: center;
  font-weight: bold;
}

h1 {
  font-family: hevletica, veranda;
  color: #5C5C5C;
  text-align: center;
}
  
#navigation {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
  border-top: 1px solid #363636;
  z-index: 1;
}

#navigation ul {
  list-style-type: none;
  text-align: center;
  margin-top: -8px;
  padding: 0;
  position: relative;
  z-index: 2;
}

#navigation li {
  display: inline;
  text-align: center;
  margin: 0 5px;
}

#navigation li a {
  padding: 1px 7px;
  color: #666;
  background-color: #fff;
  border: 1px solid #ccc;
  text-decoration: none;
}

#navigation li a:hover {
  color: #000;
  border: 1px solid #666;
  boder-top: 2px solid #666;
  border-bottom: 2px solid #666;
}

#navigation li a:selected {
  color: #000;
  border: 1px solid #666;
  border-top: 2px solid #666;
  border-bottom: 2px solid #666;
}

and here is my xhtml

Code:

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Home - Mr.Guy666.com</title>

<meta http-equiv="Content-Type" content="text/html; charset= utf-8" />

<link href="favicon.ico" rel="SHORTCUT ICON" />


<link href="style1.css" rel="stylesheet" type="text/css" />

<!--[if IE]>

<link href="iestyle1.css" rel="stylesheet" type="text/css" />

<![endif]-->


</head>

<div id="container">

<body>

<div id="header">

<h1>Mr.Guy666</h1>

</div>

<div id="tagline">

<p>Flash Artist</p>

</div>

<div id="navigation">

<ul id="navlist">
	<li><a href="index.html">Home Page</a></li>

	<li><a href="movies.html">Movies</a></li>

	<li><a href="about.html">About</a></li>

	<li><a href="contact.html">Contact</a></li>

</ul>

</div>

<div id="bodycontent">

<p>Text Goes Here.<p>

</div>

</body>

</div>

</html>

**Paul O'B** · Oct 1, 2007, 02:23

Hi,

I believe we have already told you this a number of times now but it obviously isn't sinking in

Either we are bad at explaining or you are not listening

In your code where is the link to the image that is repeated vertically on the body to give the different colour to that centre section?

If you look at #post3 and #post #6 they both point to an image that is repeated on the body to give the illusion of a middle column (which isn't the best way to do this but will work).

Code:

body {
    background: #000 url(background.jpg) repeat-y center top;
}

If you just want your container a different color then change the background color on the container instead but it won't stretch to the bottom automatically.

Hope that helps

**maxiscool** · Oct 1, 2007, 07:20

sorry if I seem like a dunce, guys. A few minutes after I posted my source, I figured it out, and I did not bother to take it off.

**maxiscool** · Oct 1, 2007, 21:52

Here is my latest problem: I just put a navigation list into my site using this tut:" http://css.maxdesign.com.au/listamatic/horizontal19.htm
and the "active" part is not working for me.

It says in the tut that there will be a selected effect, but in the xhtml, he makes it so that it is always one tab that appears seleced.

Here is both my xhtml and CSS, with the important parts in bold.

Code:

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Home </title>

<meta http-equiv="Content-Type" content="text/html; charset= utf-8" />

<link href="favicon.ico" rel="SHORTCUT ICON" />


<link href="style1.css" rel="stylesheet" type="text/css" />

<!--[if IE]>

<link href="iestyle1.css" rel="stylesheet" type="text/css" />

<![endif]-->


</head>


<body>

<div id="container">

<div id="header">

<h1>Mr.Guy666</h1>

</div>

<div id="tagline">

<p>Flash Artist</p>

</div>

<div id="navigation">

<ul id="navlist">
	<li><a href="index.html">Home Page</a></li>

	<li><a href="movies.html">Movies</a></li>

	<li><a href="about.html">About</a></li>

	<li><a href="contact.html">Contact</a></li>

</ul>

</div>

<div id="bodycontent">

<p>Text Goes Here.<p>


</div>

<div id="footer">

<p>&copy;Mr.Guy 2007. Designed by Max Norman</p>

</div>

</div>

</body>


</html>

And the CSS:

Code:

/*
CSS for Mr.Guy666.com
*/

body {
  line-height: 125%;
  padding: 15px;
  background-color: #1F1F1F;
}

#container {
  width: 800px;
  margin: 0px auto;
  background-color: #1A1A1A;
}

p {
  color: #FFF;
  margin: 15px;
}

#tagline p {
  color:#5C5C5C;
  font-family: hevletica, veranda;
  text-align: center;
  font-weight: bold;
}

h1 {
  font-family: hevletica, veranda;
  color: #5C5C5C;
  text-align: center;
  padding: 5px;
}
  
#navigation {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
  border-top: 1px solid #363636;
  z-index: 1;
}

#navigation ul {
  list-style-type: none;
  text-align: center;
  margin-top: -8px;
  padding: 0;
  position: relative;
  z-index: 2;
}

#navigation li {
  display: inline;
  text-align: center;
  margin: 0 5px;
}

#navigation li a {
  padding: 1px 7px;
  color: #666;
  background-color: #fff;
  border: 1px solid #ccc;
  text-decoration: none;
}

#navigation li a:hover {
  color: #000;
  border: 1px solid #666;
  boder-top: 2px solid #666;
  border-bottom: 2px solid #666;
}

#navigation li a:selected {
  color: #000;
  border: 1px solid #666;
  border-top: 2px solid #666;
  border-bottom: 2px solid #666;
}

#footer {
  background-color: #2E2E2E;
  font-size: x-small;
  padding: 0px;
}

**Tyssen** · Oct 1, 2007, 22:43

It should be #navigation li a.selected, not #navigation li a:selected and you need to add a class in your HTML for whichever link is to be selected.

**maxiscool** · Oct 1, 2007, 22:54

thanks man. I get it now!

The SitePoint Forums have moved.

User Tag List

Thread: How do i do this?

Thread Tools

Display

How do i do this?

Bookmarks

Bookmarks

Posting Permissions