No replies
pijemcolu
pijemcolu's picture
Offline
newbie
Last seen: 12 years 40 weeks ago
Timezone: GMT+2
Joined: 2010-04-19
Posts: 1
Points: 2

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.

My Page

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?