Developing (v7+)

CSS navigation

Permalink September 26, 2011 at 4:09 PM

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.

 
<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 
         $block = Block::getByName('Provo Info');  
         if( $block && $block->bID ) $block->display();
         ?>
         </li>
    <li class="menu" style="background-image:url(<?=$this->getThemePath()?>/images/maps.png); width:109px;">
        <?php 
         $block = Block::getByName('Provo Maps');  
         if( $block && $block->bID ) $block->display();
         ?> </li>
    <li class="menu" style="background-image:url(<?=$this->getThemePath()?>/images/drafts.png); width:107px; height:27px;">
        <?php 
         $block = Block::getByName('Provo Drafts');  
         if( $block && $block->bID ) $block->display();
         ?>
    </li>
    <li class="menu" style="background-image:url(<?=$this->getThemePath()?>/images/input.png); width:108px; height:27px;">
        <?php 
         $block = Block::getByName('Provo Input');  
         if( $block && $block->bID ) $block->display();
         ?> </li>
    <li class="menu" style="background-image:url(<?=$this->getThemePath()?>/images/contact.png); width:105px; height:27px;">
        <?php 
         $block = Block::getByName('Provo Contact');  
         if( $block && $block->bID ) $block->display();
         ?> </li>
   </ul>
   </div>
         <div id="contentcontainer">
            <div id="content">
              <?php
    $a = new Area('Main Content');
    $a->display($c);
?>
            </div> 
        </div>
   </div>
</div>        
</body>

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.

 
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
   }
 
#mainmenu li, #mainmenu li a, #mainmenu li a:visited {
   margin: 0 0 0 0;
   padding: 0 0 0 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;
}
 
#mainmenu ul {
   margin: 0 0 0 0;
   padding: 0 0 0 0;
}
 
.menu {
   margin: 0 0 0 0;
   padding: 0 0 0 0;
   float:left;
   height:27px;
}
 
#container {
   /*margin: 0 auto;*/
   margin-left:auto;
   margin-right:auto;
   padding:0;
   width: 785px;
   color:#000;
   }
 
#contentcontainer {
   margin: 0;
   padding: 0 0 5px 0;
   width: 785px;
   background-color:#FFF;
   }
 
#content {
   color: #000;
   margin: 5px 5px 5px 5px;
   padding: 5px 5px 5px 5px;
   background-color:#CCC;
   }

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!

Steevb replied on Sep 26, 2011 at 5:23 pm Permalink Reply

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

Forums

Developing (v7+)

CSS navigation

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?