SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Zealot
    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?
    Check out my blog at http://maxnorman.net
    Need advice? Go to http://askthekid.org

  2. #2
    SitePoint Enthusiast bdude's Avatar
    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

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    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;
    }
    Pretty simple stuff.

  4. #4
    SitePoint Wizard
    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.

  5. #5
    SitePoint Zealot
    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?
    Check out my blog at http://maxnorman.net
    Need advice? Go to http://askthekid.org

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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;
    }

  7. #7
    SitePoint Zealot
    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?
    Check out my blog at http://maxnorman.net
    Need advice? Go to http://askthekid.org

  8. #8
    SitePoint Wizard bronze trophy Centauri's Avatar
    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.

  9. #9
    SitePoint Zealot
    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&#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>
    Check out my blog at http://maxnorman.net
    Need advice? Go to http://askthekid.org

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 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 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

  11. #11
    SitePoint Zealot
    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.
    Check out my blog at http://maxnorman.net
    Need advice? Go to http://askthekid.org

  12. #12
    SitePoint Zealot
    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>&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;
    }
    Check out my blog at http://maxnorman.net
    Need advice? Go to http://askthekid.org

  13. #13
    SitePoint Wizard bronze trophy Tyssen's Avatar
    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.

  14. #14
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks man. I get it now!
    Check out my blog at http://maxnorman.net
    Need advice? Go to http://askthekid.org


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •