Pseudo element vs overflow:hidden

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Fullstack developer

Functie omschrijving Ben jij toe aan een nieuwe uitdaging en zou jij graag bij een platte maar informele organisatie werken? Voor een mooi softwarebedrijf in omgeving Alblasserdam zijn wij op zoek naar versterking op de afdeling Software Development! Als Fullstack react.js developer wordt je bij dit bedrijf onderdeel van de volledige ontwikkeling van requirement tot oplevering! Jouw focus ligt op de front end en alles wat daarbij komt kijken. Je gaat ontwerpen, ontwikkelen, testen en valideren. Je zult voornamelijk werken met React.js en Typescript. Maar ook Javascript, HTML en CSS komen aanbod. Daarnaast zal je ook regelmatig met de back

Bekijk vacature »

C# developer

Functie Als ervaren Software Engineer wordt jij verantwoordelijk voor het bedenken en ontwikkelen van technische (maatwerk) oplossingen voor onze klanten en dit samen met de klant af te stemmen. Jij wordt o.a. verantwoordelijk voor de doorontwikkeling het software pakket welke voor ons enorm belangrijk is. Dit pakket zorgt er namelijk voor dat wij complete productielijnen kunnen aansturen en monitoren. Daarnaast heb jij actief contact met onze hoofdvestiging om het software achter een van onze systemen te verbeteren en te herschrijven. Momenteel zijn onze C# applicaties geschreven met o.a. Winforms. Echter hebben wij de actieve ambitie om dit te gaan herschrijven

Bekijk vacature »

Fullstack developer - medior

Functie omschrijving Ben jij toe aan een nieuwe uitdaging en zou jij graag bij een platte maar informele organisatie willen werken? Voor een mooi softwarebedrijf in omgeving Gorinchem zijn wij op zoek naar versterking. Als Fullstack developer wordt je bij dit bedrijf onderdeel van de volledige ontwikkeling van requirement tot oplevering! Werkzaamheden Jouw focus ligt op de front end en alles wat daarbij komt kijken. Je gaat ontwerpen, ontwikkelen, testen en valideren. Je zult voornamelijk werken met React.js en Typescript. Maar ook Javascript, HTML en CSS komen aanbod. Daarnaast zal je ook regelmatig met de back end werken! Bedrijfsprofiel Onze

Bekijk vacature »

Web Developer

Bedrijfsomschrijving ENGIE Nederland is onderdeel van de beursgenoteerde ENGIE Groep. ENGIE is actief in 70 landen, met wereldwijd 150.000 medewerkers. Als groep is het de missie om bij te dragen aan de verduurzaming van de wereld. ENGIE Energie biedt energiediensten aan particulieren en grootzakelijk en gaat de uitdagingen van de energietransitie aan door het beschikbaar maken van duurzame energie, het streven de klimaatverandering tot een minimum te beperken, leveringszekerheid te bieden en zorg te dragen voor een verantwoord gebruik van de beschikbare resources. ENGIE Energie investeert daarom in hernieuwbare energiebronnen zoals zon, wind en bio-gas. Functieomschrijving Heb jij veel ervaring

Bekijk vacature »

Medior Java developer (fullstack)

Wat je gaat doen: Of beter nog, wat wil jij doen? Binnen DPA GEOS zijn we dan ook op zoek naar enthousiaste Java developers om ons development team te versterken. Als Java developer werk je in Agile/Scrum teams bij onze klanten en daarbij kun je eventueel ook andere ontwikkelaars begeleiden in het softwareontwikkelproces. Verder draag je positief bij aan de teamgeest binnen een projectteam en je kijkt verder dan je eigen rol. Je gaat software maken voor verschillende opdrachtgevers in jouw regio. Je bent een professional die het IT-vak serieus neemt en kwaliteit levert. Je leert snel vanwege je diepgaande

Bekijk vacature »

Senior Java Developer

Als Senior Java Developer bij Sogeti ben je onderdeel van onze toonaangevende community die bestaat uit ruim 100 gepassioneerde Java professionals. In teamverband lever je mooie prestaties. Daarmee draag je aan bij de meerwaarde die wij leveren aan onze top-opdrachtgevers. Geen werkdag is hetzelfde! Je bent voortdurend bezig met het oplossen van allerlei complexe vraagstukken binnen bedrijfs kritische systemen voor onze klanten in regio Noordoost zoals DUO, ING, CJIB en Tendernet. Natuurlijk krijg jij de mogelijkheid je verder te certificeren in dit vakgebied. We organiseren regelmatig technische Meetups en doen veel aan kennisdeling. Sogetisten hebben plezier in hun werk en

Bekijk vacature »

Lead developer (PHP, Symfony, DDD)

Functie Als Lead developer zorg je ervoor dat het team (bestaande uit zowel junior als ervaren developers) in staat is om de kwaliteit van de software (en code) verder te verhogen. In samenwerking met het team, de product owner en de andere lead developers zet je technische lijnen uit en bepaal je de prioriteiten per sprint. Lijkt het jou interessant om complexe problemen op te lossen en bijvoorbeeld een nieuwe applicatiestructuur in Symfony op te zetten? Dan komen wij graag met je in contact. Eisen • HBO werk- en denkniveau (ze kijken niet naar papieren, maar naar denkniveau, motivatie en

Bekijk vacature »

Als PHP developer bijdragen aan beter onderwijs?

Functie Momenteel zijn ze op zoek naar een PHP developer die mee gaat werken aan de (door)ontwikkeling van de producten en zo helpt aan de uitvoering van hun ontwikkelprojecten. Je komt te werken binnen hun development team bestaande uit 6 ontwikkelaars. Ze staan zowel open voor meer junior als medior/senior developers. Je kunt snel veel verantwoordelijkheid krijgen en doorgroeien binnen het bedrijf. Bovendien ben je betrokken bij het bepalen van de product roadmap en de inbreng van (nieuwe) technologieën. De applicaties waaraan je werk worden gebruikt op onderwijsinstellingen door heel Nederland. De tech-stack bestaat voornamelijk uit Laravel (PHP), Vue.js en

Bekijk vacature »

Gezocht: Ervaren VB6 developer met C# ambitie!

Bedrijfsomschrijving Dit bedrijf is een vooraanstaande softwareleverancier die gespecialiseerd is in het ontwikkelen van software pakketten voor autoschade herstel bedrijven. De software wordt gebruikt door meer dan de helft van alle autoschade herstel bedrijven in Nederland. Het team van professionals is op zoek naar getalenteerde collega developers die hun vaardigheden willen inzetten om het bedrijf te laten groeien. Functieomschrijving Voor dit bedrijf zoek ik een ervaren VB6 / VB.NET developer met interesse om op termijn verder te gaan in C#. In deze functie ben je verantwoordelijk voor het onderhouden van de bestaande softwarepakketten. Een deel van de code is nog

Bekijk vacature »

Technisch Applicatie ontwikkelaar

Functie omschrijving Ben jij op zoek naar een nieuwe uitdaging en zoek jij een informele werkgever waar je zelfstandig kunt werken binnen een leuk IT team, lees dan snel verder want wie weet zijn wij op zoek naar jou! In deze functie werk jij voornamelijk aan: Het onderhouden en ontwikkelen van de IT systemen; Het opzetten van Azure Cloud systemen, denk aan interfaces, hardware op de Cloud, webportalen of BI functies; Werk je aan scripts binnen verschillende software applicaties, denk aan ERP en CAD; Ontwikkel en implementeren je MS PowerApps en Power BI. Bedrijfsprofiel Je komt terecht bij een familiair

Bekijk vacature »

Network Engineer (f/m/d) in Heidelberg

Network Engineer (f/m/d) The IT Services team operates and supports the IT infrastructure and services at EMBL headquarters in Heidelberg and at the laboratory’s sites in Barcelona and Rome. As part of IT Services, the Network team is responsible for managing and developing the network infrastructure in our data centres, on campus, and to our external network providers. As a leading scientific institution with highly data-intensive research, extensive data flows at and between the laboratory’s six sites and to the Internet, EMBL is connected to national and international scientific networks using state-of-the-art technologies from vendors including Cisco, Extreme Networks and

Bekijk vacature »

Software Developer

Longship.io gaat de wereld veroveren met baanbrekende software en legendarische... pizza-avonden! Lees hier de vacature van IT Operations Manager! Bij Longship werken we met een team van 5 mensen aan software voor laadpaal operators. Longship is ontstaan in 2020 met als doel om de elektrische mobiliteitstransitie aan te jagen. We zijn nu al een wereldwijde speler doordat we continu voorop lopen in innovatie. Ons platform helpt het versneld elektrificeren van wagenparken, internationaal! Wij zijn een startup met grote ambities die we willen bereiken met een relatief klein en efficiënt team. Je krijg de kans om ontzettend veel te leren van

Bekijk vacature »

Social Media Specialist

Social Media Specialist locatie: Rotterdam (Zuid Holland) Wij zoeken op korte termijn een nieuwe collega, een social media specialist/ adviseur sociale media (24 uur), voor ons sprankelende team Communicatie van CJG Rijnmond. Onze focus ligt op het informeren en binden van onze in- en externe klanten en stakeholders en het versterken van onze naamsbekendheid en zichtbaarheid. Dat doen we in nauwe samenwerking met elkaar. Over de functie Ons team bestaat uit 7 communicatieprofessionals met ieder een eigen expertise. Als lid van het online team ben je verantwoordelijk voor het ontwikkelen, uitvoeren en analyseren van onze socialemediastrategie. Ook stel je campagnes

Bekijk vacature »

.NET developer

Functie Heb jij veel kennis van ASP.NET Webforms en wil jij juist de overstap maken naar ASP.NET Core? Wij zijn per direct op zoek naar een ervaren .NET Webdeveloper die met ons samen ons platform wilt herschrijven van ASP.NET Webforms naar ASP.NET Core. Voor jou de unieke kans om met ons samen te innoveren en kennis op te doen van de nieuwste technieken binnen de Microsoft Stack. Wij hebben een development team met 10 IT specialisten bestaande uit onder andere 4 backend .NET developers en twee front-end developers. Wij zijn continu bezig om ons als team en bedrijf te blijven

Bekijk vacature »

Medior Java developer (fullstack)

Wat je gaat doen: Of beter nog, wat wil jij doen? Binnen DPA GEOS zijn we dan ook op zoek naar enthousiaste Java developers om ons development team te versterken. Als Java developer werk je in Agile/Scrum teams bij onze klanten en daarbij kun je eventueel ook andere ontwikkelaars begeleiden in het softwareontwikkelproces. Verder draag je positief bij aan de teamgeest binnen een projectteam en je kijkt verder dan je eigen rol. Je gaat software maken voor verschillende opdrachtgevers in jouw regio. Je bent een professional die het IT-vak serieus neemt en kwaliteit levert. Je leert snel vanwege je diepgaande

Bekijk vacature »
Guido  -

Guido -

03/11/2015 23:58:10
Quote Anchor link
Hallo,

Tijdens het maken van een website-template gebruik ik soms een clearfix (pseudo element):
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
.mijn-div:after{content:''; display:block; clear:both;}


Nu merk ik dat overflow:hidden hetzelfde resultaat oplevert, terwijl dit juist niet het geval zou moeten zijn (w3schools: the overflow is clipped, and the rest of the content will be invisible).

Wie kan me uitleggen waarom dit tóch werkt?

Guido
 
PHP hulp

PHP hulp

16/04/2024 12:41:37
 
Guido  -

Guido -

23/12/2015 10:29:00
Quote Anchor link
Guido vd L op 03/11/2015 23:58:10:
Nu merk ik dat overflow:hidden hetzelfde resultaat oplevert, terwijl dit juist niet het geval zou moeten zijn

Heb het bovenstaande verkeerd begrepen. Door het gebruik van overflow:hidden wordt de betreffende div ook volledig geselecteerd, that's it.

Maar welke van de 2 kun je het beste gebruiken?
Het resultaat in alle bekende browsers lijkt mij hetzelfde.
Een pseudo element gebruiken is mijn inziens echter een truc, niet echt netjes.
Wat vinden jullie?

Guido
 
Eddy E

Eddy E

24/12/2015 10:51:10
Quote Anchor link
Geen trucje gebruiken.

Hooguit een class van "clear_both" toevoegen waar het nodig is.
Dus geen extra elementen die niet getoond worden toevoegen...
 
Eschwin Moerkerken

Eschwin Moerkerken

31/12/2015 12:12:28
Quote Anchor link
Uit ervaring weet ik dat bootstrap een :after element gebruikt op haar elementen om de clearfix toe te passen. Sinds ik daar achter ben gekomen gebruik ik dit ook. Heb hier nooit problemen mee gehad (oudere browsers zoals IE7 en IE8 ondersteun ik inmiddels niet meer omdat ik hier de meerwaarde niet van in zie).

De overflow:hidden; zorgt er voor dat wanneer je een element (eventueel later toevoegd) in het boxje hebt staan (div) en die moet overlappen zoals een submenu of een ander effect dan werkt dit dus niet meer. Probeer om overflow:hidden; zoveel mogelijk te vermijden tenzij je het echt nodig hebt. Ik raad dus aan om voor de :after te kiezen (met: clear:both; display:table; content:'';) of om voor de safe manier te gaan een element toevoegen met de class clear-both oid. welke je dan dezelfde attributen meegeeft als de after element behalve de content:'';

Ik hoop dat hiermee je vraag beantwoord is ! :)
 
Guido  -

Guido -

31/12/2015 13:02:19
Quote Anchor link
Hoi Eschwin,

Dank voor je reactie. Heb inmiddels voor mijzelf een goede werkwijze gevonden.

Voor elementen die niet rechts/links uitgelijnd worden (zoals container van een website):
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
width:960px; position:relative; overflow:hidden; margin:0 auto 0;


Voor elementen die wel rechts/links uitgelijnd worden (zoals een header of footer):
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
width:100%; clear:both; float:left;


Voor elementen die wel rechts/links uitgelijnd worden en bepaalde breedte hebben (zoals sidebar):
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
width:50%; float:left;


Kan de overflow property in het geval van de container prima gebruiken.

Guido
 
Ozzie PHP

Ozzie PHP

31/12/2015 14:02:44
Quote Anchor link
>> Voor elementen die wel rechts/links uitgelijnd worden (zoals een header of footer):

Waarom lijn je een header of footer links of rechts uit? Die staat toch gewoon gecentreerd?
 
Guido  -

Guido -

01/01/2016 13:50:50
Quote Anchor link
Hallo Ozzie,

Dit topic beschrijft het probleem wat je dan kunt krijgen:
http://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing

Guido
 
Eschwin Moerkerken

Eschwin Moerkerken

07/01/2016 09:44:37
Quote Anchor link
Je kunt ook gewoon op je container een .container:after {clear:both; display:table; content:'';} gebruiken. Heeft hetzelfde effect en kun je later altijd nog met een element buiten je container (bij een hover, via javascript o.i.d.).

Overflow:hidden; wordt op deze manier niet gebruikt waar die voor bedoeld is. Alhoewel veel developers het wel op deze manier 'snel' en 'slordig' oplossen.
Gewijzigd op 07/01/2016 09:45:30 door Eschwin Moerkerken
 
Guido  -

Guido -

07/01/2016 14:27:56
Quote Anchor link
Hallo Eschwin,

Aha, je hebt een punt.. en je ontkomt er gewoon niet aan om soms een pseudo element te gebruiken. Voornamelijk bij een zwevend element met variabele hoogte.

Ik ga overflow:hidden toch maar weer vervangen door een :after element.

Thanks.

Guido
 
Eschwin Moerkerken

Eschwin Moerkerken

08/01/2016 15:51:21
Quote Anchor link
Mocht je oudere browsers willen ondersteunen die geen pseudo elementen ondersteunen. Kun je altijd een divje gebruiken in plaats van een pseudo element. Een after element is in principe niets anders als een via CSS toegevoegd element (niet deel uitmakend van de DOM, mocht je met javascript pseudo elementen willen aanpassen).
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.