SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    i dont understand why a tag should be displayed inline opposed to block

    Hello,

    I been wondering why one would want to change the display from inline to block level on some tags.

    Refering to this code: The div is as default a block level tag, why would we need to change it to inline. Apparently inline means flow within the line. I need some better examples than this one to really understand it.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
    <head>
    <title>Inline and block level elements</title>
    <meta http-equiv="content-type"
    content="text/html; charset=utf-8" />
    <style type="text/css">
    #one {
    background-color: #CCCCCC;
    color: #000000;
    border: 2px solid #AAAAAA;
    padding: 2px 6px 2px 6px;
    }
    #two {
    background-color: #CCCCCC;
    color: #000000;
    border: 2px solid #AAAAAA;
    padding: 2px 6px 2px 6px;
    display: inline;
    }
    a {
    background-color: #ACACAC;
    color: #FFFFFF;
    text-decoration: none;
    padding: 1px 2px 1px 2px;
    }
    a.block {
    display: block;
    }
    </style>
    </head>
    <body>
    <div id="one">A div is a block level element.</div>
    <p>It is possible to display a div or any other block level
    element as an inline element.</p>
    <div id="two">This div is displaying as an inline element.</div>
    <p>This paragraph contains a <a href="http://www.sitepoint.com/"
    >link</a> that displays as an inline element.</p>
    <p>This paragraph contains a <a class="block"
    href="http://www.sitepoint.com/">link</a> that displays as a
    block element.</p>
    </body>
    </html>

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I understand the block-level elements can contain inline level elements or even block-level elements. I also understand that inline-level elements cannot contain other inline-level elements.

    I also understand that block-level elements span the entire width of the parent element.
    But i dont understand the inline thingee.

    ben

  3. #3
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi. Next time, post code in [ code ] and [/ code ] without the spaces.

    Anyway, Block level elements can contain other block level elements and other inline elemenets. Inline elements can contain other inline elements but not other block elements. However, that is all to do with the HTML. If by html an element is defined by block or inline, it must follow those rules.

    And for your question as to why people may want to change this. The main reason is to make elements display next to eachother (when setting display to inline) or below and above one another (when setting display to block.

    For example, one might have a set of links, which is marked up in an <ul> and <li>'s. <li>'s are by default a block level element. So if a person wants them to display next to eachother, they would have to give them a display of inline.

    Hope that helps.

  4. #4
    SitePoint Enthusiast chipper's Avatar
    Join Date
    Aug 2003
    Location
    middle of nowhere aka west texas
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Inline vs Block - the rematch

    You've almost got it. Inline/block is all about document flow. In the simplest terms, a block element will force a line break before and after it. An inline element won't - other elements can sit right next to it. That is how HTML/CSS was intended.

    Yes, a block element will take up the width of it's parent element. And yes, a block element can contain inline elements. Block elements can even contain other block elements (like a div within a div) - though it should be avoided if possible. The one thing you're misunderstanding is that inline elements can contain other inline elements. How else would you be able to make an image into a link? Both the <a> and <img> tags are inline elements by default. So, when you have a line like this:

    <a href="page2.html"><img src="some_image.jpg" /></a>

    That is an example of nested inline elements.

    So, you want to know why someone would want to change the display property from inline to block, or vice versa. There are a wide range of reasons, it really depends on the situation. I'll give you two examples:

    Going block -> inline

    Let's say you want to make a menu that runs horizontally across the top of the page. Your menu could be written out as an unordered list:

    <ul id="nav">
    <li>Menu Item One</li>
    <li>Menu Item Two</li>
    <li>Menu Item Three</li>
    </ul>

    However, by default the list items - <li> elements - are block elements. They would appear on top of each other vertically. However, if in your css you had:

    #nav li {
    display: inline;
    }

    That would change the <li> elements so they appear next to each other, rather than on top of each other.

    Example 2, inline -> block

    Let's say you were a photographer that wanted to show off a bunch of photos that you had taken. You could have this code in your HTML:

    <div id="portfolio">
    <img src="image1.jpg" />
    <img src="image2.png" />
    <img src="image3.gif" />
    </div>

    They would all display sitting right next to each other, because as a default, the <img> tag is an inline element. However, if you have this css:

    #portfolio img {
    display: block;
    margin-bottom: 20px;
    }

    The would appear on top of one another (with a 20 pixel margin), which is a much nicer effect for a portfolio.

    So it's all about the effect that you're after with your web pages. You just have to get used to which elements are by default inline, and which are block, and recognize when you would want to change that.

    For your reference, here is a list of HTML inline elements:
    http://htmlhelp.com/reference/html40/inline.html

    And block level elements:
    http://htmlhelp.com/reference/html40/block.html

    znebojsa - you must have posted while i was writing this all out - you beat me to it!
    Last edited by chipper; Nov 8, 2007 at 02:04. Reason: other post already happened/typo

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are two separate issues here, which may be confusing.

    Block-Level and Inline HTML Elements
    HTML comprises block-level elements (like DIV, P, TABLE) and inline elements (like EM, Q, VAR). Inline elements cannot contain block-level elements (with one exception: OBJECT), only text and other inline elements. Some block-level elements (like P) can only contain text and inline elements; some (like FORM) can only contain other block-level elements in the Strict DTD; and some (like DIV) can contain both.

    This division is grammatical and syntactical and cannot be changed by an author or web designer.

    Block and Inline CSS Boxes
    CSS renders boxes: rectangular areas. There are block boxes and inline boxes, and they differ considerably in how they are laid out. The built-in user agent style sheet in a browser specifies rules for how each HTML element type should render. Very simplified, block-level HTML elements generate block boxes and inline HTML elements generate inline boxes.

    A designer can change the type of box that is generated for a particular element, using the display property. This only changes the rendered box and the way it is laid out. It doesn't alter the grammar rules of HTML or affect the element itself in any way. Setting display:block for an em element doesn't allow us to nest a h1 inside it.
    Birnam wood is come to Dunsinane

  6. #6
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,301
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    one reason for using css to change something from inline to block answers the question 'how can i get the effect of <br />, make a new line, in css?'

    <p>Some text which'd be <span style="display:block">better for being on two lines</span></p>

    which is similar to chipper's "Example 2, inline -> block" above.

  7. #7
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Uh oh. I didn't know this:
    Quote Originally Posted by Paul
    some (like FORM) can only contain other block-level elements in the Strict DTD;
    So wait, I have a form with legend (inline?), and also inputs (after the lables, not inside them like I've seen). Also, the submit input is also inline, correct?

    Should I have set my inputs and legends in block elements while using (x)html strict?? I don't remember getting a validator error for this; does the validator catch this?

    I've seen <p><input etc... /></p> but I thought that was non-semantic as an input isn't a paragraph... but maybe it's because they needed a block child in a form??

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You don't need tables to mark up your forms, and what Paul is referring to is simply using either a DIV or a FIELDSET inside the form to contain the elements it holds, like so:

    HTML Code:
    <form action="#" id="some-form" method="post">
        <div>
            <!-- everything inside the form goes here -->
        </div>
    </form>
    Here's another example (yes, the select/option and textarea elements should have labels associated with them, but I never got around to it) which also proves that you don't need tables to lay out a form (oh and folks, don't get me started on the "X"HTML or my use of the universal selector in forms - that's not for this thread; afterall, this is just an example, and besides, I have my own CSS reset that plays nice with forms anyway and will be used when I next update this example anyway).

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<title>CSS Based Form Layout</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css" media="screen,projection">
    	
    	* {
    		margin: 0;
    		padding: 0;
    	}
    
    	body {
    		background: #FFF;
    		color: #000;
    		font: normal 85&#37;/140% "lucida console", tahoma, verdana, arial, helvetica, sans-serif;
    		letter-spacing: 1px;
    		padding: 0 1em;
    	}
    
    	h1 {
    		background: #FFF;
    		color: inherit;
    		font: bold 1.95em/2em georgia, garamond, "times new roman", times, serif;
    	}
    
    	#example-form {
    		padding: 0.5em 0;
    	}
    		#about {
    			float: left;
    			margin-right: 1em;
    			width: 30em;
    		}
    
    		#survey {
    			float: left;
    			width: 33em;
    		}
    
    		.fieldset {
    			background: #FFE;
    			border: 1px solid #000;
    			margin-bottom: 1.5em;
    			padding: 1em 0 0.5em 0.5em;
    			position: relative;
    		}
    			fieldset {
    				border: 0;
    				display: block;
    			}
    		
    		legend span {
    			background: #CFC;
    			border: 1px solid #000;
    			color: #00C;
    			padding: 0 0.25em;
    			position: absolute;
    				top: -0.75em;
    			}
    		}
    
    		label {
    			margin: 0.25em 0;
    			vertical-align: middle;
    		}
    			#about label {
    				clear: left;
    				float: left;
    				padding-top: 0.1em;
    				width: 14em;
    			}
    
    			#survey label:hover {
    				background: #FFE;
    				color: #00F;
    				font-weight: bold;
    			}
    
    		input {
    			margin-bottom: 0.5em;
    			padding: 0 0.25em;
    			vertical-align: middle;
    		}
    			#about input {
    				background: #FCFBFA;
    				color: inherit;
    				width: 14em;
    			}
    
    			#survey input {
    				margin: 0 0.25em 0 0;
    				padding: 0;
    				width: auto;
    			}
    
    		select, textarea {
    			margin: 0.5em 0.25em;
    		}
    
    		select {
    			background: #FCFBFA;
    			color: inherit;
    		}
    
    		textarea {
    			background: #FCFBFA;
    			color: inherit;
    			padding: 0.5em;
    		}
    
    		textarea:hover, textarea:active, textarea:focus {
    			background: #FFF;
    			color: inherit;
    		}
    
    		.controls {
    			clear: left;
    		}
    
    	</style>
    </head>
    <body>
    <h1>Semantic Forms with (X)HTML and CSS</h1>
    <form action="#" id="example-form" method="post">
    	<div id="about">
    		<div class="fieldset">
    			<fieldset>
    				<legend><span>Basic Information</span></legend>
    				<label for="name">Your Name:</label> <input id="name" type="text" size="30" /><br />
    				<label for="email">Your Email Address:</label> <input id="email" type="text" size="30" />
    			</fieldset>
    		</div>
    		<div class="fieldset">
    			<fieldset>
    				<legend><span>What Is Your Favorite Color?</span></legend>
    				<select name="sections">
    					<option value="0">--select one--</option>
    					<option value="1">Black</option>
    					<option value="2">Blue</option>
    					<option value="3">Brown</option>
    					<option value="4">Green</option>
    					<option value="5">Grey</option>
    					<option value="5">Orange</option>
    					<option value="6">Purple</option>
    					<option value="7">Red</option>
    					<option value="8">White</option>
    					<option value="0">Yellow</option>
    					<option value="10">Other/No Preference</option>
    				</select>
    			</fieldset>
    		</div>
    		<div class="fieldset">
    			<fieldset>
    				<legend><span>Tell Us About Yourself</span></legend>
    				<div>
    					<textarea rows="10" cols="40"></textarea>
    				</div>
    			</fieldset>
    		</div>
    	</div>
    	<div id="survey">
    		<div class="fieldset">
    			<fieldset>
    				<legend><span>What browsers are installed on your computer?</span></legend>
    				<div>
    					<label for="msie"><input id="msie" type="checkbox" name="browser" value="Microsoft" /> Internet Explorer</label><br />
    					<label for="netscape"><input id="netscape" type="checkbox" name="browser" value="Netscape" /> Netscape Browser</label><br />
    					<label for="mozilla"><input id="mozilla" type="checkbox" name="browser" value="Mozilla" /> Mozilla FireFox</label><br />
    					<label for="opera"><input id="opera" type="checkbox" name="browser" value="Opera" /> Opera Web Browser</label><br />
    					<label for="konqueror"><input id="konqueror" type="checkbox" name="browser" value="Konqueror" /> Konqueror KDE</label><br />
    					<label for="safari"><input id="safari" type="checkbox" name="browser" value="Apple" /> Safari Web Browser</label><br />
    					<label for="another-browser"><input id="another-browser" type="checkbox" name="browser" value="Other" /> Something Else</label>
    				</div>
    			</fieldset>
    		</div>
    		<div class="fieldset">
    			<fieldset>
    				<legend><span>What do you use to build your Web sites?</span></legend>
    				<div>
    					<label for="golive"><input id="golive" name="editor" type="radio" value="Adobe GoLive" /> Adobe GoLive</label><br />
    					<label for="dreamweaver"><input id="dreamweaver" name="editor" type="radio" value="Macromedia Dreamweaver" /> Macromedia Dreamweaver</label><br />
    					<label for="frontpage"><input id="frontpage" name="editor" type="radio" value="Microsoft FrontPage" /> Microsoft FrontPage</label><br />
    					<label for="hand"><input id="hand" name="editor" type="radio" value="A Text Editor" /> Text Editor</label><br />
    					<label for="other"><input id="other" name="editor" type="radio" value="Other" /> Something Else</label>
    				</div>
    			</fieldset>
    		</div>
    	</div>	
    	<div class="controls">
    		<input class="submit" type="submit" value="Submit Form" />
    		<input class="reset" type="reset" value="Clear Form" />
    	</div>
    </form>
    <p>
    	Copyright &copy; 2006-2007, The Monster Under the Bed. All Rights To Scare
    	Unsuspecting Children Reserved.
    </p>
    </body>
    </html>

  9. #9
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Whew. I'd been saved by the fieldset. : ) Thx.

  10. #10
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Remember, the example is not perfect, and does have some (more than minor) issues. But if it gets you thinking about non-table based form layouts then all the better.

  11. #11
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I've never done a table-based layout. Tables are actually my weak point. Some day, I'll have to make a table and I'll be digging through the books again : ) But I have made about 4 forms now, using mostly Ian Lloyd's versions (except with names AND ids on everything).

    I do sometimes have an issue with the div groupings around every label-input pair. I have one site where the div is actually around every label AND every input-- I hate it, it just looks wrong. But it's even in my books (SitePoint books). It just seems that that really is adding extra html for really, presentational purposes.

  12. #12
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Guys, your responses are the best ive seen. Chipper, those examples were simple and now i understand the difference. THanks lots guys Ben


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •