Connecting Tech Pros Worldwide Forums | Help | Site Map

Css Template Won't Work In Html?

Newbie
 
Join Date: Sep 2008
Posts: 2
#1: Sep 13 '08
My domain: http://www.esthevision.cz/

This is the cause of my problem.
The template is supposed to look somewhat like this: PINK STRIPE
http://themebot.com/website-templates/ht...
I created an extra copy of it called Natvrdo, since I modified the logo.

Okay, I have this in my HTML (Natvrdo being the CSS style sheet)
This is what I have in my index.html:

Expand|Select|Wrap|Line Numbers
  1. <<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-...
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
  3. <head><link rel ="stylesheet" type="text/css" href="Natvrdo.css"/>
  4. <title>Esthevision.cz</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6. <meta name="description" content=""/>
  7. <meta name="keywords" content=""/>
  8. <meta name="expires" content="never"/>
  9. <meta name="distribution" content="global"/>
  10. <meta name="rating" content="general"/>
  11. <meta http-equiv="Cache-control" content="no-cache"/>
  12. <meta http-equiv="msthemecompatible" content="yes"/>
  13. <meta http-equiv="ImageToolBar" content="no"/>
  14.  
  15.  
  16. </html>
  17. </head>
  18. <body>
  19. <h1>Ester Vision</h1>
  20. </body>
  21. <p>Kosmetika Pro Vás</p> 
  22. <h2>Menu</h2> 
  23.  
  24. <ul id="Nabídka Služeb"
  25. #navigation { margin: 0 10em 0 0; }
  26. #navigation li { display: inline; padding: 0 5em 0 5em; }> 
  27. <li><a href = "PÉČE O OBLIČEJ">PÉČE O OBLIČEJ</a></li> 
  28.  
  29. <li><a href = "#c1">PÉČE O TĚLO</a></li> 
  30.  
  31. <li><a href = "#c1">BEAUTY SHOP</a></li>
  32.  
  33. <li><a href = "#c1">NAPSALI O NÁS</a></li> 
  34.  
  35. <li><a href = "#c1">DALŠÍ</a></li>
  36.  
  37. <li><a href = "#c1">FOTOGALERIE</a></li> 
  38.  
  39. <li><a href = "#c1">KONTAKT</a></li> 
  40. </ul> 

This is PINK CSS by itself, and I have all the pictures and files uploaded in the index.

Expand|Select|Wrap|Line Numbers
  1. body { margin: 0; padding: 0; background: #7F6D79 url(../images/b1r.jpg) repeat-x; font-family: Georgia, "Times New Roman", Times, serif; font-size: 12px; color: #E3F3F5;} select, input, textarea { background-color: #A29390; border: 1px solid #5B3D3F; color: #5B3D3F; width: 280px; font-family: arial, tahoma, verdana, helvetica, sans serif; font-size: 9pt;} h1, h2, h3 { font-weight: normal; margin: 20px 0 10px; } margin-top: 0; font-weight: normal; } h1 { font-size: 32px; margin-bottom: 0px; margin-top: 10px; } font-size: 197%; color: #E788C2;} h2 { font-size: 28px; } font-size: 136%; color: #A8B4BE} h3 { font-size: 16px; } font-size: 100%; color: #381616; font-weight: bold;} h4 { font-size: 20px; } font-size: 105%; color: #A8B4BE; }p ul { list-style-image: url(images/bullet.jpg); } abbr, acronym { font-style: normal; border-bottom: 1px dotted #333333; cursor: help; } del { text-decoration: line-through; color: #999999; } ins { text-decoration: none; color: #009977; } ol { margin-bottom: 1.6em; line-height: 180%;} p {} blockquote { color: #EBE3EA;} ul {} ol {} a:link { text-decoration: none; color: #AAD0D0; } a: visited { text-decoration: none; color: #B5D5D0; } a:hover, a:active { color: #93BFBF;text-decoration: underline; } text-decoration: none;} small {} #header { width: 700px; height: 77px; margin: 0 auto;} /* Logo */ #logo { float: left; background: url(../images/aha.jpg) no-repeat;} #logo h1, #logo h2 { margin: 0;} #logo h1 { padding-left: 38px; font-size: 300%;} #logo h2 { padding-left: 35px;} #logo a { text-decoration: none; color: #7F7772;} #motif { float: right; width: 100px; padding-top: 20px; padding-left: 10px;} #menu { width: 700px; height: 50px; margin: 0 auto;} #menu ul { margin: 0; padding: 15px 0 0 0; list-style: none;} #menu li { display: inline;} #menu a { display: block; float: left; padding: 0 15px 0 15px; background: url(../images/menn.jpg) no-repeat left center; text-align: center; text-decoration: none; font-size: 154%; color: #D3B1B1;} #menu a:hover { color: #FFFFFF; background: url(../images/menn.jpg) repeat-x;} #menu .active a { color: #E47FB9; } #page { clear: both; width: 720px; margin: 0 auto 20px auto; padding: 120px 0 0 0; background: url(../images/top.jpg) no-repeat;} #content { float: right; width: 510px; padding: 10px 10px 20px 10px; background: #867480 url(../images/content.jpg) no-repeat} #content a { color: #C5C3C7;} .title { font-weight: normal; border-bottom-width: 0; font-size: 24px; text-decoration: none; } padding-bottom: 5px;.titles a:link, .titles a:visited, .titles a:active { text-decoration: none; font-size: 24px; font-weight: normal; border-bottom-width: 0; } #content ul { list-style: circle; font-size: 85%;} .list { margin-left: 0; padding-left: 0; list-style: none;} .list li { padding-left: 10px; } #sidebar { float: left; vertical-align: top width: 151px; padding: 22px 10px 30px 10px; background: #867480 url(../images/sidebar.jpg) no-repeat} #sidebar ul { margin: 0; padding: 0; list-style: none;} #sidebar li {} #sidebar li ul {} #sidebar li li { padding: 5px 0;} #sidebar h2 { font-size: 114%; font-weight: bold; color: #B5D5D0} #sidebar h3 { margin: 0;} #sidebar p { margin: 0; line-height: normal;} #sidebar a { text-decoration: none; } #sidebar a:hover { color: #
Now can someone PLEASE tell me why it won't work? I've done all the steps and as you can see, the background and letters and it's colors partially show.
ANd if it is emty (the template, can someone fill it in with headers and banners and logos and tabs and what not? I could modify or change it afterwards. I'm pretty much stuck here.
SO Please and Thank You Very Much?

Oh yeah, the tabs, the clickable links and the pictures should be or at least try to same as the pink stripe design.
SO why won't the links I made won't show as tabs? Someone please work (do) it for me.

eWish's Avatar
Moderator
 
Join Date: Jul 2007
Location: Arkansas
Posts: 900
#2: Sep 13 '08

re: Css Template Won't Work In Html?


Validate you markup. This can not be said enough. Correct your HTML and CSS errors. Once you have done that post back if you are still having problems. Also, be sure to use a standards compliant browser.

Last but not least when posting code samples here at Bytes you are expected to use the code tags. Please do so in the future.

--Kevin
Newbie
 
Join Date: Sep 2008
Posts: 2
#3: Sep 13 '08

re: Css Template Won't Work In Html?


Quote:

Originally Posted by eWish

Validate you markup. This can not be said enough. Correct your HTML and CSS errors. Once you have done that post back if you are still having problems. Also, be sure to use a standards compliant browser.

Last but not least when posting code samples here at Bytes you are expected to use the code tags. Please do so in the future.

--Kevin

I am new to this and "markup validation" is a big ??? for me, as well that I do not know what HTML and CSS errors I made.
Code tags? I apologize to that, I hope I will do it next time.
Thank You.
Expert
 
Join Date: Aug 2008
Posts: 397
#4: Sep 14 '08

re: Css Template Won't Work In Html?


The w3c - The World Wide Web Consortium address is w3c
The w3c Markup Validation Service address is markup validation service
The w3c CSS Validation Service address is: css validation service

Plug your markup and css in the above appropriate validation service.The validator will tell you what errors you have made. Correct the errors, and bring it back. If you do not understand how to correct the errors, bring it back and someone may be able to help peck away at them...
drhowarddrfine's Avatar
Expert
 
Join Date: Sep 2006
Posts: 5,575
#5: Sep 14 '08

re: Css Template Won't Work In Html?


Compare this with what you have. I found your errors using the validator above but you need to notice your duplication of tags that trips up even the validator.
[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs"> <head><link rel="stylesheet" type="text/css" href="pink.css"/> <title>Esthevision.cz</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="description" content=""/> <meta name="keywords" content=""/> <meta name="expires" content="never"/> <meta name="distribution" content="global"/> <meta name="rating" content="general"/> <meta http-equiv="Cache-control" content="no-cache"/> <meta http-equiv="msthemecompatible" content="yes"/> <meta http-equiv="ImageToolBar" content="no"/> </head> <body> <h1>Ester Vision</h1> <p>Kosmetika Pro V�s</p> <h2>Menu</h2> <div id="sidebar"> <ul> <li><a href="index.html">P��E O OBLI�EJ</a></li> <li><a href="index.html">P��E O T�LO</a></li> <li><a href="index.html">BEAUTY SHOP</a></li> <li><a href="index.html">NAPSALI O N�S</a></li> <li><a href="index.html">DAL��</a></li> <li><a href="index.html">FOTOGALERIE</a></li> </ul> </div> </body> </html>[/html]
Reply


Similar HTML / CSS bytes