|
HTML - Width Attribute Not Implemented In Inline Div (or In Span)
My problem is this: In the program I am working on, I want to put a javascript sliderbar in the horizontal top menu. The top menu is a fixed positioned <div> with the menu items (select boxes, a help etc) contained in it.
Problem is: the javascript bar is enclosed in <div>s Since a div by default causes a line break before and after, the sliderbar is not included as part of the other menu items, but is displayed under them. I tried to solve this in either of 2 ways: 1.by changing the divs around the bar into spans 2.by adding a display:inline style to the div. In both methods indeed the slider bar is included into the bar as I wanted BUT I run into another problem that I can't find a solution to: The code (very simplified) looks like this: <div> // top menu ... menu item... ... menu item... <div style="display:inline; width:180px;background-image:url('sliderbox.gif')"> // the background pic with the slider box <img src="sliderbutton.jpg" ... and all kind of javascript to make the thing work ....> // the slider button that moves over the slider box </div> </div> Now what happens is this. when the div is a block object, indeed it is displayed with 180px length and the 15px button moves left-right in it. However, when the div is made inline (or when span is used) as in the code above, the div/span with the backgroundpic (that is supposed to be 180 px)collapses to the length of the button that is contained in it (15px) and the "width:180px" is totally ignored. In the documentation it says indeed that an inline tag automatically takes the width of its content. But I don't want that. I can't find a way out. Either the div with the sliderbox background is displayed as it should (180px), but then the whole sliderbar is postioned on a line by itself, or I use an inline method as above, but then the div/span collapses to the size of the button pic that it contains..... QUESTION: Is there any way to make an inline span/div have a fixed width, larger than the object it contains??? Thanks Similar TutorialsHey I would like to have a bar span the entire width of any screen, but by using 3 seperate images: <-- image goes on forever left ] [ central image ] [ image goes on forever right --> Is this possible? if so, would you kindly show me how? much love... 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. I was wondering if anyone could help me. I'm not a html genius, so bare with me. On my site it says...there is no attribute "width". This is where it happens at: <input name="langpair" value="en|fr" title="French" src="http://photos1.blogger.com/img/43/1633/320/13539949_e76af75976.jpg" onclick="this.form.langpair.value=this.value" style="height: 20;" type="image" width= "30" /> I also have similar problems like there is no attribute "border", "cellpadding" "cellspacing" "bgcolor" "align" and other things like element "td" undefined so yeah I don't know how to change this so it works. Everything works fine in the browser, but apparently something is wrong. It's a language translation tool on my site with flags of different countries. My site is http://www.ilovemoneymorethanyou.com if anyone wants to check it out. In 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>
im creatinh a box containing a text. The box must be wide enough to fill a text. menu.style.width = tekst.length - this functioin gives the number of letters in text. So if the text is "hello" then the width is 5 pixels. But i need the widith of pixels needed to fit the text in a box. How can i do that? Hi, Is there away to force my website to fit an Iphone screen when viewed on the iphone. At the moment the width doesn't full span the Iphones screen so it looks bad. http://pjm.co.uk.uksite4.yourwebserv...splay&PageID=5 Thanks alot Joe Hi, I'd like to ask a newbie question. I've Googled this to death but as always there isn't a single view so I thought I'd ask the experts here. I have a piece of information - it doesn't really matter what it is but it is accompanied by an image. With the increase use of css sprites, I know find myself using background-image to set the image. The overall effect would look like this <image> some text. This needs to go inline and have a fixed height so that the image shows. There are also other bits of information on the same line. Do I make the containing unit a DIV and float it or make it a SPAN and use display:block? I don't particularly wan't to use display:inline on a DIV because it's not supported correctly in IE. What would you do in this case? Thanks John Hi, I have build up a mouseover functionality that shows a light gray boks around the 4 categories on the frontpage on http://www.jjas.dk. It works perfectly under all the browsers except IE6 and IE7. In this browsers I can only click on the text placed right from the picture. But when I try to click on the picture or the picture related text, nothing happens. Now, after I had used 5 days finding a solution I'm giving up. There is nothing wrong with the code at all, so why is it, that it won't work under Internet Explorer? This is the code I'm using: HTML Code: <div class="row">
<ul>
<li>
<a href="/produkter-og-loesninger/komponenter.aspx">
<span class="picture">
<img src="/media/3899/komponent-teaser.jpg" alt="Agenturprodukter" />
<span class="content">
<strong>Agenturprodukter</strong>
<small>Vi er forhandler af flere produkter. </small>
</span>
</span>
<span class="right_content">
<h2>Handelsvarer</h2>
<small>Vi forhandler passive og perifere komponenter.
Kabinetter, keyboards, displaysystemer m.v.</small>
</span>
</a>
</li>
</ul>
</div>
CSS Code: #top_section .row {
float:left;
width:948px;
}
#top_section .row ul {
float:left;
width:948px;
list-style:none
}
#top_section .row li {
float:left;
width:474px;
}
#top_section .row li a {
float:left;
width:440px;
padding:10px;
height:145px;
text-decoration:none;
cursor:pointer;
border:1px solid #eeeeee;
}
#top_section .row li a:hover {
float:left;
width:440px;
height:145px;
background:#dddddd;
border:1px solid #d3d2d2;
}
#top_section .row li a .picture {
float:left;
width:220px;
position:relative
}
#top_section .row li a .picture img {
float:left;
z-index: -1;
}
#top_section .row li a .picture .content {
float:left;
width:210px;
background:url(../common/images/picture_content_bg.png) repeat-x 0 0;
padding:5px 0 0 10px;
position:absolute;
bottom:0;
left:0;
height:41px
}
#top_section .row li a .picture .content strong {
float:left;
width:210px;
font:bold 12px/14px Verdana, Arial, Helvetica, sans-serif;
color:#fff;
}
#top_section .row li a .picture .content small {
float:left;
width:210px;
font:11px/13px Verdana, Arial, Helvetica, sans-serif;
color:#fff;
padding:3px 0 5px
}
#top_section .row li a .right_content {
float:left;
width:200px;
padding-left:20px
}
#top_section .row li a .right_content h2 {
float:left;
width:200px;
font:bold 18px/20px Arial, Helvetica, sans-serif;
color:#336699;
}
#top_section .row li a .right_content small {
float:left;
width:200px;
font:12px/17px Verdana, Arial, Helvetica, sans-serif;
color:#666;
padding-top:3px
}
You can see it live on: http://www.jjas.dk/ (right under the slideshow) I really hope someone out there can help me with my problem. I guess it's pretty easy, though I haven't found the easy part yet Kind regards, Niels Kristiansen What exactly do the Span and Div tags do? I've read definitions on the web: "defines a block of text," etc., but I don't see any examples of what the difference is from normal text to text that is used using the span and div tags. Could someone provide any examples? Thanks, Brad Does anybody know how to get the grab hand image for the onmouseover event for spans? I have a confusion with the src attribute. When I insert images in my web site using html, what is more correct with the src attribute: to write the relative location of the image on the root directory or write the URL address of that image? Which is the real difference? Hi, I am checking my webpage html codes for mistakes with this Markup validation service. and I have these lines filled in different lines in my html code. <TABLE id=AutoNumber3 style="BORDER-COLLAPSE: collapse" borderColor=111111 cellSpacing=0 cellPadding=0 width=760 border=0> The above are the original lines with some mistakes. The validator gives me the below given answer to correct myself Error Line 66 column 69: an attribute value must be a literal unless it contains only name characters. ...RDER-COLLAPSE: collapse" borderColor=#111111 cellSpacing=15 cellPadding=5 wid This is second one of the same type <TD vAlign=top borderColor=#ffffff align=left width="100%" bgColor=#ca0000> The above are original lines with some mistakes. The validator gives me the below given answer to correct myself Error Line 73 column 27: there is no attribute "BORDERCOLOR". <TD vAlign=top borderColor=#ffffff align=left width="100%" bgColor=#ca0000> Can somebody tell me what changes should be done in both the original lines. I am unable to understand the mistakes. Please some help? Regards, Mukhtar Ok, this is all very new to me. Just messing round trying to get things to work at the moment mainly how to use div and span. So I've set up two pages in notepad one for html and one for css and they look like this. html Quote: <html> <!---Anchor for CSS page---!> <link rel="stylesheet" type="text/css" href="css.css"> <head> </head> <!---Body of page---!> <body> <!---Div tag for centered page margin---!> <div class="one"> <h1><center>THE CIVVIES.</center></h1> <hr> <!---Division for bottom of Heading---!> <div class="two"> <img src="images/civvies.jpg"> </div> <div class="three"> the civvies </div> </body> </div> </html> css Quote: div.one { left: 165px; top: 4px; bottom: 20px; width: 900px; length: 600px; position: absolute; border: 10px solid black; } h.1 { align:center; font-size:150%; font-family: courier; } div.two { left:165px; length:50px; border: 5px solid black; } Div.three { left:600px; right:10px; top:20px; width:200px; border:5px solid black; } Now this all works fine until div three...i've got a simple page title that seperates from the rest, the page centers itself, the picture alligns left under the header and takes up half the page to the bottom basically splitting the remaining space into two. Now on the right hand side i was hoping to be able to put content which is what div three was for unfortunately It doesn't seem to want to go where I'm asking it to. Any chance somebody could pop in here and just give me a right hand side of the page to work with for content? also possibly show me how to insert a navigation table above the picture but after the dividing line between the header and the picture? Like I said I'm very new at this. Hi Everyone, I am using 'span title' as a means to display a tool tip. Some of the tooltips are quite long and the popup is disappearing before the user would have a chance to read it all. Is there any means to delay the length of time that the tooltip will appear without the user having to hover over the text again. An example of one of these tooltips is below: <span title="As dentistry has advanced beyond basic care into new areas such as implantology, cosmetics, and other treatments of the entire dento-maxillo-facial complex, so too must the diagnostic tools keep pace with the need for a higher quality of general and specific information. Our surgeries are fully equipped with X-ray machines and in-house film processors. This enables our patients to get their diagnosis results instantly and treatment plan drawn up effectively in one visit."> Periapical film (small dental film) </span> I really appreciate any help you could offer? Thanks Cathal I'm trying to use the SPAN tag to override a DIV's attributes wherein it is initially TEXT-ALIGN: LEFT;. I thought for sure that I could override it with the SPAN tag but no luck. I'm doing it this way because I want a portion of the content in the DIV to align left and the other to align right. 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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#quote { width: 500px; }
#quoteTop { width: 460px; height: 40px; padding: 0 20px; background: url('images/quoteTop.gif'); text-align: left; }
#quoteMiddle { width: 460px; padding: 0 20px 20px; background: url('images/quoteMiddle.gif'); text-align: left; }
#quoteBottom { width: 460px; height: 80px; padding: 0 20px; background: url('images/quoteBottom.gif'); text-align: left; }
</style>
</head>
<body>
<div id="quote">
<div id="quoteTop">
<span style="text-align: right;"><a href="/">top</a></span>
</div>
<div id="quoteMiddle">
blah blah blah blah blah blah blah <em>blah blah blah</em> blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah <strong>blah blah blah</strong> blah blah blah blah blah blah-blah blah—blah blah blah blah blah blah blah blah blah BLAH! blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</div>
<div id="quoteBottom">
J. Doe
</div>
</div>
</body>
</html>
Is overriding code a bad idea for what I'm trying to get done? Hi, My document contains below span class: <P> <span class="ErrorText"> <img border="0" src="/wps/images/icn_alert_error.gif" class="DialogIcon" align="absmiddle"/>Path does not exists </span> </P> I want to check for existance of this class in document(jsp) using below function: function preview(){ ..... .... ...... (contentPath is textfield) if(contentPath==null || contentPath.length==0){ alert("Please select a content fragment before attempting to preview"); } else { here i want to check whether above mentioned span class exists in document or not if span class exists then proceed for next step.. else break ..... ............... .... } } Hi, I have a huge text that i need to display in a span tag on my page. Currently the words are breaking at the end of the line, i.e. if the word if "Understand" and there is not enough space to display the entire word, half of the word is displayed in the space available, and the remaining on the next line. However, i want that the entire word be displayed on the next line. Please suggest how this can be done. Regards, Ankit!! Hey guys, so I'm building my script right now and it's going quite well. I used Javascript to capture input from text box and display it later using the <span id=''> command. What I'm trying to do is show the <span id=''> in more than one spot. For whatever reason it won't let me do this, it will only display in one spot and not the other. So to clarify, I used the var bride = document.getElementById('bride').value; document.getElementById('bride2').innerHTML = bride;(sorry for the javascript) and then used span id later to display it which works fine when you only want to display it in one spot. When I go to display it in two spots, I believe the span id tags are getting confused with each other and fighting. Is there any way to fix this? Hi, If in a web page on a web serer we specify a link attribute and that shows that the presentation of html documents is controlled by that external style sheet,then when users open the web page on client system whether even the external style sheet is sent to local client computer or the remote web server embedds all the style information in one single web page and send only the requested page and not css file? |
|||||||