Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Junior Member
    Join Date
    Dec 2011
    Posts
    1
    Member #
    30368
    I attempted a liquid layout which looked good on my laptop in FireFox, Chrome, and IE, but when I transferd my files to a usb stick and took it to my NetBook to work on it in the bed room, because I was going to turn it into php and add a custom news system and a message board to the site..but anyways it was still in HTML form when I tested it, and the content area broke. I removed the margin left and margin right, and margin top to get it to work, but it was still alittle messed up, and I need those margin's to look good on a regular computer. Its already validated, so there shouldn't be any html mistakes. Here is the HTML and CSS:

    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" xml:lang="nl" lang="nl">
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <meta name="description" content="A short description." />
     <meta name="keywords" content="put, keywords, here" />
    
    <link rel="stylesheet" href="style.css" type="text/css" />
    <title>Brandon Royer</title>
    </head>
    
    <body>
    <div id = "wrapper">
    
    <div id = "header">
    <h1><i>Brandon Royer</i></h1>
    <h4><i>Follow the Music</i></h4>
    </div>
    
    <div id = "topmenu">
    <a href = "index.html">Home</a> |
    <a href = "about.html">About</a> |
    <a href = "forum.html">Forum</a> |
    <a href = "photo.html">Photos</a> |
    <a href = "music.html">Music Store</a> |
    <a href = "articles.html">Articles</a>
    </div>
     
    <div id = "leftbar" class = "column">
    <h3>Menu</h3>
    <a href = "index.html">Home</a><br />
    <a href = "about.html">About</a><br />
    <a href = "forum.html">Forum</a><br />
    <a href = "photo.html">Photos</a><br />
    <a href = "music.html">Music</a><br />
    <a href = "articles.html">Articles</a>
    <br />
    <br />
        
    <h3>Recent Albums:</h3>
    <a href="http://www.cdbaby.com/cd/brandonroyer">
    <img src="debutcd.jpg" width="150" height="150" style="border:none;" alt="Brandon on CDBABY" />
    </a>
    
    <h3>Music Player:</h3>
    Video Player Goes Here
    </div>
    
    <div id = "rightbar" class = "column">
    <h3>Recent Posts</h3>
    DSFSDFdsfdssssss ssssssssdg herjkdhsjfkhdk sfhsdkjghewljfgklwejgkler sadkfjshklwejkghlwe dsklfhsdklgjweklghlwegk sdgkjfsdklghsdklghwekl ksdgjsdklghsdklghlsdk ewklghjkdlsghklsdghksdl gklsdhgksdhjgksdhjgklsd
    <br />
    <br />
    <h3>Follow Me:</h3>
    <a href="http://www.facebook.com/pages/Brandon-Royer/139598626083601">
    <img src="facebook.png" width="60" height="60" style="border:none;" alt="Brandon on Facebook" />
    </a>
    <a href="https://twitter.com/#!/brandonroyer">
    <img src="twitter.png" width="50" height="55" style="border:none;" alt="Brandon on Twitter" />
    </a><br />
    <a href="http://nashvilletwang.blogspot.com/">
    <img src="blogger.png" width="60" height="60" style="border:none;" alt="Brandon on Blogger" />
    </a>
    <a href="http://www.youtube.com/user/BrandonRoyer">
    <img src="youtube.png" width="60" height="60" style="border:none;" alt="Brandon on YouTube" />
    </a><br />
    <a href="https://plus.google.com/b/111540598266727341719">
    <img src="google.png" width="60" height="60" style="border:none;" alt="Brandon on YouTube" />
    </a>
    
    </div>
    
    <div id = "content">
    <h3>Current News:</h3>
    <p>The current news will be in this div. Currently, the news is I'm messing around with fluid layout websites, and trying to redo BrandonRoyer.com, as well as add php functionality to it. I guess we will see how it goes!</p>
    <p>dsfjsdfdjsk dsjfhsdkjhfsdjk fsakldjaskldfjdlfhas asjfhdkjshfksdjfhsd jasdhfjakshfjasfhakjs sakjfhaskjfhaskjfhaskjf asjfhjashfaskjhfaskjfh sajfhkjasfhaskjfhaskj sakjfhskjafhskjafhkjash fasjfhkasfhkajsfhkjasfh sakjfhjsafhjaskhfkjas sajfhskajfhaskjfhaskjfhas jaskfhjaskfhaskjfhasjk sakjdfhkjasfhasjhdf</p>
    <p>sajhfkjashfjkas fkjashfkjashfkjashf asjhfkjasfhkasjfh asjfhaskjfhsakjf asjfhaskjfhkjashfksja sakjfhkjashfkjashfjkas sakjhfaskjfhaskjfhaskjfh sajkfhaskjhfasjkfhas sajkfhkjsafhskjafhaskj sajfhajskfhaskjhfas fjkashfkjashkfjashfkjhas fajsfhjkashfksahfkjsaf sajhfjaskf asjf sajhfkjasfh askjfhsakjfhsjakfhasjfh</p>
    </div>
      
    <div id = "sitemap">
    <a href = "sitemap.html">Site Map</a>
    <a href = "news_archives.html">News Archives</a>
    </div>
    
    <div id = "footer">
    &copy; 2006-2012 | <a href = "http://brandonroyer.com">brandonroyer.com</a>
    </div>
    </div>
    </body>
    </html>
    CSS:
    Code:
    html {
    font-family:"arial";
    color:#e4e4e4;
    text-align:center;
    }
    
    body {
    background-color:#000;
    }
    
    #wrapper {
    max-width:1500px;
    min-width:100px;
    height:100%;
    margin:0 auto;
    background-color:#6699CC;
    
    }
    
    #header {
    background-color:#003366;
    padding-bottom:0;
    width:100%;
    height:90px;
    border:none;
    margin-bottom:9px;
    }
    
    #header h1 {
    text-align:left;
    padding-top:7px;
    margin-left:20px;
    }
    
    #header h4 {
    text-align:left;
    margin-left:20px;
    }
    
    #topmenu {
    margin-top:5px;
    background-color:#6699CC;
    display:inline;
    display:block;
    width:100%;
    height:25px;
    border:none;
    }
    
    #topmenu a:link {
    color:#e4e4e4;
    font-size:22px;
    padding:10px 25px 10px 15px;
    text-decoration:none;
    }
    
    #topmenu a:visited {
    color:#e4e4e4;
    }
    
    #topmenu a:hover {
    background-color:#8aa9c8;
    color:#fff;
    text-decoration:underline;
    }
    
    #content {
    margin:0 auto;
    position:relative;
    float:left;
    background-color:#e4e4e4;
    width:65%;
    height:700px;
    margin-left:15px;
    margin-right:0;
    margin-top:10px;
    color:#000;
    text-align:left;
    
    }
    
    #content p {
    margin-left:20px;
    
    }
    
    #content h3 {
    margin-left:20px;
    margin-top:10px;
    }
    
    #leftbar {
    float:left;
    width:15%;
    height:500px;
    margin-top:10px;
    margin-left:20px;
    background-color:#6699CC;
    
    }
    
    #leftbar h3 {
    color:#000;
    text-decoration:underline;
    }
     
    #leftbar a:link {
    color:#e4e4e4;
    font-size:22px;
    text-decoration:none;
    }
    
    #leftbar a:visited {
    color:#e4e4e4;
    }
    
    #leftbar a:hover {
    background-color:#8aa9c8;
    color:#fff;
    text-decoration:underline;
    }
      
    #rightbar{
    float:right;
    width:15%;
    height:500px;
    background-color:#6699CC;
    margin-top:10px;
    margin-right:25px;
    }
    
    #rightbar h3{
    color:#000;
    text-decoration:underline;
    }
     
    #footer {
    clear:both;
    text-align:right;
    background-color:#003366;
    height:25px;
    width:100%;
    border:none;
    font-size:17px;
    }
    
    #footer a:link {
    margin-top:5px;
    margin-right:5px;
    color:#e4e4e4;
    }
    
    #footer a:visited {
    color:#e4e4e4;
    }
       
    #sitemap {
    padding-top:10px;
    text-align:center;
    background-color:#6699CC;
    width:100%;
    height:25px;
    clear:both;
    }
    
    #sitemap a:link {
    padding:0 0 10px 10px;
    color:#e4e4e4;
    }
    
    #sitemap a:hover {
    background-color:gray;
    }

  2.  

  3. #2
    Senior Member Blackhawk095's Avatar
    Join Date
    May 2011
    Location
    Kentucky (USA)
    Posts
    384
    Member #
    27969
    Liked
    45 times
    Could you post a link to the website so We can visually see your issue?
    [COLOR=rgb(0, 51, 102)]Student Web Designer[/COLOR]
    [COLOR=rgb(0, 51, 102)]If you thought something I said was helpful. LIKE IT![/COLOR]


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:44 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com