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
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.
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.
North America
Europe, Middle East and Africa
Asia Pacific