CSS example from w3schools

Discussion in 'CSS' started by Delboy Trotter, Jul 11, 2010.

  1. #1
    Need to divide this CSS example into html+css: http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_nav

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <style type="text/css">
    #navlist{position:relative;}
    #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
    
    #home{left:0px;width:46px;}
    #home{background:url('img_navsprites_hover.gif') 0 0;}
    #home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
    
    #prev{left:63px;width:43px;}
    #prev{background:url('img_navsprites_hover.gif') -47px 0;}
    #prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
    
    #next{left:129px;width:43px;}
    #next{background:url('img_navsprites_hover.gif') -91px 0;}
    #next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
    </style>
    </head>
    
    <body>
    <ul id="navlist">
      <li id="home"><a href="default.asp"></a></li>
      <li id="prev"><a href="css_intro.asp"></a></li>
      <li id="next"><a href="css_syntax.asp"></a></li>
    </ul>
    </body>
    </html>
    Code (markup):
    How should CSS part look and how html?[/QUOTE]
     
    Delboy Trotter, Jul 11, 2010 IP
  2. MervinJ

    MervinJ Peon

    Messages:
    60
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Everything between the [style] tags is CSS the rest is HTML
     
    MervinJ, Jul 11, 2010 IP
  3. Xabber

    Xabber Active Member

    Messages:
    437
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    58
    #3
    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    
    <head>
    
    <link rel="stylesheet" type="text/css" href="yourcssfile.css" media="screen"  />
    
    </head>
    
    <body>
    
    <ul id="navlist">
    
      <li id="home"><a href="default.asp"></a></li>
      <li id="prev"><a href="css_intro.asp"></a></li>
      <li id="next"><a href="css_syntax.asp"></a></li>
    
    </ul>
    
    </body>
    
    </html>
    Code (markup):
    CSS:
    #navlist{position:relative;}
    #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
    
    #home{left:0px;width:46px;}
    #home{background:url('img_navsprites_hover.gif') 0 0;}
    #home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
    
    #prev{left:63px;width:43px;}
    #prev{background:url('img_navsprites_hover.gif') -47px 0;}
    #prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
    
    #next{left:129px;width:43px;}
    #next{background:url('img_navsprites_hover.gif') -91px 0;}
    #next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
    Code (markup):
     
    Xabber, Jul 11, 2010 IP
  4. Delboy Trotter

    Delboy Trotter Active Member

    Messages:
    122
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #4
    Yes, but where should I put it? In .css file, for example: in CSS document div#header {HERE} and for HTML part <div id="header">HERE</div> or how?

    Thanks for help very much ;)
     
    Delboy Trotter, Jul 12, 2010 IP
  5. Frost1

    Frost1 Well-Known Member

    Messages:
    519
    Likes Received:
    23
    Best Answers:
    7
    Trophy Points:
    165
    #5
    You can either choose to place the CSS in an external file or in the style tags of your web page.

    I would suggest using an external file if you are using more than one page for your website, ;)

    For External Use :

    Copy and paste the CSS into your note pad and give it an extension ".css". Then upload the file to your website host.

    After doing this, paste the link to your external CSS file in the web page that you're using:

    <link rel="stylesheet" type="text/css" href="style.css" />
    Code (markup):
    Replace the text 'style.css' with the file name and use it in the head tags of your web page. Then, add the content between the body tags of your web page.

    For Single Page Use :

    If you're only going to create one web page, then you can place the CSS between the style tags of your web page.

    <style type="text/css">
    
    CSS Should Be Pasted Here
    
    </style>
    Code (markup):
    Then you can place the content that's going to be displayed by a browser between the body tags of your web page.
     
    Frost1, Jul 12, 2010 IP
  6. Delboy Trotter

    Delboy Trotter Active Member

    Messages:
    122
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #6
    yes, I know that, but how should I put it because I tried few variants (with,without div, with and without ##'s) and it doesn't work?
     
    Delboy Trotter, Jul 12, 2010 IP
  7. sanhit

    sanhit Peon

    Messages:
    318
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    @Frost1: Nice explanation for starters, do u have some time, want to discuss about PSD to CSS.
     
    sanhit, Jul 23, 2010 IP