PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact

CSS, tekst links en rechts uitlijnen

Door Erik Rijk op 27-12-2006 17:30
8.384 views
Beste,

Ik heb de volgende div.

<div class="top">Try it!
	<div style="text-align: right;">
		Experience bar:
		<?
		for($i = 0; $i < 100; $i++)
		{
			echo '<img src="../inc/img/meter/meter.gif" />';
		}
		echo ' (' . $i .  ' %)';
		?>
	</div>
</div>


div.top
{
background-color: #111;
padding: 2px 10px 4px 10px;
width: 684px;
font-family: Verdana;
border: 1px solid #555;
font-size: 8pt;
font-weight: bold;
}

de tekst: Try it! komt links en de "meter" komt rechts, alleen nog wel onder elkaar....
Is er een mogelijkheid om dit op 1 lijn te houden?

Ik had ook al gespeeld met float en display maar ik kwam er niks verder mee.

Mvg,

Erik
K
Kalle P
27-12-2006 17:46
<div class="top">
<span>Try it!</span>
<span id="right"> Experience bar:</span>
</div>

div.top
{
background-color: #111;
padding: 2px 10px 4px 10px;
width: 684px;
font-family: Verdana;
border: 1px solid #555;
font-size: 8pt;
font-weight: bold;
}

span#right {text-align:right;}

Overigens niet getest.

edit: left moet right zijn...
Erik Rijk
27-12-2006 17:52
Kalle,

Dit werkt niet, de "meter" komt er nu wel precies naast, maar ik wil hem volledig aan de rechterkant van de div hebben....
ook float werkt daar niet, dan spring het weer een regel naar onder
K
Kalle P
27-12-2006 17:57
Dat was puur uit het hoofd. ff wat gemaakt:

#right {text-align:right;}
#left {text-align:left; float:left;}

<div id="left">
Try it!
</div>
<div id="right">
Experience bar:
</div>

edit: typo
Erik Rijk
27-12-2006 18:00
Geen verandering met de vorige oplossing helaas :(
K
Kalle P
27-12-2006 18:04
Die werkt bij mij zowel in ie als in ff.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css">
div.top
{
background-color: #e4a;
padding: 2px 10px 4px 10px;
width: 684px;
font-family: Verdana;
border: 1px solid #555;
font-size: 8pt;
font-weight: bold;
}
#right {text-align:right;}
#left {text-align:left; float:left;}
</style>
</head>

<body>

<div class="top">
<div id="left">
	Try it!
</div>
<div id="right">	
	Experience bar:
</div>	
</div>

</body>
</html>


een links en een rechtste uitlijning op 1 regel.
Erik Rijk
27-12-2006 18:10
Je hebt helemaal gelijk Kalle :)

Ik had niet helemaal goed gekeken, die van mij zat nog net iets anders in elkaar als jou voorbeeld.
Hij werkt nu perfect.

Bedankt

Reageren

Inloggen om te reageren