Mon, 2010-04-19 10:34
Hello, I am sorry for posting such a noobish question, but I hope that I'll get an answer if I'll post it how I should.
I am trying to create a site, while learning about all the stuff I need to know while creating it. I am using joomla as CMS and I've got 2 different .css files. Here they are...
menu.css :
/*set the z-index for the columns that gets dropped down over*/ #left{ z-index:20; } #right{ z-index:10; } /*set the position and z-index for the menu moduletable */ #nav{ position:relative; z-index:100; } /* style for the mainlevel's ul and sublevel's ul */ #nav ul.menu,#nav ul.menu ul{ list-style:none; margin:0; padding:0; float:left; } #nav ul.menu ul{ background:#ffd204 url(../images/dropdownbg.jpg) top left repeat-x; width:200px; border:#fff0ac 3px solid; } #nav ul.menu{ width:100%; background-color:#ffd202; } /*style for the mainlevel links*/ #nav ul.menu a{ display:block; padding:12px 16px; text-decoration:none; font-size:16px; font-weight:bold; color:#514300; } #nav ul.menu a:hover, #active_menu-top.mainlevel-top{ color:#947a00; background-color:#ffe04f; } /* mainlevel's li */ #nav ul.menu li{ float:left; padding:0; margin:0; background:none; } /*sublevel's ul */ #nav ul.menu li ul{ position:absolute; left:-999em; top:42px; /* equals to mainlevel's menu link's height */ height:auto; width:200px; margin:0; } /*sub sub level's ul */ #nav ul.menu li ul ul{ position:absolute; left:-999em; top:0; margin:0; margin-left:200px;/* equals to sublevel's menu link's width */ } /*sublevel's li*/ #nav ul.menu li li{ width:200px; margin:0; background:url(../images/dot.png) bottom left repeat-x; } /*sublevel's menu links */ #nav ul.menu li ul a{ float:left; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; font-weight:bold; padding:6px 20px; } html>body #nav ul.menu li ul a{width:160px;} #nav ul.menu li ul a:hover{ background:url(../images/dot.png) bottom left repeat-x; } /* for hiding the sub menus */ #nav ul.menu li:hover ul ul,#nav ul.menu li:hover ul ul ul,#nav ul.menu li.sfhover ul ul,#nav ul.menu li.sfhover ul ul ul{ left:-999em; } /* for showing the sub menus */ #nav ul.menu li:hover ul,#nav ul.menu li li:hover ul,#nav ul.menu li li li:hover ul,#nav ul.menu li.sfhover ul,#nav ul.menu li li.sfhover ul,#nav ul.menu li li li.sfhover ul{ left:auto; z-index:6000; } #nav ul.menu li li:hover,#nav ul.menu li li.sfhover{ background:url(../images/dot.png) bottom left repeat-x; /*subleel's li's background when hovering */ }
template.css :
/* CSS Document */ /*-----Global Reset-----*/ html, body, h1, h2, h3, h4, h5, h6, p, blockquote, form, label, ul, ol, dl, fieldset, address{margin:0; padding:0;} h1, h2, h3, h4, h5, h6, p, blockquote, form, label, ul, ol, dl, fieldset, address{ margin:0.5em 0;} li, dd{margin-left:1em;} fieldset{padding:0.5em;} img { border: none; } .clear { clear: both; } /*-----BACKGROUND COLOR/FONT SIZE AND COLOR-----*/ body { padding:0; background:#989898; font-size:12px; /* more consistent font sizes */ font-family:Arial, Helvetica, sans-serif; line-height:18px; /*helps readability*/ } /*-----ALL NON PARAGRAPH TEXT COLORS-----*/ td, p { color: #333; font-size:12px; } /*-----HEADINGS-----*/ h1, .componentheading{ font-size:21px; font-weight:bold; font-family:Georgia, "Times New Roman", Times, serif; line-height:25px;} h2, .contentheading{font-size:18px; font-weight:bold; font-family:Georgia, "Times New Roman", Times, serif; color:#5b8307; line-height:21px;} h3{font-size:14px; font-weight:bold; font-family:Georgia, "Times New Roman", Times, serif; line-height:20px;} h4{font-size:1.2em;} h5{font-size:1.1em;} .moduletable h3, .moduletable_menu h3{margin-top:0;} /*-----LINK TEXT COLORS-----*/ a { color:#5b8307; } a:hover{ color:#000; } /*-----Lists-----*/ ul{ } li{ } /* tables */ table.contentpaneopen, table.contentpane{border-collapse:collapse;} /*-----BLOCKQUOTE STYLE-----*/ blockquote { } /* MAIN MENU LINK COLOR */ #left ul.menu, #left ul.menu li, #left ul.menu ul{margin:0; padding:0; list-style:none;} #left ul.menu a{ display:block; color:#fff; text-decoration:none; text-transform:uppercase; padding:5px 0px 5px 20px; background:url(../images/mainlevel.gif) no-repeat; background-position:5px 10px; } #left ul.menu ul a{ background:url(../images/indent1.png) no-repeat; background-position:25px 0px; padding-left:35px; } #left ul.menu a:hover, #left ul.menu li.active a{ background-color:#487fd0; color:#fff; } ul#mainlevel-nav{ margin:0; padding:0; list-style:none; } ul#mainlevel-nav li{ float:right; margin:0; padding:0; } div.moduletable_menu ul.menu li{ background:url(../images/dot.gif) bottom left repeat-x; } a.mainlevel-nav{ color:#d5d5d5; text-decoration:none; display:block; padding:40px 10px 16px 10px; font-size:14px; font-weight:bold; } a.mainlevel-nav:hover{ color:#ffe465; background:url(../images/topmenu.jpg) top left repeat-x; } /* Left/Right Column (GLOBAL DEFAULT STYLE) */ /* LATEST NEWS/POPULAR MODULE LINK STYLES */ a.latestnews{ } a.latestnews:hover{ } a.mostread{ } a.mostread:hover{ } /* SECTION TABLE HEADER STYLE */ td.sectiontableheader { } /* ALTERNATING SECTION TABLE ROW 1 BACKGROUND/TEXT STYLES */ tr.sectiontableentry1 td { } /* ALTERNATING SECTION TABLE ROW 2 BACKGROUND/TEXT STYLES */ tr.sectiontableentry2 td { } /* SECTION TABLE LINK STYLES */ .sectiontableentry2 a, .sectiontableentry1 a, .sectiontableentry2 a.category, .sectiontableentry1 a.category { } .sectiontableentry2 a:hover, .sectiontableentry1 a:hover, .sectiontableentry2 a.category:hover, .sectiontableentry1 a.category:hover { } /*layout*/ #bgtop{background-color:#181818;} #bgbottom{background-color:#989898;} .wrapper{width:95%; max-width:1060px; margin:0 auto; /*center hack*/ text-align:left; /*center hack*/} #logo{float:left; padding-top:6px;} #logo h1{font-family:Georgia, "Times New Roman", Times, serif; font-size:36px; font-weight:bold; } #logo a{ color:#e5e5e5; text-decoration:none; } #logo a:hover{ text-decoration:underline; } #user3{float:right; width:600px;} #nav, #container{ border:#fff 5px solid; border-bottom:none;} #nav{background-color:#ffd202; position:relative; height:42px;} #container{background-color:#fff;} #container ul{margin:10px;} #left, #middle, #right{overflow:hidden;} #left{width:25%; float:left;} #left a{color:#000;} #left a:hover{color:#666666;} #left .moduletable_menu{ background:#3e7ad4 url(../images/bgmenu.jpg) top left repeat-x; margin-bottom:5px; } #left .moduletable_menu,#left .moduletable{ padding:3% 3% 10% 3%; width:100% voice-family: "\"}\""; voice-family:inherit; width:100%; } html>body #left .moduletable_menu, html>body #left .moduletable{ width:94%; } .moduletable_menu h3{ color:#9cc4ff; } #left .moduletable{ background-color:#cfcfcf; } #left .moduletable, #right .moduletable{ margin-bottom:5px; } #main{ width:74.5% !important; width:73.5%; float:right;} #user12{ position:relative; margin-bottom:5px; } #user12 .moduletable{ padding:10px 16px; } #user12 a{ color:#fff; } #user12 a:hover{ text-decoration:underline overline; } #user12 ul{ list-style:none;} #user1{width:50%; float:left;} #user2{width:49.5%; float:right;} #user1{ background:#71a10b url(../images/bggreen.jpg) top left repeat-x; color:#fff; } #user2{ background:#d02e2e url(../images/bgred.jpg) top left repeat-x; color:#fff; } #top h3{ background:#71a00b url(../images/toph3.jpg) top left repeat-x; color:#fff; padding:10px 0 10px 6px; } #top{padding-bottom:20px;} #middle{ float:left; width:66%; } #right{ float:right; width:33.5%; } #rightmodule{ background:url(../images/dot-v.png) top left repeat-y; } #rightmodule .moduletable{ padding:10px; } #rightmodule h3, #rightmodule a{ color:#2d66b8; } #user4{ border-top:#0c4fb2 5px solid; background-color:#3b77cf; } #user4 .moduletable{ padding:10px; } #footer{position:relative; text-align:center; margin-bottom:10px; clear:both; padding:0 10%; background-color:#989898;} #footer a{color:#fff;} #footer .bgright{ text-align:center; color:#fff; background:url(../images/footerright.jpg) top right no-repeat;} #footer .bgleft{ background:url(../images/footerleft.jpg) top left no-repeat; height:34px; padding:6px 10px 0px 10px;} li.latestnews, li.mostread{ margin-bottom:5px; }
Now the problem. When I click "VŠ PODĽA MESTA" I get the list of cities (worth mentioning that they are more to right), after I click "BANSKÁ BYSTRICA" I get "AKADÉMIA MÚZICKÝCH UMENÍ". But "AKADÉMIA MÚZICKÝCH UMENÍ" isn't more to right. How to position it to right?