Hoogte &lt;div&gt; negeert &lt;p&gt;&#039;s

woensdag 12 februari 2014 22:23

Topicstarter

Bedankt voor de snelle reactie! De clearfix weghalen is geen optie aangezien het dan helemaal mis gaat met de 'About'-header, maar de clearfix na de paragraphs werkt perfect!

[ Voor 5% gewijzigd door 4WardNL op 12-02-2014 15:58 ]

Acties:

C0rnelis

Als je met de "clearfix na de paragraphs" dit bedoelt:

HTML:

<div class="content"> 
    <div id="about"> 
        <h2>About</h2> 
        <div class="clearfix"></div> 
        <p class="content-paragraph-left">Paragraaf 1 tekst.</p> 
        <p class="content-paragraph-right">Paragraaf 2 tekst.</p> 
        <div class="clearfix"></div> 
    </div> <!-- about --> 
</div> <!-- content -->

Gaat mijn voorkeur toch wel uit naar de oplossing van perpixel, als je deze specifieke implementatie van clearfix als voorbeeld neemt, lijkt me dit veel logischer:

HTML:

<div class="content"> 
    <div id="about"> 
        <h2>About</h2> 
        <div class="cf">
            <p class="content-paragraph-left">Paragraaf 1 tekst.</p> 
            <p class="content-paragraph-right">Paragraaf 2 tekst.</p> 
        </div>
    </div> <!-- about --> 
</div> <!-- content -->

Dat doet neem ik aan precies wat je wilt ? De wrapping div om de p's zorgt ervoor dat ze altijd samen onder de h2 staan, en de class="cf" geeft de juiste hoogte wat samen ervoor zorgt dat volgende elementen niet plots naar boven schuiven en tussen de p's lijkt te staan. Of deze markup zorgt voor de goeie layout in de context van je hele website durf ik niet te stellen.

Maar het is ook mogelijk zonder floating te gebruiken. Het enige wat je namelijk doet is een aantal elementen (de p's) gezamenlijk onder de h2 tonen en dit is gemakkelijk te realiseren: block-elementen staan standaard al onder elkaar dus dit krijg je meteen als je de p's in een div zet. Het volgende wat je dan moet doen is zorgen dat je huidige styling die de paragrafen als kolommen toont nog blijft werken en dat is weer op te lossen door ook op de p's border-box te gebruiken: http://jsfiddle.net/8A6mg/

donderdag 13 februari 2014 11:13

Acties:

donderdag 13 februari 2014 11:39

Topicstarter

C0rnelis schreef op woensdag 12 februari 2014 @ 22:23:
Als je met de "clearfix na de paragraphs" dit bedoelt:
HTML:
1
2
3
4
5
6
7
8
9
<div class="content"> 
    <div id="about"> 
        <h2>About</h2> 
        <div class="clearfix"></div> 
        <p class="content-paragraph-left">Paragraaf 1 tekst.</p> 
        <p class="content-paragraph-right">Paragraaf 2 tekst.</p> 
        <div class="clearfix"></div> 
    </div>  
</div> 
Gaat mijn voorkeur toch wel uit naar de oplossing van perpixel, als je deze specifieke implementatie van clearfix als voorbeeld neemt, lijkt me dit veel logischer:
HTML:
1
2
3
4
5
6
7
8
9
<div class="content"> 
    <div id="about"> 
        <h2>About</h2> 
        <div class="cf">
            <p class="content-paragraph-left">Paragraaf 1 tekst.</p> 
            <p class="content-paragraph-right">Paragraaf 2 tekst.</p> 
        </div>
    </div>  
</div> 
Dat doet neem ik aan precies wat je wilt ? De wrapping div om de p's zorgt ervoor dat ze altijd samen onder de h2 staan, en de class="cf" geeft de juiste hoogte wat samen ervoor zorgt dat volgende elementen niet plots naar boven schuiven en tussen de p's lijkt te staan. Of deze markup zorgt voor de goeie layout in de context van je hele website durf ik niet te stellen.

Maar het is ook mogelijk zonder floating te gebruiken. Het enige wat je namelijk doet is een aantal elementen (de p's) gezamenlijk onder de h2 tonen en dit is gemakkelijk te realiseren: block-elementen staan standaard al onder elkaar dus dit krijg je meteen als je de p's in een div zet. Het volgende wat je dan moet doen is zorgen dat je huidige styling die de paragrafen als kolommen toont nog blijft werken en dat is weer op te lossen door ook op de p's border-box te gebruiken: http://jsfiddle.net/8A6mg/

Ik heb inmiddels de p's in een div gezet met hierop de .cf class. Vind het namelijk toch wel makkelijk om hier floats te gebruiken, vooral omdat ik daar meer aan gewend ben (al is dat niet te zien aan de gestelde vraag haha). Ook kan ik deze class gemakkelijk hergebruiken voor andere plekken waar ik dit ook nodig heb

Jij ook bedankt voor je hulp!

Zag ook net vanochtend ergens kritiek staan op een website die gebruik maakte van lege div's voor een clearfix, dus laat ík dat dan inderdaad ook maar niet gebruiken.

Acties:

_Thanatos_

Ja, en kaal

Klein zijnootje: clearfixes zijn vies, omdat je ze met deze opzet in de html moet zetten. Als je een keer echt niet anders kunt (als je bijv echt een overflow:visible nodig hebt), kun je nog twee andere dingen doen:
1) De container ook floaten, want floats "containen" hun descendant floats.
2) De clearfix in puur css toepassen op .cf:after of #about:after, als je die niet al ergens anders voor gebruikt.

日本！🎌

donderdag 13 februari 2014 12:06

Acties:

donderdag 13 februari 2014 17:03

Topicstarter

_Thanatos_ schreef op donderdag 13 februari 2014 @ 11:39:
Klein zijnootje: clearfixes zijn vies, omdat je ze met deze opzet in de html moet zetten. Als je een keer echt niet anders kunt (als je bijv echt een overflow:visible nodig hebt), kun je nog twee andere dingen doen:
1) De container ook floaten, want floats "containen" hun descendant floats.
2) De clearfix in puur css toepassen op .cf:after of #about:after, als je die niet al ergens anders voor gebruikt.

Het gebeuren met overflow: hidden werkt bij mij helaas niet, want ik houd dan precies hetzelfde probleem. Wat ik nu heb lijkt me toch (wanneer ik floats wil gebruiken) de beste optie. Wanneer ik dan bijvoorbeeld op een andere div ook een clearfix wil hebben, kan ik hier gewoon de cf class aan toevoegen, welke de eigenschappen heeft zoals vermeld op de site die Perpixel stuurde.

Acties:

perpixel

Een overflow: hidden zou gewoon moeten werken. Dit lost namelijk hetzelfde probleem op.

even een jsfiddle als voorbeeldje:
http://jsfiddle.net/7KxEW/

donderdag 13 februari 2014 17:08

Acties:

donderdag 13 februari 2014 23:36

Topicstarter

perpixel schreef op donderdag 13 februari 2014 @ 17:03:
Een overflow: hidden zou gewoon moeten werken. Dit lost namelijk hetzelfde probleem op.

even een jsfiddle als voorbeeldje:
http://jsfiddle.net/7KxEW/

In de jsfiddle die je stuurde lijkt het ook niet te werken? 'About' staat hier namelijk ín paragraaf 1 (naast de tekst 'paragraaf 1') en wanneer ik overflow: hidden weghaal uit de fiddle is er geen verschil met wanneer het er wel staat.

Of ben ik nu helemaal dom aan het doen?

[ Voor 4% gewijzigd door 4WardNL op 13-02-2014 17:09 ]

Acties:

C0rnelis

Nee hoor

. Het voorbeeld doet eigenlijk maar één ding en dat is alle gebruikte ruimte ook daadwerkelijk claimen (te herkennen aan de grijze achtergrondkleur bij paragraaf 2 mét overflow: hidden. Het lost alleen je originele probleem niet op om de twee p's onder de header te plaatsen:
deze fiddle toont de beide paragrafen onder de header alleen maar bij een kleine viewport! (smaller dan 758 pixels)

vrijdag 14 februari 2014 14:19

Acties:

perpixel

Dat komt door de display: inline-block op de h2. de basis opbouw klopt niet helemaal, maar die heb ik overgenomen uit de voorbeelden die er gegeven waren.

Als je een keer wat uitgebreider hulp nodig hebt moet je maar even een DM-etje sturen dan kan ik naar de hele opbouw kijken.

vrijdag 14 februari 2014 14:26

Acties:

zaterdag 15 februari 2014 15:01

Topicstarter

perpixel schreef op vrijdag 14 februari 2014 @ 14:19:
Dat komt door de display: inline-block op de h2. de basis opbouw klopt niet helemaal, maar die heb ik overgenomen uit de voorbeelden die er gegeven waren.

Als je een keer wat uitgebreider hulp nodig hebt moet je maar even een DM-etje sturen dan kan ik naar de hele opbouw kijken.

Die display: inline-block was ik zelf ook niet helemaal tevreden mee, maar anders kreeg ik de h2 niet in het midden zonder dat hij direct de volledige breedte in nam. Dit leek voor mij de enige oplossing.

Acties:

zondag 16 februari 2014 13:13

De clearfix is hier helemaal niet nodig en in principe heb je nooit een clearfix nodig (tenzij je super gecompliceerde designs gaat maken, en dan nog niet eigenlijk). Avoid that!

Wat je wilt is heel goed mogelijk en je was in principe goed op weg. Ik heb in deze fiddle je css ietwat opgeruimd en hier zou je in principe voldoende aan hebben. Ik weet alleen niet wat er gebeurt als je de rest van je html hier omheen bouwt, dat moet je dan nog maar even aangeven.

Als je extra uitleg nodig hebt bij deze fiddle moet je het maar even laten weten. Hou de code eerst even naast elkaar om te kijken wat er anders is.

Gebruik overigens nooit een id, een id weegt zwaarder dan een class en kan je eventueel in de problemen brengen. Ik gebruik altijd classes voor de styling en id's eventueel als javascript hook (waar ik dan geen opmaak achter hang).

http://jsfiddle.net/Vk7ZZ/

Groetjes!

edit: Je kan je h2 nog in een <header> zetten en de header dan een display inline-block geven met een float left. Vervolgens zet je de h2 in het midden om controle te krijgen over de breedte. Nu schaalt deze mee maar dat is in principe eenvoudig te fixen. Als je daar niet uitkomt wil ik daar ook nog wel even naar kijken uiteraard =).

[ Voor 15% gewijzigd door Fontini op 15-02-2014 15:04 . Reden: Extra info ]

Acties:

zondag 16 februari 2014 13:49

Topicstarter

Fontini schreef op zaterdag 15 februari 2014 @ 15:01:
De clearfix is hier helemaal niet nodig en in principe heb je nooit een clearfix nodig (tenzij je super gecompliceerde designs gaat maken, en dan nog niet eigenlijk). Avoid that!

Wat je wilt is heel goed mogelijk en je was in principe goed op weg. Ik heb in deze fiddle je css ietwat opgeruimd en hier zou je in principe voldoende aan hebben. Ik weet alleen niet wat er gebeurt als je de rest van je html hier omheen bouwt, dat moet je dan nog maar even aangeven.

Als je extra uitleg nodig hebt bij deze fiddle moet je het maar even laten weten. Hou de code eerst even naast elkaar om te kijken wat er anders is.

Gebruik overigens nooit een id, een id weegt zwaarder dan een class en kan je eventueel in de problemen brengen. Ik gebruik altijd classes voor de styling en id's eventueel als javascript hook (waar ik dan geen opmaak achter hang).

http://jsfiddle.net/Vk7ZZ/

Groetjes!

edit: Je kan je h2 nog in een <header> zetten en de header dan een display inline-block geven met een float left. Vervolgens zet je de h2 in het midden om controle te krijgen over de breedte. Nu schaalt deze mee maar dat is in principe eenvoudig te fixen. Als je daar niet uitkomt wil ik daar ook nog wel even naar kijken uiteraard =).

Bedankt voor de hulp! Ik zie alleen bij jouw voorbeeld dat je een specifieke width zet voor de h2, wat ik graag wil voorkomen aangezien ik meerdere h2's gebruik met elk tekst van een andere lengte. Zonder de width: 20% neemt hij echter de volledige breedte in, wat dus ook niet helemaal mijn bedoeling is.

De clearfix is inmiddels wel weggehaald, maar alsnog heb ik een div nodig om de p om ze goed uitgelijnd te krijgen. Dit heeft dus te maken met dat ik de h2 nog niet aangepast heb naar hoe jij het hebt vanwege dat breedte-probleem.

De id's heb ik inmiddels aangepast naar classes!

Wat je in de edit van je comment precies bedoelt snap ik niet helemaal trouwens. Ik heb de h2 in een header gezet en hierop de genoemde css-styling gezet, maar zonder een width: 100% komt alles ernaast te staan. Al met al zag ik het voordeel niet van het resultaat wat ik hiermee kreeg.

Mochten jullie het nodig hebben, hier een .zip-bestandje met daarin de volledige website.
Voor een live-versie van de website kun je hier terecht.

* 4WardNL komt erachter dat hij toch nog heel wat te leren heeft wat betreft HTML/CSS

Acties:

zondag 16 februari 2014 14:14

Plays piano,…

Ik zie niet alle code; maar ik verwacht dat je dan inline-block hebt gebruikt. Probeer display: block;
Wat je ook kunt doen is een clear geven met :after { display: table; content: ""; } Maar ik vind die persoonlijk zelf een beetje vies. Wel werkt deze best consistent, maar vind dat het er niet voor bedeld is.

Kun je heel kort zeggen wat je wilt bereiken? Ik vind alle posts hierboven verwarrend

Ontwikkelaar van NPM library Gleamy

Acties:

zondag 16 februari 2014 14:26

Topicstarter

gitaarwerk schreef op zondag 16 februari 2014 @ 13:49:
Ik zie niet alle code; maar ik verwacht dat je dan inline-block hebt gebruikt. Probeer display: block;
Wat je ook kunt doen is een clear geven met :after { display: table; content: ""; } Maar ik vind die persoonlijk zelf een beetje vies. Wel werkt deze best consistent, maar vind dat het er niet voor bedeld is.

Kun je heel kort zeggen wat je wilt bereiken? Ik vind alle posts hierboven verwarrend

Om heel eerlijk te zijn weet ik het zelf niet eens precies meer

Het begon met het probleem waarover ik sprak in de eerste post, welke inmiddels opgelost is met een clearfix. Er zijn hier echter veel mensen die een clearfix niet de juiste oplossing vinden en dus met andere oplossingen komen, welke ik niet altijd snap (display: block gebruiken op de header zoals jij zei werkt ook niet, waarschijnlijk vanwege de float: left die er ook op staat). Vind zelf een clearfix ook niet de meest fantastische oplossing, maar het is wel lekker makkelijk

Acties:

zondag 16 februari 2014 16:02

Plays piano,…

Haha

Maar, wat is het resultaat wat je wilt bereiken? Moet het oranje vlak over de hele breedte gaan?

Wat ik vooral niet snap is waarom je container elementen op inline-block staan. Inline heeft de vervelende gewoonte om extra ruimte tussen de elementen te creeeren. Dat kun ej door verschillende dingen oplossen. Persoonlijk zou ik meer neigen naar een responsive grid waarbij je per view aangeeft over hoeveel "kolommen" deze moet passen.

Als ik bijvoorbeeld jouw .about container een display block geeft; box-sizing: padding-box (zo kun je vaste waardes houden, maar toch met percentages werken). Dan is dat probleem al gefixed.
Als je dan de H2 pakt, en die op width: auto zet, en display: block; dan blijft ie mooi.

Je teksten lijnen dan niet goed uit, maar wat je dan doet zijn die goed uitlijnen. Iedere kolom heeft aan beide kanten bijvoorbeeld 10px. Als je die niet wilt inspringen kun je altijd de eerste en laatste kolom deze uitschakelen, de hoofdcontainer beide kanten negatieve marge geven, linkerkant negatieve marge, etc.. genoeg op te verzinnen

...

Oh ja, .. je styled op elementen. Dit geval .about h2 .. niet dat het per definitie slecht is, maar je kan beter classes geven. Dat maakt je onderhoudbaarheid voor meerdere views beter

Kun je daar wat mee?

Ontwikkelaar van NPM library Gleamy

Acties:

zondag 16 februari 2014 16:47

Topicstarter

gitaarwerk schreef op zondag 16 februari 2014 @ 14:26:
Haha

Maar, wat is het resultaat wat je wilt bereiken? Moet het oranje vlak over de hele breedte gaan?

Wat ik vooral niet snap is waarom je container elementen op inline-block staan. Inline heeft de vervelende gewoonte om extra ruimte tussen de elementen te creeeren. Dat kun ej door verschillende dingen oplossen. Persoonlijk zou ik meer neigen naar een responsive grid waarbij je per view aangeeft over hoeveel "kolommen" deze moet passen.

Als ik bijvoorbeeld jouw .about container een display block geeft; box-sizing: padding-box (zo kun je vaste waardes houden, maar toch met percentages werken). Dan is dat probleem al gefixed.
Als je dan de H2 pakt, en die op width: auto zet, en display: block; dan blijft ie mooi.

Je teksten lijnen dan niet goed uit, maar wat je dan doet zijn die goed uitlijnen. Iedere kolom heeft aan beide kanten bijvoorbeeld 10px. Als je die niet wilt inspringen kun je altijd de eerste en laatste kolom deze uitschakelen, de hoofdcontainer beide kanten negatieve marge geven, linkerkant negatieve marge, etc.. genoeg op te verzinnen ...

Oh ja, .. je styled op elementen. Dit geval .about h2 .. niet dat het per definitie slecht is, maar je kan beter classes geven. Dat maakt je onderhoudbaarheid voor meerdere views beter

Kun je daar wat mee?

.about stond op display: inline-block aangezien ik dit had overgenomen uit de fiddle van Fontini. Ik heb zojuist eens geprobeerd wat jij zei, dus .about op display: block en (-moz-)box-sizing: padding box, evenals de h2 op display: block en width: auto maar dit doet niet bepaald wat het hoort te doen denk ik. De h2's nemen dan namelijk weer gewoon de volledige breedte in en alweer worden de p's niet meegenomen in de hoogte van de container waarin ze zich bevinden (door de floats).

Of ging je er hierbij al vanuit dat ik een grid-system zou gebruiken? (Dit grid-system, bedoel je dan trouwens dat ik met div's werk als als kolom?).

Wat betreft het stylen op elementen: Ik zal het aanpassen!

Maar zorgt dit er niet voor dat het html-bestand veel groter wordt, omdat er meer classes en dus meer tekst gebruikt worden?
(Ik blijf het goed benoemen van classes lastig vinden haha.)

[ Voor 3% gewijzigd door 4WardNL op 16-02-2014 16:20 ]

Acties:

donderdag 20 februari 2014 16:19

Plays piano,…

Even kijken. Je zou de P's bijvoorbeeld juist wel weer kunnen floaten. Ik weet niet hoe backwards compatible je dingen wilt hebben; maar je zou ook nog kunnen denken aan flex-box. Voor paragrafen denk ik juist dat inline-block erg gepast is. Dan hoef je ook niet te floaten. Enige waar je mee rekening moet houden is dus de tussenruimte die gegegenereerd wordt door de browser.

Grid system verwacht ik eigenlijk bij volledige responsive layouts ;-). Ook omdat het erg fijn werken is.

Ligt eraan wat je doet. Als jij je classes goed maakt, EN je gebruikt GZIP, dan valt het html gedeelte mee.

.about
.about-title
.about-paragraph
.about-paragraph-image etc.

Dat wordt allmeaal erg mooi verwerkt. Voor je rendersnelheid is het ook beter, maar dat is echt weer een optimalisatieslag.

Benoemen van classes kan inderdaad lastig zijn. Als je vooral in je gedachte houdt om dingen her te gebruiken, en je grid je breedtes en volgorde bepalen, dan kun je erg veel. Soms is het ook beter om het toch op jouw manier te doen. Afhankelijk van de scope van het project. Bij ons op werk heb je 200+ webshops die ineens allemaal geupdate wordt met veel dezelfde views. Dan wil je zoveel mogelijk inheriten. Dan in ons geval zijn lange classnames best beter. Hoe meer herhaling, hoe beter GZIP werkt. De volgorde hoe je classes opbouwt kun je dus de werking ermee beinvloeden. En dan lijken lange namen niet zuinig, maar zijn ze stiekem wel ;-). Beter een chain van lange namen, dan korte die allemaal anders zijn ;-)

als je echt HEEL nodig moet floaten, kun je met HR, een div met clear: both, een after: { display: table; content: "" } werken.

[ Voor 4% gewijzigd door gitaarwerk op 16-02-2014 16:49 ]

Ontwikkelaar van NPM library Gleamy

Acties:

donderdag 20 februari 2014 16:40

4WardNL schreef op zondag 16 februari 2014 @ 13:13:
[...]

Bedankt voor de hulp! Ik zie alleen bij jouw voorbeeld dat je een specifieke width zet voor de h2, wat ik graag wil voorkomen aangezien ik meerdere h2's gebruik met elk tekst van een andere lengte. Zonder de width: 20% neemt hij echter de volledige breedte in, wat dus ook niet helemaal mijn bedoeling is.

De clearfix is inmiddels wel weggehaald, maar alsnog heb ik een div nodig om de p om ze goed uitgelijnd te krijgen. Dit heeft dus te maken met dat ik de h2 nog niet aangepast heb naar hoe jij het hebt vanwege dat breedte-probleem.

De id's heb ik inmiddels aangepast naar classes!

Wat je in de edit van je comment precies bedoelt snap ik niet helemaal trouwens. Ik heb de h2 in een header gezet en hierop de genoemde css-styling gezet, maar zonder een width: 100% komt alles ernaast te staan. Al met al zag ik het voordeel niet van het resultaat wat ik hiermee kreeg.

Mochten jullie het nodig hebben, hier een .zip-bestandje met daarin de volledige website.
Voor een live-versie van de website kun je hier terecht.

* 4WardNL komt erachter dat hij toch nog heel wat te leren heeft wat betreft HTML/CSS

Sorry dat ik zo laat reageer! Ik heb mijn fiddle even aangepast zodat duidelijk wordt wat ik in mijn edit probeerde te zeggen. De header die om je H2 komt te staan is altijd 100% en de H2 die daar in zit wordt daar binnen gepositioneerd. Wellicht een idee om die header ook nog een class te geven voor als je in het vervolg nog meer headers gaat toevoegen (dan voorkom je dat deze nieuwe header toekomstige styling overneemt).

Ik heb het idee dat dit de meest nette en effectieve oplossing voor je is =). Good luck!

p.s. Ik ben begonnen met veel trial and error en kwam goed uit de voeten met css. Maar nu ik daadwerkelijk begrijp wat er gebeurt en hoe de DOM reageert is alles een stuk makkelijker geworden. Gewoon lekker doorgaan en probeer het gedrag ook te begrijpen! =D

[ Voor 5% gewijzigd door Fontini op 20-02-2014 16:22 . Reden: motivational stukje xD ]

Acties:

vrijdag 21 februari 2014 14:26

Topicstarter

Bedankt nog allebei voor de verdere uitleg!
In de website waar ik met dit probleem zat zal ik het gewoon met een clearfix blijven doen, aangezien er anders weer andere delen van de website qua positionering etc de mist in gaan. Bovendien is dit gewoon een site waar ik verder toch niks mee ga doen, dus maakt het opzich vrij weinig uit (al moet ik mezelf natuurlijk niet aanleren altijd clearfixes te gebruiken).

Wanneer ik echter weer eens met een nieuwe bezig ga, zal ik de tips van jullie zeker gebruiken!

[ Voor 7% gewijzigd door 4WardNL op 20-02-2014 16:41 ]

Acties:

vrijdag 21 februari 2014 20:37

De nieuwe header functioneert in principe als de clearfix die je nu hebt. Maar dan zonder clearfix =D.. Als je dit principe begrijpt ga je in de toekomst amper clearfixes nodig hebben en maak je mooie css!!!!

Acties:

zaterdag 22 februari 2014 09:24

Topicstarter

Fontini schreef op vrijdag 21 februari 2014 @ 14:26:
De nieuwe header functioneert in principe als de clearfix die je nu hebt. Maar dan zonder clearfix =D.. Als je dit principe begrijpt ga je in de toekomst amper clearfixes nodig hebben en maak je mooie css!!!!

Maar het is nu wel weer zo dat ik een standaard breedte in moet stellen voor de h2, in plaats van dat ik gewoon kan zeggen 'ik wil aan beide zijkanten een padding van 40px'.
Ik zal het allemaal nog eens goed bekijken!

Acties:

zaterdag 22 februari 2014 13:14

Plays piano,…

Dat kan nog steeds. Gebruik padding/border box. dan worden deze direct meeberekend in de daadwerkelijke breedte

Ontwikkelaar van NPM library Gleamy

Acties:

zondag 23 februari 2014 08:32

Topicstarter

gitaarwerk schreef op zaterdag 22 februari 2014 @ 09:24:
Dat kan nog steeds. Gebruik padding/border box. dan worden deze direct meeberekend in de daadwerkelijke breedte

Dit is echter niet precies wat ik bedoelde

Ik wil als het ware de achtergrond van de h2 aan beide kanten 40px uitsteekt buiten de tekst, zonder dat ik een width hoef te zetten. Aangezien ik meerdere van deze h2's gebruik met elk een verschillende tekstlengte, is een standaard width zetten geen optie.

Acties:

zondag 23 februari 2014 20:01

Plays piano,…

Je kan nog steeds een padding geven?

40px aan beide kanten, en display inline-block

Toch nie moeilijk nie? desnoods kan je .jeH2element:after { display: table; content: ""; } geven. Heb je gelijk een clear fix. <header> tags eromheen zijn ook standaard een block element. Speel er eens mee!

Ontwikkelaar van NPM library Gleamy

Acties:

maandag 24 februari 2014 16:30

Topicstarter

gitaarwerk schreef op zondag 23 februari 2014 @ 08:32:
Je kan nog steeds een padding geven? 40px aan beide kanten, en display inline-block Toch nie moeilijk nie? desnoods kan je .jeH2element:after { display: table; content: ""; } geven. Heb je gelijk een clear fix. <header> tags eromheen zijn ook standaard een block element. Speel er eens mee!

Ik zie het inderdaad, mijn fout! Was vergeten iets aan te passen in de CSS waardoor het niet werkte

Acties: