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)

Object in html plaatsen met CSS zonder tabellen

None
36 antwoorden
  • Hallo,

    Wie kan mij helpen met het volgende probleem ?
    Ik wil graag met css onderstaande maken alleen kom ik er niet goed uit.

    [code:1:43d974a9ad]
    ——————————————————
    Tekst achtergrond kleur rood
    ——————————————————
    - tekst regel 1: :aantal
    - tekst regel 2: :aantal Afbeelding 1
    - tekst regel 3: :aantal
    - tekst regel 4: :aantal 320px x 200px
    - tekst regel 5: :aantal
    - tekst regel 6: :aantal
    - tekst regel 7: :aantal
    - Link1, Link2, Link3, Link4
    - Link5, Link6, Link7, Link8

    —————————————————–[/code:1:43d974a9ad]

    En onder bovenstaande gegevens wil ik het graag andesom hebben dus de afbeelding links en de tekst +hyperlinks rechts

    [b:43d974a9ad]De html code die ik al heb is:[/b:43d974a9ad]

    <div class="object">
    <div class="photo"><img src="/foto1.jpg" alt="info over het plaatje" border="0" height="200" width="320"/>
    </div>
    <p><a href="link1" class="speciaal">tekst link1</a><br />overige gegevens</p>
    </div>

    <div class="object">
    <div class="photo"><img src="/foto2.jpg" alt="info over het plaatje" border="0" height="200" width="320"/>
    </div>
    <p><a href="link1" class="speciaal">tekst link1</a><br />overige gegevens</p>
    </div>

    [b:43d974a9ad]En de volgende css code[/b:43d974a9ad]

    .object {
    float:left;
    width:380px;
    height:110px;
    padding:10px;
    text-align:left;
    }
    .photo{
    float:left;
    margin:0 10px 0 0;

    Graag jullie tips om dit voor elkaar te krijgen
  • Ik snap niet helemaal wat je precies wilt. Wat is "aantal"? Waar komen Link1/2/etc voor in je HTML? Wat stellen de losse tekstregels voor?
  • Je het eigenlijk zien als een soort tabel.

    bij tekst 1 kan bijvoorbeeld staan:
    En daar achter komt het getal te staan:

    aantal personen: 100
    Breedte: 200 m

    enz.


    De link zit verwerkt in de volgende regel:

    <div class="object">
    <p><a href="http://www.link1.nl">tekst link1</a><br />overige gegevens</p>
    </div>

    Ik hoop dat je het nu beter begrijpt.
  • Een beetje :)

    Waarom gebruik je geen tabel dan? Dat is het toch? Is je probleem ook meteen opgelost.
  • Dat wil ik nu eigenlijk niet.
    Op dit moment ben ik bezig om mijn hele site aan te passen en daarbij wil ik geen tabellen meer gebruiken. Het is nl uit de tijd. Dit gebruikte we vroeger voor alles wat we maar recht wilde zetten. Het zou volgens mij ook met css moet kunnen. Alleen is nu even de vraag hoe.
  • Dat wil ik nu eigenlijk niet.
    Op dit moment ben ik bezig om mijn hele site aan te passen en daarbij wil ik geen tabellen meer gebruiken. Het is nl uit de tijd. Dit gebruikte we vroeger voor alles wat we maar recht wilde zetten. Het zou volgens mij ook met css moet kunnen. Alleen is nu even de vraag hoe.
  • Dit is juist datgene waar je wél tabellen voor moet gebruiken.

    Het is niet zo dat tabellen uit de tijd zijn of verboden of iets dergelijks. Ze worden vaak gebruikt om een layout te maken, en dat is niet de bedoeling omdat tabellen in principe gebruikt moeten worden voor tabulaire data (data die in tabelvorm valt weer te geven dus). Dat is hier het geval:
    [code:1:5995e32ed2]+———————+
    | Eigenschap | Waarde |
    +————+——–+
    | Breedte | 200 |
    +———————+[/code:1:5995e32ed2]
    Enzovoorts. Je kunt er nog over steggelen of het geen definitielijst is maar in principe is het geen probleem hier een tabel voor te gebruiken. Je kunt het zeker met <div>'s doen, maar dát is dan juist niet semantisch verantwoord en meer werk ;)
  • Ik snap nog steeds niet… Voor mij is niet duidelijk wat het verband is tussen al die dingen in je layout; zo valt er ook niet goed aan te geven of je een tabel nodig hebt of niet.
    Slaat tekst1 op het plaatje? En hoort link1 bij het plaatje? En hoort tekst1 bij link1, of horen de teksten bij de teksten en slaan de links op andere dingen? En wat gebeurt er als je op een link klikt?

    Kortom, kun je ff uitleggen wat het verband is tussen tekst1, tekst2, etc., link1, link2, etc., en het plaatje? Zonder over layout te praten.
  • [quote:d1a80b7808]Ik snap nog steeds niet… Voor mij is niet duidelijk wat het verband is tussen al die dingen in je layout; zo valt er ook niet goed aan te geven of je een tabel nodig hebt of niet.
    Slaat tekst1 op het plaatje? En hoort link1 bij het plaatje? En hoort tekst1 bij link1, of horen de teksten bij de teksten en slaan de links op andere dingen? En wat gebeurt er als je op een link klikt?

    Kortom, kun je ff uitleggen wat het verband is tussen tekst1, tekst2, etc., link1, link2, etc., en het plaatje? Zonder over layout te praten.[/quote:d1a80b7808]

    Een voorbeeld zegt waarschijnlijk meer dan een hoop tekst.
    Kijk maar eens op http://www.fam-landzaat.nl/boot.htm
    Deze pagina is gemaakt met tabellen.

    Ik hoop dat het zo wat duidelijker is.
  • http://stijn.fuzic.nl/tests/kapitein/man_en_muis.htm

    Zoiets?

    (Alleen getest in Firefox 1.5.0.3)
  • Haha ik was ook met de definition lists aan de gang, maar dan anders..
    Testscase: Image description met definition list
    Bij mij is de bootnaam de titel van de definitie en zijn de eigenschappen van de boot de omschrijving van de definitie.
  • Als je ech gaat mierenneuken zou je van die <dd>Bouwjaar: 2003</dd> dan eigenlijk [code:1:02130f412f]<dd>
    <dl>
    <dt>Bouwjaar</dt>
    <dd>2003</dd>
    </dl>
    </dd>[/code:1:02130f412f]
    moeten maken :)

    Maar eigenlijk heeft HTML geen sluitende oplossing voor dit soort dingen als je het echt perfect wilt doen :/

    Heb mijn oplossing ook even aangepast a.d.h.v. boelieboelie's manier, nog steeds op http://stijn.gamerzheaven.nl/tests/kapitein/man_en_muis.htm
  • Hierbij wil ik jullie bedanken voor de voorbeelden.
    Hier kan ik wel iets mee. Straks even mee stoeien.
  • Ik het voorbeeld van Stijn gebruikt. Ik heb hier voor gekozen omdat tussen de tekst en de waarde open ruimt zit

    Het resultaat is te zien op http://www.fam-landzaat.nl/_overig/boot/boot.php

    Twee puntjes krijg ik nog niet helemaal voor elkaar.

    1. De naam van het schip wordt nog niet netjes gecentreerd.
    2. De hyperlinks bij het tweede plaatje staan nog helemaal links. Deze krijg ik niet netjes onder de andere tekst.

    De code is het zelfde als van eerste plaatje.

    Wie kan mij nog even uit de brand helpen ?
  • Ja, die links die te ver naar rechts staan waren voor mij ook een probleem. Even spelen met margin/padding zal de oplossing zijn, denk ik.

    Waarom heb je de <h2>'s vervangen met dit:

    [code:1:2c4897ed87]<div class="infobalk">
    <ul>
    <li>MS Midnatsol</li>
    </ul>
    </div>[/code:1:2c4897ed87]
    ? Lijkt me nogal nutteloos, een lijst met één item, en aangezien je blijkbaar semantisch verantwoord wilt bezig zijn (je wilde immers van je tabellen af) vraag ik me af waarom je het niet gewoon een <h2> hebt gelaten, want dan zou het er (met de CSS van mijn testpagina) gewoon goed uitzien.

    EDIT: Oplossing voor probleem 1:

    [code:1:2c4897ed87].rechts dt {
    float: right;
    }[/code:1:2c4897ed87]
    Dus zonder margin. Vervolgens is dan de ruimte tussen bijv. "Passagiers" en "1000" bij boten met de foto rechts kleiner dan bij die met de foto links, dus dat moet je nog even specifiek aanpassen met iets als
    [code:1:2c4897ed87].rechts .details dt {
    width: 7em;
    }[/code:1:2c4897ed87]

    Let wel op dat alles alleen getest is in Firefox en je dus zelf mag uitzoeken of het ook in andere browsers goed werkt :)
  • Dat heb ik expres gedaan. Want anders klopt de hele pagina niet meer.
    Ik heb nl een anders css bestand wat al een hoop dingen regelt.

    Als ik jouw css voorbeeld niet aanpas krijg je dit:
    http://www.fam-landzaat.nl/_overig/boot/boot1.php

    En dit vind ik nu ook niet echt supper


    Als ik jouw pagina zou houden en er komt iemand op deze pagina met een andere resolutie dan is krimpt alles in elkaar. En op deze manier niet meer dus vandaar.
  • Tja, dat komt natuurlijk omdat je zomaar een vreemd stuk code in je pagina plakt en de "vreemde" CSS ook andere elementen kan veranderen, dat klopt. Maar je kunt je <h2> wel een aparte class geven natuurlijk, dan werkt het toch.
  • Ik heb je advies opgevolgd. Voor h2 heb ik een aparte class gemaakt.
    De naam van het derde schip staat nu nog steeds niet netjes.

    Als ik in de class h2 de tekst text-align:center; laat staan dan springt de naam van het 3e schip een stukje naar rechts. Deze staat dan ook niet meer in het midden. Vandaar dat ik dit daar weg heb gehaald

    En de tekst + hyperlinks van het tweede schip staat nu links en deze wil ik meer naar het plaatje hebben.

    Het resultaat is te bekijken op http://www.fam-landzaat.nl/_overig/boot/boot1.php

    Mocht je nog een tip hebben dan hoor ik het graag.
  • Ik heb het niet gecontroleerd, maar het enige verschil tussen de eerste twee <H2>'s enerzijds en de derde anderzijds lijkt te zijn dat de derde in <div align="center"> staat. Misschien is het een idee hem daar buiten te halen zoals de andere twee?
  • Ik heb nu overal <div align="center"> weg gehaald.
    Nu staat de eerste en de laatste links. De middelste staat in het midden.

Beantwoord deze vraag

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