Good afternoon!
I'm trying to change the width of several span elements but nothing happens.
Can anyone help me?
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Untitled</title>
<style>
* {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<span style="border: 1px solid Red; width: 200px">Span 1</span>
<span style="border: 1px solid Red; width: 200px">Span 2</span>
</body>
</html>
Best Regards,
MigrateI believe "width" only applies to block-style elements, and a span is in-line by default. Try adding a "display: block:" to your style and see if that gives the desired result.Yes. Use the DIV tag instead, if you want them on separate lines. There are two types of elements in HTML: Block level and inline.
Block elements are always rendered one on top of the other, meaning they won't exist side-by-side by default.
Inline elements (like SPAN tags) are inline, meaning they are rendered on a line, like text and images. According to W3C spec, inline elements cannot be given a width. Block elements can. That's the reason your SPAN tags are not as wide as you want, but only as wide as necessary.
Use DIV tags to group block elements together (think page DIVision). Use SPAN tags to group inline elements together, like text, images, <strong>, <b>, etc (think SPANing across a line of content).Hello to all!Thanks for your anwsers.
I've done what NogDog said and it works, but I want the span to be inline, so this solution doesn't work for me.
I want to have several elements inline with thw same widtd, like a horizontal menu.
Do you know other solutions?
Best regards,
MigrateI'd do something liket this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Untitled</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.box {
border: 1px solid red;
width: 200px;
margin: 0;
padding: 3px;
}
</style>
</head>
<body>
<p class=box style="float: left;">Number 1</p>
<p class=box>Number 2</p>
</body>
</html>Hello again!
Thanks for the anwser NogDog! That resolved my problem.
Bye,
Migrate
I'm trying to change the width of several span elements but nothing happens.
Can anyone help me?
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Untitled</title>
<style>
* {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<span style="border: 1px solid Red; width: 200px">Span 1</span>
<span style="border: 1px solid Red; width: 200px">Span 2</span>
</body>
</html>
Best Regards,
MigrateI believe "width" only applies to block-style elements, and a span is in-line by default. Try adding a "display: block:" to your style and see if that gives the desired result.Yes. Use the DIV tag instead, if you want them on separate lines. There are two types of elements in HTML: Block level and inline.
Block elements are always rendered one on top of the other, meaning they won't exist side-by-side by default.
Inline elements (like SPAN tags) are inline, meaning they are rendered on a line, like text and images. According to W3C spec, inline elements cannot be given a width. Block elements can. That's the reason your SPAN tags are not as wide as you want, but only as wide as necessary.
Use DIV tags to group block elements together (think page DIVision). Use SPAN tags to group inline elements together, like text, images, <strong>, <b>, etc (think SPANing across a line of content).Hello to all!Thanks for your anwsers.
I've done what NogDog said and it works, but I want the span to be inline, so this solution doesn't work for me.
I want to have several elements inline with thw same widtd, like a horizontal menu.
Do you know other solutions?
Best regards,
MigrateI'd do something liket this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Untitled</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.box {
border: 1px solid red;
width: 200px;
margin: 0;
padding: 3px;
}
</style>
</head>
<body>
<p class=box style="float: left;">Number 1</p>
<p class=box>Number 2</p>
</body>
</html>Hello again!
Thanks for the anwser NogDog! That resolved my problem.
Bye,
Migrate