|
HTML - Block And Inline Elements
Hi, I was wondering if someone could explain block and inline elements. I know they deal with word wrap but, I have read and I am still confused on how you know what is a block element and what is an inline element. Can someone provide some aid? Thanks.
Similar TutorialsIn a nutshell: --- The following <li> tags are inline-blocks. Why does removing the closing <li> tags fix the whitespace issue? Code: <li>Item one</li> <li>Item two</li> <li>Item three</li> Versus... Code: <li>Item one <li>Item two <li>Item three The context of this question: --- From: CSS display: inline-Block: Why It Rocks, And Why It Sucks The above post is about using inline-block instead of float to position <li> elements, which is useful for making navigation bars. There is one drawback to using inline-block: (You can copy and paste the first piece of code below to see what I'm talking about.) If you restrict the <ul> to a particular width, your navbar won't display correctly, which has something to do with hitting the RETURN key between your lines of code (whitespace issues?). See below: This works fine because there we didn't hit RETURN to create a line break between each list. <li>Item One</li><li>Item Two</li> Here, we hit RETURN to put each list on a separate line and now the code doesn't display properly. The first piece of code below illustrates this problem. <li>Item One</li> <li>Item Two</li> The second piece of code solves this problem by using comments to remove the whitespace. The third piece of code solves this problem by removing the closing <li> tags. My question is, how does removing closing tags change anything? Are there any issues I should be aware of if I use this solution? Are there other contexts where I can apply a similar technique? Code: <style type="text/css">
ul#display-inline-block-example,
ul#display-inline-block-example li {
margin: 0;
padding: 0;
}
ul#display-inline-block-example {
width: 300px;
border: 1px solid #000;
}
ul#display-inline-block-example li {
display: inline-block;
width: 100px;
min-height: 100px;
background: #ccc;
vertical-align: top;
}
</style>
<ul id="display-inline-block-example">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
Code: <style type="text/css">
ul#display-inline-block-example,
ul#display-inline-block-example li {
margin: 0;
padding: 0;
}
ul#display-inline-block-example {
width: 300px;
border: 1px solid #000;
}
ul#display-inline-block-example li {
display: inline-block;
width: 100px;
min-height: 100px;
background: #ccc;
vertical-align: top;
}
</style>
<ul id="display-inline-block-example">
<li>Item one<!--
--><li>Item two</li><!--
--><li>Item three</li>
</ul>
Code: <style type="text/css">
ul#display-inline-block-example,
ul#display-inline-block-example li {
margin: 0;
padding: 0;
}
ul#display-inline-block-example {
width: 300px;
border: 1px solid #000;
}
ul#display-inline-block-example li {
display: inline-block;
width: 100px;
min-height: 100px;
background: #ccc;
vertical-align: top;
}
</style>
<ul id="display-inline-block-example">
<li>Item one
<li>Item two
<li>Item three
</ul>
I'm having some trouble figuring out what the best way to implement something is. I have a <div> with a <button> in it that has some text. I'm using niftyCorners to round the div corners, and the div needs to be a block level element because if I make it inline, the background disappears after it is rounded. My problem is that I only want the div to be as wide as the text in it, because the div is what is providing the background and rounded corners and such for the button. Is there a good way to implement this? All I can think of is floating the div which would be a PITA or trying to set an explicit width with JS or something. Can anyone tell me why, in the code below, the yellow box is lower than the red one? I can't work out why they're not aligned. If I change the boxes' innerHTMLs so that the yellow one contains more text than the red, the red one is lower down. I don't understand why this is happening! Code: <!DOCTYPE HTML> <html> <head> </head> <body> <div style='background-color:blue; '><span style='display:inline-block; width:300px; height:200px; background-color:red; '>h gfh difd fk kl;fd ;fdk fdg fdklfd fd fdk kfng yh gi5ut rgfmr fkfmn lpke</span><span style='display:inline-block; width:300px; height:200px; background-color:yellow; '>yh gi5ut rgfmr fkfmn lpke r8nfd dsjnf psdn sd</span></div> </body> </html> Hello everyone, I have a problem and it is driving me insane :/. I am trying to create 3 inline boxes (using span or div?) that are right next to one another (ie. with no borders). The two at either side are of length 25% and the middle is of length 50%. Here is my effort at coding it myself : Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body {
word-spacing: 0px;
}
.sideWrap {
top: 0px;
width: 25%;
height: 100px;
background-color: #0CF;
display: inline-block;
}
.sideWrap2 {
top: 0px;
width: 25%;
height: 100px;
background-color: #0CF;
display: inline-block;
}
.center {
padding: 0px;
margin: 0px;
left: 25%;
width: 50%;
height: 200px;
background-color: #0F0;
display: inline-block;
}
</style>
</head>
<body>
<span class="sideWrap"></span>
<span class="center"></span>
<span class="sideWrap"></span>
</body>
</html>
But unfortunately, this produces ... something I dont want .. as shown by the attachment. This clearly has inexplicable white borders that I have not coded :S, and the three blocks are not inline. Can anyone give a simple explanation as to how to put these in line and eliminate the border between them? Thanks in advance, mintsmike Trying to modify a template.. http://www.varaxon.com/ On the right, below the login box are 3 seperate boxes - I've been trying to make these completely clickable - I just can't seem to figure it out. I tried doing unordered lists, etc. Color me stupid - I'm just a lowly PHP Developer with minimal design/html coding experience. -G I am designing the home page for a website. I have a list of links that is the site index that is 300px wide. I want this on the left side of the page. I want a paragraph that will basically be a introduction to the website to be inline with the index... sitting to the right of the index rather than below it. here is a simplified version of what I have: <body> <div id="wrapper"> <div id="head1"> <h1> page title </h1> </br> </div> <div id="list" <ul> <li> <a href="perps.html"> blah</a> </li> </br> <li> <a href="Why.html"> blah </a> </li> </br> <li> <a href="surveillance.html">blah </a> </li> </br> <li> <a href="me.html"> blah </a> </li> </br> <li> <a href="network.html"> blah </a> </li> </br> <li> <a href="mystory.html">blah </a> </li> </br> </ul> </div> <div id="intro"> <p> ***paragraph text****.</p> </div> </div> </body> CSS sheet: #list { width:230px; padding: 20px 0 0 20px; border-style: solid; list-style:none; } #intro { border-style:solid; float: right; padding: 0 0 0 0px; margin: 0 0 0 300px; border: 0 0 100px 0; } I know i need to use "span" but I have no idea where to start. Any help would be greatly appreciated. I am new to web development and am using a combination of Dreamweaver CS3 and code. I feel pretty comfortable with the code now but am having some problems getting a grasp on how to position things the way I want. I decided to design my site to display well on an 800x600 monitor, so I made the container div 780px wide, and I have created divs inside of that. For the most part I set the box width to 100% for the divs and don't mess with positioning. I have one div that I want to put bulleted lists in, but I want the bullet items to be layed out so that there are 4 items high x 3 wide. In other words, I want to divide the width of the page (780) into 3 sections and each one would have 4 bullets - item 1 - item 5 - item 9 - item 2 - item 6 - item 10 - item 3 - item 7 - item 11 - item 4 - item 8 - item 12 Pretend that these are evenly spaced and centered on the page. I used 3 divs, making each 260px wide on the page, and then put an unordered list inside of each div. I found that I could not make the divs sit side by side unless I also set float left for the CSS style. However, when I did that, the upper border of the div below these which was a 760px wide div with a table in it jumped up above them. I fixed it by setting that div to float left also. OK so I got it to look right, but I don't understand what I'm doing here. Is there a better way to do this, or can someone clear up why this worked? Thanks, Jeff I know from personal experience, the specs and some great posts that DIV's are not allowed inside of P tags. And it's normal to be so, but what about inline-blocks? I could simply use SPAN or some other inline element which works inside the P, but IE only renders natural blocks as inline-block. Meaning if it's an inline element it will work in Firefox but not IE, if it's a block the other way arround. So how do I solve this quanundrum? Either I need an element which is a natural block in IE and is allowed inside a P by the specs, or I'll use DIV instead of P, but I would much rather avoid this. How do I make element's change their height automatically depending on whether they have anything contained within them? My page background is a div's bg image but the div hasn't expanded to the size of the contained elements. The div's name is nicola-bg Here is the site I have the same problem too with #image-section. That div is styled to have large borders but the borders don't extend to the height of the div's containing elements. Hi! I have a problem with a div in my website. As you can see, the text goes out of the div block. The text is in <pre> tags! I noticed that first the problem was because text isn't seperated, but it still goes out of the block. In FF I can use <pre width>, but this doesn't work in IE. How can I "force" the text in the block? Hello, i got a css theme, that i tried with tumblr, it didn't work, seems like that i have missed something. I can't upload, or post anything, ...well i can but from the CSS file, and it's kinda annoying. here's the theme. http://www.2shared.com/document/jTGY...e_tumblr_.html I tried to create the blocks, the following ones : http://skeedio.com/tutorials/web-des...tumblr-themes/ But it did nothing, can anyone help/edit me ? please or can tell me what i've missed ? can i create the block from the css ? it seems that tumblr is more html...i'm newbie sorry ) Is their any shortcut to give inline css in Dreamviewer ? Since I am using Dreamviewer & I have to write Inline CSS explicitly & there is streachable facility in the control so that we can stretch & its appropriate width & height can be assign to its component ? Since I am getting it in dreamviewer & if any body knows how to do it then please let me know abt it ? Regards.... Hey all. I just recent finished the following site for a client: http://www.stagingupstyle.com/ My client would like me to change the formatting of the text on the "Designer" page to be block text like a news paper. Does anyone know how to do this? Here is an example of block text. http://www.readingonline.org/article...r/image1ri.gif Hello all. Is it possible to block multiple words in a search box using html or javascript? A search box on my own site. Example: writing "bad" in the search box will receive no results. Hoping for an answer Harold Dear all, How can I get a block of text to appear in its own coloured box? I want to display some BlitzBasic code like this... ... but at the moment, I'm doing it like this, padding it out with spaces... Code: <p><span style="background-color:#D1D1FF;"><tt>
Graphics3D 640,480 <br />
SetBuffer BackBuffer() <br />
cam=CreateCamera() <br />
light=CreateLight() <br />
cube=CreateCube() <br />
PositionEntity cube,0,0,5 <br />
tex=LoadTexture("brick.png")<br />
EntityTexture cube,tex <br />
While Not KeyDown(1) <br />
RenderWorld <br />
Flip <br />
Wend <br />
End <br />
</tt></span></p>
Is there a way to set the width - I can't seem to find one. Many thanks. T Which doctype doesn't allow for inline? Right now every line break in my code, IE creates a space in the tables. How do I get rid of this? Thanks, Alec Well, i'm not sure i'm gonna use this snippet but i can think of plenty reasons why i might: Code: <h4 style="display:<?php print $display; ?>"> It won't validate because, quote: "character "<" is the first character of a delimiter but occurred as data." Maybe i've been staring at it too long but i don't see the difference from any other php statement, which the validator should simply not parse. ?? Thanks, Joey I have display:inline and its adding in two drop boxes that it shouldnt. After the drop boxes it then stops the inline. Im new to css, have only been trying it for the past couple of days. The two drop down boxes are suppose to be on the left, under the links at the top. Can someone explain to me why inline stops where it does? Thanks. Oh yeah, the links under <li> I know their to the wrong address's. body { font-family:georgia,'times new roman',times,serif; color:#BD0A70; background-color:#F2F2F2; } ul.navbar { list-style-type: none; padding:0; width:32em; float:left; } ul.navbar li { display:inline; font-size:125%; background-color:#007BA7; margin:.10em; } ul.navbar a,ul.navbar a:visited { color:#ffffff; text-decoration:none; } ul.navbar a:hover { background:#00008B; } form.jump { /* position: absolute; */ float: left; } div.floatright { /* position: absolute; */ float: right; } h1 { clear:both; font-family:helvetica,geneva,arial,SunSans-Regular,sans-serif; } ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>My first styled page</title> <link rel="stylesheet" href="mystyle.css"> </head> <body> <a charset="ISO-8859-1"> <!-- Site navigation menu --> <ul class="navbar"> <li><a href="index.html">Change email</a> <li><a href="musings.html">Change Password</a> <li><a href="town.html">F.A.Q.</a> <li><a href="town.html">Contact</a> <li><a href="links.html">Log out</a> <li> </li> </ul> <form class="jump" action="/reredirect.php" align="left" method="post"> <input type ="text" name="userpage" size="17" value="Jump to user page" onFocus="this.value=''"> <img src="cooltext406694699.png" align="absbottom" onmouseover="this.src='cooltext406694699MouseOver.png';" onmouseout="this.src='cooltext406694699.png';" input type="submit" value="Submit" name="submit"></img> </form> <div class="floatright"> <script type="text/javascript"><!-- /* 234x60, created 11/22/08 */ google_ad_slot = "0343255875"; google_ad_width = 234; google_ad_height = 60; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> <!-- Main content --> <table> <tr> <td> <form method="post" action="/redirect.php" name="event"> <select name="select" class="breakinline" onChange="this.form.submit()"> <OPTION SELECTED>Select friend <OPTION value="/users/sharon">name1 <OPTION value="/users/carrie">name2 <OPTION value="/users/capy">name3 <OPTION value="/users/charla">name4 </SELECT> </FORM> <td> <form id="myeventz" method="post" action="/changeevent.php" name="myevent"> <select name="myevent" class="tabletxt" onChange="this.form.submit()"> <OPTION SELECTED=>12/25 Christmas</option> <OPTION value="0101 Event One">01/01 Event one <OPTION value=" 0202Eventtwo">Remove this event <OPTION value=" ">Add a new event </SELECT> </FORM> </td> </tr> </table> <p>Select item's to remove</p> This question might be rather basic. I'm not a web-developer, though I have a lot of other coding experience. As part of an internal webpage I'm creating, I want to access a webservice that returns a string and display it on the page. The service is accessed by URL, and requires parameters that are dynamically generated base upon the request parameters, so I can't just use #include. What I want to see is something like this, where the number string is provided by the webservice: Authorization code: 1343-7205-7570-8264 I tried this: Code: Authorization code: <object type=text/plain data="http://blah/service?params"></object> IE doesn't output the resulting string. Firefox does output the string, but it's not cleanly inlined with the rest of the text. It has it's own big block of the screen that the text sits in. Is there a simple way to insert the text from a dynamically generated URL into the current page? I'd like to open an inline frame on my site. I've got the code this far; however I cannot find out how to finish it. I need to knowhow to get it to open at a certain spot on the page. So like an example would be I want it to open at spot x on a page. How would I code this to open it at that spot? Code: <html> <body> <iframe src="default.asp" width=125px height=125px></iframe> </body> </html> |
|||||||