Pseudo element vs overflow:hidden

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Software Ontwikkelaar C# .NET

Functie omschrijving Startende Software Ontwikkelaar gezocht met kennis van C# .NET! Ben jij net klaar met je opleiding en ben je op zoek naar je eerste echte werkervaring? Of heb jij al enige werkervaring maar ben toe aan iets nieuws? Dan is dit de perfecte kans voor jou! Wij zoeken namelijk een Junior Software Ontwikkelaar die klaar is voor een nieuwe uitdaging bij een leuke werkgeven in de regio Zeist. In deze functie werk jij vaak aan verschillende projecten en ga je bij klanten op bezoek. Ben jij op zoek naar een functie met uitdaging, diversiteit en verantwoordelijkheid? Dan is

Bekijk vacature »

Senior .NET developer

Klaar voor een nieuwe uitdaging? Welke technologieën gaan schuil achter de dagelijkse energievoorziening? Als senior .NET developer bij Kenter maak jij samen met je team het verschil, zowel voor de interne organisatie als voor eindklanten. Samen bouwen jullie aan innovatieve dienstverlening met behulp van de nieuwste technologieën en tools. Het is een functie met veel vrijheid, goede arbeidsvoorwaarden én je draagt jouw steentje bij aan de energietransitie. Klinkt dit als iets voor jou? Lees dan verder of solliciteer direct! Wat ga je doen als senior .NET developer? Als senior .NET developer bij Kenter (onderdeel van Alliander) ben je van onschatbare

Bekijk vacature »

Full Stack .NET Developer

Dit ga je doen Als developer nieuwe gave features ontwikkelen; Werken met technieken als C#, Angular 12 en Javascript,; 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 In een team van 7 professionals ben je als Full Stack .NET Developer verantwoordelijk voor het ontwikkelen van applicaties voor het grootste inhouse product: een applicatie voor alles omtrent hypotheken. De programmeertaal die je hierbij beheerst is C#. Wil je van meerwaarde

Bekijk vacature »

Trainee pega developer

Wil jij een mooie stap maken in jouw carrière? Mooi! Bij De Mandemakers Groep haal je binnen 6 maanden je CSA- en CSSA-certificaten, waarna jij aan de slag kan als Pega-developer in ons IT-team. Achter de schermen zorg jij ervoor dat collega’s efficiënt werken en klanten iedere dag beter geholpen worden. Wil jij daaraan bijdragen? En jouw ICT-skills ontwikkelen? Lees dan snel verder en solliciteer vandaag nog als trainee Pega-developer. Wat ga je doen? Als trainee Pega developer leiden wij je op tot gecertificeerd software developer voor het low-code platform PegaSystems. In de training ben je verantwoordelijk voor een te

Bekijk vacature »

SAP HANA Developer

Vacature details Vakgebied: Software/IT Opleiding: Senior Werklocatie: Veldhoven Vacature ID: 13382 Introductie We is looking for a HANA Developer to work for our client. The candidate has to have an experience in building Data Intensive Applications (DIA’s). The role of a HANA Developer at ASML involves working on building Data Intensive Applications in an industrial/enterprise environment. The primary responsibility is to handle data from various sources and determine the best way to structure it for use by data analysts, who will run queries and algorithms against it for predictive and prescriptive analytics through machine learning. Wat verwachten we van jou?

Bekijk vacature »

Software Ontwikkelaar

Functie omschrijving Voor een echt familiebedrijf in de omgeving van 's-Hertogenbosch ben ik op zoek naar een Software Developer. Jij gaat in de functie van Software Developer werken met C# en .NET framework Jij gaat maatwerk software ontwikkelen en softwareoplossingen creëren. Daarnaast optimaliseer je de bestaande software. Oplossingen waar de klant echt iets aan heeft, jij krijgt er energie van op dit te realiseren. Je gaat werken in een Microsoft omgeving(ASP.NET) en gebruikt daarnaast C# en MVC. Samen met het huidige IT team binnen deze organisatie verwerk je de wensen van de klant tot een (eind)product. Bedrijfsprofiel Deze organisatie is

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 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 »

Front end developer React Sportgames

Functie Als Front end developer ga jij aan de slag bij een gave en bekende organisatie op het gebied van sportgames. Jij gaat aan de slag in een scrumteam met 6 developers die gepassioneerd en actief bezig zijn om spelers kwalitatieve en mooie spelervaringen aan te bieden. Als scrumteam werken ze in drie wekelijkse sprints en begin je iedere ochtend met een stand-up. Als Front end developer werk jij bij deze organisatie voornamelijk met Javascript, html, css en React. Er wordt veel gebruikt gemaakt ook van C#, Docker en Kubernetes. Het team hecht veel waarde aan het leveren van hoogwaardige

Bekijk vacature »

Ervaren PHP ontwikkelaar

Functie Jij als PHP ontwikkelaar komt te werken in een team van 4 andere PHP ontwikkelaars. Je zult je voornamelijk bezig houden met: – Het ontwikkelen van nieuwe features – Doorontwikkelen van de API – Nadenken over de technische infrastructuur – Datakwaliteit Samen met het team ben jij verantwoordelijk voor de verdere ontwikkeling van de software en om de positie als marktleider in Europa te behouden. Ze werken volgens SCRUM in 2 wekelijkse sprints, werken met Jira voor alle tickets en communiceren veel via Slack. Eisen • Minimaal 3 jaar ervaring als back end developer • Je hebt affiniteit met

Bekijk vacature »

Junior .NET developer

Functie Als junior .NET developer begint jouw dag na een bak koffie met een stand up. De vorderingen worden tijdens de stand up besproken en de doelen worden opgesteld waar jullie als team in de volgende sprint naartoe gaan werken. Onze backend is geschreven in .NET Core en onze Front-end in Angular. Bij ons ga jij dan ook Fullstack aan de slag. Jij wordt hier opgeleid om zelfstandig te kunnen programmeren en applicaties te kunnen implementeren. Er wordt op projectbasis gewerkt, dit bied leuke uitdagingen omdat elke klant een andere visie heeft over de applicatie die wij maken. Je gaat

Bekijk vacature »

Creatieve Front-end developer gezocht!

Functie Het front-end team bestaat momenteel uit 4 collega’s en is hard aan het groeien! Samen leveren jullie een essentiële bijdrage aan de applicaties die ze voor hun klanten realiseren. Je werkt in het front-end team samen met de back-end teams en product owners om te zorgen dat de applicaties een fijne gebruikerservaring opleveren. Jouw expertise zorgt ervoor dat de juiste keuzes gemaakt worden qua techniek en ontwerp, van back-end tot aan gebruiker. In samenspraak met je team bepalen jullie de beste keuze voor techniek. Ook is er altijd ruimte om nieuwe technieken te ontdekken. Eisen • Je hebt gedegen

Bekijk vacature »

Ervaren Software Developer

Functie omschrijving Ben jij een ervaren Software Developer, en heb je ervaring met technieken zoals C#, MS Access & SQL? Vind jij het leuk om maatwerk software te ontwikkelen voor klanten in een specifieke branche? Dan is dit de baan voor jou! Als ontwikkelaar ben jij samen met een team van 12 collega’s verantwoordelijk voor het bouwen van nieuwe functionaliteiten en het uitbreiden van de core applicatie. Belangrijk is dat je ervaring hebt met C# en MS Access. Je bent flexibel en klantvriendelijk ingesteld, omdat het belangrijk is om de klanten zo goed mogelijk van dienst te kunnen zijn. Thuiswerken

Bekijk vacature »

Senior Java developer

Dit ga je doen Jouw taken als Senior Java Developer zijn: Het maken van strategische keuzes omtrent de nieuwbouw van applicaties; Het maken van technische ontwerpen; Hands-on mee ontwikkelen met het team (met o.a. Java FX, JDBC, SQL, REST, Jax-RS, JSON, Maven, JUnit en Spring (boot)); Reviewen van code en feedback geven op collega developers; Analyseren en oplossen van bugs/incidenten door het onderlinge verband te kunnen leggen van verschillende losstaande systemen. Hier ga je werken Het bedrijf waar je als Senior Java Developer komt te werken staat internationaal bekend om het testen van bodemstructuren door middel van echotechnieken en beeldherkenning.

Bekijk vacature »

Senior Fullstack Developer (GOLang, TypeScript)

Bedrijfsomschrijving Our client is one of the large worldwide accounting firms. Functieomschrijving We are looking for a senior (all-round) developer (Project On Demand / Tax Technology) Uses as much as possible technology in support of the development process: Git, Jenkins, Docker, npm, skaffold, helm, etc. We are looking for a real hands-on developer; ie not a team lead or other managerial-style role; Acts with integrity both internally and externally and takes personal responsibility in this respect; Curious about the developments within their field and driven to make a difference with the team; Able to empathize with colleagues and stakeholders and

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

22/12/2024 12:37: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.