eerder topic   volgend topic
  
Waarschijnlijk eenvoudig in css..
8 oktober 2010 - 10:29   
geplaatst door: macpeterr
Maar ik zie het even niet...

Ik heb de volgende css gedefinieerd om een tabel te maken op basis van css in plaats van de html <Table> element.

Code: [Selecteer]
.mtable
{
   background:#ffffff;
}

.mtable ul
{
   float:left;
   margin:0;
   padding:0;
   border:1px solid #C9C9C9;
}

.mtable ul li
{
   list-style:none;
   padding:5px 10px;
}

.mtable ul li.title
{
   font-weight:bold;
   background:#296cd8;
   color:#fff;
}

.mtable ul li.even
{
   background:#f7f6f7;
}

.mtable ul li.odd
{
   background:#ebebeb ;
}

Allemaal niet zo spannend, maar ik wil dat gegenereerde tekst welke na de tabel (div class="mtable") komt er onder staat en er niet rechts naast. Ik heb al op handleidinghtml.nl gekeken maar kom er even niet uit...

Code: [Selecteer]
   
   Hieronder staat de tabel

   <div class="mtable">
       <ul>
           <li class="title">Player Name</li>
           <li class="even">Sachin</li>
           <li class="odd">Gilchrist</li>
       </ul>
       <ul>
           <li class="title">Country</li>
           <li class="even">India</li>
           <li class="odd">Australia</li>
       </ul>
   </div>
   En dit er naast, maar wil het er onder hebben

Peter
Waarschijnlijk eenvoudig in css..
8 oktober 2010 - 10:45    reactie #1
geplaatst door: Feek
volgens mij moet jouw div#mtable een float left hebben alsook een breedte

(Bewerkt door Feek om 10:45, 8-10-2010)

Waarschijnlijk eenvoudig in css..
8 oktober 2010 - 10:55    reactie #2
geplaatst door: macpeterr
Hoi Freek,

idd.. soms zijn dingen zo simpel !

Thanks !

Code: [Selecteer]

.mtable
{
   float: left;
   width: 100%;
}
Peter
Waarschijnlijk eenvoudig in css..
8 oktober 2010 - 10:59    reactie #3
geplaatst door: Blender

Citaat
macpeterr om 10:55, 8-10-2010
Hoi Freek,

idd.. soms zijn dingen zo simpel !

Thanks !

Code: [Selecteer]

.mtable
{
   float: left;
   width: 100%;
}


Soms zijn ze nog simpeler. Waarom een float? Alleen width is toch genoeg.
Float gebruik je als je elementen juist wel naast elkaar wilt hebben.

Waarschijnlijk eenvoudig in css..
8 oktober 2010 - 12:48    reactie #4
geplaatst door: Feek
Nou ik heb ook scheel gekeken ;)
Citaat
En dit er naast, maar wil het er onder hebben

dacht dat je het er juist naast wilde hebben ipv er onder! En dan moet je idd float geven.


maar in jouw geval zou:

Code: [Selecteer]
.mtable
{
   clear: right;
}

ook een optie zijn.

(Bewerkt door Feek om 12:48, 8-10-2010)

Waarschijnlijk eenvoudig in css..
8 oktober 2010 - 14:47    reactie #5
geplaatst door: andorbodenstaff
in navolging van Freek...is de clear methode de juiste methode om ervoor te zorgen dan een block-element eronder geplaatst wordt.

Waarschijnlijk eenvoudig in css..
8 oktober 2010 - 15:24    reactie #6
geplaatst door: Hiker
Voeg aan je CSS het volgende toe:

.clearfloat {
   clear:both;
   height:0;
   font-size: 1px;
   line-height: 0px;
}
#teksteronder {
  float:left;
}

En aan je HTML het volgende:

Code: [Selecteer]
<br class="clearfloat" />

<div="teksteronder">
   En dit er naast, maar wil het er onder hebben
</div>

Dan werkt het wel goed.

(Bewerkt door Hiker om 17:21, 9-10-2010)

  
eerder topic   volgend topic