login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Rommeltje in het linkergedeelte (css-plaatsing) (Opgelost)

Offline morneco - 30/01/2009 13:34
Avatar van mornecoNieuw lid Het probleem bestaat erin dat ik het menu en de kalender naast elkaar wil plaatsen in het linkergedeelte.
Daarnaast is er in dat linkergedeelte ook een lijst met de komende data van de activiteiten. Deze data wil ook niet op zijn plaats blijven, alsook de stijlkiezer, zoals je kan zien op deze pagina's:

Beginpagina
Studieaanbod
MS KA Quiz

Mogelijks biedt de html en css-code een beetje meer inzicht:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="left">
  2. <h1>
  3. ...
  4. </h1>
  5.   <table width="311" border="0" cellpadding="1">
  6.   <tr>
  7.   <td>
  8.   ...
  9.   </td>
  10.   </tr>
  12. <ul class="menu"><li id="current" class="active item1"><a href="http://www.mskaroeselare.be/JoomlaDrive/"><span>. Start</span></a></li></ul> 
  13. <div class='eventcalq' align='center'>
  14. <table class="mod_eventlistcalq_calendar" cellspacing="0" cellpadding="0">
  15.   <caption class="mod_eventlistcalq_calendar-month"><a href="/JoomlaDrive/index.php?&amp;el_mcal_month=12&amp;el_mcal_year=2008">&lt;&lt; </a>&nbsp;Januari&nbsp;2009&nbsp;<a href="/JoomlaDrive/index.php?&amp;el_mcal_month=2&amp;el_mcal_year=2009"> &gt;&gt;</a></caption>
  16.   ...</table>
  17. </div>
  18.   <ul class="eventlistmod"><li>
  19.       <span class="date"><a href="/JoomlaDrive/index.php?option=com_eventlist&amp;view=details&amp;id=1:ms-ka-quiz">30.01.2009</a></span>
  20.       <span class="location">MS - KA Quiz</span>
  21.    </li></ul>
  22. <div class="templatechooser">
  23. <form  name="templateform_19" method="post" action=""><select name="mod_change_template_19" id="mod_change_template_19"  class="button" onchange=""><option value="groenestraat" >groenestraat</option><option value="tant"  selected="selected">tant</option></select>	<input class="button" type="submit" value="Select" /></form>
  24. </div><br />&nbsp;<br /> 
  25. </div>

css code - Bekijk de code zonder highlighting - Klap code in 
  1. .left {
  2. 	float:left;
  3. 	background-color: #b02050;
  4. 	padding-top: 5px;
  5. 	width: 331px;
  6. }
  7. .left h1 {
  8. 	color: #ffffff;
  9. 	font-variant: small-caps;
  10. 	font-size: 16px;
  11. 	text-align: center;
  12. 	vertical-align: middle;
  13. 	font-weight: bold;
  14. }
  15. .left a {
  16. 	color: #ffffff;
  17. }
  18. .left table {
  19. 	color: #ffffff;
  20. 	font-variant: normal;
  21. 	font-size: 11px;
  22. 	text-align: center;
  23. 	vertical-align: middle;
  24. 	font-weight: lighter;
  25. }
  26. .left ul li {
  27. 	float: right;
  28. 	list-style-type: none;
  29. }
  30. .left ul li a {
  31. 	margin-bottom: 2px;
  32. 	margin-right: -4px;
  33. 	margin-left: 5px;
  34. 	font-size: 12px;
  35. 	color: #ffffff;
  36. 	text-decoration: none;
  37. 	padding-top: 3px;
  38. 	padding-left: 5px;
  39. 	width: 160px;
  40. 	float: right;
  41. 	border-bottom-width: 3px;
  42. 	border-bottom-style: solid;
  43. 	border-bottom-color: #b02050;
  44. }
  45. .left ul li a:hover {
  46. 	border-bottom-width: 3px;
  47. 	border-bottom-style: solid;
  48. 	border-bottom-color: #90a030;
  49. }
  50. .left ul li a:active {
  51. 	color: #ffffff;
  52. 	border-bottom-width: 3px;
  53. 	border-bottom-style: solid;
  54. 	border-bottom-color: #dd882e;
  55. }
  56. .eventcalq table.mod_eventlistcalq_calendar {
  57. 	margin-right: 165px;
  58. 	margin-left:5px;
  59. 	margin-bottom: 5px;
  60. 	margin-top: 5px;
  61. }
  62. .eventlistmod {
  63. 	margin-right: 165px;	
  64. 	margin-left:5px;
  65. 	margin-bottom: 5px;
  66. 	margin-top: 5px;
  67. }
  68. .templatechooser {
  69. 	margin-right: 165px;	
  70. 	margin-left:5px;
  71. 	margin-bottom: 5px;
  72. 	margin-top: 5px;
  73. 	padding-top: 5px;	
  74. }


Alvast bedankt.

2 antwoorden

Gesponsorde links
Offline JBke - 30/01/2009 19:44 (laatste wijziging 30/01/2009 19:48)
Avatar van JBke PHP gevorderde gebruik achter de floats een clear: both.

Je kan het doen met een class .clear of zo en een <br class="clear" /> te plaatsen achter de floating parts.

je zou zoiets als dit moeten krijgen

html code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="float-left extra-class">

  2.         inhoud uiterst linker gedeelte

  3.   </div

  4.   <div class="float-right extra-class">

  5.         de rechter inhoud

  6.   </div>

  7.   <br class="clear">


Grtz.
Offline morneco - 31/01/2009 00:17 (laatste wijziging 04/02/2009 15:58)
Avatar van morneco Nieuw lid    Opgelost!   

Ik heb in de de html extra elementen geschreven en in joomla de modules op hun respectievelijke plaatsen gezet.

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  2. <div class="left">
  3. ...
  4. <div class="linkermenu"><jdoc:include type="modules" name="left" /><br />&nbsp;<br /></div>
  5. <div class="linkerextra"><jdoc:include type="modules" name="user1" /><br />&nbsp;<br /></div>
  6. </div>
  7. ...
  8. </body>

In de CSS heb ik alle code in verband met de modules verwijderd en de twee nieuwe elementen verwerkt.
css code - Bekijk de code zonder highlighting - Klap code in 
  1. .left ul li {
  2. 	list-style-type: none;
  3. }
  4. .linkermenu {
  5. 	float: right;
  6. 	margin-bottom: 2px;
  7. 	margin-right: -6px;
  8. 	margin-left: 5px;
  9. }
  10. .linkermenu ul li a {
  11. 	font-size: 12px;
  12. 	color: #ffffff;
  13. 	list-style-type: none;
  14. 	text-decoration: none;
  15. 	padding-top: 3px;
  16. 	padding-left: 5px;
  17. 	width: 162px;
  18. 	float: right;
  19. 	border-bottom-width: 3px;
  20. 	border-bottom-style: solid;
  21. 	border-bottom-color: #b02050;
  22. }
  23. .linkermenu ul li a:hover {
  24. 	border-bottom-width: 3px;
  25. 	border-bottom-style: solid;
  26. 	border-bottom-color: #90a030;
  27. }
  28. .linkermenu ul li a:active {
  29. 	color: #ffffff;
  30. 	border-bottom-width: 3px;
  31. 	border-bottom-style: solid;
  32. 	border-bottom-color: #dd882e;
  33. }
  34. .linkerextra {
  35. 	border-style: none;
  36. 	margin-bottom: 5px;
  37. 	margin-top: 5px;
  38. 	padding-top: 5px;	
  39. }

Nu heb ik nog een probleem met een achtergrond, maar dat beschrijf ik in een ander bericht.

Alvast bedankt voor jullie hulp.  
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.186s