XHTML + CSS Help

**My220x** · 21st September 2008, 10:45 AM

Hi I have

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>MonoDan - Home Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="The home page of GeekStep member MonoDan." />
<meta name="keywords" content="monodan, geekstep" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<div id="container">
<div id="header">
<h1>MonoDan - Home Page</h1>
</div>
<ul id="menu">

<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Me</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div id="content">
<h1>News</h1>
<p><em>9/9/09 | news news news</em></p>
<p><em>9/9/09 | test</em></p>
<p><em>9/9/09 | news news news</em></p>

<p><em>9/9/09 | test</em></p>
<p><em>9/9/09 | news news news</em></p>
<p><em>9/9/09 | test</em></p>
<p><em>9/9/09 | news news news</em></p>
<p><em>9/9/09 | test</em></p>
<p><em>9/9/09 | news news news</em></p>
<p><em>9/9/09 | test</em></p>
<p><em>9/9/09 | news news news</em></p>
<p><em>9/9/09 | test</em></p>

<p><em>9/9/09 | news news news</em></p>
<p><em>9/9/09 | test</em></p>
</div>
<div id="footer">
<em>&#169; MonoDan; All Rights Reserved</em>
</div>
</div>
</body>
</html>

and the css

HTML Code:

/* 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** · 21st September 2008, 04:03 PM

No one?

**localzuk** · 21st September 2008, 04:22 PM

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

**My220x** · 21st September 2008, 04:23 PM

FF3, did you add it to the nav bar?

**localzuk** · 21st September 2008, 04:37 PM

Originally Posted by My220x

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** · 21st September 2008, 04:58 PM

CSS gurus help me please

**theboyhope** · 24th September 2008, 11:26 PM

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** · 25th September 2008, 06:28 PM

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

**danIT** · 25th September 2008, 07:08 PM

Heres the solution:

Example Page

LinkBack

Thread Tools

Search Thread

XHTML + CSS Help

Similar Threads

CSS Hacks

CSS Styles

Problem with W3C XHTML Validator

CSS gurus!

Moving to XHTML

Thread Information

Users Browsing this Thread

Posting Permissions