Creating webpages

[reekdog]

Hey,

I have recently downloaded the Firefox web developer tool too see how webpages site layout has been created. Most of the webpages i view the block level elements of have so many. Some i would think could be combined into one block, for instance a line of text for the title is one block element, then the picture underneath is another block and text to the right of the image is another block.

It's made me wonder if how i'm practising to put some webpages together is the correct way. I'm also wondering because when i create floating div blocks with margins, it displays completely differently in IE and FireFox.

Currently all the webpages i'm prctising in re-creating, i use div blocks. For instance;


.wrapper {
width: 900px;
min-height: 500px;
background-color: #F0F0F0;
}

.leftbox {
width: 280px;
height: 400px;
float: left;
margin: 10px;
background-color: white;
}

.centerbox {
width: 280px;
height: 400px;
float: left;
margin: 10px;
background-color: white;
}

.rightbox{
width: 280px;
height: 400px;
float: right;
margin-top: 30px;
background-color: white;
}



When i look at other webpages source code, most if it doesn't make sense to me at the moment, but a lot of them also don't seem to use width and height attrubutes for every block element that is outlined using the firefox web developer tool.

I was wondering if anyone knows of a good website that explains how best to create webpages using CSS that covers this issue? Or if anyone has input that would be appreciated.

Thanks :)

[Horus_Kol]

first step is to reset the browser defaults - http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

that should resolve problems of variation between IE and FF, for the most part...


as for looking at how sites work, I suggest getting the FireBug plugin as well as web-developer... FireBug has a nice feature which shows ALL of the styles applied to an element, including what is inherited and overridden from parent elements and styles.

for the most part, a margin is only set for a generic set of elements:


div {
margin: 30px;
}

// or

div.some-class {
margin: 30px;
}


and then an individual block can have additional styles which.


As for the "best" way...
whichever way works for you - so long as you don't make things difficult for yourself when you want to change something, then you should be right (and as long as it is valid :) )

[reekdog]

Thanks for the reply. I'm unsure about how the div margins are used. I added them into a basic website i've put together to see how they can work, and some will appear in wierd places. Such as margin-top: 30px will appear just under the top to the left (which is correct) but then margin-right: 30px will appear top left, like it didn't work.

I'm wondering, do you only use div margin classes for text and images within a CSS box? As the box will contain the width, height and color, the magrin seems to soley place text/image at a certain place on the webpage. If so, i'm wondering then why if this text/image would be within the CSS box anyway, why use a div margin class to align one line of text, then again for the next line (creating another block element), when it would be just as easy to insert a <p> element or something ?

I'm a bit unsure about the browser defult code which is included in the website you linked too. How should i best implement this into a webpage i'm creating? Would i copy paste all the code and place it into a notepad document, then save as defult.html ? Would this then allow me to copy and paste that document into every webpage i create to easily set the defult, or should each webpage have this information specifically placed into the css?

Thanks :)

[reekdog]

bump :)


.

[Horus_Kol]

Please don't bump - you get answers when people have the time and ability to provide answers...

[reekdog]

Sorry, i didn't know

[JoeyD]

Such as margin-top: 30px will appear just under the top to the left (which is correct) but then margin-right: 30px will appear top left, like it didn't work.
Have you any examples posted? I'm have trouble visualizing what you're asking. Your right margin means the right edge of the box is 30px from the next block to the right, so it wouldn't have anything to do with the top left of your container.

Since div elements are only used for grouping together a set of related elements within a common block, your main structure usually doesn't want any margins or padding at all, which is why that reset is useful. Then you just add margins and padding to the elements which require them. That code goes in your stylesheet, not your HTML document, and as mentioned on the site it's just a place to start from.

So usually, the way i do things anyway, div elements only have margins when they're nested inside of the main divs; say i have a box full of ads or sumething and i don't want it butted right up against the parent container. And they rarely have padding at all, since the margins on my semantic markup separate the content visually.

Am i getting anywhere near your question or am i mixing you up? If i'm reading you correctly, i think you might be confused about block elements, which include paragraphs and lists and headings, not just div containers. If you tick "show element names when outlining" you get a btter idea how the page is put together. But don't let them fool you, first outline the table cells.

[sportsfanatic54]

You could check out some of Bonrouge's CSS layouts and FAQ's for a bit more info.

http://www.bonrouge.com