[CSS?] DIV aanpassen aan hoogte en breedte van img

zondag 31 december 2006 00:05

MEe laten rekken is geen probleem....mits de lengte/breedte van je foto bekend is

Dan is het gewoon een kwestie van (div spul).style.width = (image spul).style.width enz

...of als je minder spastisch bezig wilt zijn.... idd gewoon img rand meegeven

[ Voor 19% gewijzigd door shnazzle op 30-12-2006 23:58 ]

Acties:

zondag 31 december 2006 00:08

Topicstarter

display: block heeft geen verschil.
De div rect zich uit zo groot mogelijk naar zijn omgeving, maar ik wil net het omgekeerde.

een border meegeven wil ik niet doen omdat ik onderaan meer wil dan de rest, en ik wil ook nog wat teksten toevoegen... (beeld je zo een polaroid foto in).
Een witte rand in de foto zelf is zeker ook geen optie.

http://www.sillevl.be - blog http://www.sillevl.be/blog - flickr http://www.flickr.com/sillevl

Acties:

ThunderNet

Flits!

Je kan ook de border per kant instellen. Dat je dus aan de onderkant een grotere border hebt dan aan de zijkanten of bovenkant

Heb je liever vooraf, of achteraf, dat ik zeg dat ik geen flauw idee heb wat ik doe?

zondag 31 december 2006 00:12

Acties:

zondag 31 december 2006 00:18

Topicstarter

ThunderNet schreef op zondag 31 december 2006 @ 00:08:
Je kan ook de border per kant instellen. Dat je dus aan de onderkant een grotere border hebt dan aan de zijkanten of bovenkant

ok, maar hoe zet ik dan tekst in die border die gecentreerd is over de breedte van de foto?
maar het blijft nog steeds geen optie, want ik heb nog andere effecten die afhankelijk zijn van de breedte van die eene div (die de foto zou moeten volgen...)

http://www.sillevl.be - blog http://www.sillevl.be/blog - flickr http://www.flickr.com/sillevl

Acties:

zondag 31 december 2006 00:26

volgens mij heb ik precies wat jij wilt op mijn site...maar die adverteer ik liever niet zomaar hier...
Een manier om het naar je te krijgen?

Acties:

zondag 31 december 2006 00:41

Topicstarter

goed ontvangen, bedankt !

[ Voor 75% gewijzigd door LittleWan op 31-12-2006 00:35 ]

http://www.sillevl.be - blog http://www.sillevl.be/blog - flickr http://www.flickr.com/sillevl

Acties:

zondag 31 december 2006 00:48

Voor de rest heb ik nog iets in elkaar gezet dat misschien als toevoeging op de site die ik heb gestuurd...of voor een buitenstaander... divs wil laten meereken met images....

code:

<html>
<style>
    .pic_class {
        border : Solid 2px #0000FF;     
    }
</style>
<body>
<script>
    function writepic(id) {
        document.write("<div class='pic_class' id='pic_div_"+id+"'><img id='pic_"+id+"' src='pic_"+id+".jpg'></div>");
        document.getElementById("pic_div_"+id).style.width = document.getElementById("pic_"+id).offsetWidth;
        document.getElementById("pic_div_"+id).style.height = document.getElementById("pic_"+id).offsetHeight;
    }
    writepic(1);
    writepic(2);
    
</script>
</body>
</html>

....ja ..ik verveel me...

Dus dit haalt gewoon foto's op uit de root dir die 'pic_x.jpg' heten... met X als een nummer uiteraard.
Dit is uiteraard makkelijk in alle manieren uit te breiden.

[ Voor 10% gewijzigd door shnazzle op 31-12-2006 00:42 ]

Acties:

zondag 31 december 2006 00:54

Cool

HTML:

1
2
3

<div style="padding: 20px; background: white;">
  <img src="whaevah" style="display: block" />
</div>

Of snap ik het probleem niet

@shnazzle: gebruik wel even een doctype en geef type-attributen met de <style /> en <script />-elementen mee

En document.write() is wel makkelijk, maar eigenlijk gewoon een beetje vies. Waarom niet helemaal via de DOM?

Acties:

zondag 31 december 2006 01:06

@Fuzzi: Hij strekt dan alsnog je DIV helemaal naar rechts uit. Omdat het block is.
en verder...

arghh!!....

Ik zit hier om 1 uur 'snachts te coden uit de losse pols om even een voorbeeld te geven

Give me a break!

Dus ja... idd LittleWan en alle andere kindertjes hier... naar papa luisteren en altijd DOCTYPE meegeven en direct naar DOM sturen in plaats van document.write()

hehe..
fools..

Trouwens, ik weet niet of mijn oplossing niet erg om is, denk er niet echt over na.

Acties:

zondag 31 december 2006 01:25

Cool

D'oh. Ja dat 1-uur-'s nachts-effect heb ik ook al

Dat ik ter plekke vergeet dat een block-element de hele breedte pakt.. Terwijl ik toch redelijk veel met CSS werk

Poging 2:

HTML:

1
2
3

<span style="padding: 20px; background: red; display: inline-block;">
   <img src="uZoo7.jpg" />
</span>

.. Alleen jammer dat Firefox inline-block niet ondersteunt

. Daar is wel een oplossing voor tho, maar de appelflappen moeten nu uit de oven

Acties:

zondag 31 december 2006 01:28

Topicstarter

JavaScript:

<script language="javascript1.2">
    document.getElementById("picturebox").style.height = document.getElementById("foto").offsetHeight+40;
    document.getElementById("picturebox").style.width = document.getElementById("foto").offsetWidth+20;
    document.write('height='+document.getElementById("picture").offsetHeight+' width='+document.getElementById("picture").offsetWidth);

</script>

het werkt soms, maar soms komen totaal verkeerde afmetingen van de afbeeldingen

vooral in firefox

http://www.sillevl.be - blog http://www.sillevl.be/blog - flickr http://www.flickr.com/sillevl

Acties:

zondag 31 december 2006 01:32

Fuzzillogic schreef op zondag 31 december 2006 @ 01:06:

.. Alleen jammer dat Firefox inline-block niet ondersteunt . Daar is wel een oplossing voor tho, maar de appelflappen moeten nu uit de oven

Terwijl Fuzzi aan het flappen is, en ik toch in een voorzeg-mood ben....

code:

1
2
3

<span style="padding: 20px; background: red; display: inline-block; display:-moz-inline-box">
   <img src="uZoo7.jpg" />
</span>

Voor IE en FF (2.0) support voor dit effect.

Acties:

zondag 31 december 2006 01:35

LittleWan schreef op zondag 31 december 2006 @ 01:25:

het werkt soms, maar soms komen totaal verkeerde afmetingen van de afbeeldingen vooral in firefox

gebruik je dit stukje code steeds opnieuw? Want dan gebruik je natuurlijk steeds dezelfde ID...die uniek moeten zijn. Vandaar mijn constructie eerder met "pic_"+id+".jpg"

...eeerrr, en waar heb je dit staan? Want je document.write() hier alleen attributen... waar gebeurt dit?

[ Voor 12% gewijzigd door shnazzle op 31-12-2006 01:34 ]

Acties:

zondag 31 december 2006 10:21

Cool

shnazzle schreef op zondag 31 december 2006 @ 01:28:
[...]
Voor IE en FF (2.0) support voor dit effect.

En Opera uiteraard. En Swift 0.2 (webkit) snapt het ook.

@LittleWan

<script language="javascript1.2"> is al jaren deprecated. Beter: <script type="text/javascript" />, of nog beter: <script type="application/javascript" />.

[ Voor 28% gewijzigd door Fuzzillogic op 31-12-2006 01:38 ]

Acties:

JHS

Splitting the thaum.

Niet getest:

HTML:

1
2
3

<div style="min-width: 1px; _width: 1px; padding: 20px;">
  <img style="display: block;">
</div>

? Met dien verstande dat je natuurlijk geen hacks en inline styles gebruikt.

DM!

zondag 31 december 2006 11:20

Acties:

zondag 31 december 2006 11:25

Topicstarter

LittleWan schreef op zondag 31 december 2006 @ 01:25:

JavaScript:

<script language="javascript1.2">
    document.getElementById("picturebox").style.height = document.getElementById("foto").offsetHeight+40;
    document.getElementById("picturebox").style.width = document.getElementById("foto").offsetWidth+20;
    document.write('height='+document.getElementById("picture").offsetHeight+' width='+document.getElementById("picture").offsetWidth);

</script>

het werkt soms, maar soms komen totaal verkeerde afmetingen van de afbeeldingen

vooral in firefox

Ok, na eens beter bekeken te hebbe, dit werkt wel in IE, maar totaal niet in FF.

shnazzle schreef op zondag 31 december 2006 @ 01:32:
[...]

gebruik je dit stukje code steeds opnieuw? Want dan gebruik je natuurlijk steeds dezelfde ID...die uniek moeten zijn. Vandaar mijn constructie eerder met "pic_"+id+".jpg"

...eeerrr, en waar heb je dit staan? Want je document.write() hier alleen attributen... waar gebeurt dit?

Ik heb dat stukje code onderaan mijn pagina geplaatst, net voor de footer...
Volgens mij niet de meest correcte manier, maar het werkt in IE allesinds toch

[ Voor 28% gewijzigd door LittleWan op 31-12-2006 11:22 ]

http://www.sillevl.be - blog http://www.sillevl.be/blog - flickr http://www.flickr.com/sillevl

Acties:

zondag 31 december 2006 11:27

Ja...dat gaat ook niet werken want je schrijft attributen weg in het niets

Kijk maar eens nogmaals naar mijn originele code (dat ik net weer heb meerdere malen heb getest)

Acties:

Verwijderd

Dat komt omdat de .style.height niet een getal, maar een getal en een eenheid moet zijn.

code:

1	melp.style.height = (bla.offsetHeight + 20) + 'px';

zondag 31 december 2006 11:31

Acties:

zondag 31 december 2006 13:42

Topicstarter

Verwijderd schreef op zondag 31 december 2006 @ 11:27:
Dat komt omdat de .style.height niet een getal, maar een getal en een eenheid moet zijn.
code:
1
melp.style.height = (bla.offsetHeight + 20) + 'px';

yes, that did the trick !
bedankt !

nu vraag ik mij af hoe ik dat stukje code correct toepas?!

ik heb het gewoon onderaan de pagina geplaatst, zodat het zeker uitgevoerd zou worden nadat de foto op de pagina geplaatst wordt.

edit:
Ik heb juist ook ontdekt dat in FF deze manier niet werkt wanneer een control+F5 gebruikt word, bij een gewone refresh wel

Ook wanneer een foto voor de eerste keer geladen wordt kan het mislopen

edit2:
voorgaande probleem komt ook voor in IE, ik vermoed dat het dus te maken heeft met de manier van script op roepen.

[ Voor 24% gewijzigd door LittleWan op 31-12-2006 12:19 ]

http://www.sillevl.be - blog http://www.sillevl.be/blog - flickr http://www.flickr.com/sillevl

Acties:

dinsdag 2 januari 2007 00:02

Topicstarter

Ok, probleem opgelost.

Ik laat de code uitvoeren bij de body onload. Dit zorgt ervoor dat mijn kader geresized wordt na het laden van de pagina.
Omdat dit in sommige gevallen voor een lelijk neveneffect zorgt. (de eerste keer, neemt rekt hij volledig uit, en na een seconde verkleint het dan tot het juiste formaat), laat ik de code ook nog eens uitvoeren na het laden van de foto. Dat laatste gaat veel vlugger (er moet niet op de rest van de pagina gewacht worden), en daardoor blijft het kader mooi staan ook wanneer foto's met gelijke afmetingen na elkaar worden getoont

Iedereen bedankt voor zijn reacties !

[ Voor 3% gewijzigd door LittleWan op 31-12-2006 13:42 ]

http://www.sillevl.be - blog http://www.sillevl.be/blog - flickr http://www.flickr.com/sillevl

Acties: