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?
Printable View
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?
That would be a centered div. To center a div use
HTML Code:<div style='margin: 0 auto'>
It is simply this background image in the centre of the body, and the container div that holds everything is centred as bdude suggested :Pretty simple stuff.Code:#container {
font-size: 85%;
line-height: 1.6em;
position: relative;
width: 770px;
margin: 40px auto;
}
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.
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.Quote:
and how do I get it so that the container looks raised?
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;
}
the effect is not coded. it is just a differential between the colors, right?
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.
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.
and here is my xhtmlCode:/*
CSS
*/
body {
line-height: 125%;
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;
}
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>
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).
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.Code:body {
background: #000 url(background.jpg) repeat-y center top;
}
Hope that helps :)
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.
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.
And the CSS: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>©Mr.Guy 2007. Designed by Max Norman</p>
</div>
</div>
</body>
</html>
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;
}
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.
thanks man. I get it now!