SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Novice who needs some help ....

    After teaching myself html ,
    I've been trying to teach myself C.S.S.. I've been working on a practice 3 column css/index page layout; But,no matter how hard I try and no matter how many times I inspect prototypes,read various rules or tweak my work ,the design still doesn't work.

    I've been on this for weeks and I'm very frustrated; I really have no other source of help but this forum. I'm just about ready to give up.

    If I emailed my index and style sheet can someone, anybody please take a look at my work and tell me what I'm doing wrong?

    I can really use some help.

    Thank You.

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,031
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    Why don't you paste your code here so we can all have a look?
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Give us a link to the page (since you are new you can avoid it being detected by posting as such)

    sitehere . com / page . php

    Or post your code . In order for 3 col layouts to work are you making sure each column has a width and a float set on it? Aka float:left;?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is my style sheet:
    html, body {
    margin:0;
    padding:0;
    border:none;
    }

    #container {
    Width: 900px;
    }

    #header {

    Width: 900px;

    Height: 100px;

    Position: relative;

    Background-image: url(images/headerBG.jpg);

    Border-bottom: 2px solid #000000;

    }



    Header a {

    Color: #ffffff;

    Text-decoration: underline;

    Font-weight: bold;

    Font-family: verdana;

    Font-size: 14px;

    }



    #header a:visited {

    Color: #000000;

    Text-decoration: underline;

    Font-weight: bold;

    }

    #header a:hover {

    Color: #cc0000;

    Text-decoration: none;

    Font-weight: bold;

    }







    .Horizlinks {

    Position: absolute; top: 77px; left: 180px;

    }





    .Horizlinks ul {

    Margin: 0px;

    }

    .Horizlinks li {

    Margin: 0px 15px 0px 0px;

    List-style-type: none;

    Display: inline;

    }

    #horizonnav {

    Width: 900px;

    Height: 30px;

    Position: relative;

    Background-color: #F2D6AF;

    Border-botttom: 2px solid #000000;

    }

    .navlinks {

    Position: absolute; top: 4px; left: 140px;

    }

    .navlinks ul {

    Margin: auto;

    }

    .navlinks li {

    Margin: 0px 18px 0px 0px;

    List-style-type: none;

    Display: inline;

    }

    .navlinks li a {

    Color: #000000;

    Padding: 5px 12px 7 px;

    Text-decoration: none;

    Font-size: 16px;

    Font-family: verdana;

    }

    .navlinks li a:hover {



    Color: #ffffff;

    Background-image: url(images/Bghover.jpg);

    /*If you want to use a color for the background instead replace above line with text-decoration: underline:[#dddddd];*/

    }

    #header p {

    Color: #000000;

    Font-family: arial;

    Font-weight: bold;

    }

    .smalltext {

    Font-size: 9px;

    Font-family: arial;

    }



    #leftnav {

    Float: left;

    Width: 140px;

    Height: 400px;

    Background-color: #F8AA3C;

    Border-left: 1px dashed #694717;

    }

    #rightnav {

    Float: right;

    Width: 140px;

    Height: 400px;

    Background-color: #F8AA3C;

    Border-left: 1px dashed #694717;

    }

    #body {

    Margin: auto;

    Width: 600px;

    Padding: 10px 0px 0px 10px;

    }

    }

    #footer {

    Clear: both;

    Background-color: #D1c0A7:

    }

    .box {

    Margin-top: 10px;

    Padding: 5px 5px 5px 5px;

    Backround-color: #dddddd;

    Border: 2px solid #d22929;

    Width: 350px;

    Color: #000000;

    }

    H2 {

    Font-size: 20px;

    Color: #cc0000;

    Padding: 10px;

    Font-family: verdana;

    }

  5. #5
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is my index page:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>

    <head>

    <title> Practice Web Page </title>

    <meta name="Generator" content="Alleycode HTML Editor">
    <meta name="Description" content="Your description here...">
    <meta name="Keywords" content="Your keywords here...">


    <link Rel="stylesheet" Type="Text/css" HREF="kirbystyle.css">
    </head>

    <body>

    <div id=“container”>


    <div id=“header">

    <a href=“http://www.website.com”>This is the header</a>

    <div class=“Horizlinks”>


    <ul>

    <li><a href=“http://www.website.com”>Header Link 1</a></li>

    <li><a href=“http://www.website.com”>Header Link 2</a></li>

    <li><a href=“http://www.website.com”>Header Link 3</a></li>

    <li><a href=“http://www.website.com”>Header Link 4 </a></li>

    </ul>

    </div>


    <p>Header Text</p>

    <p class=“smalltext”>Small Text</p>

    </div>

    <div id=“horizontalnav”>

    <div class=“navlinks”>

    <ul>

    <li><a href=“http://www.website.com”>Nav Link 1</a><li>

    <li><a href=“http://www.website.com”>Nav Link 2</a><li>

    <li><a href=“http://www.website.com”>Nav Link 3</a><li>

    <li><a href=“http://www.website.com”>Nav Link 4</a><li>

    </div>

    </div>



    <div id=“leftnav”>This is the leftnav</div>

    <div id=“rightnav”>This is the right nav</div>

    <div id=“body”>This is the body <br><div class=“box”><h2>This is the title</h2>Text inside the box</div></div>

    <div id=“footer”>This is the footer</div>


    </body>


    </html>

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, in all of your HTML you have these characters placed for the quotes “”

    I don't know how they will appear posting this post..but they are not standard quotes ""

    As a result the browser doesn't recognize them as quoted values and will be ignored.

    Replace all the quotes in the browser with real ones ""

    Also I should note your doctype in incomplete (it needs a URI at the end of it)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ryan,

    You were right about the quotation marks. You're amazing! In one review you were able to help me when countless others couldn't. It's taken me, literally weeks to correct that problem. I was frustrated beyond words. I am extremely grateful. Thank You.

    This initial practice page is now approximately 50&#37; correct; The only other problem is that the nav links are displaying in reverse order with the header links; and the "nav bar" is missing. Have you any ideas as to what I did wrong here?

  8. #8
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One more thing.......
    I forgot to add that the background header image isn't appearing.

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    The right nav is displaying backwards because you set float:right and that will basically reverse the order displayed. You can switch up the order in hte HTML to overcome this

    Once you do that can you show us your updated code? If you have a link somewhere where this is at it would make this a lot easier
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Also in your CSS you have this
    Code:
    Header a {
    
    Color: #ffffff;
    
    Text-decoration: underline;
    
    Font-weight: bold;
    
    Font-family: verdana;
    
    Font-size: 14px;
    
    }
    Make that "Header" into #header

    I can't really tell what else may be ascrew because I don't have a link to look at with the images there
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

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