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)

Probleem bij albumpje

Anoniem
Moos
11 antwoorden
  • Hallo Allemaal, Ik gebruik voor een portfolio op een site soms een heel klein albumpje, een grote foto met daaronder 3 kleintjes, klik je op een kleintje verschijnt hij erboven inhet groot.
    Dit was een scriptje met een iframe en dat wil niet valideren in een strict versie. Dus ben ik op zoek gegaan naar iets anders. Ik kwam een eenvoudig javascriptje tegen en daarmee ben ik aan de slag gegaan.
    Als ik dit in een transitional doctype zet dan ziet het er in alle browsers gelijk uit, zet ik er een strict doctype boven (wat ik eigenlijk wil) valideerd hij wel maar heb ik onderaan de foto's in niet IE browsers een streepje wit (wat ik dus niet wil).
    Deze is met een transitional doctype en deze is met een strict doctype.
    Hoe kan dit en hoe krijg ik dat streepje wit weg in niet IE browsers?
    Ik hoop dat jullie het een beetje snappen.
    Alvast bedankt!
  • Hm, heel raar inderdaad. Heb er even mee zitten spelen maar vooralsnog geen oplossing. Overigens een vraag die je ongetwijfeld al aan zag komen: waarom een tabel?

    Zal er straks op een vrij moment van de avond nog eens naar kijken…

    - Bas
  • Hoi Bas, Tsja waarom tabellen, kwam het ongeveer zo tegen. Moet natuurlijk ook met div's kunnen maar vond dit gewoon vreemd en dan wil ik weten waarom.
    In ieder geval leuk dat je meedenkt!
  • Ik heb nu het in div's gezet, blijft , bijna, hetzelfde probleem. Extra wit onder de grote foto bij strict.
    div transitional en div strict
  • Met de volgende CSS en gelijke HTML (divs) lijkt het goed te zijn (of ik begrijp het probleem verkeerd):[code:1:e43c0344d6]body{
    font-family:Arial,Verdana,Helvetica,"sans serif";
    font-size:11pt;
    }
    div#fotos{
    margin: 0 auto;
    padding: 0;
    width: 456px;
    height: 424px;
    }
    img{
    border: 0;
    }
    .cntr{
    text-align: center;
    }
    .bold{
    font-weight: bold;
    }[/code:1:e43c0344d6]
    Overigens wil ik je gelijk even waarschuwen voor een typische aanpak die je toont, vermoedelijk omdat je pas bent begonnen met div's en css. Het is compleet [i:e43c0344d6]niet[/i:e43c0344d6] de bedoeling dat je classen gaat maken ter vervanging van een tag in html. Dingen als [i:e43c0344d6].bold[/i:e43c0344d6] en [i:e43c0344d6].cntr[/i:e43c0344d6] horen niet in je css thuis, anders houd je exact dezelfde problemen met divs die je anders met [i:e43c0344d6]b[/i:e43c0344d6] en [i:e43c0344d6]center[/i:e43c0344d6] zou hebben: content en stijl is niet gescheiden. Denk ook aan efficient gebruik van divs, ga niet heel veel divs nesten als je alle classes en een id ook gewoon op dezelfde div kan toepassen.

    Dit zijn slechts een paar best practices, probeer eraan te denken en je zal snel veel betere en effiente layouts kunnen maken met html/css.

    - Bas
  • Nee Bas dat is het niet. Beide bestanden hebben dezelfde opzet alleen de opzet met een strict doctype geeft in FF extra ruimte onder de plaatjes.
    Dit is met een transitional doctype, ziet er hetzelfde uit in IE als in FF en deze is met een strict doctype en geeft de extra ruimte onder de plaatjes in FF.
    En hoe moet ik anders centreren dan met de .cntr die ik nu gebruik, dat begijp ik niet helemaal.
  • Ik heb er nu dit van gebrouwen, de horizontale ruimte moet ik nog even verwijderen maar ik ga nu even de kroeg in om iemands verjaardag te vieren. ;)
    [code:1:153d000bd5]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>C!T Test Moos</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <style type="text/css">
    h1{
    font-family: Arial,Helvetica,"sans serif";
    font-size: 11pt;
    text-align: center;
    }
    div#container{
    margin: 0 auto;
    width: 460px;
    }
    img{
    border: none;
    margin: 0;
    padding: 0;
    vertical-align: bottom;
    }
    img.thumbnail{
    cursor:hand; /* Alle andere browsers */
    cursor:pointer; /* IE 5.x */
    }
    </style>
    <script type="text/javascript">
    <!– hier laad je de foto's in –>
    beeld1 = new Image();
    beeld1.src = "vijver01g.jpg";

    beeld2 = new Image();
    beeld2.src = "vijver02g.jpg";

    beeld3 = new Image();
    beeld3.src = "vijver03g.jpg";

    <!– deze functie niet wijzigen –>
    function beeldwissel(a,b) {
    document.images[a].src = eval(b + ".src")}
    </script>
    </head>
    <body>
    <div id="container">
    <h1>Aanleg vijver</h1>
    <img alt="" name="beeldvenster" src="vijver01g.jpg">
    <img alt="" src="vijver01.jpg" onclick="beeldwissel('beeldvenster','beeld1')" class="thumbnail">
    <img alt="" src="vijver02.jpg" onclick="beeldwissel('beeldvenster','beeld2')" class="thumbnail">
    <img alt="" src="vijver03.jpg" onclick="beeldwissel('beeldvenster','beeld3')" class="thumbnail">
    </div>
    </body>
    </html>[/code:1:153d000bd5]
    Zie je het verschil tussen jouw code en mijn code?

    - Bas

    Ps. Ik heb de afbeeldingen hernoemt voor eigen testdoeleinden…

    [b:153d000bd5]Edit 0:18 uur[/b:153d000bd5]

    Ik heb het werkend gekregen, de enige echte toevoeging is een list met bijbehorend CSS. De resulterende code:
    [code:1:153d000bd5]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>C!T Test Moos</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <style type="text/css">
    h1{
    font-family: Arial, Helvetica, "sans serif";
    font-size: 11pt;
    text-align: center;
    }
    div#container{
    margin: 0 auto;
    width: 450px;
    }
    ul{
    padding: 0;
    margin: 0;
    }
    ul#fotos li{
    list-style-type: none;
    }
    ul#fotos li img.thumbnail{
    float: left;
    padding: 0;
    margin: 0;
    }
    img{
    border: none;
    margin: 0;
    padding: 0;
    vertical-align: bottom;
    }
    img.thumbnail{
    cursor:hand; /* Alle andere browsers */
    cursor:pointer; /* IE 5.x */
    }
    </style>
    <script type="text/javascript">
    <!– hier laad je de foto's in –>
    beeld1 = new Image();
    beeld1.src = "vijver01g.jpg";

    beeld2 = new Image();
    beeld2.src = "vijver02g.jpg";

    beeld3 = new Image();
    beeld3.src = "vijver03g.jpg";

    <!– deze functie niet wijzigen –>
    function beeldwissel(a,b) {
    document.images[a].src = eval(b + ".src")}
    </script>
    </head>
    <body>
    <div id="container">
    <h1>Aanleg vijver</h1>
    <ul id="fotos">
    <li><img alt="" name="beeldvenster" src="vijver01g.jpg"></li>
    <li><img alt="" src="vijver01.jpg" onclick="beeldwissel('beeldvenster','beeld1')" class="thumbnail"></li>
    <li><img alt="" src="vijver02.jpg" onclick="beeldwissel('beeldvenster','beeld2')" class="thumbnail"></li>
    <li><img alt="" src="vijver03.jpg" onclick="beeldwissel('beeldvenster','beeld3')" class="thumbnail"></li>
    </ul>
    </div>
    </body>
    </html>
    [/code:1:153d000bd5]
  • Nou dit schiet helemaal niet op, heb je in IE gekeken naar dat laatste ontwerp.
  • Beetje rare reactie… Ik hoef toch niet alles voor te kauwen? :? Het is alleen maar een basis om mee verder te werken… Maar goed, verander het CSS naar:
    [code:1:d4149a9387] ul#fotos li{
    list-style-type: none;
    display: inline;
    }
    [/code:1:d4149a9387]
    Dan werkt het ook in IE.

    Succes ermee verder, ik ga kijken of ik anderen kan helpen…

    - Bas
  • Hoi Bas, sorry hoor was niet zo bedoeld.
    Ik ben er nog verder mee aan de slag geweest en kreeg het niet recht, die inline was de oplossing.
    Ik wil er echter juist wel ruimte tussen hebben maar dat is geen probleem om aan te pasen.
    Waar het uiteindelijk om draaide is die vertical-align: bottom;, werkt bijvoorbeeld ook in het eerste voorbeeldje met de tabellen, daar heb je me dus een heleboel mee geholpen. Ben het al eens eerder tegen gekomen maar nooit opgelost gekregen.
    Dan toch nog een vraag over die laatste opzet, waarom met een lijst werken? Heeft hier toch geen nut?
    Nogmaals sorry en nogmaals bedankt!
    Groeten Moos
  • [quote:9cb14e7ca9="Moos"]Dan toch nog een vraag over die laatste opzet, waarom met een lijst werken? Heeft hier toch geen nut?
    Nogmaals sorry en nogmaals bedankt!
    Groeten Moos[/quote:9cb14e7ca9]Het heeft semantisch gezien nut, een lijst met plaatjes zet je in een lijst element.

Beantwoord deze vraag

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