7 replies [Last post]
dmittner
Offline
newbie
Last seen: 16 years 49 weeks ago
Joined: 2004-03-24
Posts: 4
Points: 0

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

Big John
Big John's picture
Offline
Enthusiast
Arizona
Last seen: 17 years 18 weeks ago
Arizona
Timezone: GMT-7
Joined: 2003-10-29
Posts: 94
Points: 0

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.

http//www.positioniseverything.net/

dmittner
Offline
newbie
Last seen: 16 years 49 weeks ago
Joined: 2004-03-24
Posts: 4
Points: 0

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...

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 17 years 6 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

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>

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

dmittner
Offline
newbie
Last seen: 16 years 49 weeks ago
Joined: 2004-03-24
Posts: 4
Points: 0

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.

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 17 years 6 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

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>

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

dmittner
Offline
newbie
Last seen: 16 years 49 weeks ago
Joined: 2004-03-24
Posts: 4
Points: 0

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.

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 17 years 6 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

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.

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk