XHTML + CSS Help

[My220x]

Hi I have

 

MonoDan - Home Page








MonoDan - Home Page



Home
About Me
Links
Contact


News

9/9/09 | news news news

9/9/09 | test

9/9/09 | news news news


9/9/09 | test

9/9/09 | news news news

9/9/09 | test

9/9/09 | news news news

9/9/09 | test

9/9/09 | news news news

9/9/09 | test

9/9/09 | news news news

9/9/09 | test


9/9/09 | news news news

9/9/09 | test


© MonoDan; All Rights Reserved

 

and the css

 

/* CSS RESET RULES */
   html, body, a, abbr, acronym, address, area, b, bdo, big, blockquote, button, caption, cite, code,
   col, colgroup, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, hr, i, img,
   ins, kbd, label, legend, li, map, object, ol, p, param, pre, q, samp, small, span, strong, sub,
   sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, ul, var {
       margin: 0;
       padding: 0;
   }
   
   body {
/* here the background color, font color, font size, line height and fonts are getting set */
       background: yellow;
       color: #A020F0;
       font: 15px/1.8 verdana, arial, helvetica, sans-serif;
   }
   
   em {
       font-style: italic;
   }
   

   
   h1, h2, h3, h4, h5, h6 {
       font: bold 17px/2.0 georgia, garamond, "times new roman", times, serif;
       letter-spacing: 1px;
       text-align: center;
   }
       h1 {
           /* want to declare a unique H1 heading style rule, do it here */
           font-size: 20px;
       }
   
   img {
       border: 0;
       vertical-align: bottom;
   }
   
   strong {
       font-weight: bold;
   }

/* GENERAL LAYOUT RULES */
   #container {
       border: 1px dashed #000;
       margin: 20px auto;
       background: white;
       text-align: left;
       width: 750px;
   }
       #header {
           background: transparent;
           border-bottom: 1px dashed #000;
           color: #FF00FF;
           padding: 7px;
       }

       #menu {
           float: left;
           width: 100px;
           background-color: transparent;
            padding-left: 15px;
            padding-right: 15px;
            padding-top: 15px;
            padding-bottom: 0px;
       }
           #menu li {
               list-style: none;
              
           }
               a {
                   background: transparent;
                   color: #A020F0;
                   font-style: italic;
                   text-decoration: none;
               }

              a:hover, #menu li a:focus, #menu li a:active {
                   font-style: italic;
                   font-weight: bold;
               }
      

       #content {
           float: left;
           margin-left: 5px;
           margin-right: 5px;
           margin-bottom: 0px;
           width: 520px;
           padding-top: 5px;
           padding-right: 5px;
           padding-left: 20px;
           padding-bottom: 25px;
           border-left: 1px dashed #000;
           
           }
           

       #footer {
           border-top: 1px dashed #000;
           clear: both;
           text-align: center;
           padding: 3px;
       }

 

Now if you create them files and view it eveything looks fine however if you add alot of content to the navigation the dashed border messes up. How can I fix this?

[My220x]

No one?

[localzuk]

I just added a load of content to that and the dashed borders were fine. Which browser are you using?

[My220x]

FF3, did you add it to the nav bar?

[localzuk]

FF3, did you add it to the nav bar?

 

No, i assumed you meant page content and not menu content.

 

I have done now, the dashing on the right hand side of the menu stops at the bottom of the page content. That is because your content is shorter than your menu - and the content area is being used to draw the dashed edge.

 

You could move the dashed border to the menu div instead, but then you'd have the same problem when your body content is longer than your menu content.

 

You need to find a way to define the height of the menu to be 100% of the container.

[My220x]

CSS gurus help me please

[theboyhope]

Equal column heights can get quite involved. There are a few methods and each has its upside and downside.

 

I recommend getting a big mug of tea and Googling "Faux Columns" and "One True Layout revisited".

 

HTH.

[My220x]

I have decided to learn CSS again and this time read the whole book lol

[danIT]

Heres the solution:

 

Example Page