+ Post New Thread
Results 1 to 9 of 9
Coding Thread, XHTML + CSS Help in Coding and Web Development; 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> ...
  1. #1
    My220x's Avatar
    Join Date
    Feb 2008
    Location
    UK
    Posts
    257
    Thank Post
    9
    Thanked 3 Times in 3 Posts
    Blog Entries
    8
    Rep Power
    14

    XHTML + CSS Help

    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?

  2. #2
    My220x's Avatar
    Join Date
    Feb 2008
    Location
    UK
    Posts
    257
    Thank Post
    9
    Thanked 3 Times in 3 Posts
    Blog Entries
    8
    Rep Power
    14
    No one?

  3. #3

    localzuk's Avatar
    Join Date
    Dec 2006
    Location
    Minehead
    Posts
    18,523
    Thank Post
    527
    Thanked 2,645 Times in 2,047 Posts
    Blog Entries
    24
    Rep Power
    924
    I just added a load of content to that and the dashed borders were fine. Which browser are you using?

  4. #4
    My220x's Avatar
    Join Date
    Feb 2008
    Location
    UK
    Posts
    257
    Thank Post
    9
    Thanked 3 Times in 3 Posts
    Blog Entries
    8
    Rep Power
    14
    FF3, did you add it to the nav bar?

  5. #5

    localzuk's Avatar
    Join Date
    Dec 2006
    Location
    Minehead
    Posts
    18,523
    Thank Post
    527
    Thanked 2,645 Times in 2,047 Posts
    Blog Entries
    24
    Rep Power
    924
    Quote Originally Posted by My220x View Post
    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.

  6. #6
    My220x's Avatar
    Join Date
    Feb 2008
    Location
    UK
    Posts
    257
    Thank Post
    9
    Thanked 3 Times in 3 Posts
    Blog Entries
    8
    Rep Power
    14
    CSS gurus help me please

  7. #7

    Join Date
    Sep 2008
    Location
    Edinburgh
    Posts
    12
    Thank Post
    0
    Thanked 0 Times in 0 Posts
    Rep Power
    0
    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.

  8. #8
    My220x's Avatar
    Join Date
    Feb 2008
    Location
    UK
    Posts
    257
    Thank Post
    9
    Thanked 3 Times in 3 Posts
    Blog Entries
    8
    Rep Power
    14
    I have decided to learn CSS again and this time read the whole book lol

  9. #9

    Join Date
    Apr 2006
    Location
    UK
    Posts
    939
    Thank Post
    39
    Thanked 70 Times in 54 Posts
    Rep Power
    30
    Heres the solution:

    Example Page



SHARE:
+ Post New Thread

Similar Threads

  1. CSS Hacks
    By danIT in forum Web Development
    Replies: 3
    Last Post: 2nd October 2008, 06:44 PM
  2. CSS Styles
    By crazy in forum EduGeek Joomla 1.0 Package
    Replies: 3
    Last Post: 12th March 2008, 07:54 AM
  3. Problem with W3C XHTML Validator
    By smali in forum Web Development
    Replies: 2
    Last Post: 8th August 2007, 10:06 AM
  4. CSS gurus!
    By nickje in forum Web Development
    Replies: 2
    Last Post: 12th June 2007, 12:42 PM
  5. Moving to XHTML
    By OverWorked in forum Web Development
    Replies: 9
    Last Post: 16th March 2006, 04:41 PM

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •