nichalp
10-08-2004, 02:55 PM
I want to enclose my images inside a div tag. Now I want this div tag to automatically take on the exact width of the image. Can I do this without javascript?
Click to See Complete Forum and Search --> : images inside a DIV
IncaWarrior
10-08-2004, 03:37 PM
I take it you don't want to just set the width manually?
hastalavista
10-09-2004, 08:01 AM
I don't know what you are up to,
but often you can do the same things with a image as with an div, like absolute positioning and displaying/hiding, etc.
anyway, you could try this:
<html>
<head>
<title>divtrick</title>
<meta name="generator" content="BBEdit 7.0">
<script language="javascript" type="text/javascript">
function resize_div(){
document.getElementById('divisor').style.width = String(document.getElementById('picture').width) + "px";
document.getElementById('divisor').style.height = String(document.getElementById('picture').height) + "px";
}
</script>
</head>
<body onload="resize_div();" style="background-color: #defcba;">
<div id="divisor" style="margin: 0; background-color: #123456;">
<img id="picture" src='image.jpg'>
</div>
</body>
</html>
but often you can do the same things with a image as with an div, like absolute positioning and displaying/hiding, etc.
anyway, you could try this:
<html>
<head>
<title>divtrick</title>
<meta name="generator" content="BBEdit 7.0">
<script language="javascript" type="text/javascript">
function resize_div(){
document.getElementById('divisor').style.width = String(document.getElementById('picture').width) + "px";
document.getElementById('divisor').style.height = String(document.getElementById('picture').height) + "px";
}
</script>
</head>
<body onload="resize_div();" style="background-color: #defcba;">
<div id="divisor" style="margin: 0; background-color: #123456;">
<img id="picture" src='image.jpg'>
</div>
</body>
</html>
Stephen Philbin
10-09-2004, 12:38 PM
<div><img src="blah.stuff" alt="whatever"></div>
Or am I just really thick?
Or am I just really thick?
pawky
10-09-2004, 02:00 PM
Originally posted by Mr Herer
<div><img src="blah.stuff" alt="whatever"></div>
Or am I just really thick?
no, i was thinking the same thing :P
<div><img src="blah.stuff" alt="whatever"></div>
Or am I just really thick?
no, i was thinking the same thing :P
nichalp
10-10-2004, 01:49 PM
I want to use the DIV tag so that I can put a caption below the image. Since manually setting the width of each div tag and then floating them would be a headache.
BonRouge
10-10-2004, 02:28 PM
I don't think that changes what the fellas said.
HaganeNoKokoro
10-10-2004, 02:47 PM
Maybe I'm also missing something here, but if you want the label to appear below the image, why not use a <br> tag?
<div>
<img src="someimage.jpg"><br>
<label>Caption for someimage</label>
</div>
<div>
<img src="someimage.jpg"><br>
<label>Caption for someimage</label>
</div>
pawky
10-10-2004, 05:15 PM
nichalp it sounds like you want to do something like vladdy (http://www.vladdy.net/demos/gallery.html) explained in the link provided.
Hagene, the <label> tag is for forms and not how you used it in your example. How you explained it, it should be done:
<div>
<img src="someimage.jpg">
<p>Caption for someimage</p>
</div>
Hagene, the <label> tag is for forms and not how you used it in your example. How you explained it, it should be done:
<div>
<img src="someimage.jpg">
<p>Caption for someimage</p>
</div>
HaganeNoKokoro
10-10-2004, 05:43 PM
Not that it really matters, as the label tag is superfluous here anyway, but
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 STRICT//EN" "http://www.w3.org/TR/HTML401/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Image Div</title>
</head>
<body>
<div style="position:absolute;top:100px;left:100px;text-align:center">
<img src="curve_lg.jpeg" alt="hello"><br>
<label>label for the image</label>
</div>
</body>
</html>
passes validator.w3.org validation.
Go read http://www.w3.org/TR/html401/strict.dtd
Labels are allowed outside forms just as are buttons, inputs, selects, and textareas
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 STRICT//EN" "http://www.w3.org/TR/HTML401/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Image Div</title>
</head>
<body>
<div style="position:absolute;top:100px;left:100px;text-align:center">
<img src="curve_lg.jpeg" alt="hello"><br>
<label>label for the image</label>
</div>
</body>
</html>
passes validator.w3.org validation.
Go read http://www.w3.org/TR/html401/strict.dtd
Labels are allowed outside forms just as are buttons, inputs, selects, and textareas
pawky
10-10-2004, 06:17 PM
Originally posted by HaganeNoKokoro
Not that it really matters, as the label tag is superfluous here anyway, but
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 STRICT//EN" "http://www.w3.org/TR/HTML401/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Image Div</title>
</head>
<body>
<div style="position:absolute;top:100px;left:100px;text-align:center">
<img src="curve_lg.jpeg" alt="hello"><br>
<label>label for the image</label>
</div>
</body>
</html>
passes validator.w3.org validation.
Go read http://www.w3.org/TR/html401/strict.dtd
Labels are allowed outside forms just as are buttons, inputs, selects, and textareas
yes, and u can use a bunch of divs to create a list instead of using <ul> and all will work fine. The different tags exist to be used for certain things in the HTML.
http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.9
The LABEL element may be used to attach information to controls. Each LABEL element is associated with exactly one form control.
Not that it really matters, as the label tag is superfluous here anyway, but
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 STRICT//EN" "http://www.w3.org/TR/HTML401/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Image Div</title>
</head>
<body>
<div style="position:absolute;top:100px;left:100px;text-align:center">
<img src="curve_lg.jpeg" alt="hello"><br>
<label>label for the image</label>
</div>
</body>
</html>
passes validator.w3.org validation.
Go read http://www.w3.org/TR/html401/strict.dtd
Labels are allowed outside forms just as are buttons, inputs, selects, and textareas
yes, and u can use a bunch of divs to create a list instead of using <ul> and all will work fine. The different tags exist to be used for certain things in the HTML.
http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.9
The LABEL element may be used to attach information to controls. Each LABEL element is associated with exactly one form control.
nichalp
10-12-2004, 03:41 PM
I don't think that a label tag passes in XHTML strict. Yeah, Vladdy's caption thing is neat. Thanks for the help.
Stephen Philbin
10-12-2004, 08:32 PM
I can assure you <label> is perfectly valid in all versions of xhtml. Anyone that does not use them needs a slapping.
hastalavista
10-13-2004, 06:21 AM
fieldset and legend is also designed for forms, are they also valid outside forms?
pawky
10-13-2004, 11:20 PM
Originally posted by Mr Herer
I can assure you <label> is perfectly valid in all versions of xhtml. Anyone that does not use them needs a slapping.
yes they are valid, but they are for use in a form.
I can assure you <label> is perfectly valid in all versions of xhtml. Anyone that does not use them needs a slapping.
yes they are valid, but they are for use in a form.
nichalp
10-14-2004, 01:46 PM
Yeah I checked and LABEL validated for XHTML 1.1.
I wanted to do this:
div label{width:auto;display:list-item}
<div style="float:right;width:auto;margin:1em;display:list-item">
<img src="" width="148" height="178" id="b" alt="" />
<label for="b">Random text is fine here</label></div>
If you notice, the DIV tag takes the width of the image. However I also want the LABEL tag to take the image width. Is it possible?
I wanted to do this:
div label{width:auto;display:list-item}
<div style="float:right;width:auto;margin:1em;display:list-item">
<img src="" width="148" height="178" id="b" alt="" />
<label for="b">Random text is fine here</label></div>
If you notice, the DIV tag takes the width of the image. However I also want the LABEL tag to take the image width. Is it possible?
webdeveloper.com
Copyright Internet.com Inc., All Rights Reserved.
Copyright Internet.com Inc., All Rights Reserved.