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)

IE zonder tabellen...?

Ger
13 antwoorden
  • Gisteren even snel een fotopagina in elkaar gedraaid van een bijeenkomst, en onderaan de footer geplaatst:
    [code:1:dbc53c0ca8]<div id="footer">
    <img align="left" border="0" src="../../../krul_links.jpg" alt="krul" width="30" height="17" />Copyright © 2006-2008 by Sword Facts Benelux, all rights reserved<img border="0" src="../../../krul_rechts.jpg" align="right" width="30" height="17" alt="krul"/>
    </div>
    [/code:1:dbc53c0ca8]
    Waarbij voor de footer-div in de CSS staat:
    [code:1:dbc53c0ca8]#footer{
    width: 850px;
    height: 17px;
    font-weight: bold;
    color: #f2f2f2;
    background-color: #343434;
    font-size: 12px;
    }[/code:1:dbc53c0ca8]
    (container-div centreert alles)

    Opera is mijn default browser, en het zag er perfect uit. Toevallig zit ik nu achter een bak met IE7, en zag ik dat de linkerkrul en de tekst wel op dezelfde regel staan, maar de rechterkrul precies daaronder. :?

    Omdat ik eigenlijk niet veel bij de hand heb nu en ook niet veel tijd, heb ik het via Net2FTP maar even in een tabel geknald:
    [code:1:dbc53c0ca8]<div id="footer">
    <table border="0" width="100%">
    <tr><td align="left"><img align="left" border="0" src="../../../krul_links.jpg" alt="krul" width="30" height="17" /></td><td>Copyright © 2006-2008 by Sword Facts Benelux, all rights reserved</td><td align="right"><img border="0" src="../../../krul_rechts.jpg" align="right" width="30" height="17" alt="krul"/></td></tr>
    </table>
    </div>
    [/code:1:dbc53c0ca8]
    Maar netjes is anders vind ik: het is geen tabel, dus moet het ook niet in een tabel staan. Hoe kan ik IE aan het verstand krijgen dat alles terwijl het gewoon in een div staat met een vastgestelde hoogte, ook alles naast elkaar blijft staan?
  • In Quircks-mode gebruikt IE een ander box model dan de officiële van het W3C. Dit kan je voorkómen door een goede doctype te gebruiken, dan zal het probleem waarschijnlijk verholpen zijn. Zorg er ook voor dat de doctype op de eerste regel van het document staat.

    - Bas
  • Fx laat ook het plaatje op de volgende regel zien…en ik krijg hem alleen maar met een position:absolute op de juiste plaats… Geen idee wat hier de reden van is, ik zou ook zeggen dat het moet kunnen :? . Je zou als laatste optie en als je ook een hekel hebt aan position:absolute, het rechter plaatje in de achtergrond van de footer kunnen plaatsen en dan rechts laten uitlijnen.

    edit:
    Doctype lijkt hier niet uit te maken, ik heb XHTML strickt en html trans geprobeert.
  • Nja, niet dat het zó'n ramp is voor deze pagina, het staat nu goed en wordt waarschijnlijk maar een beperkt aantal keren bekeken. Maar als achtergrond opnemen kan natuurlijk ook.

    Doctype trouwens:
    [code:1:31a252cea3]<!DOCTYPE
    html PUBLIC "-//W3C//DTD XHTML 1.0//EN"
    "http://www.w3.org/TR/xhtml10/DTD/xhtml10.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl">[/code:1:31a252cea3]
    Daar is toch niets mis mee, volgens mij? (al moet ik zeggen dat ik nog steeds af en toe worstel met doctypes)

    Belangrijkste wat ik met dit topic wil bereiken is dat ik snap waar het door komt, zodat ik het in de toekomst in 1 keer goed kan doen. :)
  • Niet zo heel vreemd dat je onvoorspelbaar gedrag krijgt op de bewuste pagina, volgens de HTML Validator (Firefox Extension) heb je 187 fouten in de pagina staan, waaronder een incorrecte doctype, die vervolgens over meerdere regels verspreid staat. Ofwel: klik! Probeer voortaan een validerende pagina te maken, dat scheelt je gelijk al een hoop raar/onvoorspelbaar gedrag.

    - Bas
  • Tja, met vlug copy-paste-werk en dat 39x kopiëren kom je wel aan een flink aantal ja. Maar het had als ik het zo bekijk niets te maken met de krullen in het stuk waar het om gaat (bij de foto's niet afgesloten met /> en geen alt), of het moet het verkeerde doctype die ik gebruikte geweest zijn.

    Maar nu is-tie valid (firefox extensies zijn leuk, maar dit werkt net zo goed en is ook beschikbaar zonder firefox).
    Als ik echter de originele code voor de footer weer terugzet (zie eerste post) en laat valideren, geeft het nog steeds valid terwijl dat rechterkrulletje te laag staat. Hetgeen waar het dus echt om gaat, heeft dan niets met valide zijn of niet te maken denk ik…
  • [quote:97679d6df8="Ger"]Maar het had als ik het zo bekijk niets te maken met de krullen in het stuk waar het om gaat (bij de foto's niet afgesloten met /> en geen alt), of het moet het verkeerde doctype die ik gebruikte geweest zijn.[/quote:97679d6df8]Het ging mij inderdaad in het bijzonder om de doctype.
    [quote:97679d6df8="Ger"]Maar nu is-tie valid (firefox extensies zijn leuk, maar dit werkt net zo goed en is ook beschikbaar zonder firefox).[/quote:97679d6df8]De reden dat ik een FF-Extensie gebruik is dat het mij een hoop handelingen scheelt. ;)[quote:97679d6df8="Ger"]Als ik echter de originele code voor de footer weer terugzet (zie eerste post) en laat valideren, geeft het nog steeds valid terwijl dat rechterkrulletje te laag staat. Hetgeen waar het dus echt om gaat, heeft dan niets met valide zijn of niet te maken denk ik…[/quote:97679d6df8]Het was ook maar een suggestie. Ik heb net nog even gekeken, maar inmiddels heb je de tabel weer teruggezet. Jammer, dan kan ik niet even snel kijken wat het probleem is. Maar goed, het is mooi weer, dus ik ga de buitenlucht opzoeken!

    - Bas
  • [quote:dceae10954="BasHamar"]Het was ook maar een suggestie. [/quote:dceae10954]Waarvoor dank!
    [quote:dceae10954="BasHamar"]Ik heb net nog even gekeken, maar inmiddels heb je de tabel weer teruggezet. Jammer, dan kan ik niet even snel kijken wat het probleem is. [/quote:dceae10954]Klopt, bovenal moet het er goed uitzien, dat vind ik toch een vereiste.

    Het enige verschil is dit stuk:
    [code:1:dceae10954]<div id="footer">
    <table border="0" width="100%">
    <tr><td align="left"><img align="left" border="0" src="../../../krul_links.jpg" alt="krul" width="30" height="17" /></td><td>Copyright © 2006-2008 by Sword Facts Benelux, all rights reserved</td><td align="right"><img border="0" src="../../../krul_rechts.jpg" align="right" width="30" height="17" alt="krul"/></td></tr>
    </table>
    </div>[/code:1:dceae10954]
    Vervangen door:
    [code:1:dceae10954]<div id="footer">
    <img align="left" border="0" src="../../../krul_links.jpg" alt="krul" width="30" height="17" />Copyright © 2006-2008 by Sword Facts Benelux, all rights reserved<img border="0" src="../../../krul_rechts.jpg" align="right" width="30" height="17" alt="krul"/>
    </div>[/code:1:dceae10954][quote:dceae10954="BasHamar"]Maar goed, het is mooi weer, dus ik ga de buitenlucht opzoeken![/quote:dceae10954]Gelijk heb je. :)
  • [quote:d5bf2a602b="Ger"][code:1:d5bf2a602b]<div id="footer">
    <img align="left" border="0" src="../../../krul_links.jpg" alt="krul" width="30" height="17" />Copyright © 2006-2008 by Sword Facts Benelux, all rights reserved<img border="0" src="../../../krul_rechts.jpg" align="right" width="30" height="17" alt="krul"/>
    </div>[/code:1:d5bf2a602b][/quote:d5bf2a602b]Ik zou sowieso je html iets opschonen van de eigenschappen die je in de code zet, probeer dat met CSS te doen. Het voordeel is dat je zelf de structuur beter ziet in je broncode (voor machines maakt dat niets uit) en dat je een betere scheiding hebt tussen structuur en opmaak. Het wordt dan zoiets:[code:1:d5bf2a602b]<div id="footer">
    <img src="../../../krul_links.jpg" alt="" />
    <p>Copyright &copy; 2006-2008 by Sword Facts Benelux, all rights reserved</p>
    <img src="../../../krul_rechts.jpg" alt="" />
    </div>[/code:1:d5bf2a602b]Overigens heb ik een extra [i:d5bf2a602b]p[/i:d5bf2a602b] geplaatst omdat een [i:d5bf2a602b]div[/i:d5bf2a602b] - in tegenstelling tot [i:d5bf2a602b]p[/i:d5bf2a602b] - geen inline elements mag bevatten. Als je nu de afbeeldingen een id geeft kan je ze met CSS positioneren, bijvoorbeeld met een float. Nu even geen tijd om te proberen, maar wellicht helpt het je vast op weg.

    - Bas

    [size=9:d5bf2a602b]Ps. Ik heb je [i:d5bf2a602b]alt[/i:d5bf2a602b]-attribuut leeggemaakt omdat het niets toevoegt. Hoewel de standaarden verwachten dat je er eentje plaatst, is het niet zo dat deze ook gevuld moet zijn. Het gaat er meer om dat je je bewust bent van het feit dat voor sommige (!) afbeeldingen wél een meerwaarde hebben als je een alternatieve tekst invult, denk aan screenreaders. Eentje die willekeurig "krul" voorleest tussen de tekst door voegt niets toe aan de inhoud van de pagina.

    Pps. Het is misschien nóg mooier om de krullen met CSS in de achtergrond van de [i:d5bf2a602b]div[/i:d5bf2a602b] en de [i:d5bf2a602b]p[/i:d5bf2a602b] te zetten. Nog schonere HTML en de krullen als onderdeel van de opmaak inderdaad gescheiden van de structuur.[/size:d5bf2a602b]
  • Het betere van de <p> snap ik, da's inderdaad wat slordig.
    Maar die andere dingen… ik dacht bijvoorbeeld dat het specificeren van een width en height verplicht was bij <img> tags. Jij haalt die er zo te zien bewust uit. Nu is het bij de door mij gebruikte browsers (IE6/7, Fx2, Opera 9.5) geen probleem, maar gaat dat altijd goed?

    Als ik trouwens die <p> gebruik, zal ik de krullen sowieso met een float moeten regelen denk ik. Een <p> is altijd een aparte alinea, zover ik weet, dus dan zal ik dat moeten compenseren met CSS.

    Ik ga eens kijken wat ik ervan kan bakken. :)
  • Heb het nu goed staan, op 1 dingetje na: onder de container-div is nu wel erg veel zwarte ruimte (van de body-background) ontstaan.

    Wat brokjes code:
    [code:1:133b7a81df]
    body {
    text-align: center;
    background-color: #000000;
    }
    #container {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 850px;
    background-color: #fffff0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    img#krullinks {
    float: left;
    }
    img#krulrechts {
    float: right;
    margin-top: -32px;
    }[/code:1:133b7a81df]
    [code:1:133b7a81df]
    <body>
    <div id="container">
    (algemene id-loze div met header)
    <div class="text">
    (foto's ed)
    </div>
    <div id="footer">
    <img id="krullinks" src="../../../krul_links.jpg" alt="" />
    <p>Copyright &copy; 2006-2008 by Sword Facts Benelux, all rights reserved</p>
    <img id="krulrechts" src="../../../krul_rechts.jpg" alt="" />
    </div>
    </div>
    </body>
    </html>
    [/code:1:133b7a81df]
  • [quote:af7728bb23="BasHamar"][size=9:af7728bb23]Pps. Het is misschien nóg mooier om de krullen met CSS in de achtergrond van de [i:af7728bb23]div[/i:af7728bb23] en de [i:af7728bb23]p[/i:af7728bb23] te zetten. Nog schonere HTML en de krullen als onderdeel van de opmaak inderdaad gescheiden van de structuur.[/size:af7728bb23][/quote:af7728bb23]Die lees ik nu pas.
    Ik weet wel hoe ik een afbeelding als achtergrond moet neerzetten, maar 2 afbeeldingen? Dat zou ik eigenlijk niet weten. Moet ik er dan 1 grote afbeelding van maken (wat de flexibiliteit niet ten goede komt) of is er een handig trucje voor?
  • wat je dan zou doen is 1 plaatje in de achtergrond van je <div> zetten en de andere in de achtergrond van je <p>.

    Het hoeft trouwens niet met een negatieve margin, als je de <p> ook links float wil het prima zonder verdere aanpassing.

    [code:1:52a508fe6e]#krullinks, #krulrechts {float:left; width:30px; height:17px;}
    #krulrechts{float:right}
    p {float:left; padding:0; margin:0;}[/code:1:52a508fe6e]

Beantwoord deze vraag

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