Forums

CSS navigation

Permalink
Hello all. This is more of a general CSS question rather than C5 specific but I figured I'd ask here as I am working in C5 and you all might be more familiar with the default.php code.

The site I'm working on is here:http://www.altaprojects.net/index.php/provo...

Right now I have background images with text in the image itself but I'll take that off in favor of using the navigation text I've built using C5 scrapbook blocks. As you can see this text falls much lower down in the navigation than the dummy image text and I'm trying to push it back up to where it needs to be.

Here is the default.php code:

<body>
<div id="container">
     <div id="banner"><img src="<?=$this->getThemePath()?>/images/banner.png" width="785" height="172" /></div>
  <div id="mainmenu">
   <ul>
    <li class="menu">
        <img src="<?=$this->getThemePath()?>/images/slice4.png" width="79" height="27" /></li>
    <li class="menu" style="background-image:url(<?=$this->getThemePath()?>/images/home.png); width:107px; height:27px;">
        <?php 
         $block = Block::getByName('Provo Home');  
         if( $block && $block->bID ) $block->display();
         ?>
    </li>
    <li class="menu" style="background-image:url(<?=$this->getThemePath()?>/images/info.png); width:106px; height:27px;">
          <?php
Viewing 15 lines of 53 lines. View entire code block.


And here is the accompanying CSS:

body {
   background-color:#999;
   }
#banner {
   margin: 0 0 -1px 0;
   padding: 0 0 0 0;
   width: 785px;
   height: 150px;
   }
#mainmenu {
   margin: 0 0 0 0;
   padding: 0;
   width: 785px;
   float:left;
   background-color:#FFF
Viewing 15 lines of 57 lines. View entire code block.


I realize I may have some overlapping settings. That's probably due to me trying to change various aspects of text height, margins etc in whichever place makes the most sense. I think at this point I've tried so many different combinations that I just need a fresh pair of eyes. So thank you for your help!
AltaPlanning
 
Steevb replied on at Permalink Reply
Steevb
Hi,
Couple of pointers: You have a stray end tag '</div>'

No need to repeat:- (margin:- 5px 5px 5px 5px;), (padding: 5px 5px 5px 5px;) if they are all the same just use one:- margin:5px; padding:5px;

Don't call image in page, call with CSS:

HTML: 
<li><a  href="/" class="home">Home</a></li>
<li><a  href="/" class="info">Info</a></li>


CSS:
.home { background: #000 url(images/home.png) no-repeat 0 0}
.info { background: #000 url(images/info.png) no-repeat 0 0}


Don't have nav background color same as text color. Does not validate and if somebody turns off images they will see nothing!

Put width for li in CSS:- 
#mainmenu li, #mainmenu li a, #mainmenu li a:visited {
   margin:0;
   padding:0;
   font-family: Arial, Helvetica, sans-serif;
   font-size:16px;
   font-weight:bold;
   color:#FFF;
   text-decoration: none;
   list-style-type: none;
   text-align:center;
   height: 27px;
     width:107px }



Hope that will help you get the juices flowing....

Steev