Hey guys,
I got whats gonna be a really stupid question but I just cant seem to get the concept here. Ive been playing with building webpages for awhile now and have gotten by decently for a beginner. Ive even built a couple sites for a small business and a church and they look great for beginner work, but one thing just seems to elude me all together.
This one thing is positioning. I undestand the concept that while writing the code things fall into place where you set them from left to right. I also understand <div> commands to an extent. But what is eludeing me is, lets say I put up a page with a background with a sideline and a horizontal line seperating the top of the page to put a graphic up there of some sort. I got the concept of I begin the page by adding the graphic first thing say centering it. The I want to move down to the sideline and Im gonna add some buttons for links and then in the middle a pic and some article and then on the right some more buttons with links.
Ok I got the top graphic then Im lost at that point in aligning everything to come out right. I understand at this point I would make my first button align it left to postion it on the left side of the sideline, but then what? If I add a break and then the other link buttons, how do I go back to the center of the page to add a pic and article and with the line breaks in that how do I get to makeing the link buttons on the right side with keeping everything in a nice little area where it looks right.
Up until now I would normally put a table in for the left side links, coded after the top graphic and a line break, then I would code the center pic and and article, and then add another table for the right side link buttons. But I have to use the tables because if I dont I got buttons and text all over the place. Not to mention my right side table is gonna be postioned lower at the bottom of the center article.
I know this is something very simple and im just missing it, ive read through so much stuff on this site and just keep missing the concept of laying out the page well.
At this point Im using dreamweaver which yes I know does so much of the work for me, and it is nice but I want to be able to write the code myself and not rely on programs like that. But even in dreamweaver to get things where I want them I am basically using layers. I open up a layer put what i want in it and set it where I want it. Is this the common practice or is there a more proper way of doing things? After I examine my code in dreamweaver I notice that everything is basically <div> commanded. Is this how postioning is primarly done or is there a secret or maybe just a common fact im missing in the way a page is coded to come out in a nice neat layout?
Any advice and suggestions would be greatly appreciated, Like I mentioned ive read a ton of stuff on the site but maybe Im just missing the right one, so any suggestions on a section to read that would explain this to me would be appreciated as well.
Thanks guys
YimanoHi -
I think it'll help a lot when you get familiar with block-level and inline elements.
Block-level tags/elements in .html display top to bottom, with none lying next to one another. Examples would be: <p> <div> <h#> <ul> <table>, etc.
Inline tags display left to right, with the next lying near the first if the width will accommodate them. Examples would be: <span> <em> <strong>, etc.
So, basically a div is just a container. Within it, you're placing other block elements or inline elements, depending on the purpose or layout. You can set specific widths to alter the layout, or change anything with display:block; or display:inline; in css - plus float them left or right - with a clear:both; in the next element.
Begin your next idea with a sketch - block-out the main areas you want, and house them all in one big <div> called "container" or something...set the width and margins on this & the rest is contained.
If doing a site w/ a leftbar, I normally start w/ something like this skeleton:
...
<body>
<div class="contain">
<div class="head">
</div
<div class="main">
<p>
</p>
</div>
<div class="left">
</div>
<div class="foot">
</div>
</div>
</body>
</html>
So, main has a set width, is floated right, and left has the same - so they lie next to one another. [As long as the width set for the container will allow the total set widths of these two.] The foot has clear:both; as part of the styles.
Beware of "Divitis" - you don't need a hundred different ones to get the layout - just a few main ones with other elements within them...But hey, you've got a great CSS forum right here - go check it out to hear from the experts. ;-) [Try Site Point's, as well.]
ElHey thanks,
Yah, im trying to learn the whole <div> thing a little more to understand it. I got the concept that is is basically a container but if im getting what you post correctly, I never thought of basically setting the whole page in one container and then adding the smaller ones within it.
Ill keep practicing and feel free to keep more suggestions and tips coming and ill keep reading on the css forums.
I got whats gonna be a really stupid question but I just cant seem to get the concept here. Ive been playing with building webpages for awhile now and have gotten by decently for a beginner. Ive even built a couple sites for a small business and a church and they look great for beginner work, but one thing just seems to elude me all together.
This one thing is positioning. I undestand the concept that while writing the code things fall into place where you set them from left to right. I also understand <div> commands to an extent. But what is eludeing me is, lets say I put up a page with a background with a sideline and a horizontal line seperating the top of the page to put a graphic up there of some sort. I got the concept of I begin the page by adding the graphic first thing say centering it. The I want to move down to the sideline and Im gonna add some buttons for links and then in the middle a pic and some article and then on the right some more buttons with links.
Ok I got the top graphic then Im lost at that point in aligning everything to come out right. I understand at this point I would make my first button align it left to postion it on the left side of the sideline, but then what? If I add a break and then the other link buttons, how do I go back to the center of the page to add a pic and article and with the line breaks in that how do I get to makeing the link buttons on the right side with keeping everything in a nice little area where it looks right.
Up until now I would normally put a table in for the left side links, coded after the top graphic and a line break, then I would code the center pic and and article, and then add another table for the right side link buttons. But I have to use the tables because if I dont I got buttons and text all over the place. Not to mention my right side table is gonna be postioned lower at the bottom of the center article.
I know this is something very simple and im just missing it, ive read through so much stuff on this site and just keep missing the concept of laying out the page well.
At this point Im using dreamweaver which yes I know does so much of the work for me, and it is nice but I want to be able to write the code myself and not rely on programs like that. But even in dreamweaver to get things where I want them I am basically using layers. I open up a layer put what i want in it and set it where I want it. Is this the common practice or is there a more proper way of doing things? After I examine my code in dreamweaver I notice that everything is basically <div> commanded. Is this how postioning is primarly done or is there a secret or maybe just a common fact im missing in the way a page is coded to come out in a nice neat layout?
Any advice and suggestions would be greatly appreciated, Like I mentioned ive read a ton of stuff on the site but maybe Im just missing the right one, so any suggestions on a section to read that would explain this to me would be appreciated as well.
Thanks guys
YimanoHi -
I think it'll help a lot when you get familiar with block-level and inline elements.
Block-level tags/elements in .html display top to bottom, with none lying next to one another. Examples would be: <p> <div> <h#> <ul> <table>, etc.
Inline tags display left to right, with the next lying near the first if the width will accommodate them. Examples would be: <span> <em> <strong>, etc.
So, basically a div is just a container. Within it, you're placing other block elements or inline elements, depending on the purpose or layout. You can set specific widths to alter the layout, or change anything with display:block; or display:inline; in css - plus float them left or right - with a clear:both; in the next element.
Begin your next idea with a sketch - block-out the main areas you want, and house them all in one big <div> called "container" or something...set the width and margins on this & the rest is contained.
If doing a site w/ a leftbar, I normally start w/ something like this skeleton:
...
<body>
<div class="contain">
<div class="head">
</div
<div class="main">
<p>
</p>
</div>
<div class="left">
</div>
<div class="foot">
</div>
</div>
</body>
</html>
So, main has a set width, is floated right, and left has the same - so they lie next to one another. [As long as the width set for the container will allow the total set widths of these two.] The foot has clear:both; as part of the styles.
Beware of "Divitis" - you don't need a hundred different ones to get the layout - just a few main ones with other elements within them...But hey, you've got a great CSS forum right here - go check it out to hear from the experts. ;-) [Try Site Point's, as well.]
ElHey thanks,
Yah, im trying to learn the whole <div> thing a little more to understand it. I got the concept that is is basically a container but if im getting what you post correctly, I never thought of basically setting the whole page in one container and then adding the smaller ones within it.
Ill keep practicing and feel free to keep more suggestions and tips coming and ill keep reading on the css forums.