2 ⤊

CSS question. Display Block property?

I'm new to CSS and im learning from a demo of a CSS tabbed menu. (This is the demo: http://odyniec.net/articles/css-based-tabbed-menu/). My question is that under ul.tabs li a { }, the display property was set to "block". I'm not sure why it's set to block. i have set the display property to "inline" to see what would happen but nothing really changed. On another attempt, i didnt set the display property and still nothing changed.

So what is the purpose of having set the display property to block?

Also, this tabbed menu is suppose to be a horizontal menu yet block was used. Isn't the purpose of block suppose to seperate elements by break lines thus possibly making the menu not horizontal but maybe even vertical???

2006-07-24 10:13:59 · 4 answers · asked by burnt1ce85 2 in Computers & Internet ➔ Programming & Design

4 answers

The block property allows elements to behave like

s - to float around and be positioned in various ways.

List elements do not float - they drop below each other (inline can be thought of as one line after another).
But by making them 'block', the can float, for example sit beside each other as the menu tabs do in the demo. Making tags block allows you to do anything to them you could do with a

- set margins, spacing, background images and so on.

Before CSS, people would wrap their s in divs to get the same effect.

2006-07-24 10:48:32 · answer #1 · answered by sheeple_rancher 5 · 1⤊ 0⤋

I'm not sure what the purpose was in your example, I would have to mess with the code myself, but the main difference between block level elements and inline elements is that an inline element is not seperated from the content around it while a block is.

For example, without changing anything in the styles, a

tag always appears on a seperate line from everything else around it. However anything in a tag will be on the same line as everything else.

It probably isn't too important in what you are doing, but some browsers that you haven't tested on may treat it differently, so it is better to be too specific rather than hope all browsers will do the same.

2006-07-24 10:19:49 · answer #2 · answered by John J 6 · 0⤊ 1⤋

Use { position: absolute; left:0px; excellent: 0px } or { position: relative; left:0px; excellent: 0px } === static merchandise has no particular positioning; it follows the format guidelines of HTML. absolute merchandise is placed relative to figure ingredient's position—or to the body merchandise if its figure ingredient isn't placed—making use of the excellent and left residences. relative merchandise is placed in accordance to the conventional move, and then offset by the excellent and left residences. feedback placing the resources to absolute pulls the article out of the "move" of the record and positions it in spite of the format of surrounding gadgets. If different gadgets already occupy the given position, they do no longer influence the placed merchandise, nor does the placed merchandise influence them. rather, all gadgets are drawn on a similar position, inflicting the gadgets to overlap. This overlap is managed by making use of the z-index characteristic or resources. surely placed gadgets do no longer have margins, yet they do have borders and padding. placing the resources to relative places the article contained in the organic HTML move of the record, yet offsets the placement of the article depending on the former content cloth. right here syntax exhibits the thanks to create superscript textual content by putting the textual content in a SPAN it is placed relative to the spectacular textual content contained in the paragraph.
The superscript in this call xyz /SPAN is "xyz"./P textual content and gadgets that stick with a truly placed merchandise occupy their own area and do not overlap the organic area for the placed merchandise. compared, textual content and gadgets that stick with a very placed merchandise occupy what ought to were the organic area for the placed merchandise beforehand it replaced into pulled out of the move. the dimensions of the content cloth determines the dimensions of gadgets with format. as an party, placing the excellent and position residences on a DIV merchandise supplies it format. The content cloth of the DIV determines the dimensions. thus, the content cloth determines the dimensions of the width.

2016-10-15 04:04:33 · answer #3 · answered by ? 4 · 0⤊ 0⤋

also: in-line elements can't have margins and widths. in that particular example, try setting the width property to 100px. it only works if there's display:block.

2006-07-26 11:59:04 · answer #4 · answered by hafifuyku 1 · 1⤊ 0⤋