Skip navigation
Wood N Treasures
Currently Being Moderated

Very basic question...

Feb 12, 2013 11:48 AM

Hello all,

 

I am a beginner with Dreamweaver and have been reading and watching tutorials.  I am trying to get started with Dreamweaver and need to actually do it in order to learn.  I don't retain very much just by reading.  All I am trying to do is create a simple layout with a header, a footer, and a three column layout in between.  Here's what I have done so far:

 

I began with a background image.  Then I created a container div 900px wide.  I added a heading and tag line for the header.  I created a body div beneath that which is 600px wide and is intended to hold the content.  I have a 130px column floated to the right and another to the left.  The left will hold links to future pages within the site.  The right will hold links to other websites, resources and so forth. 

 

My problem is this:  I cannot get the three columns (divs) to line up with one another.  The left and right seem to be in line, but the body div is always above the other two.  It is centered, but I can't get the left and right columns next to it.  When I click "inline" under Block, in the CSS Rules, it causes the body div to stretch across the entire container div (900px instead of 600px).  I'm sure the fix is simple, but I am struggling.  Any thoughts?  I have the code from my styles sheet below if that is helpful.  Thanks for any help you can offer.

 

#container {

                width: 900px;

                background: #FFF;

                margin: 0 auto;

                padding-left: 10px;

                padding-right: 10px;

                overflow: hidden;

}

#body {

                width: 600px;

                background: #FFF;

                margin: 0 auto;

 

                padding-left: 10px

                padding-right: 10px;

                overflow: hidden;

}

#left_column {

                width: 130px;

                background: #FFF;

                overflow: hidden;

                display: inline;

                float: left;

                margin: auto;

}

#right_column {

                width: 130px;

                background: #FFF;

                overflow: hidden;

                display: inline;

                float: right;

                margin: auto;

}

 

 

 

Chris

 
Replies
  • Currently Being Moderated
    Feb 12, 2013 11:53 AM   in reply to Wood N Treasures
    1. Go to File > New > Blank Page > HTML > Layout.
    2. Choose a pre-built CSS layout from the right side panel. 
    3. Recommend:  3-column fixed, header & footer.
    4. Hit Create button.

     

    Go to File > SaveAs > index.html

    Add your own images, text, backgrounds, etc...

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 12, 2013 12:05 PM   in reply to Wood N Treasures

    The code in the pre-built CSS Layouts is heavily commented to explain what things do.  Read and compare it with your own code.  That's the best way for a beginner to learn basic CSS structure.

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 12, 2013 12:15 PM   in reply to Nancy O.

    Another thing I would suggest is playing with the "Try It Yourself" links throughout the tutorials on http://www.w3schools.com/css

     

    They are very handy for giving you a basic understanding of what is going on with css. Once you have the basics of css under your belt, it makes looking at and pulling apart code much simpler.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 12, 2013 12:29 PM   in reply to Nancy O.

    Nancy has it nailed here.

     

    You have given us your styles and that's all well and good, but it shows nothing about what you have done in HTML and, how you set things up in HTML will really tell the story.

     

    I note you're defining your #body as if though it had a width. There is an HTML element called "body" that does not need an ID (though you can attach an ID or a class to it). the <body> tag in HTML is supposed to take up your entire viewport. So you would enclose a #container within a body.

     

    So generally what you would do is set up the attributes that will be the default with your body thusly:

     

    body {

      background-color: #003781;

      color: #000000;

      font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;

      margin: 0;

      padding: 0;

      text-align: center;

    }

     

    Then you define your various text styles, like h1 through h4 (if needed) your paragraphs, your unordered lists, ordered lists and links (visited, hover, active, focus, etc.).

     

    After that, establish your main container. You'll put your header, all of your columns and your footer inside that. Your main container will establish the width of your website.

     

    Now, understand that what Nancy is telling you here is that this wheel has been invented many times. So picking something from Dreamweaver that will autoassemble is learning. Because it's heavily commented, you can read the comments and understand why everything goes where it goes.

     

    As you are learning, you'll learn about navigation and how to insert that. You'll learn how a <div> gets its size and its height by placing things in them and watching as they either appear or don't. You'll learn how to insert more <div> tags to place things where you want them.

     

    None of Dreamweaver's built-in templates really set you up for navigation, which is its own fun learning curve. Need drop-down menus? Take a tutorial or purchase something that inserts (and works) perfectly from Project VII. In the meantime, you'll be learning as you go and you'll learn from the masters, not from some book.

     

    And you won't get frustrated when it doesn't work, because if you really follow what's going on, you'll begin to understand HTML and CSS.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points