Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

CSS/Tabellen vraag

Anoniem
boelieboelie
6 antwoorden
  • Op mijn site in ontwikkeling loop ik tegen een probleem aan met het werken met tabellen. Ik heb twee tabellen naast elkaar staan, maar de content van de rechtertabel is variabel en kan dus toenemen. De tekst in de linkertabel is statisch, maar als de rechtertabel groeit zakt de tekst in de linkertabel naar beneden. Dat wil ik dus niet.

    Nu heb ik op dit forum zitten zoeken naar een oplossing en o.a. in dit topic wordt sterk aangeraden om tabellen te laten voor wat ze zijn en over te gaan op css. Maar met css krijg ik het niet voor elkaar om dezelfde lay-out te krijgen. D.w.z. twee "tekstvakken" naast elkaar. Het lijkt me sterk dat het niet kan. Heeft iemand een voorbeeldje zodat ik kan zien hoe zoiets opgebouwd wordt?
    Tot nu toe is dit de inhoud van mijn nieuwe css:

    [code:1:cdcf20c81a]
    .testlinks {
    float: right;
    padding: 30px;
    overflow: auto;
    position: relative;
    visibility: visible;
    z-index: auto;
    width: auto;
    left: auto;
    }
    .testrechts {
    float: right;
    padding: 50px;
    overflow: auto;
    position: relative;
    visibility: visible;
    z-index: auto;
    width: auto;
    right: auto;
    }
    [/code:1:cdcf20c81a]
  • De tabelcel met de tekst die "naar beneden zakt" kun je aan de bovenkant laten uitlijnen met <td valign="top">. In CSS is dat: TD {vertical-align: top;}
  • Normaal gesproken maak ik geen kant-en-klare voorbeelden, maar voor deze keer een uitzondering:
    http://home.versatel.nl/boelie-boelie/test/awinkel_v1.html
    Zie de source voor iets meer uitleg. Mocht dat te vaag zijn, dan verwijs ik je door naar de sites in de link die je zelf al gaf.
  • Bedankt voor het voorbeeld!
    Ik ben iemand die vaak alleen maar even een voorbeeldje nodig heeft om te kijken hoe het precies werkt waarna het me vaak voor de rest prima lukt.
  • Omdat ik zelf ook tegen een soortgelijk probleem aanliep probeerde ik alsnog het css te achterhalen wat Boelieboelie als oplossing aangaf, maar dit was niet meer te vinden op internet.
    Is dit ergens nog te achterhalen ?

    grteetz
    Fly
  • Dit kan je vinden in de sourcecode. In dit geval is dat:

    [code:1:62c69889f7]
    <style type="text/css">

    #content {
    display: inline; /* trucje om een bug in IE te omzeilen, zie http://www.positioniseverything.net/explorer/doubled-margin.html */
    float: left; /* hoe floats werken, kun je lezen op http://css.maxdesign.com.au/floatutorial/ */
    width: 65%;
    margin: 10px;
    }

    #deelnemers {
    display: inline; /* trucje om een bug in IE te omzeilen */
    float: left;
    width: 20%;
    margin-left: 5%;
    height: 300px;
    }

    #deelnemers td {
    background-color: #393;
    color: #FFF;
    }

    </style>
    [/code:1:62c69889f7]

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.