Wed, 2004-03-24 20:36
Okay. I'm urked.
I'm creating a PHP-based system and instead of using conventional links and form buttons, I have functions that create "buttons" using CSS. The attributes of these buttons can be modified on a per-button basis, such as background color, borders, margins, etc. So for it works great. But...
Specifying the weight and height of the button is extremely important for the layout of the page. Unfortunately height and weight cannot be specified in span tags and div tags force a linebreak which makes it impossible to put buttons side-by-side easily (outside using a table to help direct multiple buttons which just gets incredibly bulky)
I've ventured into the following options:
- Making each button inside a single-cell table (still line-breaks)
- Using "Float" (which causes nasty effects when resizing the window)
- Putting a "span" around the "divs" (doesn't seem to have any effect)
My question, basically, is this:
a) Is there any way to set the width/height of inline elements?
b) Is there any way to stop the line break of block elements?
In the end I think I need to hack a compromise.. just not sure how.
Regards,
Dave Mittner
Thu, 2004-03-25 05:29
#1
Width/Height on inline or no line break on block?
You have to float divs to get what you want, but they will
always wrap at the right viewport edge in IE no matter
what, so I say go with a table and relax.
Thu, 2004-03-25 18:27
#2
Width/Height on inline or no line break on block?
Big John wrote:
You have to float divs to get what you want, but they will
always wrap at the right viewport edge in IE no matter
what, so I say go with a table and relax.
Yeah.. I've gone with tables. My system was designed to offer the functions to quickly add new pages to it, so I hate having to require tables to be made for the function to deliver the correctly-appearing results. Oh well...
Thu, 2004-03-25 21:06
#3
Width/Height on inline or no line break on block?
Have you tried playing around with white-space:nowrap; as in the following ~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> New Document </title>
<style type="text/css">
.nowrap {white-space: nowrap;}
</style>
</head>
<div><span class="nowrap">This is a long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long sentence</span></div>
<body>
</body>
</html>
Thu, 2004-03-25 21:17
#4
Width/Height on inline or no line break on block?
Stu wrote:
Have you tried playing around with white-space:nowrap; as in the following ~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> New Document </title>
<style type="text/css">
.nowrap {white-space: nowrap;}
</style>
</head>
<div><span class="nowrap">This is a long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long sentence</span></div>
<body>
</body>
</html>
Mmmmm.. doesn't touch in on my problem. Now if you make each of those "long"s a small div, you'd see what I mean.
Thu, 2004-03-25 22:13
#5
Width/Height on inline or no line break on block?
What, like ~ ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> New Document </title>
<style type="text/css">
.nowrap {white-space: nowrap;}
</style>
</head>
<div class="nowrap"><span>This</span> <span>is</span> <span>a</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>sentence</span></div>
<body>
</body>
</html>
Thu, 2004-03-25 22:19
#6
Width/Height on inline or no line break on block?
Stu wrote:
What, like ~ ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> New Document </title>
<style type="text/css">
.nowrap {white-space: nowrap;}
</style>
</head>
<div class="nowrap"><span>This</span> <span>is</span> <span>a</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>long</span> <span>sentence</span></div>
<body>
</body>
</html>
Uhg. No. Divs, not spans. You can't use DIVs and have things lined up horizontally, and you can't specify height/width on SPANs. That's the problem. I need to have objects lined up horizontally that can have their height and width specified.
Thu, 2004-03-25 23:10
#7
Width/Height on inline or no line break on block?
This can be done using IE6 and inline-block but not all browsers support this.