[html] image floating probleem in een div - Softwareontwikkeling

vrijdag 31 oktober 2003 11:39

Acties:

Druivensuiker.be

Topicstarter

Ik ben dus overgestapt naar het opbouwen van een webpagina (in php, maar m'n probleem is van html omvang) in div's in plaats van tables. Lukt allemaal heel vlot anders, behalve dit....

Als je images in een div steekt, dan float alles mee, dus ook als je je browser versmalt. Ondere iedere image moet er nu tekst komen. Probleem is nu als je dit bvb in een table steekt, dat je 'images met tekst' nu niet meer mooi floaten, maar rechtstreeks onder elkaar gaan staan.

Dit float dus mooi:
<div>
[img]"blabla">[/img]
</div>

Hoe kan ik nu onder iedere image tekst krijgen, maar dat het floaten behouden blijft? Met floaten bedoel ik dus naar de volgende regel gaan indien het aan het einde van de div komt.

Heeft iemand hier een oplossing voor?

Edit: sorry mods, dit moest in P & W (* Dextro geeft zichzelf 10 stokslagen)

[ Voor 35% gewijzigd door Dextro op 31-10-2003 11:49 ]

vrijdag 31 oktober 2003 12:12

Acties:

El_BingO

Misschien als je ieder plaatje weer in een table zet met 2 rijen (één met plaatje en één met bijschrift)?

Bv.:
<div>
<table cellpadding...>
<tr><td>[img]"pl1.jpg"></td></tr> <tr><td>Mooi[/img]</tr>
</table>
<table cellpadding...>
<tr><td>[img]"pl2.jpg"></td></tr> <tr><td>Ook[/img]</tr>
</table>

[ Voor 33% gewijzigd door El_BingO op 31-10-2003 12:13 ]

vrijdag 31 oktober 2003 12:21

Acties:

Verwijderd

El_BingO schreef op 31 oktober 2003 @ 12:12:
Misschien als je ieder plaatje weer in een table zet met 2 rijen (één met plaatje en één met bijschrift)?

Dextro schreef op 31 oktober 2003 @ 11:39:
Ik ben dus overgestapt naar het opbouwen van een webpagina (in php, maar m'n probleem is van html omvang) in div's in plaats van tables.

Maar goed...

Ontopic:
Het bovenstaande idee is wel goed. Geef de images een nieuw moederelement dat je laat floaten, met daarin de image en de caption.

vrijdag 31 oktober 2003 12:23

Acties:

disjfa

be

El_BingO schreef op 31 oktober 2003 @ 12:12:
Misschien als je ieder plaatje weer in een table zet met 2 rijen (één met plaatje en één met bijschrift)?

dan kan je logischer een div erin zetten bij elke table:

PHP:

<div>
  <div style="float:left;"><img ....><br />text</img></div>
  <div style="float:left;"><img ....><br />text</img></div>
</div>

maar dan moeten wel de plaatjes gelijke hoogtes gaan hebben, wanders ziet het er waarschijnlijk een beetje vaag uit.

[ Voor 14% gewijzigd door disjfa op 31-10-2003 12:23 ]

disjfa - disj·fa (meneer)
disjfa.nl

vrijdag 31 oktober 2003 12:55

Acties:

Dextro

Druivensuiker.be

Topicstarter

Plaatjes zijn thumbnails gemaakt met gd2. Die kunnen dus gelijke hoogte hebben als ik het zo instel.

Ik ga het proberen. Ik laat iets weten, bedankt alvast.

vrijdag 31 oktober 2003 15:04

Acties:

creative8500

freedom.

PHP:

?>
<div class="pictureWithDescription">
    [img]"image001.png"[/img]
    <p>beschrijving</p>
</div>
<?php

Of wellicht nog beter

PHP:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>Images with description</title>
        <style type="text/css" media="screen">
        body { font-size: xx-small; }
        #images div
        {
            border: 3px groove darkorange;
            float: left;
            font-family: Verdana, sans-serif;
            letter-spacing: 0.05em;
            margin: .66em;
            padding: 2em 1.33em;
            text-align: center;
            width: 27em;
        }
        </style>
        <script type="text/javascript">
        //<![CDATA[
        window.onload = function ()
        {
            for (i = 0; i < document.getElementById ("images").getElementsByTagName ("div").length; i++)
            {
                var descriptionNode = document.createElement ("p");
                document.getElementById ("images").getElementsByTagName ("div")[i].appendChild (descriptionNode);

                var descriptionText = document.createTextNode (document.getElementById ("images").getElementsByTagName("div")[i].getElementsByTagName ("img")[0].getAttribute ("title"));
                document.getElementById ("images").getElementsByTagName ("div")[i].getElementsByTagName ("p")[0].appendChild (descriptionText);
            }
        }
        //]]>
        </script>
    </head>
    <body>
        <div id="images">
            <div>
                [img]"http://jigsaw.w3.org/css-validator/images/vcss.png"[/img]
            </div>
            <div id="test">
                [img]"http://www.w3.org/Icons/valid-xhtml11.png"[/img]
            </div>
        </div>
    </body>
</html>

Nog eventjes on-line te bekijken.

[ Voor 20% gewijzigd door creative8500 op 31-10-2003 15:05 ]

vrijdag 31 oktober 2003 15:59

Acties:

Dextro

Druivensuiker.be

Topicstarter

thx creative8500
Dit laatste werkt zalig goed $_/-\o_$

vrijdag 31 oktober 2003 16:01

Acties:

creative8500

freedom.

Dextro: Dit laatste werkt zalig goed $_/-\o_$

Nota bene: ik heb het enkel getest met Internet Explorer 6 en Mozilla 0.7!