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)

de ene float is de andere niet

Rumaro
14 antwoorden
  • Het heeft me enige moeite gekost, maar uiteindelijk heb ik met het volgende script de plaatjes in de hoeken van het vierkant gekregen.

    [code:1:136f1044f7]img.linksboven {
    float: left;
    margin: 2px 10px 2px 2px;
    }

    img.rechtsboven {
    float: right;
    margin: 2px 2px 2px 10px;

    }

    img.rechtsonder
    { float: right;
    height: 150px;
    width: 225px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 48px; /* De helft van de hoogte */
    margin-left: 72px; /* De helft van de breedte */
    }

    img.linksonder
    { float: left;
    height: 150px;
    width: 225px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 48px; /* De helft van de hoogte */
    margin-left: -298px; /* De helft van de breedte */
    } [/code:1:136f1044f7]

    Boven loopt de tekst mooi om de plaatjes heen, maar beneden niet.
    Aangezien ik een beginneling ben met CSS hoop ik dat één van jullie me kan zeggen wat er fout is.

    [img:136f1044f7]http://www.250kb.de/u/090204/j/94660d94.jpg[/img:136f1044f7]
  • En ik ben helemaal een kwajongen op dat gebied want ik werk nog steeds in het ouderwetse HTML…. :lol:

    Maar wat me opvalt bij de definities van de eigenschappen voor de plaatjes is dat bij de bovenste plaatjes de tekst:
    [code:1:27c853f436]margin: 2px 2px 2px 10px;[/code:1:27c853f436]
    voorkomt en dat die bij de onderste ontbreekt.
    Er worden wel andere margins vastgelegd, maar die hebben naar mijn idee meer met de relatieve positie te maken.

    Ik zit er waarschijnlijk helemaal naast, maar je weet maar nooit.
  • Nee dat zie je goed, boven wordt het gebruikt voor witruimte en beneden wordt het gebruikt voor de posiitie.

    En door die negatieve waarde veroorzaak je volgens mij dat het gewoon door het plaatje heen staat.

    ja wta kun je er aan doen, 4 vierkantjes met de plaatjes in 1 groot vierkant ?
    Zou dat iets zijn ?
  • Je kan "float" en "position: absolute" niet door elkaar gebruiken. In jouw geval wordt de float gewoon genegeerd en wordt de rest van de code uitgevoerd.
    Normaal gesproken is de plek waar het plaatje komt te "floaten" ook afhankelijk van de plek van je plaatje in je text.
    Hie ziet de html eruit?
  • [code:1:924d87a892]<body bgcolor="#FFFEE9">

    <p id="center">
    <img src="pics/info1.jpg" alt="Figuur" class="linksboven" />
    <img src="pics/info2.jpg" alt="Figuur" class="rechtsboven" />
    <img src="pics/info1.jpg" alt="Figuur" class="linksonder" />
    <img src="pics/info2.jpg" alt="Figuur" class="rechtsonder" />
    Ik ben Herman Goedleven en restaureer sinds 1978 klokken die in slechte staat zijn.
    De klok wordt aan het begin van de restauratie volledig gedemonteerd en in een
    speciaal vibrerend bad gelegd zodat alles goed gereinigd word.
    Alle slechte stukken worden vervangen of weer in nieuwstaat gebracht en voordat alle
    delen weer tot één klok gevormd worden, worden alle onderdelen opnieuw
    gereinigd, ditmaal in een speciaal kuisbad.
    Wat volgt is een natuurgetrouw herstel van de klok (waarbij katoenen handschoenen gedragen worden
    om vervuiling te voorkomen), zodat hij er weer vele jaren tegen kan.

    Wat U op de website ziet is maar een klein gedeelte van de klokken die ik verkoop.
    Zoekt U een speciaal type of soort, neemt U gerust contact met mij op voor verdere
    informatie. of komt U eens langs in mijn winkel

    </p>


    </body>[/code:1:924d87a892]

    Ik ben er van overtuigd dat ik het verkeerd doe, maar ik kan nergens op internet vinden hoe ik de 4 plaatjes elk in een hoek kan krijgen met float.
    Ja de bovenste 2, maar de onderste 2 met geen mogelijkheid.
  • Ik kan wel een redelijk omslachtige methode verzinnen maar die werkt alleen als je van te voren de hoogte weet van de <p> waar de plaatjes in komen te zitten.

    Wat je dan moet toevoegen zijn 2 "spacer" spans, semantisch natuurlijk niet verantwoord maar bij bepaalde ontwerp elementen kan je niet anders. Je zet de twee spans in je <p>, maak ze 1 px breed en zo hoog als de paragraaf min de hoogte van je plaatje (inclusief eventuele margin/padding) met een negatieve margin links of rechts van 1 pixel. Die ene span float je left en de ander right dan float je twee van je plaatjes links en twee rechts en van elk geeft je er 1 "clear: both" mee waardoor ze onder de span terecht komen.

    Dat zou moeten werken.

    ff voor de duidelijk heid wat code, css:[code:1:7ebe3ee655]img.left, img.right, img.left-bottom, img.right-bottom {
    display:block;
    width:98px; height: 98px; /*voorbeeld maar*/
    float:left;
    border: 1px solid red; /*alleen om het zichtbaar te maken*/}
    img.right-bot, img.right {float:right;}
    img.left-bot{clear:left;}
    img.right-bot{clear:right;}
    #spacer-left, #spacer-right {
    width:1px; height: 180px; /*zou betekenen dat de <p> 280px hoog is*/
    margin-left: -1px;
    float:left;}
    #spacer-right {float:right}[/code:1:7ebe3ee655]html:[code:1:7ebe3ee655]<p>
    <span id="spacer-left"></span>
    <span id="spacer-right"></span>
    <img class="left" /><img class="right" />
    <img class="left-bottom" /><img class="right-bottom" />
    Lorem ipsum …..
    </p>[/code:1:7ebe3ee655]
  • Na wat pilletjes en het een paar keer over gelezen te hebben snapte ik eindelijk wat je bedoelde. :wink:
    (kun je nagaan hoe slecht ik ben in CSS)

    En dan komt de tekst er gewoon tussen te staan, tussen de plaatjes boven en onder ?

    Ik ga er eens mee aan de slag, bedankt voor je toelichting!.
  • Nee, geeft niet het gewenste effect. :cry:

    <STYLE TYPE="text/css">
    <!–

    #spacer-left, #spacer-right {
    width:1px; height: 180px; /*zou betekenen dat de <p> 280px hoog is*/
    margin-left: -1px;
    float:left;}
    #spacer-right {float:right}

    img.left, img.right, img.left-bottom, img.right-bottom {
    display:block;
    width:98px; height: 98px; /*voorbeeld maar*/
    float:left;
    border: 1px solid red; /*alleen om het zichtbaar te maken*/}
    img.right-bot, img.right {float:right;}
    img.left-bot{clear:left;}
    img.right-bot{clear:right;}

    –>
    </STYLE>

    </head>


    <body bgcolor="#FFFEE9">


    <p>
    <span id="spacer-left"></span>
    <span id="spacer-right"></span>
    <img class="left" /><img class="right" />
    <img class="left-bottom" /><img class="right-bottom" />
    Lorem ipsum …..
    </p>[code:1:132489315c]

    Ik heb nu 3 plaatjes linksboven, dan tekst en dan 1 plaatje rechtsboven.
    [/code:1:132489315c]
  • Volgens mij moet de CSS code zijn:[code:1:dea68ac37c]img.left, img.right, img.left-bottom, img.right-bottom {
    display:block;
    width:98px; height: 98px; /*voorbeeld maar*/
    float:left;
    border: 1px solid red; /*alleen om het zichtbaar te maken*/}
    img.right-bottom, img.right {float:right;}
    img.left-bottom{clear:left;}
    img.right-bottom{clear:right;}
    #spacer-left, #spacer-right {
    width:1px; height: 180px; /*zou betekenen dat de <p> 280px hoog is*/
    margin-left: -1px;
    float:left;}
    #spacer-right {float:right}[/code:1:dea68ac37c]Dus "bottom" voluit gespeld.
  • [quote:d70d911cc9="Prin0096"]Dus "bottom" voluit gespeld.[/quote:d70d911cc9]Ja, idd dat is de fout in mijn code. Ik zat al te kijken…maar dat is echt zoiets waar je overheen kijkt :)
  • Oooooooo, ik zal me al af te vragen waar die bot voor diende. :oops:

    ik dacht een soort fake instructie, maar blijkt dus gewoon bottom te zijn.

    :wink:
  • Helaas,

    de tekst blijft gewoon door de onderste plaatjes heen lopen.


    het plaatje is iets verkleind, vandaar die rare verhouding van de plaatjes.
    [img:c489d8e83a]http://www.250kb.de/u/090205/j/bd215796.jpg[/img:c489d8e83a]
  • Vraag me niet waarom, maar als ik #spacer-left, #spacer-right {
    width:2px; doe (dus 2 ipv 1 px) dan werkt het wél.
  • Ik heb hier wat online gezet: link

Beantwoord deze vraag

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