silver_wolves 0 Report post Posted October 24, 2007 can anyone interperate the following CSS for me? i am learning currently, but i found a website that i like and it has a menu bar that i like. its a pretty simtinyple thing. if you put the code in a WYSIWIG (i dont know if i spelled it right) then thats what i want to know how to do in CSS. so i am going to provide some html and some css. the html has what i want the result to be, the css is the stye sheet that the web page used.html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;<html xmlns="https://w3.org/1999/xhtml/ ; <link rel="stylesheet" type="text/css" href=; /></head><body> <div id="header"> <div id="menucontainer"> <ul id="nav-one" class="nav"><li class="chosen" ><a id="firstmenu" class="chosen" href=""><li ><a href="index.php?action=tpmod;dl">Downloads</a></li><li><a href=""></li><li ><a href="index.php?board=85.0">Docs</a></li><li ><a href="index.php?action=themeshop">ThemeShop</a></li><li ><a href="index.php?action=bugtracker">Bugtracker</a></li></ul> </body></html> CSS: /* Normal, standard links. */a:link{ color: #050; text-decoration: none;}a:visited{ color: #050; text-decoration: none;}a:hover{ text-decoration: underline;}/* Navigation links - for the link tree. */.nav, .nav:link, .nav:visited{ text-decoration: none;}a.nav:hover{ text-decoration: underline;}/* Tables should show empty cells. */table{ empty-cells: show;}/* By default (td, body..) use verdana in black. */body, td, th , tr{ color: #444; font-size: small; font-family: verdana, sans-serif;}/* The main body of the entire forum. */body{ background: url(images/background.jpg) 0 -1px repeat-x white; margin: 0; padding: 0;}/* Input boxes - just a bit smaller than normal so they align well. */input, textarea, button{ font-family: verdana, sans-serif; border-width: 1px; padding: 2px;}input, button{ font-size: 90%;}textarea{ font-size: 100%; font-family: verdana, sans-serif;}/* All input elements that are checkboxes or radio buttons. */input.check{}/* Selects are a bit smaller, because it makes them look even better 8). */select{ font-size: 90%; font-weight: normal; border-width: 1px; padding: 2px; font-family: verdana, sans-serif;}/* Standard horizontal rule.. ([hr], etc.) */hr, .hrcolor{ height: 1px; border: 0; color: #bbb; background-color: #bbb;}/* No image should have a border when linked */a img{ border: 0;}/* A quote, perhaps from another post. */.quote{ color: #000000; background-color: #D7DAEC; border: 1px solid #000000; margin: 1px; padding: 1px; font-size: x-small; line-height: 1.4em;}/* A code block - maybe even PHP . */.code{ color: #000000; background-color: #dddddd; font-family: "courier new", "times new roman", monospace; font-size: x-small; line-height: 1.3em; /* Put a nice border around it. */ border: 1px solid #000000; margin: 1px auto 1px auto; padding: 1px; width: 99%; /* Don't wrap its contents, and show scrollbars. */ white-space: nowrap; overflow: auto; /* Stop after about 24 lines, and just show a scrollbar. */ max-height: 24em;}/* The "Quote:" and "Code:" header parts... */.quoteheader, .codeheader{ color: #000000; text-decoration: none; font-style: normal; font-weight: bold; font-size: x-small; line-height: 1.2em;}/* Generally, those [?] icons. This makes your cursor a help icon. */.help{ cursor: help;}/* /me uses this a lot. (emote, try typing /me in a post.) */.meaction{ color: red;}/* The main post box - this makes it as wide as possible. */.editor{ width: 96%;}/* Highlighted text - such as search results. */.highlight{ background-color: yellow; font-weight: bold; color: black;}/* Alternating backgrounds for posts, and several other sections of the forum. */.windowbg{ background: #f9f9fa;}.windowbg2{ background: #fdfdfd;}.windowbg3{ background: #e9e9ea;}/* the today container in calendar */.calendar_today{}/* These are used primarily for titles, but also for headers (the row that says what everything in the table is.) */.titlebg, tr.titlebg th, tr.titlebg td, .titlebg2, tr.titlebg2 th, tr.titlebg2 td{ color: #D6DAE1; font-style: normal; background: #535353; padding-left: 10px; padding-right: 10px;}.titlebg, .titlebg a:link, .titlebg a:visited, tr.titlebg td a.navPages, td.titlebg table td{ font-weight: bold; color: #D6DAE1; font-style: normal;}.titlebg a:hover{ color: #f6fAE1;}/* same as titlebg, but used where bold text is not needed */.titlebg2 a:link, .titlebg2 a:visited{ color: #D6DAE1; font-style: normal; text-decoration: underline;}.titlebg2 a:hover{ text-decoration: underline;}/* This is used for categories, page indexes, and several other areas in the forum..catbg and .catbg2 is for boardindex, while .catbg3 is for messageindex and display headers*/.catbg , tr.catbg td , .catbg3 , tr.catbg3 td{ background: #ccc; color: #000; padding-left: 10px; padding-right: 10px;}.catbg2 , tr.catbg2 td{ background: #ccc; color: #000; padding-left: 10px; padding-right: 10px;}.catbg, .catbg2, .catbg3{}.catbg, .catbg2{ font-weight: bold;}.catbg3, tr.catbg3 td, .catbg3 a:link, .catbg3 a:visited{ font-size: 95%; text-decoration: none;}.catbg a:link, .catbg a:visited , .catbg2 a:link, .catbg2 a:visited{ text-decoration: none;}.catbg a:hover, .catbg2 a:hover, .catbg3 a:hover{ color: #900000;}/* This is used for tables that have a grid/border background color (such as the topic listing.) */.bordercolor{ background-color: #ccc; padding: 0px;}/* This is used on tables that should just have a border around them. */.tborder{}/* Default font sizes: small (8pt), normal (10pt), and large (14pt). */.smalltext{ font-size: x-small; font-family: verdana, sans-serif;}.middletext{ font-size: 90%;}.normaltext{ font-size: small;}.largetext{ font-size: large;}/* Posts and personal messages displayed throughout the forum. */.post, .personalmessage{ width: 100%; overflow: auto; line-height: 1.3em;}/* All the signatures used in the forum. If your forum users use Mozilla, Opera, or Safari, you might add max-height here . */.signature{ width: 100%; overflow: auto; padding-bottom: 3px; line-height: 1.3em;}/* Sometimes there will be an error when you post */.error{ color: red;}/* definitions for the main tab, active means the tab reflects which page is displayed */.maintab_first, .maintab_back, .maintab_last, .maintab_active_first, .maintab_active_back, .maintab_active_last{ color: #a1a1a1; text-transform: lowercase; vertical-align: top;}.maintab_back, .maintab_active_back{ color: #a1a1a1; text-decoration: none; font-size: 11px; vertical-align: top; padding: 2px 2px 6px 2px; font-family: tahoma, sans-serif; font-weight: bold;}.maintab_first{ display: none;}.maintab_back{}.maintab_last{ display: none;}.maintab_active_first{ display: none;}.maintab_active_back{ background: #555;}.maintab_active_last{ display: none;}/* how links behave in main tab. */.maintab_back a:link , .maintab_back a:visited{ color: #a1a1a1; text-decoration: none;}.maintab_active_back a:link , .maintab_active_back a:visited{ color: #87f2fD; text-decoration: none; letter-spacing: 2px;}.maintab_back a:hover, .maintab_active_back a:hover{ text-decoration: overline;}/* definitions for the main tab, active means the tab reflects which page is displayed */.mirrortab_first, .mirrortab_back, .mirrortab_last, .mirrortab_active_first, .mirrortab_active_back, .mirrortab_active_last{ color: #a1a1a1; text-transform: lowercase; vertical-align: top;}.mirrortab_back, .mirrortab_active_back{ color: #a1a1a1; text-decoration: none; font-size: 11px; vertical-align: top; padding: 6px; font-family: tahoma, sans-serif; font-weight: bold;}.mirrortab_first{ display: none;}.mirrortab_back{}.mirrortab_last{ display: none;}.mirrortab_active_first{ display: none;}.mirrortab_active_back{ background: #555;}.mirrortab_active_last{ display: none;}/* how links behave in main tab. */.mirrortab_back a:link , .mirrortab_back a:visited{ color: #a1a1a1; text-decoration: none;}.mirrortab_active_back a:link , .mirrortab_active_back a:visited{ color: #fff; text-decoration: none; letter-spacing: 2px;}.mirrortab_back a:hover, .mirrortab_active_back a:hover{ text-decoration: overline;}/* The AJAX notifier */#ajax_in_progress{ background: #32CD32; color: white; text-align: center; font-weight: bold; font-size: 18pt; padding: 3px; width: 100%; position: fixed; top: 0; left: 0;}#topl{ background: url(images/img/leftbg.jpg) no-repeat;}#topr{ background: url(images/img/rightbg.jpg) top right no-repeat;}#botr{ padding: 116px 40px 100px 170px;}#bodyarea{ padding: 20px; overflow: auto;}#footerarea{ padding: 10px; border: solid 1px #bbb; background: #f8f8fa; width: 80%; margin: 0 auto 10px auto; text-align: center;}#header{ margin: 0 auto 0 auto; background: url(images/back.jpg) repeat-x white;}h1{ margin: 0 auto 0 auto; padding: 0; background: black;}/* Navigation */#nav-one{ float: right; margin-right: 1em;}.nav, .nav ul { list-style: none; margin: 0; padding: 0;}.nav { font-family: Arial, Helvetica, sans-serif; z-index: 99; position: relative;}.nav li { float: left; margin: 0; padding: 0 0 0 15px; background: url(images/menuleft.jpg) top left no-repeat; position: relative;}.nav li a, .nav li a:link, .nav li a:active, .nav li a:visited { color: #BEBEBE; font: 1em/25px Arial, Helvetica, sans-serif; display: block; padding: 3px 15px 0 0px; text-transform: lowercase; text-decoration: none; background: url(images/menuright.jpg) top right no-repeat; height: 50px; font-weight: bold;}* html .nav li a{ width: 1%;}.nav li a:hover{ color: white;}.nav li.chosen { background: url(images/menuleft_active.jpg) top left no-repeat;}.nav li a.chosen, .nav li a.chosen:link, .nav li a.chosen:active, .nav li a.chosen:visited { color: white; background: url(images/menuright_active.jpg) top right no-repeat;}ul#second{ position: absolute; z-index: 100; right: 10em; top: 110px; list-style: none;}* html ul#second{ top: 122px; list-style: none;}ul#second li{ float: left;}ul#second li a{ background: #F1F2F4; border: solid 1px #bbb; border-right: none; display: block; padding: 2px 5px 2px 5px; font-size: 0.9em;}ul#second li a:hover, ul#second li a.chosen{ background: #445; text-decoration: none; color: white; border: solid 1px #000; border-right: none;}#linktree{ font-size: 0.9em; margin: 0.5em 1em 0 3em;}#spellingForm, .popupText{ background: #fff;}.clearblocks{ overflow: auto;}* html .clearblocks{ height: 1%;}/* some styles for articles */.bloczone h1{ background: none; font-size: 18px; font-weight: normal; padding: 5px 0 5px 0; margin: 5px 0 5px 0; border-bottom: solid 1px #bbb;}.bloczone h2{ background: none; font-size: 13px; font-weight: bold; padding: 5px 0 5px 0; margin: 5px 0 5px 0; border-bottom: solid 1px #bbb;}.bloczone h3{ background: none; font-size: 11px; font-weight: bold; padding: 5px 0 5px 0; margin: 5px 0 5px 0;}.bloczone p.header2{ padding: 5px 0 5px 0; margin: 5px 0 5px 0;}.bloczone .infobox ul{ list-style: none; padding: 10px; margin: 0; font-size: 11px; width: 320px;}.bloczone .infobox ul li{ background: url(images/TPdivider.gif) 4px 2px no-repeat; padding-left: 16px;}.bloczone .infobox ul.tpnews li{ background: url(images/tpgoto.gif) 0 2px no-repeat; padding-left: 16px;} the main thing i want is to know how to make those tabs. and a breakdown of what everything means would be cool to, because W3Schools doesnt explain everything, i just get the fundamentals of it, i dont know what everything relates to. Share this post Link to post Share on other sites
sonesay 7 Report post Posted October 24, 2007 (edited) That type of menu is very common on the web. the css code you posted dosent seem to match the html file. <link rel="stylesheet" type="text/css" href="http://forums.xisto.com/no_longer_exists/; /> that css file was way to long I didnt want to look through it all i just did a search for 'menucontainer' which the menu uses and it wasnt in there.I found this example thats similar and the code is short maybe you should have a look. The images used are different but layout seems the same and less code.http://www.dynamicdrive.com/style/csslibraoors-tabs-menu/ Edited October 25, 2007 by sonesay (see edit history) Share this post Link to post Share on other sites
Saint_Michael 3 Report post Posted October 25, 2007 Yeah its got the menu there but the rest is somewhat jibberish because you don't have the html to correspond with it, but the rest of the CSS code has to do what the layout looks like once you put in the divs or span in for the rest of the site. Of course it would help of you have the original layout to see what it looks like. However I did remove everything that was needed for the menu <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://forums.xisto.com/no_longer_exists/ xmlns="http://forums.xisto.com/no_longer_exists/ Document</title><style>/* Navigation */#nav-one {float:right;margin-right:1em;}* html .nav li a {width:1%;}.nav {font-family:Arial, Helvetica, sans-serif;z-index:99;position:relative;}.nav li {float:left;background:url(images/menuleft.jpg) top left no-repeat;position:relative;margin:0;padding:0 0 0 15px;}.nav li a,.nav li a:link,.nav li a:active,.nav li a:visited {color:#BEBEBE;font:1em/25px Arial, Helvetica, sans-serif;display:block;text-transform:lowercase;text-decoration:none;height:50px;font-weight:700;padding:3px 15px 0 0;}.nav li a:hover {color:#000;}.nav,.nav ul {list-style:none;margin:0;padding:0;}</style></head><body><div id="header"><div id="menucontainer"><ul id="nav-one" class="nav"> <li class="chosen" ><a id="firstmenu" class="chosen" href="http://forums.xisto.com/no_longer_exists/; <li><a href="http://forums.xisto.com/no_longer_exists/&action=forum; <li ><a href="index.php?action=tpmod;dl">Downloads</a> </li> <li><a href="http://forums.xisto.com/no_longer_exists/&page=29; </li> <li ><a href="index.php?board=85.0">Docs</a> </li> <li ><a href="index.php?action=themeshop">ThemeShop</a></li> <li ><a href="index.php?action=bugtracker">Bugtracker</a></li></ul></body></html> Share this post Link to post Share on other sites
