9 berichten aan het bekijken - 1 tot 9 (van in totaal 9)
  • Q:
    Bijdrager
    Pivni Pes

    Header linkjes die met FF & safari door elkaar liggen

    Beste Mensen,

    Met de onderstaande code wil ik een aantal linkjes van links naar rechts voor elkaar krijgen.
    Bij het plaatje hieronder is kan je zien dat het met IE goed werkt, maar IE slikt alle foute code :|
    Bij FF en Safari gaat het helemaal de fout in, het punt is dat ik niet inziet wat ik fout doet.

    [code:1:affd39bf6b]<div id="infinite">
    <a href="index.php?lang=nl&page=content"><img class="logo" src="images/logo.jpg" alt="Home" /></a>
    <p class="header" />
    </div>

    <div id="headerlinkcontainer">
    <p class="slash" />
    <p><a class="headerlink" href="index.php?lang=nl&page=contact">Contact</a></p>

    <p class="slash" />
    <p><a class="headerlink" href="index.php?lang=nl&page=adres-route">Adres &amp; route</a></p>
    <p class="slash padding" />

    <p class="slash" />
    <p><a class="vlag-padding" href="index.php?lang=en&page=content"><img class="vlag" src="images/uk.gif" alt="" /></a></p>

    <p class="slash" />
    <p><a class="vlag-padding" href="index.php?lang=nl&page=content"><img class="vlag" src="images/nederland.gif" alt="" /></a></p>

    <p class="slash" />
    <p><a class="vlag-padding" href="index.php?lang=cz&page=content"><img class="vlag" src="images/tsjechie.gif" alt="" /></a></p>
    <p class="slash" />
    </div> [/code:1:affd39bf6b]

    De bijbehorende CSS:
    [code:1:affd39bf6b]body
    {
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    overflow-x: hidden;
    overflow-y: auto;
    }

    #infinite
    {
    background-image: url(../images/infinite-1.jpg);
    background-repeat: repeat-x;
    width: 100%;
    height: 150px;
    }

    .logo
    {
    position: absolute;
    border: 0px none;
    width: 204px;
    height: 104px;
    }

    .header
    {
    background-image: url(../images/header.jpg);
    background-repeat: no-repeat;
    width: 398px;
    height: 150px;
    }

    #headerlinkcontainer
    {
    position: absolute;
    top: 120px;
    left: 230px;
    }

    .headerlink
    {
    padding-left: 10px;
    padding-right: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #13218E;
    text-decoration: none;
    float: left;
    }

    .slash
    {
    background-image: url(../images/slash.gif);
    background-repeat: no-repeat;
    width: 7px;
    height: 12px;
    float: left;
    }

    .padding
    {
    padding-right: 50px;
    }

    .vlag-padding
    {
    padding-left: 10px;
    padding-right: 10px;
    float: left;
    }

    .vlag
    {
    border: 0px none;
    height: 14px;
    float: left;
    }[/code:1:affd39bf6b]

    Bijdrager
    misterfrontend

    Hi, Probeer dit eens!

    [code:1:563c9c6c17]<html>
    <head>

    <style>
    ul li {display: inline; padding: 0 10px 0 0; }
    </style>

    </head>

    <body>

    <ul>
    <li>/ contact</li>
    <li>/ adres & route</li>
    <li>/ <img src="vlag.jpg" alt="vlag" /></li>
    <li>/ <img src="vlag.jpg" alt="vlag" /></li>
    <li>/ <img src="vlag.jpg" alt="vlag" /></li>
    <li>/ </li>
    </ul>

    </body>
    </html>[/code:1:563c9c6c17]

    Je kan daarna een beetje met padding en margin spelen.
    Succes!

    Bijdrager
    nipro

    Valideer eerst je website eens voordat je naar browserbugs gaat kijken. een zelfsluitend p element bestaat namelijk niet.:) Verder zul je een heel eind verder komen met de code van aitam.

    Bijdrager
    Pivni Pes
    ”aitam”

    Hi, Probeer dit eens!

    [code:1:336404c275]knip[/code:1:336404c275]
    Je kan daarna een beetje met padding en margin spelen.
    Succes!

    Bedankt voor je voorbeeld, ik heb er een tijdje mee gespeeld, maar ik loop nog tegen 2 probleempjes aan.
    In FF zet hij “adresgegevens” en “contact” nog onder elkaar, zet ik nu een derde link er bij, dan zet hij de eerste 2
    onder elkaar en de derde er netjes naast.
    Zo als hier onder in de code heb ik boven de 2 linkjes “<li></li>” er boven geplaatst, is niet helemaal correct zo, en
    het werkt ook niet 100% goed.

    2 dingetje is dat door de style sheet over “ul li” verderop de pagina een ander “li” lijstje door de waar schopt

    Dit is trouwens de website waar het over gaat –> http://www.color-graphics.nl
    [code:1:336404c275]<style>
    ul li
    {
    display: inline;
    padding: 0 10px 0 0;
    }
    </style>

    <div id="infinite">
    <a href="index.php?lang=nl&page=content"><img class="logo" src="images/logo.jpg" alt="Home" /></a>
    <p class="header" />
    </div>

    <div id="headerlinkcontainer">
    <ul>
    <li></li>
    <li><a class="headerlink padding" href="index.php?lang=nl&page=adres-route">Adresgegevens</a></li>
    <li><a class="headerlink padding" href="index.php?lang=nl&page=contact">Contact</a></li>

    <!– <li><a class="vlag-padding" href="index.php?lang=en&page=content"><img class="vlag" src="images/uk.gif" alt="" /></a></li> –>
    <!– <li><a class="vlag-padding" href="index.php?lang=nl&page=content"><img class="vlag" src="images/nederland.gif" alt="" /></a></li> –>
    <!– <li><a class="vlag-padding" href="index.php?lang=cz&page=content"><img class="vlag" src="images/tsjechie.gif" alt="" /></a></li> –>
    </ul>
    </div>[/code:1:336404c275]

    ”nipro”

    Valideer eerst je website eens voordat je naar browserbugs gaat kijken. een zelfsluitend p element bestaat namelijk niet.:) Verder zul je een heel eind verder komen met de code van aitam.

    Ik neem aan dat je bedoeld dat dit niet goed is[code:1:336404c275]<p class="header" />[/code:1:336404c275]
    Dat kan ik dan beter zo doen?[code:1:336404c275]<p class="header"></p>[/code:1:336404c275]

    Bijdrager
    misterfrontend

    Je kan in je UL een ID aangeven bijvoorbeeld [code:1:f6cd946450]ul#navigatie li {}[/code:1:f6cd946450] en dan in je html [code:1:f6cd946450]<ul id="navigatie">….</ul>[/code:1:f6cd946450]

    Dan geef je alleen deze UL een eigen vorm.

    en nog [code:1:f6cd946450]<style type="css/text">
    ul li
    {
    display: inline;
    padding: 0 10px 0 0;
    }
    </style> [/code:1:f6cd946450]

    Ik zal beter [code:1:f6cd946450]margin: 0 10px 0 0; [/code:1:f6cd946450] gebruiken, (mijn eigen fout) want dan zijn de witruimte niet meer klikbaar!

    Bijdrager
    kaydie
    ”nipro”

    Een zelfsluitend p element bestaat namelijk niet.:)

    Jawel hoor, de p endtag is optioneel:-)

    edit… niet goed gekeken… XHTML… Maar in principe W3C technisch nog steeds toelaatbaar…

    Bijdrager
    Pivni Pes
    ”aitam”

    Ik zal beter [code:1:c64ba207cb]margin: 0 10px 0 0; [/code:1:c64ba207cb] gebruiken, (mijn eigen fout) want dan zijn de witruimte niet meer klikbaar!

    Het vervangen van “padding” in “margin” was de oplossing tot het probleem:wink:

    En is dit toch de juiste manier om de p element te sluiten?
    [code:1:c64ba207cb]<p class="header"></p>[/code:1:c64ba207cb]

    Bijdrager
    kaydie

    In principe is het goed mits je het document als xml bestand zou laten renderen wat 100% zeker niet het geval zou zijn, omdat je anders de pagina in internet explorer niet eens zou kunnen openen.

    Omdat je het document als html bestand serveert gelden dus voor de browser andere regels. Die zal het document als html renderen waardoor die een vertaalslag moet maken, die in dit geval goed uitpakt omdat een <p> element binnen html zichzelf afsluit, maar als je hetzelfde bijvoorbeeld doet met een niet zichzelf sluitend element als bijvoorbeeld <h1> gaat het fout.

    Kopieer de volgende code maar eens naar je html editor en sla het op als test.html:

    [code:1:14d940720a]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Untitled</title>
    </head>
    <body>
    <div>
    <h1 />Dit is een test
    </div>
    </body>
    </html>[/code:1:14d940720a]

    Open de pagina vervolgens in Firefox of safari.
    De html renderer ziet de <h1 /> tag als fout geschreven en corrigeert de fout door er <h1>Dit is een test</h1> van te maken.

    Verander nu de bestandsnaam van test.html in test.xhtml en open het bestand nogmaals in je browser.
    Nu wordt de pagina dus als xml bestand behandeld en wordt de <h1 /> tag ne wel als afgesloten gezien, waardoor tekst er anders uit komt te zien. omdat div nu het ‘parent’ element is van de tekst en niet meer het h1 element.

    In principe is <p class=”header” /> dus goed, maar niet als je je xhtml document als html document laat behandelen. Dan moet je rekening houden met sectie 5C, de HTML Compatibility Guidelines waarin bij C2 een stukje staat over lege elementen waarin dit wordt afgekeurd.

    Duidelijk zo? :)

    Bijdrager
    Pivni Pes

    Bedankt voor de hulp en alle uitleggen, het werkt nu zo als het de bedoeling was.
    De broncode moet ik hier en daar nog wel opschonen en de p elementen aanpassen.

9 berichten aan het bekijken - 1 tot 9 (van in totaal 9)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.