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]
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):
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
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.
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?