[CSS] Image rechts alignen in een head tag

[bakakaizoku]

Om meteen een indruk te geven van wat ik precies bedoel met dit topic:



De bedoeling is dat een image rechts van een head tag wordt gealigned, en dat een paragraaf deze meeneemt. De code die werkt in mozilla en netscape is het volgende:

HTML:

<h1>[img]"gfx/image.jpg"[/img]Caption</h1>
<p>Tias brillig, and the slithy toves did gyre and gimble in the wabe; 
all mimsy were the borogoves, and tTias brillig, and the slithy toves 
did gyre and gimble in the wabe; all mimsy were the borogoves</p>

En de bijbehorende CSS

Cascading Stylesheet:

#midden #content p {
    color: #fff;
    font-size: 10px;
    margin-top: 0px;
    width: 310px;
}

#midden #content h1 {
    color: #fff;
    font-size: 13px;
    font-weight: bold;
}

#midden #content h1 img {
    float: right;
    margin-left: 20px;
}

Het probleem is dat hij in internet explorer (en opera, maar dat is van mindere prioriteit) er een zooitje van maakt. Om het te illustreren in een voorbeeld:



Hoe krijg ik het in IE (en het liefst ook opera) het voor elkaar om hetzelfde effect als in MOZ&NS te krijgen? (het liefst ook zonder een containing div, omdat het straks voor de klant makkelijk te wijzigen moet zijn)

[ Voor 4% gewijzigd door bakakaizoku op 05-11-2004 15:14 ]

[Eijkb]

Je hebt align tags voor je img. Zoals left, right, float enzo. Basis HTML. Daar kan het volgens mij "deels" mee bereikt worden.

Linkje: http://www.handleidinghtm...ingen/afbeeldingen04.html

[ Voor 28% gewijzigd door Eijkb op 05-11-2004 15:24 ]

[Verwijderd]

Is er een speciale reden waarom de image in je header staat? Als het daar logischerwijs geen onderdeel van uitmaakt kun je het beter daarbuiten zetten...

code:

<div>
    <img />
    <h1>Header</h1>
    <p>Tekst</p>
</div>

Desalniettemin, zou jouw oplossing gewoon moeten werken. Ook in IE. Kun je wat meer code posten?

[bakakaizoku]

Die reden is er ja, omdat de image namelijk vanaf de header moet worden weergegeven ipv. vanaf de paragraaf. Als ik met divjes ga werken dan is straks het einde zoek voor de klant.

Alle code van de betreffende layer:

HTML:

        <div id="content">
            <p>Tias brillig, and the slithy toves did gyre and gimble in the wabe;
 all mimsy were the borogoves, and tTias brillig, and the slithy toves did gyre and 
gimble in the wabe; all mimsy were the borogoves, and the mome raths outgrabe. 
Beware the Jabberwock, my son! The</p>
            [img]"gfx/abcde.jpg"[/img]
            <h1>[img]"gfx/plaatje.jpg"[/img]lalalala</h1>
            <p>Tias brillig, and the sl ithy toves did gyre and gimble in the 
wabe; all mimsy were the borogoves, and tTias brillig, and the slithy toves did gyre 
and gimble in the wabe; all mimsy were the borogoves</p>
            <br style="clear: both">
            [img]"gfx/short_news.gif"[/img]
            <ul>
                <li><a href="#">Downloadbaar dingetje</a></li>
                <li><a href="#">Downloadbaar dingetje</a></li>
                <li><a href="#">Downloadbaar dingetje</a></li>
                <li><a href="#">Downloadbaar dingetje</a></li>
            </ul>
        </div>

@ander met z'n align:
Dat wil ik absoluut niet gebruiken, dat vergooit het nut van css meteen..

[Verwijderd]

Ik denk dat het misgaat bij de breedte die je aan de P geeft. De H1 is een block-level element dat dus de volledige beschikbare breedte aan zal nemen. Een plaatje dat daarin rechts gefloat wordt zal dus teveel naar rechts staan.

Als je die div#content nou de breedte geeft die je nu aan de P geeft?

[bakakaizoku]

De #content div kon/mag niet kleiner, dus heb ik maar een work-around gemaakt, met een containing div voor de hele content (behalve de content die dus te groot zou zijn) en dat werkt.

Slotje dan maar

[bakakaizoku]

Of ik druk mij even ongelukkig uit in de laatste reply, wat ik bedoelde was uiteindelijk een aparte p class voor content die absoluut maar 310px breed mag zijn..