Forum Moderators: not2easy
Ok, I've opted to alter a css template to meet my needs...as this is the best way I know how to teach myself what everything is and how it works (along with reading on here and books)
What I need help with is probably very simple.
I've got a header that I need to separate the tabs for, here is the code for only the top banner prior to me messing with it...
/* CSS Document */
body{padding:0px; margin:0px; background:url(images/mainbg2.jpg) 0 0 repeat-x #fff; color:#fff200; font:14px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;}
div, p, ul, h2, h3, img{padding:0px; margin:0px;}
ul{list-style-type:none;}
/*----TOP PANEL----*/
#topPan{width:747px; height:152px; position:relative; margin:0 auto; padding:0px;}
#topPan img{width:138px; height:175px; position:absolute; top:30px; left:300px;}
#topPan ul{width:298px; height:32px; position:absolute; top:75px; right:449px;}#topPan ul li{float:left; width:115px; height:32px; padding:0 0 0 1px;}
#topPan ul li a{
display:block;
width:115px;
height:32px;
background:url(images/menubg-normal2.gif) 0 0 no-repeat #fff200;
color:#fff200;
font-size:11px;
font-weight:bold;
line-height:32px;
text-transform:uppercase;
text-align:center;
text-decoration:none;
}
#topPan ul li a:hover{background:url(images/menubg-hover.gif) 0 0 no-repeat #fff200; color:#7C7900; text-decoration:none;}
#topPan ul li.home{display:block; width:115px; height:32px; background:url(images/menubg-hover2.gif) 0 0 no-repeat #fff200; font-size:11px; font-weight:bold; line-height:32px; color:#7C7900; text-decoration:none; text-transform:uppercase; text-align:center;}
/*----/TOP PANEL----*/
and here is what i'm trying to get
/* CSS Document */
body{padding:0px; margin:0px; background:url(images/mainbg2.jpg) 0 0 repeat-x #fff; color:#fff200; font:14px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;}
div, p, ul, h2, h3, img{padding:0px; margin:0px;}
ul{list-style-type:none;}
/*----TOP PANEL----*/
#topPan{width:747px; height:152px; position:relative; margin:0 auto; padding:0px;}
#topPan img{width:138px; height:175px; position:absolute; top:30px; left:300px;}
#topPan ul{width:298px; height:32px; position:absolute; top:75px; right:449px;}
#topPan ul2{
width:298px;
height:32px;
position:absolute;
top:75px;
right:0px;
}
#topPan ul li{float:left; width:115px; height:32px; padding:0 0 0 1px;}
#topPan ul2 li{float:right; width:115px; height:32px; padding:0 1px 0 0;}
#topPan ul li a{
display:block;
width:115px;
height:32px;
background:url(images/menubg-normal2.gif) 0 0 no-repeat #fff200;
color:#fff200;
font-size:11px;
font-weight:bold;
line-height:32px;
text-transform:uppercase;
text-align:center;
text-decoration:none;
}
#topPan ul2 li a{
display:block;
width:115px;
height:32px;
background:url(images/menubg-normal2.gif) 0 0 no-repeat #fff200;
color:#fff200;
font-size:11px;
font-weight:bold;
line-height:32px;
text-transform:uppercase;
text-align:center;
text-decoration:none;
}
#topPan ul li a:hover{background:url(images/menubg-hover.gif) 0 0 no-repeat #fff200; color:#7C7900; text-decoration:none;}
#topPan ul2 li a:hover{background:url(images/menubg-hover.gif) 0 0 no-repeat #fff200; color:#7C7900; text-decoration:none;}#topPan ul li.home{display:block; width:115px; height:32px; background:url(images/menubg-hover2.gif) 0 0 no-repeat #fff200; font-size:11px; font-weight:bold; line-height:32px; color:#7C7900; text-decoration:none; text-transform:uppercase; text-align:center;}
#topPan ul2 li.bill{display:block; width:115px; height:32px; background:url(images/menubg-hover2.gif) 0 0 no-repeat #fff200; font-size:11px; font-weight:bold; line-height:32px; color:#7C7900; text-decoration:none; text-transform:uppercase; text-align:center;}
/*----/TOP PANEL----*/
Basically, the first one shows this
* tab *--------Logo-------------
I'm trying to get this
* tab *--------Logo--------* tab *
I can get it over to the right with what I've written, but, for some reason, it's adding a bullet (like a normal li tag does) to the tab on the right, but not the tab on the left...I DON'T want the bullet.
Am I naming it correctly? Are there rules to naming the divs? I.e. #topPan ul, #topPan ul2, #topPan ul li a (I know the a is for links) I know a great deal of HTML, but I'm not sure how to 'name' my css fields...can i name it ul2? Is this where my problem is?
Can someone help? :)
I suspect you did not add a second div in the html code.
<div id="topPan"><u>
</u><img src="images/logo1.png" height="175" width="138" />
<ul>
<li class="home"><a href="marketing.html" target="_self"></a></li>
</ul>
<ul2>
<li class="bill"><a href="billing.html" target="_self"></a></li>
</ul2>
</div>
