Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Plaatje met tekst naast elkaar zetten.

Anoniem
Screendumper
3 antwoorden
  • Hallo iedereen!

    Ik zit met een probleempje gedurende het opbouwen van een website.
    De plaatjes met onderschrift staan namelijk onder elkaar, wat een lang scroll-effect geeft.
    De afbeelding en het woord eronder linken naar een andere pagina.

    Kunnen jullie mij hiermee helpen?

    Om het met eigen ogen te zien, hier is de link: http://www.bootssportprijzen.nl/assortiment.html

    Alvast bedankt! :D
  • Je hebt een tabel gemaakt met daarin op iedere rij één item. Als je nu eens klikt op Bekers, dan zie je daar dezelfde tabel maar dan met 5 items per rij. Blijkbaar is het je daar wel gelukt, dus dat kun je prima toepassen op de overzichtspagina.

    Hoe heb je overigens die site gemaakt? Want qua code is het wel heel erg brak als ik heel eerlijk ben. Je mist bijvoorbeeld de body-tag, gebruikt veel deprecated HTML en ook veel code die helemaal niet nodig zou zijn als je de zaken juist zou aanpakken.
  • Dat is prima te doen :-)
    Om te beginnen zou ik geen table gebruiken voor de afbeeldingen. Tables zijn daar overigens ook helemaal niet voor bedoeld , die zijn er om data of overzichten weer te geven ;-)
    Ook het gebruik van <center> is hedentendage niet meer gewenst.

    Ik zou alles in <p></p> zetten en vervolgens met een stukje CSS alles de goed kant op sturen.

    Dus waar je nu hebt:


    [code:1:9d9677cdac]<tr>
    <td style="width: 20%;">
    <center><a href="http://www.bootssportprijzen.nl/special-price.html"><img src="images/special-price.jpg" border="1" border style="color: black;"></center>
    </td>
    </tr>[/code:1:9d9677cdac]
    Daar krijg je dan:

    [code:1:9d9677cdac]<p class="assortiment">
    <a href="http://www.bootssportprijzen.nl/special-price.html"><img src="images/special-price.jpg" border="1" border style="color: black;">
    </p>[/code:1:9d9677cdac]
    (En voeg ook meteen een alt tag aan de afbeelding toe.)

    Dan staat alles nog steeds onder elkaar, links tegen de kantlijn, maar daar gaan we met CSS iets aan doen.

    Bovenin je code heb je dat style blokje:
    [code:1:9d9677cdac]<style>
    <!–
    a{text-decoration:none}
    –>
    </style>[/code:1:9d9677cdac]

    Daar kun je je <p>'s gaan stylen. Voor de zekerheid zou ik dan een class 'assortiment' aanmaken, anders gaan alle <p>'s op de pagina hetzelfde doen.
    Dat styleblokje bovenin komt er dan b.v. zo uit te zien:

    [code:1:9d9677cdac]<style>
    <!–
    a{text-decoration:none}
    p.assortiment {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    text-align: center;
    }
    –>
    </style>[/code:1:9d9677cdac]
    Met p.assortiment geef je aan dat je alle <p>'s met class"assortiment" gaat stylen
    float: left geeft aan dat ze niet onder elkaar gezet moeten worden, maar links tegen elkaar aan moeten 'drijven'. (Hij maakt de 'regel' dan gewoon vol van links naar rechts)
    margin-right zorgt er voor dat er rechts van elke <p> 10 pixels tussenruimte wordt aangehouden
    margin-bottom zorgt er voor dat er onder elke <p> 10 pixels tussenruimte wordt aangehouden
    text-align: center zorgt ervoor dat alles binnen de <p> gecentreerd wordt.

Beantwoord deze vraag

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

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