float gaat niet goed

Status
Niet open voor verdere reacties.
damnsharp

damnsharp

Terugkerende gebruiker
Lid geworden
6 jan 2012
Berichten
1.414
Goedenavond,
Ik ben flink bezig met float techniek en kom een stuk verder maar bij 1 header krijg ik iets niet voor mekaar. Ik zal plaatje bijvoegen voor de duidelijkheid.

voorbeeld.png


In de header krijg ik plaatje_rechts niet aan de rechterkant als ik ook een slogan onder het plaatje_links heb.
div id header heeft position:relative
div id plaatje_links krijgt float:left
div id plaatje_rechts krijgt float:right

Alvast bedankt voor de reacties.
div id slogan krijgt clear:both

Ik kan natuurlijk van de slogan geen tekst maar onderaan plaatje_links in Photoshop zetten maar ik kan het niet uitstaan. Volgens mij moet het kunnen.
 
Wat gebeurt er dan met dat plaatje_rechts? Dat kan ik zo snel niet uit je tekst opmaken namelijk.
 
Zonder de HTML en volledige CSS te zien blijft dit giswerk, maar float:left; meegeven aan je slogan zou wel eens kunnen werken.
 
Het plaatje_rechts gaat onder de slogan, aan de rechterkant staan dus zo:
voorbeeld2.png


html code:
Code: 
<!-- begin header -->
<div id ="header"> 

	<!-- begin logo links -->
    <div id ="logo_links"> 
		<a href="#"><img src="images/logo_links.png" alt "logo links" /></a>	 
	</div> <!-- eind logo links -->
	
	<!-- begin slogan -->
	<div id ="slogan">
	<p>De appel valt nooit ver van de boom.</p>
	</div> <!-- eind slogan-->
    
	<!-- begin logo rechts-->
	<div id ="logo_rechts">
	<img src="images/logo_rechts.png" alt "A" />	 
	</div> <!-- eind logo rechts -->
	
</div> <!-- eind header -->

css code:
Code: 
/*=== KOP VAN DE PAGINA ===*/
#header {height: 185px; background-color:#FFFFFF; position: relative;}

/*=== LOGO LINKS ===*/
#logo_links { float: left; margin: 20px 0 0 20px; padding: 0 0 10px 0; width: 247px; height: 87px; border:solid 1px red}

/*=== LOGO RECHTS ===*/
#logo_rechts { float: right; margin: 20px 0 0 20px; padding: 0 0 10px 0; width: 191px; height: 159px; border:solid 1px red}

/*=== SLOGAN ===*/
#slogan { clear:both; height: 24px; padding: 0 0 0 25px; width:500px; }
#slogan p {color: #104b7d; font-size: 12px; font-style:italic; width: 400px; border:solid 1px red}
 
Hoi damnsharp,
Als je de slogan onder de {float:left} cleart, betekent dat, dat naast de {float:left} niets mag komen.
En de slogan komt in de html volgend op Plaatje-Links, dus wat dat betreft klopt je screenshotje.
Het logo rechts volgt in de html op de slogan, dus komt er onder. Ook dat klopt met je screenshot.

De truc is:
  • in de html eerst de floats, dan de niet-floats.


    [*]als een float-left en een float-right naast elkaar passen,
    (en er geen clear bij zit)
    maakt de volgorde van deze floats niets uit.


    [*]zonder clear (left/right/both) kruipen de niet-floats
    in elk gaatje dat ze tegenkomen naast en onder de floats.


    [*]en twee floats dezelfde kant op
    kruipen naast elkaar in de volgorde van de html.
Dus in de html-volgorde:
<div id ="logo_links"> (float left)
<div id ="logo_rechts"> (float right)
<div id ="slogan"> (geen float, maar ook geen clear)​
De slogan vult nu het eerst vrijkomende gaatje tussen de floats, en dat is onder het linkerplaatje en naast het rechterplaatje.
Geef je de slogan een {clear:both}, dan komt ie onder de rechter float te staan, want dat is de hoogste van de twee floats boven de slogan.
  • De goede gok van Naarling, de slogan óók een float-left geven, kan (als er maar geen clear bij zit), maar hoeft niet persé .
De {position:relative} doet hier niet ter zake, en kan weggelaten worden.
  • Illustratie van floats en clears, bij verschillende hoogtes van de floats, en verschillende containers waar de floats in zitten:
    bliksekaters.nl/subs/reisverslag/37.htm.
  • De drie kolommen zijn allemaal gefloat.
    De linkerkolom en de middenkolom zitten hierbij samen in een <div id="contentvoorop">
    De rechterkolom komt daarna in de html.
    Binnen de #contentvoorop zit de middenkolom het eerst in de html.
    De drie kolommen samen zitten in een #centraalcontainer.
  • "Opdracht: bekijk de broncode en verklaar waarom er gebeurt wat er gebeurt." :P
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
@csshunter: hey, andere volgorde binnen de html! Ik ga je verhaal goed doorlezen. Laat het straks weten. Ik denk alleen dat de slogan nu precies links onder plaatje_rechts komt terwijl het wat hoger maar wel links moet staan. Maar met een negatieve marge krijg ik dat misschien goed. Ga het proberen. Alvast bedankt!
 
Laatst bewerkt:
Ik denk alleen dat de slogan nu precies links onder plaatje_rechts komt terwijl het wat hoger maar wel links moet staan.
Klik om te vergroten...
Nop, het eerste gaatje is direct aansluitend onder de float-left. Dus de slogan zal een kleine positieve margin-top moeten krijgen om wat afstand te houden tot het linksboven-image.
(met een neg. margin-top trek je 'm over de linker-float heen; maar dat zie je vanzelf, of heb je al gezien).
 
Nou csshunter, ik ben er bijna! Hartstikke fijn. De slogan zit nu netjes links maar iets te laag. Ik krijg hem toch niet echt rechts van plaatje_rechts. Probeer met margins en paddings maar ik doe vast iets nog niet goed. Wil je nog naar de code kijken? Als ik dit snap lukt het me vast ook op andere manieren bij andere sites.
HTML: www.albuswebdesign.nl/helpmij
CSS: http://www.albuswebdesign.nl/helpmij/css/style.css
 
Hoi damnsharp,
Er is een verstekeling aan boord!
In de <p> van de slogan zit een {clear:both} verstopt! Die zegt dus: naast alle linker èn rechterfloats moet vrije ruimte schoongemaakt worden.

Dat gebeurt dan ook: alle witte ruimte tot aan de onderkant van de rechterfloat is gecleard, en de slogan-bovenkant begint precies daaronder.
De clear staat hier toebedeeld aan de <p> binnen de slogan-div, daarom valt ie niet zo gauw op.
  • Tip: een clear altijd geven aan het hoofd-element dat na de float komt, en niet aan een element daarbinnen.
Goed, die clear gaat er dus uit, en dat heeft onmiddellijk effect: de slogan vliegt tegen het plafond, begint net naast de linker-float, en wordt op de hielen gezeten door het menu dat in de html na de slogan kwam.
Maar dat is nu ook weer niet de bedoeling! :rolleyes:

De slogan moet onder de linker-float komen, dus d kruipruimte tussen de linker- en rechterfloat moet schoongemaakt worden tot aan de onderkant van de linker-float..
  • En daar is een oplossing voor: een {clear:left} voor de slogan.
Zo valt de appel precies aan de voet van de boom. :)
Vervolgens kan er de margin-top gebruikt worden voor de afstand tot het linker-img.
  • Die float-left ontbrak in mijn schemaatje, omdat op de start-tekening de slogan veel breder was dan het gat tussen de twee floats: dan hoeft het niet (duikt dan bij een opgegeven breedte vanzelf onder het linker-img, omdat ie er niet naast past).
Nu zit nog wel het menu er pal onder, dat te hoog staat. Eerst wordt de resterende lege ruimte links naast de rechter-afbeelding volgemaakt, en vervolgens gaat het menu zelfstandig verder naar beneden. Ook de sidebar is opeens hele rare dingen aan het doen.
  • De oplossing ligt nu voor de hand: de #nav moet een {clear:right} krijgen; of een {clear:both}, dat maakt hier niet uit.
=====

Verder heb je nu alle elementen ingepakt in een eigen <div>. Maar vaak is dat overbodig, en kunnen de css-eigenschappen via een id van het binnen-element geregeld worden, of via een id van het element boven de div.
  • Hier kan de bv. <div id="container"> gemist worden: alle eigenschappen kunnen ongestraft naar de <body>-css.
En er is bijvoorbeeld nu als:
HTML: 
<div id ="header"> 
    <!-- begin plaatje_links -->
    <div id ="plaatje_links"> 
        <a href="#"><img src="images/plaatje_links.png" alt "Test plaatje" /></a>	 
    </div><!-- eind logo -->
    ... enz.
</div>
Dat kan worden:
HTML: 
<div id ="header"> 
    <!-- begin logo -->
    <a id="logo" href="#"><img src="images/plaatje_links.png" alt "Test plaatje" /></a>	 
    <!-- eind logo -->
    ... enz.
</div>
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Potverdummeles csshunter, geweldig! Ik ga het meteen proberen en een paar keer goed doorlezen. Wat fijn dat je het zo uitgebreid uitlegt. :thumb:
 
Zo, nu kan ik wat uitgebreider reageren :)

Wat betreft die clear:both bij de paragraaf: vandaar dat firebug op de div id slogan een geheel blauw gedeelte op de header liet zien, denk ik dan. Ik vond het al vreemd maar kon het niet koppelen. Mijn float en clear kennis is nog echt te weinig maar wordt door jouw hulp wel stukken beter. Het is ontzettend kicken als het goed gaat! :love:

Ik wil de clear:left wel op de slogan zetten maar als dan gebeurd er niets, alleen als ik hem op de slogan p zet. Dat begrijp ik niet.


Nu is het bijna goed... he he. Laatste, dan laat ik je met rust; Ik snap niet waarom plaatje_rechts nu niet aanlijnt met het menu wat ik wel wil. :confused:

Als het allemaal goed werkt zal ik gaan proberen het korter te schrijven hoe jij voorstelt.
 
Ik wil de clear:left wel op de slogan zetten maar als dan gebeurd er niets, alleen als ik hem op de slogan p zet. Dat begrijp ik niet.
Klik om te vergroten...
  1. Heb je de htl-validator gevraagd om eventuele foutjes?
  2. Heb je de css-validator gevraagd om eventuele foutjes?
  3. Zo ja, en eventuele foutjes weggewerkt, dan kunnen we verder gaan.
    Een alt "..." (met spatie ipv = teken) in de html of een gewoon haakje ) ipv een accolade-haakje } in de css kan soms lelijk roet in het eten gooien (zie m'n handtekening!).​
  4. Als dat in orde is gemaakt, even kijken naar of er soms javascript in de pagina zit, dat voor iets onverwachts zou kunnen zorgen. Ja, er zit js in! En nee, als je js uitschakelt (in FF makkelijk met de Web Developer Toolbar: Disable > Disable JavaScript > All JavaScript), dan geeft dat geen verschil te zien.
Blijft over ;) :
Nee, dat begrijp ik ook niet. Als ik 'm online in Firebug verplaats, doet ie het gewoon goed in de slogan div.

=====

Ik snap niet waarom plaatje_rechts nu niet aanlijnt met het menu wat ik wel wil.
Klik om te vergroten...
Ah, dat is een verradelijke instinker. Met Firebug ze je dat de <div> om het img heen wel het witte streepje tussen het img en het menu omvat, maar het img zelf niet.
Het img heeft dus een kleine margin of padding aan de onderkant, maar die is helemaal niet opgegeven. Juist alle margins en paddings zijn met de * opdracht op nul gezet!
What happens? :shocked:
  • Een img houdt er rekening mee dat ernaast een tekstregel staat met letters die een neerhaaltje hebben, zoals de p of de q.
  • Daarmee wordt vermeden dat een link-onderstreping onder het img op een andere hoogte zou komen dan de link-onderstreping onder de tekstregel.
  • Maar het gebeurt ook als er helemaal geen tekstregel is!

vert-align-no.png

Het trefwoord om dit te verhelpen is: "vertical-align", dat je op de style van het img toepast.
Met img {vertical-align: bottom} laat je de onderkant van het img gelijk op lopen met de onderkant van de tekstregel (incl. de neerhaaltjes):

vert-align-bottom.png

Er zijn nog twee varianten: {vertical-align: top} en {vertical-align:middle}. *)

vert-align-top.png


vert-align-middle.png

Je ziet dat het hier dan ook goed gaat: in beide gevallen is er ruimte genoeg onder de neerhaaltjes van denkbeeldige letters op de denkbeeldige tekstregel. :)

Na deze operatie dient zich wel meteen het volgende leerpunt aan. :d
Dat is: heel erg uitkijken met in px opgegeven vaste hoogtes voor containers. En voor voor letterformaten is het verboden wegens de toegankelijkheids-voorschriften. **)
Hier is nu het spleetje van 1px dat al aanwezig was tussen het menu en de oranje linkerkolom uitgegroeid tot een kier van 3px hoog. Oorzaak: de #header met een vaste hoogte. deze kan er sowieso uit, dan gebeurt er niets verschrikkelijks, en het kiertje wordt dichtgeplamuurd.

Met vriendelijke groet,
CSShunter
______
*) Je ziet soms in broncodes ook andere eigenschappen voor vertical-align, maar die werken niet in alle browsers.
Deze 3 top/middle/bottom zijn de enige die valid css zijn.

**) Met px voor de lettergrootte is het in Internet Explorer (tegen de regels in) onmogelijk voor de bezoeker/ster om het letterformaat aan te passen aan zijn of haar behoefte.
Vandaar: lettergroottes altjd opgeven in de em-eenheid (1em= 100% = normale grootte van een <p> regel). Om de lettergroottes te normaliseren voor alle browsers kan vooraf de <body> een {font-size: 100.1%} krijgen. De 1/10 procent extra is voor oudere browsers, maar kan geen kwaad.
En ook: de pagina-opmaak zo ontwerpen dat er speling genoeg in de <div>'s zit om grotere of kleinere letters te herbergen!
 
Fijn zeg, weer veel wijzer geworden! Wat een leer proces zeg. Ik heb even gedacht moet ik doorgaan maar jouw (csshunter) tips en leuke schrijfwijze helpt zeer. :thumb: En het is net een puzzel die ik wil oplossen.

Om met het laatste te beginnen ik snap die speling om de div's niet maar ik heb me dan ook nog geen tijd gegund om het verhaal over de CSS Zen Guru te lezen. Ga dat straks doen maar wilde eerst de andere zaken oplossen.

1. Begonnen met de html validator: schrikken! Veel fouten en flink wat werk maar nu opgelost en ik snap het ook :o

2. css validator: nu ook goed, maar wel waarschuwingen ivm dezelfde kleur en achtergrondkleur in twee contexten maar zie het echt niet: http://www.albuswebdesign.nl/helpmij/css/style.css

3. Font: opgelost; mag in body wel 12px als referentiepunt voor de 1em? Als ik daar 100.1% zet worden de letters erg groot.

4. Slogan div: nu ik javascript regels eruit heb gehaald (die waren van de Lynda.com cursus) gaat een clear:left op de div wel goed. Tjsa... opgelost in ieder geval.

Klopt het dat de " height: 155px; " bij de header eruit mag omdat het plaatje_rechts die hoogte heeft?
Kei bedankt voor de hulp! Hoe kan ik wat terug doen? Ik wilde je al een pm sturen maar dat kan ik (nog) niet.

En nu omzetten naar WordPress template, heeft ook nog wel wat voeten in de aarde ;)
 
Laatst bewerkt:
Hoi ,
snap die speling om de div's niet
Klik om te vergroten...
Ik bedoelde eigenlijk de speling in de div's. Heel simpel: als je een div hebt van pak-m-beet 400px*250px, en je tekst past er precies in, dan gaat het fout zodra iemand in z'n browser de letters gaat vergroten. Dan lopen ze over de rand van de div heen (tenzij je speciale maatregelen treft, maar dat kan te koste gaan van de totale opmaak). In het algemeen is het 't eenvoudigste om div's géén hoogte mee te geven, dan rekken ze mee met wat er aan inhoud in zit, ook als die een groter letterformaat krijgt.
  • Uitzonderingen zijn er natuurlijk ook: div's waar allen maar plaatjes in zitten die niet groter of kleiner kunnen worden; of een grote div met weinig tekst e.d.
Ad 1
Goed werk! :thumb:

Ad 2
In verband met de toegankelijkheid is het 't beste om kleuren altijd in paren op te geven: zowel de tekstkleur als de achtergrondkleur van het betreffende element. Daar slaat de css-validator telkens op aan: als je de waarschuwingen aangevinkt hebt, anders zie je ze niet. ;)
  • Achterliggende reden: stel je hebt een donkere achtergrond-afbeelding, en witte letters erboven. Nu is het voor sommige mensen prettig of noodzakelijk om achtergrond-afbeeldingen uit te schakelen.
  • Als je naast de {color:white;} geen achtergrond-kleur opgeeft, valt de browser terug op de standaard achtergrondkleur: wit! Men krijgt dus prachtige witte letters op een witte ondergrond te zien (nou ja, zien...).
Oplossing in dit geval:
Code: 
#deDivWaarHetOmGaat {
    color: white;
    background: black url(images/donkere-bg.png);
    }
De browser valt dan terug op het black, als er geen afbeelding is (uitgeschakeld staat, of ook als om een of andere reden het img niet gevonden kan worden).
  • Maar als je geen lijstje met harde fouten van de css-validator krijgt, kan je deze waarschuwingen ook laten rusten tot de finishing touch.
  • Hoewel het een goede gewoonte is om aan te wennen, om zodra je het woord color in je stylesheet intikt, ook meteen de background-color op te geven (vice versa). Dan ben je er meteen van af.
Ad 3
Nop, nergens mogen harde px voor letterformaten staan. Als referentiepunt in de body kan je gewoon 90% opgeven om alles in één klap iets kleiner te krijgen.
Je kunt ook per element (h1, h2, ..., p, ul, enz.) een em-waarde opgeven: die mag ook < 1 zijn. Bij het h-rijtje kunnen browsers wel eens verschillende standaard-waarden hebben, dus per <h.> opgeven is wel veilig.

Ad 4
Keurig.

Klopt het dat de " height: 155px; " bij de header eruit mag omdat het plaatje_rechts die hoogte heeft?
Klik om te vergroten...
Ja, de div rekt mee met z'n inhoud, en vanwege de clear hoort de float rechts ook bij de inhoud.

Hoe kan ik wat terug doen?
Klik om te vergroten...
Niet nodig hoor: je enthousiasme is m'n beloning! :)
En voor later: de fakkel doorgeven door op een of ander forum tips te geven. :cool:

Met vriendelijke groet,
CSShunter
 
Super! Ik kom er nu vast uit. Heb je nog een tip waar ik meer up-to-date info over de ontwikkeling van xhtml en/of css (tips) via bijvoorbeeld rss kanaal kan lezen? Ga ik na je antwoord de "case" sluiten :cool:
 
@Naarling: bedankt voor je tips en weblinks. :D Ik lees verschillende berichten over xhtml en html5. De toekomst zal het leren? Een paar html5 tags die ik tijdens mijn Lynda.com cursus probeerde gaven browserproblemen op. Ik denk zelf als ik de verschillende artikelen lees ik veiliger nu nog zit met xhtml maar wel html5 in de gaten ga houden :thumb:
 
Hoi damnsharp,
Als je in een html5-document alleen de xhtml1.0-eigenschappen gebruikt (= in feite html4.01), is er niets aan de hand.

De nieuwe html5-tags en -eigenschappen ondersteunen browsers soms (nog) niet. Of alleen in de allerlaatste versie, waarbij je er niet van uit kunt gaan dat alle bezoekers de laatste versie hebben (meer dan de helft van de IE-gebruikers zit momenteel nog op IE7 of IE8; en voor bv. XP-surfers is IE9+ niet beschikbaar).

Ook de al of niet ondersteuning van de mooie dingen van css3 verschilt per browser(versie), dus testen in verschillende browsers en versies is nooit weg (anders ook niet ;) ).

Voor html5 heb ik nog:

Om bij te tanken over css3:

Met vriendelijke groet,
CSShunter

<edit>
Ha, kruispost. Idd kan javascript een workaround zijn voor IE < 9.
</edit>
 
Laatst bewerkt:
Super @Naarling en csshunter! Dank voor de tips. Ik ga de websites goed testen en zal de documenten (linkjes) erop naslaan.
Alleen csshunter snap ik je 1e regel niet. Ik dacht dat het een keuze is of je programmeerd in xhtml of html4 of html5. Zo lees ik het ook bij wikipedia bijvoorbeeld. Ik snap niet hoe je een html5 document met xhtml eigenschappen gebruikt, dus wat je daarmee bedoelt.
Bedankt! :thumb:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan