Pseudo element vs overflow:hidden

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Software Developer PHP

Functie omschrijving We are looking for a dutch native speaker Voor een opdrachtgever in de regio van Geldrop ben ik op zoek naar een Software Developer PHP. Jij krijgt een rol met veel verantwoordelijkheid in een groeiende organisatie. In deze functie werkt je voornamelijk remote en op een vast moment kom je met het team samen, om samen te werken en nieuwe doelen te bepalen. Wat ga je doen? Je wordt verantwoordelijk voor de interne applicatie; Je zorgt voor de doorontwikkeling van de applicatie: zowel back-end, front-end; De basis van het werk betreft front-end technieken; Periodiek bepaal je samen met

Bekijk vacature »

PHP Developer Symfony

Dit ga je doen Ontwikkelen van Product Informatie Management (PIM) systemen; Werken aan zowel grotere als kleine projecten voor toonaangevende klanten binnen o.a. de retail. Hier ga je werken Als PHP Developer kom je te werken binnen een vooruitstrevende organisatie die Product Informatie Management (PIM) systemen levert aan hun klanten. Hun klanten zijn toonaangevende bedrijven binnen o.a. de retail. De organisatie zit gevestigd in regio Zwolle en bestaat uit zo'n 35 medewerkers, waarvan 30 IT. Je komt te werken binnen één van de zelfsturende development teams welke ieder verantwoordelijk zijn voor hun 'eigen' klanten. Jouw team bestaat uit 6 backend

Bekijk vacature »

Laravel developer

Zie jij mogelijkheden om onze tooling technisch te verbeteren en uit te bouwen? Over Jobmatix Jobmatix is een innovatieve en internationale speler op het gebied van jobmarketing. Onze jobmarketing automation tool helpt organisaties bij het aantrekken van nieuw talent door vacatures digitaal, geautomatiseerd en op een efficiënte manier te adverteren en onder de aandacht te brengen bij de doelgroep op 25+ jobboards. Volledig performance-based, waarbij organisaties betalen op basis van cost per click of cost per applicant. Maandelijks wordt onze jobmarketing automation tool al gebruikt door vele directe werkgevers, intermediairs en mediabureaus, waaronder Picnic, Rijkswaterstaat, AdverOnline, Schiphol, DPA, Teleperformance en

Bekijk vacature »

Senior .NET developer

Functie Als Senior .NET ontwikkelaar ga jij aan de slag in ons Research & development team. Ons team bestaat uit 17 collega’s! Wij zijn momenteel druk bezig met het opzetten van een geheel nieuwe architectuur voor een nieuw product. Hierbij maken wij o.a. gebruik van VS2022 en .NET 6.0. Jouw functie is dan ook voornamelijk backend georiënteerd bij ons. Aangezien wij meetapparatuur ontwikkelen voor de chemische industrie is het ook erg belangrijk om kwalitatief hoogwaardige software te ontwikkelen voor de besturing hiervan. Verder ben jij verantwoordelijk voor het designen, implementeren en testen van nieuwe features. Ook zorg jij voor toekomstbestendige

Bekijk vacature »

C# Developer

Functie omschrijving Voor een softwarebedrijf in de omgeving van Veghel zijn we op zoek naar een C# developer. Word jij blij van ontwikkelen in C# en .NET? Lees dan snel verder! Jouw werkzaamheden zullen er als volgt uit gaan zien: Door middel van ASP.NET, MVC Framework en C# ga je webshops, websites en webapplicaties ontwikkelen. Je zorgt voor de optimalisatie van bestaande software en de automatisering van bedrijfsprocessen. Op basis van de wensen van de klant ga je samen met je collega's ga je op zoek naar de juiste oplossingen en je gaat dit uitwerken tot een mooi eindproduct. Bedrijfsprofiel

Bekijk vacature »

.NET Developer C#

Dit ga je doen Als developer nieuwe gave features implementeren; Werken met technieken als C# .NET en (REST) API's webservices; Ontwikkelen van koppelingen middels API's; Maken van technische keuzes en beslissingen over de architectuur; Junior collega's coachen; Initiatief nemen voor nieuwe technische mogelijkheden; Je bent een belangrijke schakel - en vindt het leuk - om te schakelen met de business. Hier ga je werken Als C# .NET Developer wordt je verantwoordelijk voor het ontwikkelen van applicaties voor belangrijkste product van deze organisatie. Dit product is een applicatie voor alles omtrent hypotheken. De programmeertaal die je hierbij beheerst is C#. Er

Bekijk vacature »

Medior/Senior Software Developers gezocht in de Ra

Functie Op dit moment staan er posities open voor de volgende functies: Front-end, Back-End & Fullstack software developer. Als Front-End software developer werk je met JavaScript en de bijbehorende technologieën zoals TypeScript, Angular, React, Vue en Svelte. Als Back-End software developer ben je bezig in NodeJS en doe je dit met behulp van AWS, NoSQL, REST en GraphQL. Je krijgt leuke en uitdagende opdrachten met een gemiddelde duur van anderhalf jaar. Hier werk je in een team met andere IT’ers aan het ontwikkelen en verbeteren van software. Je wordt begeleid door een accountmanager die fungeert als jouw aanspreekpunt. Het team

Bekijk vacature »

Oracle APEX developer

Wat je gaat doen: Als Oracle APEX ontwikkelaar bij DPA werk je samen met collega’s aan de meest interessante opdrachten. Je zult je ervaring met SQL, PL/SQL, JavaScript, HTML en CSS inzetten om wensen van opdrachtgevers te vertalen naar technische oplossingen. Je werk is heel afwisselend, omdat DPA zich niet beperkt tot een specifieke branche. Zo ben je de ene keer bezig binnen de zorgsector, de andere keer is dit bij de overheid. Wat we vragen: Klinkt goed? Voor deze functie breng je het volgende mee: Je hebt een hbo- of universitaire opleiding afgerond Je hebt 2 tot 5 jaar

Bekijk vacature »

C# .NET Developer IoT SQL Server

Samengevat: Wij ontwikkelen innovatieve oplossingen om apparaten en bezittingen op een eenvoudige en flexibele manier te beveiligen. Ben jij een C# .NET developer? Heb jij ervaring met C# en SQL server? Vaste baan: C# .NET Developer IoT HBO €3.200 - €4.500 Deze werkgever is gespecialiseerd in hoogwaardige GSM/GPRS alarm- en telemetrietechnologie. Met een eigen productlijn en klantspecifieke ontwikkelingen biedt deze werkgever oplossingen om op afstand te meten, melden, loggen en aansturen, ook op plaatsen zonder stroomvoorziening. Onze producten worden gekarakteriseerd door flexibiliteit in de configuratie, betrouwbaarheid en een extreem laag stroomverbruik. Zij werken voor MKB klanten. Deze werkgever heeft veel

Bekijk vacature »

.NET Developer

Dit ga je doen (Door)Ontwikkelen van het applicatielandschap; (Door)Ontwikkelen van microservices; Bouwen van nieuwe functionaliteiten; Verbeteringen aandragen voor het applicatielandschap; Sparren met de business. Hier ga je werken De organisatie is werkzaam in de financiële dienstverlening met meer dan 200 medewerkers en meer dan 250.000 eindgebruikers is het een van de grotere binnen haar branche. Je komt te werken in een team waarmee je verantwoordelijk bent voor het ontwikkelen en onderhouden van de financiële applicaties binnen de organisatie, denk hierbij aan het bouwen en onderhouden van portalen. Als .net developer ga jij het development team ondersteunen met de transitie naar

Bekijk vacature »

Integratie expert - Java Developer

Dit ga je doen Nieuw koppelingen ontwerpen, ontwikkelen en implementeren; Je schakelt met de klanten om hen zo goed mogelijk van dienst te zijn. Strategisch kijken naar nieuwe mogelijkheden op bestaande of nieuwe koppelingen zo effectief mogelijk te realiseren; Je bestaande toolset afwegen tegen nieuwe mogelijkheden om integratiedoelen steeds effectiever en/of effcienter te bewerkstelligen; Bestaande software koppelingen beheren, dit zijn koppelingen met zowel interne als externe systemen; Overleg met zowel directe collega's als met stakeholders om nieuwe integratieplannen concreet te maken; Je kunt de junioren meenemen op sleeptouw. Hier ga je werken Onze klant is op zoek naar een ervaren

Bekijk vacature »

Junior Front-End Developer

Je maakt een vliegende start van je carrière, door meteen mee te bouwen aan de digitale oplossingen van Coolblue. Wat doe je als Junior Front-End Developer bij Coolblue? Als Junior Front-End Developer ben je meteen vanaf de start onderdeel van een development team. Je kijkt veel mee met collega’s en volgt trainingen. Op dat moment komt je wil om te blijven leren naar boven. Daarnaast pak je in de sprints ook je eigen stories op om Coolblue iedere dag een beetje beter te maken. Je sterk analytisch vermogen komt dan goed van pas! Ook Junior Front-End Developer worden bij Coolblue?

Bekijk vacature »

Als Lead PHP developer bijdragen aan het onderwijs

Functie Als Lead PHP developer zet je samen met het team en de andere lead developers de technische lijnen uit als het gaat om het ontwikkelen van de applicaties en bepaal je samen met de PO waar elke sprint aan gewerkt zal worden. Je kunt op basis van een user story een goede aanpak formuleren en een planning opstellen, en andere hierin meenemen. Wanneer je team code schrijft verwacht je degelijke oplossingen, bij voorkeur gebruik makend van Domain Driven Design. Je ziet toegevoegde waarde in het beoordelen van het werk van collega’s om zo samen te streven naar hoge kwaliteit

Bekijk vacature »

Front-End React Developer

Als Front-End React Developer verbeter je de user experience van onze eigen webapplicaties voor onze collega's binnen Coolblue. Wat doe je als Front-End React Developer bij Coolblue? Als Front-end React Developer werk je aan de gebruiksvriendelijkheid van onze webshop voor miljoenen klanten met React.js. Je vindt het leuk om samen te werken met de UX designer om stories op te pakken. Daarnaast ben je trots op je werk en verwelkomt alle feedback. Ook Front-end React Developer worden bij Coolblue? Lees hieronder of het bij je past. Dit vind je leuk om te doen Verbeteren van de gebruiksvriendelijkheid van onze webshop

Bekijk vacature »

ERP Developer fleet managementsysteem

Wat ga je doen als ERP Developer fleet managementsysteem? Als ERP developer speel jij een belangrijke rol bij het doorvoeren van wijzigingen en verbeteringen binnen het fleet managementsysteem. Jouw expertise op het gebied van ERP systemen stelt jou in staat om de applicatie optimaal te laten functioneren en te blijven ontwikkelen. Als lid van het IT-team werk je nauw samen met andere developers en het business team om het fleet managementsysteem te integreren met andere systemen. Je bent verantwoordelijk voor het ontwikkelen van nieuwe functionaliteiten en het implementeren van verbeteringen op basis van de wensen en eisen van onze klanten.

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

21/11/2024 20:49:51
 
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.