Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10

Thread: A little help

  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    62
    Thanks
    16
    Thanked 0 Times in 0 Posts

    A little help

    Alright i've came across ANOTHER problem. When I type stuff, it goes under the left nav, I want it to go under the content area, can someone help me do that?



    index.html
    Code:
    <html>
    <head>
    <title>Conquer Website</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    
    <div id="container">
    
    <div id="header"><center><font size="5" valign="middle">Banner</font></div>
    
    <br />
    
    <div id="leftbar"><center>Navigation</center> </div>
    
    <div id="rightbar"> <center>Server Status</center></div>
    
    <center><div id="content"><center>Content</center></div></center>
    
    </div>
    
    </body>
    </html>
    style.css
    Code:
    body {
    background-color: #565656;
    font-family: System;
    }
    
    #container { 
    width: 600px;
    padding: 1px;
    margin: 43px auto 0;
    }
    
    #header {
    width: 600;
    height: 100;
    background-image:url(images/header.jpg);
    }
    
    #leftbar {
    width: 150;
    height: 20;
    background-image:url(images/bar.jpg);
    float: left;
    }
    
    #rightbar {
    width: 150;
    height: 20;
    background-image:url(images/bar.jpg);
    float: right;
    }
    
    #content {
    width: 275;
    height: 20;
    background-image:url(images/content.jpg);
    }

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    You shouldn't need the <center> tags to center your divs. Thats done with css positioning, which you should already have. The float left attribute "floats" the div left so that divs underneath can move up beside the div immediately to the left. Then once they are floated side by side, use margins to specify where they appear horizontally. Remember, html was intended to be a desciptive language, CSS is the coding used for presentation(styling). Not an answer to your current question, but hope it helps nonetheless.

    Also, as someone pointed out in another post of your's, make sure you specify the type of width measurements.

    #content {
    width: 600; 600 what? pixels or ems?

    }

    Only 0 can be left at just 0.
    Last edited by teedoff; 08-25-2010 at 12:24 AM.

  • #3
    New Coder
    Join Date
    Aug 2010
    Posts
    62
    Thanks
    16
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View Post
    You shouldn't need the <center> tags to center your divs. Thats done with css positioning, which you should already have. The float left attribute "floats" the div left so that divs underneath can move up beside the div immediately to the left. Then once they are floated side by side, use margins to specify where they appear horizontally. Remember, html was intended to be a desciptive language, CSS is the coding used for presentation(styling). Not an answer to your current question, but hope it helps nonetheless.

    Also, as someone pointed out in another post of your's, make sure you specify the type of width measurements.

    #content {
    width: 600; 600 what? pixels or ems?

    }


    Only 0 can be left at just 0.
    Where did you get that at?

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    #header {
    width: 600;
    }


    same thing. You must specify 600 what? 200 what? Should be 600px or 200px.

  • #5
    New Coder
    Join Date
    Aug 2010
    Posts
    62
    Thanks
    16
    Thanked 0 Times in 0 Posts
    It's working as pixels I assume. But i'm not writing it, but it's still working. But do you know how to fix my problem?

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Ok not following you. Where are you "typing stuff" and where are you wanting it to go? You say your typing stuff and its going "under" the left nav. If you want content in a particular div, you type within that div container. For example:

    <div id="header">
    <h1>Hello this is Decker<h1>
    </div>

  • #7
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    you also need to start to use a doctype so the browser knows how you want it to display the site.

    It's working as pixels I assume. But i'm not writing it, but it's still working. But do you know how to fix my problem?
    You can't assume anything. If you do, you enable some browsers to show your site one way and others in a totaly broken way. use pt, px or em as the unit.

    And why not validate your page as valiadtor.w3.org. If your code has no errors, it'll be much easier to find solutions to problems.

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #8
    New Coder
    Join Date
    Aug 2010
    Posts
    62
    Thanks
    16
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bazz View Post
    you also need to start to use a doctype so the browser knows how you want it to display the site.



    You can't assume anything. If you do, you enable some browsers to show your site one way and others in a totaly broken way. use pt, px or em as the unit.

    And why not validate your page as valiadtor.w3.org. If your code has no errors, it'll be much easier to find solutions to problems.

    bazz
    I just started learning CSS yesterday. I made my first website yesterday too (with the help of codingforums.com). What does validating my code mean? That site you gave me doesn't work.

    To the topic. How can I make it so that I can type stuff directly underneath the bars?

  • #9
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Those aren't "bars" they are your divs. Think of them as boxes that you can put stuff INSIDE them. They just happen to be colored blue I guess because you have a background image specified. Read my last post here above. You can type text in paragraphs or h1 - h6 header tags or add an ordered list or unordered list INSIDE your divs.

    What does validating my code mean?
    Good well structured html and css needs to be correct. The W3C code validator lets you know if your code is adhering to standards and what the errors may be. If you have your site/page already on the web (live), then you can simply type the URL into the code validator. If not then you can copy and paste your raw code into the html raw code validator as well.

    Now I dont know how or where you are learning html and css from, but you should check out www.w3schools.com. They have excellent tutorials on html and css and many other subjects. All free. You should spend a few days there to familiarize yourself with the basics of page structure ie <div>

  • Users who have thanked teedoff for this post:

    Decker (08-25-2010)

  • #10
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    oops, I spelt it wrongly. validator.w3.org
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link


  •  

    Posting Permissions

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