Hoi Maccerts,

Ik had even een vraagje over de CSS tag "clear: both;"
Ik ben een beetje aan het knutselen met een site waarin de Flash gallery Simpleviewer, en dat werkt allemaal prima. Maar ik heb op 't moment 't probleem dat als ik de tekst vergroot in de browser, dat simpleviewer over de div's die eronder staan heenschuift.

Nu probeerde ik dat op te lossen door onder de div waar Simpleviewer in staat een "clear: both" tag in te voegen, maar dat mocht niet baten. Zou iemand misschien even willen kijken of ik iets over het hoofd zie? Het is maar een klein stukje code tot nu toe, en ik heb 't zo duidelijk mogelijk opgezet.

Hier staat het zaakje: www.motustudio.org/online
En de CSS: www.motustudio.org/online/site.css

Thanks!

Ohja, de layout is natuurlijk alles behalve af, dus daar hoef je nog niet naar te kijken

Ik kan de tekst gewoon vergroten zonder dat het gaat ergeren? Wat valt precies waarover? Misschien helpt het als je de divjes tijdelijk borders geeft om te zien wat er precies fout gaat?

Ik heb de div waar Simpleviewer in staat, en de div waar het regeltje
tekst in staat (in het lichtere deel) een rode border gegeven. Precies
onder de Simpleviewer-div staat een lichtbruin lijntje wat fungeert als
een grenslijn van gallery naar de contactgegevens (die in die onderste
div met rode border komt).

Als je command "+" indrukt en de tekst vergroot, dan zie je dat de
Simpleviewer door de rode border van het vlak waar hij in staat schiet.
De div's die eronder staan (de lichtbruine rand is daar het begin van) verschuiven
niet mee naar gelang de grootte van de bovenste div met rode border.
En dat is iets wat voor zover ik kan zien wel zou moeten gebeuren

Ah ik zie het nu. ik zie ook dat het aan de content van Simpleviewer ligt, als je die weg laat dan doet hij het wel gewoon zonder 'overloop'. Een Clear:left op de div id bottom helpt ook niet? Ik ken simpleviewer niet maar misschien kan je ook een clear right toevoegen aan zijn div? Let op, ik ben geen css expert maar rommelen wil vaak wel helpen.

Simpleviewer is in feit een flashobject wat in een div geplaatst is
Normaal gesproken helpt 't dan als ik er een clear:both onder zet,
die er dan voor zorgt dat als de inhoud van de bovenstaande div
groter wordt, het de onderstaande inhoud naar beneden duwt in
plaats van er overheen walst als het ware, hehe.

Nu heb ik gekeken wat er gebeurt als ik een clear:both in en onder
die simpleviewer-div zet, maar in beide gevallen mocht het niet baten.
Volgens mij zie ik echt iets lulligs over het hoofd, maar ik kan 't
maar niet vinden

Yer, maar heb je de clear in de div zelf gezet? of in de div van Bottom en/of div 'tijdelijk'. Want ik kan me zo voorstellen dat je de clear:both niet na het juiste divje hebt geplaatst (niet om lullig te doen, maar vaak zijn het juist dat soort foutjes waardoor het niet lijkt te werken) en ik kan ook niet (meer) zien of het clear scriptje juist geplaatst was.

Probeer voor de gein bij <div id="bottom"> een clear both aan te geven in de css (dus niet bij het flash object)

Ik heb hem direct onder <!-- This is where Simpleviewer ends --> gezet, dus feitelijk in #wrappertop, en toen dat niet werkte heb ik 'm onder #wrappertop gezet, dus tussen #wrappertop en #bottom. #bottom is namelijk de div met 't bruine randje aan de bovenzijde, dus daar moet ie boven blijven

Ik hoop dat je er nog uitkomt, hehehe... 't is volgens mij een beetje verwarrend uitgelegd hierboven.

He Joram heb je die clear:both er weer uit gehaald, want kom hem in source niet tegen?

Bij div's is het zo dat je een height kan opgeven, probleem is alleen dat de overflow - dus bij meer content - buiten de div gaat vallen. Je kan dit oplossen door in de css - overflow:auto; - te gebruiken, maar belanrijker is toch de height.

heigth:200px; is een vaste waarde. i.p.v. dat gebruik ik altijd min-height:200px;

De div gaat dan meegroeien. Met max-heigth kan je een maximum hoogte instellen.

Wil je toch gebruik maken van clear:both; dan moet dit in een aparte div.


<div style="float:left">links</div>
<div style="float:right">rechts</div>
<div style="clear:both"></div>


Oh ja, de zogenaamde cleaner div. Ik denk dat dit de oplossing moet zijn (zoiets heb ik ook op een van mijn sites gezet, oplossing was via google gevonden, was alleen vergeten dat het een aparte div was).

Overigens was dat ook mijn voornaamste vraag, waar HAD je de clear both staan? Die kwam ik ook niet tegen aangezien hij al verwijderd was Maar die cleaner moet zo werken.

Hulde voor MF waar iedereen van leert!

Die cleaner div was inderdaad wat ik probeerde

Ik ben bekend met floats e.d., maar die heb ik in mijn ontwerp niet nodig
omdat het een 1-koloms site wordt, hehe. Die clear:both heb ik er even
uitgehaald voor de zekerheid zodat ik geen rommel in de code achterlaat
als ik even niet oplet overigens

Ik had in die bovenste div met het rode randje (waar Simpleviewer in staat)
eerst een height:700px gegeven, maar heb die eruit gehaald omdat ik wilde
dat de hoogte bepaald werd naar gelang de inhoud van die div.
Maar ik had juist een aparte div gemaakt voor die clear:both tag, maar
dat werkte juist niet.

Hieronder een stukje code van de website. Ik heb hier even 2x de clear:both
gezet om aan te geven op welke plekken ik 'm geprobeerd heb werkend
te krijgen;


<div id="wrappertop">
<p>Dit is de maximale hoogte (of maximaal aantal regels)<br />
die ik kan gebruiken i.v.m. simpleviewer.<br />
Dit is regel 3.<br />
Dit is regel 4.<br /></p>

<!-- This is where Simpleviewer begins -->
<div id="flashcontent">SimpleViewer requires Macromedia Flash.
<a href="http://www.macromedia.com/go/getflashplayer/">Get Macromedia Flash.</a>
If you have Flash installed, <a href="index.html?detectflash=false">click to view gallery</a>.</div>
<script type="text/javascript">
var fo = new SWFObject("viewer.swf", "viewer", "100%", "100%", "7", "#2b2b2a");
fo.addVariable("preloaderColor", "0xffffff");
fo.addVariable("xmlDataPath", "gallery.xml");
fo.write("flashcontent");
</script>
<!-- This is where Simpleviewer ends -->
<div style="clear:both;">
</div>
<div style="clear:both;">
<div id="bottom">


Misschien dat het zo wat duidelijker is wat ik geprobeerd heb
Ter verduidelijking: ik heb die clear:both niet dubbel geplaatst toen ik 't
teste, alleen staat het hierboven 2 maal omdat ik het op die 2 plaatsen
heb getest.

Bedankt voor de repsons zover

style="clear:both;"
Werkt alleen om floats te clearen. Heeft volgens mij niks te maken met grootte van div.

Als je wil dat de div automatische meegroeit moet je werken met

style="min-heigth:700px;"
Wil je max 700px hoog en dan kan je werken met overflow:auto en dan krijgt je div scrollbars.

style="overflow:auto;"

Oh, krijg nou wat :D 't werkt, hehe.
Werkt "min-height" op alle moderne browsers eigenlijk (IE6, IE7, Safari en Firefox)?

Bedankt in ieder geval! Probleempje opgelost,

Macfreak gebruikt het ook, werkt idd met ie6,7,firefox en ons geliefde safari.

is css1.0 regeltje na mijn weten.

Nou fantastisch
Gelijk weer wat geleerd ook, hehe... ik dacht dat ik iets over het hoofd zag namelijk.

Ik kan weer even verder!

Mvg,
Joram