Latest Lists

Home > Html Lists Bullet Information > Html Lists Bullet Knowledge Base > CSS TEMPLATE WON'T WORK IN HTML?

CSS TEMPLATE WON'T WORK IN HTML?

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/html-templates 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: <<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-... <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs"> <head><link rel ="stylesheet" type="text/css" href="Natvrdo.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"/> </html> </head> <body> <h1>Ester Vision</h1> </body> <p>Kosmetika Pro Vás</p> <h2>Menu</h2> <ul id="Nabídka Služeb" #navigation { margin: 0 10em 0 0; } #navigation li { display: inline; padding: 0 5em 0 5em; }> <li><a href = "PÉČE O OBLIČEJ">PÉČE O OBLIČEJ</a></li> <li><a href = "#c1">PÉČE O TĚLO</a></li> <li><a href = "#c1">BEAUTY SHOP</a></li> <li><a href = "#c1">NAPSALI O NÁS</a></li> <li><a href = "#c1">DALŠÍ</a></li> <li><a href = "#c1">FOTOGALERIE</a></li> <li><a href = "#c1">KONTAKT</a></li> </ul> This is PINK CSS by itself, and I have all the pictures and files uploaded in the index. 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. The first answers: Thanks for help, but it is just so complicated for me, could you just show me the "re=done" version, because I really am stuck on "this here is wrong, put this here and that in there" CAN SOMEONE PLEASE REWRITE THE WHOLE THING FOR ME CORRECTLZ PLEASE? I am sitting on the PC for two days, looking at various tutorials and still not achieving anything. I did what Mr. TOP Contributor said and still it does not look like the Pink Stripe Layout. Grah. I hate when my relatives ask me to make their webpages with beauty products when I barely know HTML and CSS. So, please, anyone, if you are willing to rewrite the ENTIRE THING so it IS AT LEAST COMPLETELY SAME AS THE PINK STRIDE WEBBIE, please do so. I'm going insane now.

Public Comments

  1. For one thing, you have an extra open angle bracket (<) before your doctype statement at the very top. Plus, I don't think you can put a stylesheet id reference such as this <ul id="Nabídka Služeb" #navigation { margin: 0 10em 0 0; } #navigation li { display: inline; padding: 0 5em 0 5em; }> in a tag. You should also check for other syntactical problems. You have to be extremely detail-oriented. One missed bracket or semi-colon can make the page render incorrectly or not at all.
  2. EDIT: It does work as I said at the bottom edit, but you have to leave the rest of the index file intact. The only thing you want to change on the template html file is the text that's between the <tags></tags> and the hrefs on the links. If you change any images, you need to do it in the css file, and you may need to make other changes if the sizes are different on the images. --------------------------------- You have: #navigation { margin: 0 10em 0 0; } #navigation li { display: inline; padding: 0 5em 0 5em; }> in the <ul> tag. You should have left the #navigation styles in the css and added id="navigation" to the <ul> as in <ul id="navigation"> Edit: actually, the id is for a div, see below. # in the css indicates an id that should be used in the html tags except for colors, e.g. #B5D5D0 is a hexidecimal color. . indicates a class. I don't see any, but the css is kind of jumbled. From what I can see, it looks like all of the IDs are for divs that will be the containers for everything like your navigation list. <div id="navigation"> should precede the list and </div> should go after it. I was wrong about using it in the <ul> because I didn't look at the css closely. Edit: you need to stick with the index.html file that's in the zip and just edit between tags. Your nav sidebar should look like this. <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> with "index.html" changed to the names of the pages, e.g. beauty.html, assuming that's what the "Beauty Shop" page is saved as. I would also lose the caps, but that's just me.
Powered by Yahoo! Answers