CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me

The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.

Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

CSS: Defining the width of inline elements


Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old May 2nd, 2003, 05:17 PM
-saturn-'s Avatar
-saturn- -saturn- is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Apr 2001
Location: Greece
Posts: 149 -saturn- User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 42 m 13 sec
Reputation Power: 13
Send a message via ICQ to -saturn-
Exclamation CSS: Defining the width of inline elements
Hi everyone!

I'm redesigning my site throwing away the tables I used, using CSS instead but I ran into a problem.

I have 2 images and a piece of text, today's date. I want them displayed like this:

Code:
| IMG no1 |     Date     | IMG no2 |


I made the vertical alignment work so that the date text is centered between the borders of the images but there's one thing left to end this quest.

I want the date to be displayed centered horizontally in a 172 pixel virtual box. I searched all over the Internet only to find that the width property only works for block-level elements, which, by the way, are displayed in a new line.

Of course what I want, is all 3 elements to be displayed in a single line.

Does anyone have any idea how to accomplish that? It was SO easy with tables...

Thank you in advance!
Reply With Quote
  #2  
Old May 2nd, 2003, 06:24 PM
degsy degsy is offline
Contributing User
Dev Shed Intermediate (1500 - 1999 posts)
  
Join Date: Nov 2001
Posts: 1,882 degsy User rank is Sergeant (500 - 2000 Reputation Level)degsy User rank is Sergeant (500 - 2000 Reputation Level)degsy User rank is Sergeant (500 - 2000 Reputation Level)degsy User rank is Sergeant (500 - 2000 Reputation Level)degsy User rank is Sergeant (500 - 2000 Reputation Level) 
Time spent in forums: 5 Days 21 h 19 m 30 sec
Reputation Power: 18
Code:
<img src="http://www.google.com/logos/Logo_40wht.gif" alt="image1" style="width: 100px" />
<span style="width: 172px; text-align: center">date</span>
<img src="http://www.google.com/logos/Logo_40wht.gif" alt="image2" style="width: 100px" />
Reply With Quote
  #3  
Old May 2nd, 2003, 06:43 PM
-saturn-'s Avatar
-saturn- -saturn- is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Apr 2001
Location: Greece
Posts: 149 -saturn- User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 42 m 13 sec
Reputation Power: 13
Send a message via ICQ to -saturn-
Thanks for replying degsy, but it didn't work.

I tried it in IE6, Opera 7 and Netscape 7.

Having researched the subject a bit more, I found out that I can use the display: inline-block; property, but unfortunately it only works well in IE.

I fear I'll have to keep the table for this case...

Do you have anything else to suggest?
Reply With Quote
  #4  
Old May 2nd, 2003, 09:02 PM
adios adios is offline
Senior Citizen
Dev Shed Regular (2000 - 2499 posts)
  
Join Date: Jan 2001
Location: leftcoast
Posts: 2,019 adios User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 15
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>untitled</title>
<style type="text/css">

div#date  {
           width: 412px;
           font: 200 11px verdana,sans-serif;
           color: navy;
           text-align : center;
           padding: 1px 3px 3px 3px;
           border: 3px black double;
           margin: 0px auto;
          }

img.left  {
           margin-right: 16px;
           vertical-align: middle;
          }

img.right {
           margin-left: 16px;
           vertical-align: middle;
          }

body      {
           text-align: center;
          }

</style>
</head>
<body>
<br /><br /><br />
<div id="date"><img class="left" src="http://www.islandathens.com/images/today.jpg" />
<script type="text/javascript" language="javascript">
var today = new Date().toLocaleString();
document.write(today.substring(0,today.indexOf(':') - 2));
</script>
<img class="right" src="http://www.islandathens.com/images/today.jpg" /></div>
</body>
</html>


Note: edited in response to the post below, which has some points well-taken, some others not, and no illustration of an actual solution, e.g., absolute positioning removes an element from the flow, how to deal with that, avoiding tables (wasn't that the original question? ).

http://dbaron.org/css/2000/01/dibm
Last edited by adios : May 2nd, 2003 at 11:22 PM.
Reply With Quote
  #5  
Old May 2nd, 2003, 10:19 PM
MJEggertson MJEggertson is offline
Contributing User
Dev Shed Novice (500 - 999 posts)
  
Join Date: Jan 2002
Location: Seattle WA
Posts: 863 MJEggertson User rank is Corporal (100 - 500 Reputation Level)MJEggertson User rank is Corporal (100 - 500 Reputation Level)MJEggertson User rank is Corporal (100 - 500 Reputation Level)MJEggertson User rank is Corporal (100 - 500 Reputation Level) 
Time spent in forums: 22 sec
Reputation Power: 13
That will not, and should not work in compliant browsers. You can't set the width of an inline element. For one reason, you can't control where the element will be rendered: what if the element must be rendered across two or more lines? How do you, for example, define the width or height of an element like <span>My Node</span>, if for example, the text is wrapped between the two lines?

To define a width, you usually need to use block level elements. Try using a div which is absolutely or relatively positioned relative to it's parent. You should be able to specify a width and it will work. Or just use a table, either way works.
Reply With Quote
  #6  
Old May 3rd, 2003, 05:44 AM
-saturn-'s Avatar
-saturn- -saturn- is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Apr 2001
Location: Greece
Posts: 149 -saturn- User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 42 m 13 sec
Reputation Power: 13
Send a message via ICQ to -saturn-
Thank you for your replies.

Sorry adios, but that doesn't do what I wanted. Thank you for the interesting link, though.

Here's a listing of exactly what I had in my mind:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>Menubar</title>
	</head>

	<body bgcolor="#f2f2f2" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
		<table width="100%" border="0" cellspacing="0" cellpadding="0" height="30">
			<tr>
				<td width="27"><img src="http://www.zefxis.gr/demos/z/images/menubar_language_en.gif" alt="" height="30" width="27" border="0"></td>
				<td align="center" valign="middle" width="172" background="http://www.zefxis.gr/demos/z/images/menubar.gif"><font size="2" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">November 27, 2004</font></td>
				<td width="521"><img src="http://www.zefxis.gr/demos/z/images/menubar_menu.gif" alt="" height="30" width="521" border="0"></td>
				<td background="http://www.zefxis.gr/demos/z/images/menubar.gif">&nbsp;</td>
			</tr>
		</table>
		<p></p>
	</body>

</html>



I even thought of using whitespace to make the date element always 172px wide, but then I thought of how differently each browser would render it.

I looked online even more only to find out that inline elements are very "dark" in their behavior, so I'm 99% thinking of going back to tables now.
Last edited by -saturn- : May 3rd, 2003 at 05:50 AM.
Reply With Quote
  #7  
Old May 3rd, 2003, 02:45 PM
MJEggertson MJEggertson is offline
Contributing User
Dev Shed Novice (500 - 999 posts)
  
Join Date: Jan 2002
Location: Seattle WA
Posts: 863 MJEggertson User rank is Corporal (100 - 500 Reputation Level)MJEggertson User rank is Corporal (100 - 500 Reputation Level)MJEggertson User rank is Corporal (100 - 500 Reputation Level)MJEggertson User rank is Corporal (100 - 500 Reputation Level) 
Time spent in forums: 22 sec
Reputation Power: 13
Tables aren't inherrently evil. Until everybody out there uses browsers with good CSS support, I'll continue to use them for some situations, just because I don't want to waste time with CSS cludges. Your example seems like a good candidate.
Reply With Quote
  #8  
Old May 7th, 2003, 12:52 PM
adios adios is offline
Senior Citizen
Dev Shed Regular (2000 - 2499 posts)
  
Join Date: Jan 2001
Location: leftcoast
Posts: 2,019 adios User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 15
Try this...

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Menubar</title>
<style type="text/css">

div#topbar {
            width: 100%;
            height: 30px;
            background: url(http://www.zefxis.gr/demos/z/images/menubar.gif);
           }

div#lang   {
            width: 27px;
            height: 30px;
            float: left;
            background: url(http://www.zefxis.gr/demos/z/images/menubar_language_en.gif);
           }

div#date   {
            width: 222px;
            height: 14px;
            float: left;
            font: 200 10px verdana,helvetica,arial,geneva,swiss,sunsans-regular,sans-serif;
            color: #000060;
            text-align: center;
            padding: 8px 0px 8px 0px;
            background: url(http://www.zefxis.gr/demos/z/images/menubar.gif);
           }

div#menu   {
            width: 521px;
            height: 30px;
            float: left;
            background: url(http://www.zefxis.gr/demos/z/images/menubar_menu.gif);
           }

body       {
            margin: 0px;
            overflow: auto;
            background: url(http://216.40.241.209/textures/misc/misc264.gif) 0px 31px;
           }

</style>
</head>
<body>
<!-- menu bar -->

<div id="topbar">
<div id="lang"></div>
<div id="date">
<script type="text/javascript" language="javascript">
var today = new Date().toLocaleString();
document.write('« ' + today.substring(0,today.indexOf(':') - 2) + ' »');
</script>
</div>
<div id="menu"></div>
</div>

<!-- menu bar -->
</body>
</html>
Last edited by adios : May 7th, 2003 at 10:35 PM.
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > CSS: Defining the width of inline elements

« Previous Thread | Next Thread »

Developer Shed Advertisers and Affiliates



Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 


Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.

© 2003-2013 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap