CSS question about <div>'s

[andyjamesnelson]

Hey - this might be a stupid question but its something I feel unsure about so far and I don't want to carry on doing this if my understanding is wrong etc.

So far the way I make rectangular shapes in css is to invent a <div> in the html mark-up and give it an id="" of something - then give that height / width color etc in css - then I can position that shape on screen.

Is this the right way of making shapes in css for layout without turning to external non css graphics?

I know it works I just am not sure if this is the right way to consider the function of the <div> tag

I am totally unsure what the function of this tag in a way. I know it creates divisions - say a block of of <p>'s etc but why can I use it in the same way to create graphical elements?

As you see I am a bit confused. Any suggestion. Thanks. Andy

 

[angelwatt]

Divs can be thought of as layers, it's a container, fairly generic. How you're using them sounds fine. Whether or not it's the best approach would depend on the specifics of what you're doing. There's possibly alternatives, but from the brief description you've supplied it sounds like you're doing OK.

 

[OutThere]

Here's a short piece on the Box Model which might help you visualize what you're doing with divs and other things: Link

 

[andyjamesnelson]

What are the other ways of doing this anglewatt?

Your reply made me feel like I'm doing it in a simple way. I'm worried that I need to be strict with myself whilst web programing and I don't want to learn bad habits now.

Andy

 

[angelwatt]

What are the other ways of doing this anglewatt?

Like I said, I'd need to know exactly what you're trying to achieve (code and desired visual effect). I can't make any blanket statements on it.

 

[SrWebDeveloper]

Is this the right way of making shapes in css for layout without turning to external non css graphics?

Please note I agree with angelwatt that you need to supply a specific example of what you want so suggestions can be made to you. But to talk in a general nature, div's may be used in any of the following ways:

1) as rectangular content areas (box model) - commonly called "container"
2) as containers that are intended only to divide up a page into grids (layout)
3) both - plus div's can be put inside of div's as required

Please take a moment to read that wonderful link supplied by the ever helpful OutThere who posted it earlier in this thread to learn more about the box model. You didn't mention it at all, it will help you understand this.

But to expand on how div's might be used, let's say as a simple example you need a circle shape with a 2 pixel red border the same shape as the circle in your page as well as a square with a green border right below it, cross browser compatible. You'd first create a web page divided up into grids using div's to create the overall layout, each with unique ID's, and your circle uses the ID named "circle" and the square named "square".

1) For the circle, create it in Adobe Photoshop with its red border. In your CSS, do something like this:

div#circle { background-image: url('/path/to/circle.gif') }

2) For the square, no need to create a square.gif since div's can be sized accordingly, so do something like this:

div#square { width: 100px; height: 100px; border: 1px solid green }

Get the idea?

As you might have discovered, it's really the CSS that needs to evolve from its present incarnation in my opinion.

There are no custom shapes in the current implementation of CSS which for now controls things like how object behave or look or if they appear within the content flow or not. However, in future versions of CSS there are working drafts being considered by the W3C to allow div's to become boxes with rounded corners, cross-browser compatible filter effects such as shadow, glow, etc. and even circles where radius can be defined, etc. Plus many new design features and behaviors to reduce coding (server side and client side).


-jim