Div breedte dynamisch - Softwareontwikkeling

dinsdag 3 juni 2008 16:19

Acties:

Topicstarter

Ik zoek een oplossing voor de volgende twee problemen.

Het eerste probleem is als volgt, ik ben bezig met een website die bestaat uit twee kolommen (divs). Kolom1 moet 220px worden en kolom2 moet ernaast komen en zich aanpassen aan de resolutie. Dus eigenlijk 100%-220px, maar dit wordt niet ondersteund door CSS. Heeft iemand een idee hoe ik dit kan oplossen?

Het tweede probleem is dat in kolom2 een tabel moet komen die even breed moet worden als het element (div) waar hij inzit, maar die is dus dynamisch. Maar als je bij de tabel width 100% invult wordt hij zo breed als het gehele scherm. Ook hiervoor zoek ik een oplossing.

dinsdag 3 juni 2008 16:28

Acties:

dominic

will code for food

Alles enclosen in een table met 100% width met td op 220px?

code:

<table width="100%">
 <col style="width:220px;">
 <tr>
  <td>linkerkolom</td>
  <td>rechterkolom</td>
 </tr>
</table>

Download my music on SoundCloud

dinsdag 3 juni 2008 16:32

Acties:

Savantas

Plaats gewoon de linker kolom vast op links met vaste breedte en laat de rest dmv faux-columns de rest van de ruimte innemen. En je kan de tweede div een padding-left van 100px (plus witmarge) geven. Dan komt volgens mij de tabel ook niet over de gehele breedte...

ff een vb:

HTML:

<body>
<div id='col1'>
<p>Lorem ipsum dolor sit amed</p>
</div>
<div id='col2'>
<p>Bla die bla of toch maar Lorem ipsum dolor sit amed?</p>
<table width="100%" border="1">
  <caption>
    Tabel titel
  </caption>
  <tr>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</div>
</body>
</html>

Cascading Stylesheet:

1
2
3

    body    { margin: 0; padding: 0 }
    #col1   { width: 100px; background: #777; float: left; }
    #col2   { padding-left: 105px; background: #D44; }

Misschien kan je zelfs met één definitie van col1 uit de voeten, iets als

Cascading Stylesheet:

1	#col1 { width: 100px; background: #777; float: left; padding-right: 5px; }

Alleen krijg je bij een nogal lege linker kolom dat de boel wel weer over de volle breedte komt te staan...

@timlog: volgens mij bedoelt hij dat de tabel over de hele pagina komt, dus ook over kolom 1.

[ Voor 108% gewijzigd door Savantas op 03-06-2008 16:53 ]

Ik denk niet zwart-wit, ik denk diapositief! ( ͡° ͜ʖ ͡°)

dinsdag 3 juni 2008 16:33

Acties:

Pkunk

Volgens mij moet iets in deze richting wel kunnen:
<div style="width:100%">
<div style="float:left; width: 220px;">Meuk</div>
<div style="padding-left: 230px;">Meuk</div>
</div>
Alleen snap ik niet waarom je die tabel eeneens niet 100% wil hebben terwijl je div zich moet aanpassen aan de resolutie (en dus ook 100% breed word?).

Hallo met Tim

dinsdag 3 juni 2008 20:06

Acties:

Borizz

Pas de techniek toe die in A List Apart: In search of the holy grail wordt besproken en je moet een heel eind komen. Iets soortelijk is trouwens ook al genoemd hierboven, het werkt met paddings en negatieve margins.

If I can't fix it, it ain't broken.