[html / css] Float en volledige breedte tabel - Softwareontwikkeling

dinsdag 13 december 2005 09:53

Acties:

Topicstarter

Ik ben bezig met het maken van een kleine lay-out wijziging en nu heb ik een probleempje waar we hier allemaal geen antwoord op weten.

Ik heb zegmaar de volgende html:

code:

<div id="container">
  <div style="float: left">
    <!--content-->
  </div>
  <div>
    Tekst etc tec.
    <table>
      <!--etc-->
    </table>
  </div>
</div>

Nou wil ik dat die table volledig gevuld wordt over de complete breedte van het bovenliggende div element, maar de float moet wel links ervan blijven staan natuurlijk.

Door 100% aan de table mee te geven gaat het goed in Firefox maar helemaal fout in IE, die beschouwt het namelijk dat hij over de gehele breedte van hte containerelement uitgevuld moet worden. Een oplossing met 80% meegeven aan de cells in de table resulteert in goede resultaten maar de tabel wordt dan wel lelijk met niet gelijk verdeelde kolommen en dat is niet wat ik wil.

Spelletjes met display: block etc. hebben geen enkel effect en IE hacks gebruik ik liever niet.

Iemand een idee?

dinsdag 13 december 2005 10:23

Acties:

Sappie

De Parasitaire Capaciteit!

Heb je misschien de complete html inclusief css, zodat we kunnen zien wat je exact aan het proberen bent en wat de bedoeling is?

Specs | Audioscrobbler

woensdag 14 december 2005 09:59

Acties:

Dennis

Topicstarter

Ik heb niet de gehele html en css voor je helaas, maar bovenstaande code is vrij compleet.

Het float:left-div-element bevat een afbeelding die vrij hoog is, waardoor de tekst die in de andere div staat en de table naast betreffende afbeelding komen te staan. Dat is goed.

Stel dat de breedte van container 200px is. De afbeelding is 100px. Dan is er dus nog 100px over voor de andere content en de table. Als de tabel niet geheel gevuld is zal hij niet die volledige ruimte benutten en ik wil dus wél dat die table over de volledige breedte van dat rechtergedeelte uitvult.

woensdag 14 december 2005 10:37

Acties:

crisp

Devver

Pixelated

Een width:100% op je tabel maakt ook dat je tabel net zo breed wordt als je body; enkel houdt Firefox 'm wel naast de floats en zal hij de container overflowen.
Misschien is het handig als je met een plaatje even aangeeft wat je precies wilt bereiken?

Intentionally left blank

woensdag 14 december 2005 10:37

Acties:

Cartman!

Gooi die andere div eens op float:left;

code:

<div id="container">
  <div style="float: left">
    <!--content-->
  </div>
  <div style="float:left;">
    Tekst etc tec.
    <table>
      <!--etc-->
    </table>
  </div>
</div>

woensdag 14 december 2005 11:52

Acties:

Clay

cookie erbij?

als die left floatende div een vaste breedte heeft kan je de 2e div gewoon een margin left van die breedte geven. 100% voor de table wordt dan wel de goeie breedte, en zowel in IE als FF komt die er dan schitterend naast.

edit:
voorbeeldje

HTML:

<!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>
    <title> Ugh </title>
    <style type="text/css">
    #container {
        width:75%;
        margin:0 auto;
        background:#f8f8f8;
    }

    #container img {
        width:100px;
        float:left;
    }

    #container table {
        width:100%;
    }
        td { border:1px solid silver; }

    #container div {
        margin-left:100px;
    }
    </style>
</head>
<body>  
    <div id="container">
      [img]"http://www.xs4all.nl/~peterned/got/cookie.gif"[/img]
      <div>
        Tekst etc tec.
        <table>
          <tr>
            <td>hoi</td>
            <td>hoi</td>
          </tr>
          <tr>
            <td>hoi</td>
            <td>hoi</td>
          </tr>
        </table>
      </div>
    </div>
</body>
</html>

[ Voor 66% gewijzigd door Clay op 14-12-2005 11:59 ]

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

woensdag 14 december 2005 12:00

Acties:

Dennis

Topicstarter

Er heeft eigenlijk helemaal niets een vaste breedte in dit ontwerp. Maarja, ik loop zojuist weer tegen het volgende probleem aan in Internet Explorer en geef het op. Float gebruiken in IE zuigt gewoon bigtime. Ik zit nu al anderhalf uur te proberen een klein probleempje op te lossen maar het lukt gewoon niet. In Firefox is het prima, maar IE bakt er niks van.

Leuk voor iedereen die probeert op een goede manier websites op te bouwen (semantisch, volgens de standaarden) maar ik wordt niet betaald om twee uur naar een probleem te staren. De tabellen gaat nu dus terugkeren in mijn ontwerp.

Dankjewel voor je voorbeeld trouwens, Clay!

[ Voor 4% gewijzigd door Dennis op 14-12-2005 12:06 ]

woensdag 14 december 2005 12:07

Acties:

BtM909

Watch out Guys...

Heb overigens geen Firefox available at the moment, maar de volgende aanpassing in het voorbeeld van Clay zou toch moeten werken

Cascading Stylesheet:

    #container img {
        float:left;
    }

    #container table {
        width:100%;
    }
        td { border:1px solid silver; }

    #container div {
        float: left;
    }

[ Voor 4% gewijzigd door BtM909 op 14-12-2005 12:08 ]

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

woensdag 14 december 2005 12:10

Acties:

BtM909

Watch out Guys...

Leuk voor iedereen die probeert op een goede manier websites op te bouwen (semantisch, volgens de standaarden) maar ik wordt niet betaald om twee uur naar een probleem te staren. De tabellen gaat nu dus terugkeren in mijn ontwerp.

Zit hoer niet de essentie van het verhaal. Zonder je te beoordelen, maar het feit dat jij niet precies weet hoe je het moet oplossen, betekent niet dat je het maar niet hoeft te doen. Ik zou juist zoveel mogelijk inzet, voor zover mogelijk, stoppen, zodat je meer bekend gaat worden met de (on)mogelijkheden van CSS in verschillende browsers. Dat noemt men ook wel R&D

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

woensdag 14 december 2005 12:19

Acties:

Dennis

Topicstarter

BtM909 schreef op woensdag 14 december 2005 @ 12:10:
Zit hoer niet de essentie van het verhaal. Zonder je te beoordelen, maar het feit dat jij niet precies weet hoe je het moet oplossen, betekent niet dat je het maar niet hoeft te doen. Ik zou juist zoveel mogelijk inzet, voor zover mogelijk, stoppen, zodat je meer bekend gaat worden met de (on)mogelijkheden van CSS in verschillende browsers. Dat noemt men ook wel R&D

Ja ongetwijfeld, en ik vind het ook wel leuk om de mogelijkheden van CSS te onderzoeken. Ik weet ook best dat het mogelijk is, ik heb het hier immers losstaand de html ontworpen, maar toen ik hem in een bestaand ontwerp plakte werd het helemaal klote.

Voor mij is op dit moment essentieel dat het project op tijd afkomt. Dat onderzoeken is leuk, maar op mijn werk heb ik daar niet genoeg tijd voor. Dat doe ik dus thuis wel als ik aan het hobbyen ben.

woensdag 14 december 2005 12:42

Acties:

BtM909

Watch out Guys...

Dennis schreef op woensdag 14 december 2005 @ 12:19:
[...]

Ja ongetwijfeld, en ik vind het ook wel leuk om de mogelijkheden van CSS te onderzoeken. Ik weet ook best dat het mogelijk is, ik heb het hier immers losstaand de html ontworpen, maar toen ik hem in een bestaand ontwerp plakte werd het helemaal klote.

Voor mij is op dit moment essentieel dat het project op tijd afkomt. Dat onderzoeken is leuk, maar op mijn werk heb ik daar niet genoeg tijd voor. Dat doe ik dus thuis wel als ik aan het hobbyen ben.

M'n voorbeeld ook gezien?

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

woensdag 14 december 2005 12:55

Acties:

Dennis

Topicstarter

BtM909 schreef op woensdag 14 december 2005 @ 12:42:
M'n voorbeeld ook gezien?

Sorry, ik heb er nog niet naar gekeken, maar dat zal ik zometeen even doen, okay?

Pagina: 1

Reageer