login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Probleem met floating

Offline Martnt - 14/11/2011 10:46
Avatar van MartntNieuw lid Ik heb een probleempje met het opmaken van een mobiele website die gebruik maakt van css. Het gaat om een rooster en ik heb het zo gemaakt dat wanneer de browser klein is de overflow hidden moet zijn. Maar wanneer ik dit gebruik komt de layout een beetje in de knoop.

Het ziet er nu zo uit en zoals je ziet staan de lokaal nummers niet goed in de balkjes:
http://www.imgd...8-Fout.png

Ik heb al van alles geprobeerd maar ik kom er gewoon niet uit... Hierbij de bestanden die ik gebruik om deze pagina te weergeven:

index.php
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <?php include_once ( 'includes/rooster.php' ); ?>
  2. <?php echo '<?xml version="1.0" encoding="utf-8"?>'; ?>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head>
  6. 	<title>Rooster</title>
  7. 	<meta name="HandheldFriendly" content="true" />
  8. 	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> 
  9. 	<link rel="stylesheet" href="style.css" type="text/css" media="all" />
  10. </head>
  11. <body>	
  12. 	<?php	
  13. 	foreach( $a_Dag as $multiArray )
  14. 	{
  15. 		foreach( $multiArray as $key => $lesrooster ) 
  16. 		{
  17. 			if( $key == 0 )
  18. 			{
  19. 				echo '<h1 class="header">' . $lesrooster . '</h1>';
  20. 				$kleur = 1;
  21. 			}
  22. 			else
  23. 			{
  24. 				$lesrooster['lestijd'] = str_replace ( ' - ', '<br />', $lesrooster['lestijd'] );
  25.  
  26. 				echo '<div class="balk' . ( $kleur == 1 ? $kleur++ : $kleur-- ) . '">';
  27. 				echo '<div class="time">' . $lesrooster['lestijd'] . '</div>';
  28. 				echo '<div class="les">' . $lesrooster['vak'] . '<div class="docent">' . $lesrooster['docent'] . '</div></div>';
  29. 				echo '<div class="lokaal">' . $lesrooster['lokaal'] . '</div>';
  30. 				echo '</div>';
  31. 			}
  32. 		}
  33. 	}
  34. 	?>
  35. </body>
  36. </html>


style.css
css code - Bekijk de code zonder highlighting - Klap code in 
  1. * { margin:0px; padding:0px; }
  2. html, body {
  3. 		padding: 0;
  4. 		margin: 0 auto;
  5. 		}
  6. .balk1	{
  7. 		height: 60px;
  8. 		background: #aaa;
  9. 		border-bottom: 1px solid #fff;
  10. 		}
  11. .balk2	{
  12. 		height: 60px;
  13. 		background: #ddd;
  14. 		border-bottom: 1px solid #fff;
  15. 		}
  16. .time	{
  17. 		float: left;
  18. 		font: bold 15px Arial;
  19. 		padding: 13px 0 0 5px;
  20. 		}
  21. .lokaal	{
  22. 		float: right;
  23. 		font: bold 18px Arial;
  24. 		padding: 20px 5px 0 0;
  25. 		}
  26. .les	{
  27. 		font: bold 15px Arial;
  28. 		padding: 15px 0 0 10px;
  29. 		white-space: nowrap;
  30. 		overflow: hidden;
  31. 		text-overflow: ellipsis;
  32. 		}
  33. .docent	{
  34. 		font: 10px Arial;
  35. 		}
  36. h1.header{
  37. 		font: bold italic 15px Arial;
  38. 		padding: 5px 0 5px 5px;
  39. 		}


Wie o wie weet de oplossing? 

Hartelijk bedankt,
Martijn

8 antwoorden

Gesponsorde links
Offline vinTage - 14/11/2011 10:55
Avatar van vinTage Nieuw lid mjah, beetje lastig 'debuggen' zo, je css klopt niet met je html code.., maar is het beter als je telkens onderin nog een clear float gebruikt ?
Offline Martnt - 14/11/2011 11:31
Avatar van Martnt Nieuw lid Wat klopt er niet aan mijn html? Dit is de output, misschien bedoel je dat? En hoe bedoel je het met een clear float? Clear:both in een bretje proppen helpt in ieder geval niet...

Hier de html output:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  4. 	<title>Rooster</title>
  5. 	<meta name="HandheldFriendly" content="true" />
  6. 	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> 
  7. 	<link rel="stylesheet" href="style.css" type="text/css" media="all" />
  8. </head>
  9. <body>	
  10. 	<h1 class="header">Dinsdag 15-november-2011</h1><div class="balk1"><div class="time">09:15<br />11:15</div><div class="les">Diagnostisch onderzoek 2b: loopbaan<div class="docent">M.J.E. van der Klis</div></div><div class="lokaal">C012</div></div><div class="balk2"><div class="time">12:00<br />13:30</div><div class="les">Cognitieve psychologie<div class="docent">J.W. de Graaf</div></div><div class="lokaal">C061</div></div><h1 class="header">Donderdag 17-november-2011</h1><div class="balk1"><div class="time">10:30<br />12:00</div><div class="les">Klinische psychologie: psychopathologie I<div class="docent">B. Schreuder Goedheijt</div></div><div class="lokaal">C061</div></div><div class="balk2"><div class="time">12:00<br />13:30</div><div class="les">Coaching, Counseling &amp; Training 2b<div class="docent">A. de Koning</div></div><div class="lokaal">A143</div></div><h1 class="header">Vrijdag 18-november-2011</h1><div class="balk1"><div class="time">15:15<br />16:45</div><div class="les">Klinische psychologie: psychopathologie I<div class="docent">H.C.J. Bredie</div></div><div class="lokaal">A349</div></div></body>
  11. </html>
Offline Pieter - 14/11/2011 11:35
Avatar van Pieter Gouden medaille

SEO guru		 Ik zou de output trouwens als een lijstje nemen, semantisch gezien ziet het er beter uit. Hier heb je mijn quick and dirty versie:

http://dl.dropbox.com/u/50101/mobile.html
Bedankt door: Koen
Offline Martnt - 14/11/2011 12:13
Avatar van Martnt Nieuw lid Thnx, ziet er inderdaad nice uit. Kan ik hiermee ook gewoon werken met de ellipsis overflow? Ik zal het vanavond wel even proberen wanneer ik thuis ben! Hartstikke bedankt in ieder geval en ik hoop dat het zo gaat werken 
Offline Pieter - 14/11/2011 12:21
Avatar van Pieter Gouden medaille

SEO guru		 Normaal gezien moet dat lukken. Veel testplezier.
Offline Martnt - 14/11/2011 21:28
Avatar van Martnt Nieuw lid Het is helemaal gelukt, hartstikke bedankt!! 
Offline Pieter - 14/11/2011 21:52
Avatar van Pieter Gouden medaille

SEO guru		 Nog even op mijn opgelost knop drukken en dan verdwijnt dit topic ook uit de actieve topic lijst. 

Graag gedaan.
Offline vinTage - 15/11/2011 02:53
Avatar van vinTage Nieuw lid Hoewel Pieter al de oplossing gaf, wilde ik toch even zeggen dat ik gewoon scheel had gekeken wat betrefd mijn antwoord over niet kloppende html vs css!
Ik had niet in de gaten dat je balk1 en balk2 met php regelde 
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.196s