SitePoint Sponsor |
|
User Tag List
Results 1 to 14 of 14
Thread: How do i do this?
-
Sep 28, 2007, 21:50 #1
- Join Date
- Sep 2007
- Posts
- 128
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
How do i do this?
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?
-
Sep 28, 2007, 22:02 #2
- Join Date
- Jan 2006
- Location
- In a house.
- Posts
- 92
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
That would be a centered div. To center a div use
HTML Code:<div style='margin: 0 auto'>
SUPPORT FOR NEW BLOGGERS - TRY THE Blogging Forum
-
Sep 29, 2007, 00:06 #3
- Join Date
- May 2007
- Location
- Newcastle, Australia
- Posts
- 3,718
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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; }
-
Sep 29, 2007, 04:18 #4
- Join Date
- Jul 2003
- Location
- Kent
- Posts
- 1,921
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
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.
Dr John
www.kidneydialysis.org.uk
-
Sep 29, 2007, 08:19 #5
- Join Date
- Sep 2007
- Posts
- 128
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
and how do I get it so that the container looks raised?
-
Sep 29, 2007, 09:02 #6
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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; }
-
Sep 29, 2007, 09:29 #7
- Join Date
- Sep 2007
- Posts
- 128
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
the effect is not coded. it is just a differential between the colors, right?
-
Sep 29, 2007, 19:15 #8
- Join Date
- May 2007
- Location
- Newcastle, Australia
- Posts
- 3,718
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Sep 30, 2007, 21:13 #9
- Join Date
- Sep 2007
- Posts
- 128
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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%; 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>
-
Oct 1, 2007, 02:23 #10
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
I believe we have already told you this a number of times now but it obviously isn't sinking inEither 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; }
Hope that helps
-
Oct 1, 2007, 07:20 #11
- Join Date
- Sep 2007
- Posts
- 128
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Oct 1, 2007, 21:52 #12
- Join Date
- Sep 2007
- Posts
- 128
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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>©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; }
-
Oct 1, 2007, 22:43 #13
- Join Date
- Oct 2005
- Location
- Brisbane, QLD
- Posts
- 4,067
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Oct 1, 2007, 22:54 #14
- Join Date
- Sep 2007
- Posts
- 128
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
thanks man. I get it now!
Bookmarks