Pseudo element vs overflow:hidden

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Oracle Apex developer

Bedrijfsomschrijving My client is a technology company based in Den Bosch, the Netherlands. They specialize in providing innovative software solutions to clients, and they are currently looking for an experienced Oracle Apex developer to join the IT team. Functieomschrijving As an Oracle Apex developer, you will be responsible for designing, developing, and maintaining web-based applications using Oracle Apex. You will work closely with project managers, business analysts, and other developers to ensure that clients' needs are met and that the software solutions are of the highest quality. Responsibilities: Design, develop, and maintain Oracle Apex applications. Work with project managers and

Bekijk vacature »

Senior .NET Ontwikkelaar

In het kort Als Senior .NET ontwikkelaar ga je binnen onze business unit Transport en Logistiek aan de slag met complexe maatwerk software voor bedrijf kritische systemen binnen de technische automatisering. Denk bijvoorbeeld een IoT-oplossing voor de logistieke sector waarbij we van ruim 200.000 machines de telemetrie en events verwerken. We zijn actief in de distributielogistiek, havenlogistiek (denk aan ECT) en productielogistiek. Naast C# en .NET Core maken we ook gebruik van Azure technologie. En als trotse Microsoft Gold Partner leren we graag van en met jou. Wil jij jezelf blijven ontwikkelen binnen de technische automatisering met .NET, dan gaan

Bekijk vacature »

Software Ontwikkelaar PHP

Functie omschrijving Full Stack Software Ontwikkelaar gezocht! Voor een bedrijf in de regio van Ermelo zijn wij op zoek naar een Software Ontwikkelaar die gaat bijdragen aan het door ontwikkelen, onderhouden en optimaliseren van SaaS applicatie van dit bedrijf. Hierbij ga jij voor- en samenwerken met de klanten van de organisatie, het is hierbij dus van groot belang dat je communicatief vaardig bent en dat je beschikt over beheersing van zowel de Nederlandse als Engelse taal. Bedrijfsprofiel Waar ga je werken? Altijd al in een echt familiebedrijf willen werken? Dan is dit je kans! Het bedrijf waar je komt te

Bekijk vacature »

Randstad - Freelance Backend Developer/ Data Engin

Starting date: 10.05.2023 Salary range: €67,00 - €77,00 Duration: 6 months Hours: 40 Working model: Hybrid* MUST be NL based Job description: Our vision is to have a consistent and data driven experience for all sales across all our operating companies. Our mission is to enable our salespeople to be able to reach out to the right company at the right time. We do this by creating data driven micro services and solutions. We mainly focus on implementation in the Google Cloud but also integrate with local systems and other cloud solutions. A typical day: As a back-end developer you

Bekijk vacature »

Java Developer bij een jonge groeiende organisatie

Bedrijfsomschrijving Vind jij het als Java developer ook zo belangrijk dat een bedrijf je de ruimte en tijd geeft voor persoonlijke ontwikkeling? Dan zit je hier helemaal goed. Deze jonge organisatie is opgericht in 2018 en is ondertussen uitgegroeid tot een club van ongeveer 30 medewerkers. Het gaat hier om een echte Java club, die vrijheid en verantwoordelijkheid erg belangrijk vinden. Het bedrijf heeft een informele sfeer en de teams zijn erg hecht met elkaar. Ze delen graag de kennis en ervaringen met anderen, maar vinden andermans mening ook zeer belangrijk. De organisatie zet zich in voor ontwikkeling en besteed

Bekijk vacature »

Senior Node.js developer Digital Agency

Functie Door de groei van de organisatie zijn ze op zoek naar een Tech Lead. Als tech lead ben jij verantwoordelijk Als Back end Node.js developer kom je terecht in een van de 8 multidisciplinaire teams in het projectenhuis. Afhankelijk van jouw interesses, wensen en capaciteiten word je bij projecten en onderwerpen naar keuze betrokken. Als ervaren ontwikkelaar zul jij vaak leiding nemen in de projecten en in het team een aanvoerder zijn van technische discussies. Uiteindelijk wil jij natuurlijk de klantwensen zo goed mogelijk vertalen naar robuuste code. De projecten kunnen varieren van langlopende- tot kleinschalige trajecten. Voorheen werkte

Bekijk vacature »

PHP Developer

Dit ga je doen Je werkt nauw samen met het websitebureau aan de ontwikkeling en optimalisering van het internationale platform; Je ziet nieuwe webshops op en voert optimalisaties door; Je bouwt aan technische, functioneel en commercial resultaat; Je vindt het leuk om zelfstandig binnen een internationale organisatie te werken, maar krijgt ook energie om samen met collega's te werken. Hier ga je werken Voor een bedrijf in de regio Rotterdam zijn wij opzoek naar een PHP Developer. Je wordt onderdeel van het communicatieteam en gaat je bezighouden met het optimaliseren van de website van dit internationale bedrijf. Je schakelt veel

Bekijk vacature »

Front-end Developer vue.js node.js SaaS

Dit ga je doen Het ontwikkelen van nieuwe features die bijdragen aan de groei van de klanten van de organisatie; Je denkt mee over nieuwe innovaties, features en verbeteringen in de applicatiearchitectuur; Je draagt bij aan de continue ontwikkeling van jouw team doordat je elke dag streeft naar het verbeteren van jouw eigen prestaties; Je neemt actief deel aan Scrum meetings en de Frontend Guild. Hier ga je werken Voor een snel groeiend bedrijf de regio Nieuw Vennep zijn wij opzoek naar een ervaren Front-end Developer. De organisatie is actief in de e-commercebranche en ontzorgt haar klanten middels een SaaS-platform.

Bekijk vacature »

PHP Developer

Functieomschrijving Vanuit het hoofdkantoor in de regio van Bergen op Zoom ben je als PHP Developer niet alleen gefocust op het ontwikkelen van Software. Daarnaast ben je ook voortdurend bezig met het zoeken naar nieuwe mogelijkheden en innovaties die essentieel kunnen zijn voor de efficiëntie van software ontwikkeling. Je deelt veel kennis en informatie met het team en ontvangt deze dan ook graag terug. Techstack: PHP, Symfony & mySQL. Bedrijfsprofiel Deze uitdagende opdrachtgever is ruim 20 jaar actief in de regio Bergen op Zoom. Het vooruitstrevende team staat de hele dag voor je klaar om je te helpen en ondersteunen.

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 »

Medior Java developer

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 »

Back end developer

Functie Jij als full stack ontwikkelaar komt te werken in een team bestaande uit 4 back end programmeurs, 2 vormgevers/ Front end developers en een online marketeer. Qua persoonlijkheden is het team erg gevarieerd van sportfanaten tot gameliefhebbers en Golfers. Een ding heeft iedereen hier gemeen; Passie voor goede code. In jouw rol zul je voor 90% van je tijd je bezig houden met het ontwikkelen van grote maatwerk applicaties. Daarnaast hebben wij op aanvraag ook wel eens een website of onderhoudsklusje, die opgepakt moet worden en hier ben jij ook niet vies van. De technische uitdaging momenteel is dat

Bekijk vacature »

App Developer

Samen werken aan een gezonder Nederland en toekomstbestendige zorg voor iedereen. Dat is de impact die jij kan hebben als App Developer bij VGZ. Wil jij een bijdrage leveren aan een maatschappij waarin iedereen zich thuis voelt? Bekijk dan de vacature. Uit onderzoek van Computable is VGZ verkozen tot ‘beste niet-ICT werkgever voor ICT’ers van Nederland’ Hoe ook jij het verschil maakt Als App developer werk jij aan het belangrijkste communicatiekanaal van VGZ, namelijk de App! Als App developer bij VGZ maak je onderdeel uit van een van onze App-teams. Met een goede mix van kennis en ervaring zet je

Bekijk vacature »

Senior .NET developer

Functie As a Senior .NET developer you will work in our Research & development team. Our team consists of 17 colleagues! We are currently busy setting up a completely new architecture for a new product. We use VS2022 and .NET 6.0 for our new product. Your function is therefore mainly backend oriented. Since we develop measuring equipment for the chemical industry, it is also very important to develop high-quality software for its control. You are also responsible for designing, implementing and testing new features. For this position its also very important to ensure future-proof and sustainable architecture. Eisen - A

Bekijk vacature »

Ervaren Magento developer gezocht!

Functie Je komt te werken in een zelfsturend team waarin vertrouwen voorop staat en inbreng en ideeën worden gewaardeerd. Ook staat innovatie centraal. Ze bieden jou de mogelijkheid om jezelf door te ontwikkelen. Denk hierbij aan cursussen en een persoonlijk ontwikkelplan. Je komt terecht in het team van momenteel 4 (ervaren) collega’s en zal meewerken aan de doorontwikkeling en nieuwbouw van de Magento platformen van meerdere opdrachtgevers volgens Agile/Scrum. Denk hierbij aan nieuwe functionaliteiten, UX en koppelingen met verschillende back-end systemen. Als ervaren developer zul je hiernaast ook andere developers assisteren en waar nodig de leiding nemen in het project.

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

29/04/2024 23:39:22
 
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.