7 berichten aan het bekijken - 1 tot 7 (van in totaal 7)
  • Q:
    Bijdrager
    Mr.Mark

    Ruimte boven en onder plaatjes met XHTML

    ik heb zojuist een website gemaakt met XHTML en daarin staat een tabel met afbeeldingen (menu).
    mijn probleem is echter, dat rondom de plaatjes ruimte ontstaat en daardoor ze niet mooi op elkaar aansluiten. weet iemand hier een oplossnig voor?

    Bijdrager
    klaus

    Kan je even de link van de website plaatsen? want zo is het moeilijk raden..

    btw: je wil xhtml valid gaan, maar gebruikt een tabel wel voor images? Tabellen enkel voor tabulaire data gebruiken, niet voor opmaak.

    Bijdrager
    Mr.Mark
    ”klaus”

    Kan je even de link van de website plaatsen? want zo is het moeilijk raden..

    hier dan de website

    ik weet dat eht niet hoort een tabel, maar doe ik het met div’s of gewoon los, dan nog heb ik die ruimte rond mn plaatjes.

    Bijdrager
    Bitcrumb

    Navigatie hoort in een opsommende lijst thuis:

    [code:1:62cd5b4194]<ul id="navigation">
    <li><a href="#" title="Ga terug naar de startpagina" id="btn_home">Home</a></li>
    <li><a href="#" title="Lees de laatste nieuwsberichten" id="btn_nieuws">Nieuws</a></li>
    <li><a href="#" title="Downloads" id="btn_downloads">Downloads</a></li>
    <ul>[/code:1:62cd5b4194]

    In je CSS ga je dan de breedte, hoogte, achtergronden, etc.. bepalen van je elementen. Doot middel van de :hover selector bepaal je dan de afbeelding die getoond wordt bij het over de items heengaan.

    Dit doe je door voor ieder element 1 afbeelding te maken die zowel de normale staat als de hover staat omvat. Stel, je knop is 30px hoog en 100px breed. Dan krijg je een afbeeldig van 60px hoog en 100px breed.

    Bovenaan vind je de normale staat en erronder vind je dan de hover staat. Bij het over een hyperlink heengaan verander je dan gewoon de positie van je achtergrond:

    [code:1:62cd5b4194]
    // algemeen

    ul#navigation li a
    {
    height: 30px;
    width: 100px;

    text-indent: -9999px; // verberg de tekst buiten beeld
    }

    ul#navigation li a:hover
    {
    background-position: 0 -30px;
    }

    // specifiëren van de idividuele achtergronden

    ul#navigation li a#btn_home
    {
    background-image: url(’home.png’);
    }[/code:1:62cd5b4194]

    Uiteindelijk heb je dan helemaal geen ruimte rond je plaatjes, als je tenminste de padding en margin van je lijst even gaat aanpassen en de opsommingstekens gaat weghalen. Voordeel is dat niet-visuele bezoekers met een textreader nog perfect je navigatie kunnen lezen in een tekstvorm.

    Voor een voorbeeld van wat ik bedoel, zie:
    http://www.blogstar.be/ellentriek/

    Bestudeer daar even men CSS & HTML die betrekking heeft op de navigatie.

    Bijdrager
    Mr.Mark

    dan zou het zo toch moeten werken?
    [code:1:fd5f12a5a3]ul#menu li a {
    display: block;
    height: 29px;
    width: 206px;
    list-style-type: none;

    text-indent: -9999px; // verberg de tekst buiten beeld
    }
    ul#menu li a#home {
    background-image: url(images/b_home1.gif);
    }[/code:1:fd5f12a5a3]
    [code:1:fd5f12a5a3]<ul id="menu">
    <li id="menu_topspacer"><img src="../images/img_menutopspace.gif" border="0" width="206" height="13" /></li>
    <li id="btn_home"><a href="javascript:;"><img src="images/b_home1.gif" border="0" width="206" height="30" alt="Home" /></a></li>
    </ul>[/code:1:fd5f12a5a3]

    maar dat werkt bij mij dus niet. ik weet dat ik nog geen hover heb ingesteld, maar zoals hij nu staat laat hij alleen nog steeds meer die bullits van de opsommingsitems zien.

    Bijdrager
    Bitcrumb

    Het principe is dat je je afbeeldingen niet meer in je HTML code opneemt. Maar dat deze naar de CSS verhuizen als achtergrond. Dat heb je nog steeds niet gedaan.

    Daarnaast moet je inderdaad nog de bullets verwijderen via CSS d.m.v. ‘list-style-type: none;’. De code die ik hierboven neerplantte was uit het hoofd, het kan dus zijn dat het niet helemaal juist is. Daarom dat ik ook naar een voorbeeld verwees. ’t Is wel wat meer werk om alles eruit te vissen.

    *edit*
    Er zat trouwens nog een grote fout in. De id’s dienen in je <a> tag te staan en niet in je <li>. Ofwel pas je je CSS aan. Zolang ze maar correct naar elkaar verwijzen.

    Ik heb mijn voorbeeld aangepast.

    Bijdrager
    Mr.Mark

    nou jah, ik weet niet wat het is hoor, maar het werkt gewoon nog steeds niet:

    CSS (staat in de HTML pagina, niet externe css file)
    [code:1:e8f3cf1459]ul#navigation li a {
    height: 29px;
    width: 206px;
    margin: 0px;
    text-indent: -9999px; // verberg de tekst buiten beeld
    }
    ul {
    list-style-type: none;
    margin: 0px;
    }

    // specifiëren van de idividuele achtergronden
    ul#navigation li a#home {
    background-image: url(’images/b_home1.gif’);
    }[/code:1:e8f3cf1459]

    HTML
    [code:1:e8f3cf1459]<ul id="navigation">
    <li><img src="../images/img_menutopspace.gif" border="0" width="206" height="13" /></li>
    <li><a href="javsscript:;" id="home">Home</a></li>
    <li><a href="javascript:;" id="acco"><img src="images/b_accomm1.gif" alt="Acommodaties" name="Accommodaties" width="206" height="29" border="0"></a></li>
    </ul>[/code:1:e8f3cf1459]

    //edit:
    de ruimte tussen de afbeeldingen komt alleen maar voor bij Firefox. in IE laat ie het allemaal wonderbaarlijk gewoon goed zien.

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

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