firefox center fixed div

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

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 »

Back-end programmeur

Functieomschrijving Heb jij kort geleden je MBO of HBO ICT in ontvangst mogen nemen? Of ben je klaar voor een nieuw hoofdstuk in jouw carrière? Voor een uitdagende werkgever in de regio van Tilburg zijn wij op zoek naar een ambitieuze back-end programmeur met affiniteit met MS Acess. Samen met een enthousiast team ben je verantwoordelijk voor het bouwen van maatwerk software voor hun klanten. Je hebt kennis of ervaring van SQL, Maar affiniteit met MS Acess is nog belangrijker. Je bent sociaal naar klanten en flexibel ingesteld. Je denkt altijd in kansen en gaat graag de uitdaging aan. Verder

Bekijk vacature »

Developer Full Stack

Functie omschrijving Full Stack Developer gezocht! Wij zijn op zoek naar een Full Stack Developer voor een bedrijf in de regio Nijkerk. Je maakt in deze functie onderdeel uit van een groeiend team met een goede ambitie waarbij eenheid, betrokken en overtreffen de belangrijkste kernwaardes zijn. Het bedrijf werkt volgens de AGILE/SCRUM methode, wat je o.a. terug vindt in de tweewekelijkse sprints, retrospectives en een daily standup. Je takenpakket bestaat uit: Bijdragen aan het door ontwikkelen, onderhouden en optimaliseren van een Saas applicatie; Bijdragen aan de innovatie van het bedrijf en hun klanten; Het ontwikkelen op de laatste technologie van

Bekijk vacature »

Front end developer

Functie Het team bestaat uit User Experience designers, Data Scientists en Software Engineers met passie voor hun vak. De consultants en ontwikkelaars werken volgens de Design Thinking methode waarbij de eerste stappen van ontwerp en ontwikkeling zullen samenkomen in een proof of concept. Nadat is vastgesteld dat de oplossing voldoet aan de belangrijkste behoeftes worden producten of services gevalideerd door middel van korte iteraties. Hiermee zorgen ze ervoor dat het werk voldoet aan de technische vereisten en gebruikersbehoefte. Door het inzetten van de nieuwste technologieën die toekomstbestendig zijn weten ze klanten omver te blazen. Ook geven en organiseren ze veel

Bekijk vacature »

Functioneel applicatiebeheerder - SOP-SYS-SAM

TenneT is hard groeiend om de onze ambities waar te kunnen maken. Zo nemen wij een leidende rol in het aanjagen van de energietransitie. Het werven van nieuw talent speelt daarin een cruciale rol. Wij zijn op zoek naar een gedreven Functioneel Applicatiebeheerder op onze locatie Arnhem die hieraan wil bijdragen en misschien ben jij dat wel? Jouw bijdrage aan TenneT Je gaat samenwerken in een team van circa 15 functioneel applicatiebeheerders en gaat onderdeel uitmaken van een DevOps team. Met dit team ga je applicaties (laten) ontwikkelen en beheren. Hierbij concentreer je je vooral op de functionele aspecten, zodat

Bekijk vacature »

C++ Ontwikkelaar

Functieomschrijving Ben jij toe aan een nieuwe uitdaging en werk je graag en goed in C++ en C#? Dan zijn we op zoek naar jou! Dit bedrijf is dé specialist op het gebied van automatiseringssoftware voor een specifieke branche en ze zijn per direct op zoek naar versterking in hun development team. Wat jij gaat doen binnen jouw rol als C++ ontwikkelaar; Je vertaalt de wensen van gebruikers naar een functioneel ontwerp. Je houdt je bezig met het ontwerpen, programmeren en testen van product aanpassingen. Je gaat nieuwe product releases implementeren in de projectteams. Je gaat de effecten van nieuwe

Bekijk vacature »

Senior Front-end Developer

Wordt jij de nieuwe Front end specialist / developer? Dan werk je dagelijks met collega’s aan de mooiste IT-projecten. Sogeti is een organisatie met een goede werksfeer en zo min mogelijk hiërarchische verhoudingen. Deze snelgroeiende groep collega’s krijgt energie van hun vak en dat merk je op de werkvloer. Onze klantenkring is groot en divers, dat vraagt om flexibiliteit van jou. Tegelijkertijd betekent dit dagelijks nieuwe dingen leren én dat geen werkdag hetzelfde is. Natuurlijk krijg jij de mogelijkheid je te certificeren. We organiseren regelmatig technische Meet-ups en doen we veel aan kennisdeling waarbij iedereen welkom is, zowel binnen als

Bekijk vacature »

Front-end developer (React)

Functie Het frontend team bestaat momenteel uit 4 dedicated front-enders en is hard aan het groeien! Ook werken er diverse designers waar je veel mee schakelt. Samen leveren jullie een essentiële bijdrage aan de applicaties die ze voor hun klanten realiseren, jij bent hierin de schakel tussen de eindgebruiker en de slimme backend. Je werkt in het frontend team samen met de backend teams en product owners om te zorgen dat onze applicaties een fijne gebruikerservaring opleveren. Ze werken o.a. met: React, Atomic design, Styled components, JavaScript / TypeScript, NPM, Webpack Blade templates, HTML, SCSS, Git flow. Eisen • HBO

Bekijk vacature »

SQL database developer

Functieomschrijving Heb jij ongeveer 3 jaar ervaring als SQL database developer? Dit bedrijf bouwt applicaties om processen in distributiecentra te optimaliseren. Ter uitbreiding van het development team zijn wij op zoek naar een SQL database ontwikkelaar. Wil jij werken voor een groeiende werkgever in regio Breda waar jij de ruimte en tijd krijgt jezelf te ontwikkelen? Lees dan snel verder! Hoe ziet jouw takenpakket eruit? Je houdt je bezig met het creëren en bouwen van MS SQL server databases; Je werkt aan innovatieve softwareoplossingen voor het verbeteren en/of vernieuwen van logistieke processen; Je gaat projecten vanaf het begin tot het

Bekijk vacature »

Traineeship Full Stack Java developer

Dit ga je doen Start jij op 7 augustus bij de Experis Academy dan kickstart jij jouw IT-carrière! We leiden je op tot een gewilde Full Stack Java Developer met alle kennis en vaardigheden die nodig zijn om de arbeidsmarkt te betreden. Wat kun je verwachten, hoe zit een dag in het leven van een Trainee eruit? Periode 1 Als Full Stack Java Developer Trainee volg je vanuit huis een op maat gemaakte onlinetraining die in het Engels wordt gegeven. De tijd die je kwijt bent aan het volgen van de training kun je vergelijken met een fulltime werkweek. In

Bekijk vacature »

PHP back-end developer gezocht!

Functie Werk je liever zonder druk en keiharde deadlines maar met de focus op kwaliteit? Dan kom je hier op de juiste plek terecht! In Het team bestaat momenteel uit 12 developers, hiernaast werken er collega’s van front-end, UX maar ook marketing/sales en support. In iedere sprint ontwikkel je samen functionaliteiten met als uitdaging om de klanten de beste gebruikerservaring te bieden. Ze bieden een werkplek waar je jezelf kunt blijven ontwikkelen, en mee te werken aan zowel bestaande als nieuwe mogelijkheden. Eisen • HBO werk- en denkniveau (ze kijken niet naar een papiertje) • Je denkt graag mee over

Bekijk vacature »

C#.NET ontwikkelaar

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: 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. Je bouwt webshops, webapplicaties en websites, dit doe je door middel van ASP.NET, MVC Framework en C#. Je zorgt voor de optimalisering van bestaande software en de automatisering van

Bekijk vacature »

Software developer

Functie Momenteel zijn ze op zoek naar een Software developer die, veelal fullstack, mee gaat werken aan de 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),

Bekijk vacature »

Ervaren C#.NET programmeur

Functieomschrijving Voor een moderne werkgever in regio Prinsenbeek zijn wij op zoek naar een ervaren C#.NET programmeur die graag de uitdaging aangaat. Je houdt je bezig met het ontwikkelen van maatwerk webapplicaties voor diverse klanten, waarbij complexe processen optimaal worden ondersteund. Verder ziet jouw takenpakket er als volgt uit: Ontwikkelen en onderhouden van C#.NET-applicaties; Schrijven van hoogwaardige, herbruikbare codes; Schrijven van technische documentatie en gebruikershandleidingen; Bijdragen aan het ontwerp en de architectuur van softwaretoepassingen; Troubleshooten en oplossen van bugs in softwaretoepassingen; Werken met databases en dataopslagoplossingen; Implementeren van beveiligingsoplossingen en het waarborgen van de beveiliging van applicaties en gegevens. Bedrijfsprofiel

Bekijk vacature »

Medior/senior front end developer

Functie Vanwege de groei binnen het bedrijf zijn we op zoek naar versterking in het development team. Als back-end developer bouw je aan de bedrijfssoftware die ons helpt bij de primaire processen. Een leuk (intern) project dus waarbij je de software continu doorontwikkeld! Je werkt in een klein team, we hebben dagelijks stand-ups en iedere twee weken een scrum-sessie, begeleid door onze Scrum Master. Hierin krijg je uitgebreid de kans om je ideeën te presenteren, en te overleggen met je mede-ontwikkelaars en de Product Owner. Binnen de ontwikkelteams gebruiken we Trello, Gitlab, Jiira, Confluence en Boockstack. Hiernaast werken ze met

Bekijk vacature »
Jeffrey

Jeffrey

23/03/2008 23:16:00
Quote Anchor link
Goedenavond mensen,

Ik heb een vraagje.

Ik heb een layout gemaakt voor IE6, 7 en Firefox en deze bevat een aantal divs onderelkaar waarvan de bovenste twee fixed (header en menu).

Nu wil ik de divs gecentreerd weergeven op de pagina, maar firefox lijkt problemen te hebben, want die laat ze gewoon linksboven in mijn scherm zien.
In IE6 en 7 werkt het wel prima.

Heb van alles geprobeerd, maar niets lijkt te helpen.

Ik heb margin: 0px auto; geprobeerd en left: 50%; margin-left: -(width/2)px;, maar niets lijkt te werken voor Firefox.

Ik snap er niks meer van, heeft iemand een idee?

Dit is de bron van het bestand:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<title> CSS Div testing </title>

<style type="text/css">

body {
    margin: 0 auto;
    padding: 0;
    border: 0;
    height: 100%;
    overflow-y: auto;
}

#header {
    border: 1px solid #000;
    margin: 0px auto;
    width: 700px;
    height: 60px;
    position: fixed;
    top: 0px;
}

#menu {
    border: 1px solid #000;
    margin: 0px auto;
    width: 700px;
    height: 20px;
    position: fixed;
    top: 0px;
}

#page {
    border: 1px solid #000;
    margin: 0px auto;
    margin-top: 0px;
    width: 700px;
}

#footer {
    border: 1px solid #000;
    margin: 0px auto;
    margin-top: 0px;
    width: 700px;
    height: 30px;
}

* html #header {
    position: absolute;
}

* html #menu {
    position: absolute;
}

</style>


<!--[if lte IE 6]>
   <style type="text/css">
   /*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
   /*]]>*/
   </style>
<![endif]-->


</head>

<body>

    <div id="header">
        Header
    </div>
    
    <div id="menu">
        Menu
    </div>

    <div id="page">
        <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
        <p>
            Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </p>
        <p>
            Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
        </p>
        <p>
            Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
        <p>
            Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
        </p>
        <p>
            At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
        </p>
        <p>
            Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
    </div>
    
    <div id="footer">
        Footer
    </div>

</body>
</html>


Ik dank u allen alvast voor de moeite.
 
PHP hulp

PHP hulp

27/05/2026 05:43:37
 
Toine vd P

Toine vd P

23/03/2008 23:20:00
Quote Anchor link
Tja, crossbrowser centralisatie blijft tricky, maar probeer het volgende eens:

#header, #menu {
position: relative;
}

groet,

Twan
 
Joren de Wit

Joren de Wit

23/03/2008 23:22:00
Quote Anchor link
Waarom die position:fixed en position:absolute? Die heb je waarschijnlijk helemaal niet nodig en zijn hoogstwaarschijnlijk de oorzaak van je probleem. Sloop die er dus eens uit...
 
Jeffrey

Jeffrey

23/03/2008 23:25:00
Quote Anchor link
Het is een redelijk drama, ze doen allemaal net ff anders.

Maar #header en #menu op position: relative; zetten zorgt ervoor dat hij het ook centreert in FF, alleen dan zijn ze niet meer sticky in IE7 en FF en ik wil de header en het menu divje wel sticky hebben.

'Blanche:
Waarom die position:fixed en position:absolute? Die heb je waarschijnlijk helemaal niet nodig en zijn hoogstwaarschijnlijk de oorzaak van je probleem. Sloop die er dus eens uit...


Die absolute is voor IE6 om de header sticky te maken, want die begrijpt fixed niet.
Gewijzigd op 01/01/1970 01:00:00 door Jeffrey
 
Joren de Wit

Joren de Wit

23/03/2008 23:29:00
Quote Anchor link
Wat bedoel je met 'sticky'?
 
Toine vd P

Toine vd P

23/03/2008 23:29:00
Quote Anchor link
@Jeffrey Dan maak je een IE / FF hackje, stel dat je ze in IE op absoluut wilt hebben, dan doe je

#menu, #header {
position: relative;
//position: absolute;
}

IE leest alsnog de laatste position aankondiging en overschrijft dus RELATIVE, IE schrapt alle " vreemde " karakters die je ervoor zet ( kutbrowser is het ook BLEGH )

Zou moeten werken, maar Blanche heeft wel een punt. Zit een hoop wazige / nutteloze crap in je code, zoek de betekenissen van de eigenschappen die je opgeeft even op, ( in plaats van telkens op de gok F5'en )

( EDIT: Je zou ook trouwens je top gewoon absoluut kunnen maken en 1 content wrapper div overlfow: auto mee kunnen geven , maar ik weet niet precies wat je wilt bereiken )
Gewijzigd op 01/01/1970 01:00:00 door Toine vd P
 
Jeffrey

Jeffrey

23/03/2008 23:37:00
Quote Anchor link
@ Blanche

Met sticky bedoel ik dat de content er onderdoor scrolled.
Dus dat hij altijd aan de bovenkant van de pagina blijft plakken.

We gaan het nog even proberen.

Misschien is sommige css wazig, vind ik namelijk ook, maar het één en ander is nodig om in IE6 de header altijd bovenaan de pagina te laten plakken.
Bijv de * html #header met position: absolute.
Gewijzigd op 01/01/1970 01:00:00 door Jeffrey
 
Joren de Wit

Joren de Wit

23/03/2008 23:39:00
 
Jeffrey

Jeffrey

23/03/2008 23:41:00
Quote Anchor link
Inderdaad ja, zoiets is het, alleen is dat over de hele pagina verspreid en ik heb een smallere layout (700px).

Leuke pagina is dat trouwens, heb er al een tijd doorgebracht om wat layouts te bekijken.
 
Jan Koehoorn

Jan Koehoorn

24/03/2008 08:49:00
Quote Anchor link
Als je een header op zijn plek wilt laten staan, heb je inderdaad geen fixed, relative of absolute nodig. Je geeft je header en je menu gewoon de gewenste hoogte, en de content eronder ook. Die content geef je een overflow: auto mee, desnoods een min-height (plus dan een hack voor IE6) en klaar ben je.

Om de hele boel te centreren, zet je alles in een container div met de volgende CSS:

div#container {margin: 0 auto; width: 700px;}
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn
 
Jeffrey

Jeffrey

24/03/2008 13:34:00
Quote Anchor link
Hij is geweldig, thx voor de info Jan :)

Je voorbeeld is zoals ik het wil! Top.

Zal me toch eens wat meer gaan verdiepen in de div wereld.
Ik werkte voornamelijk met tables omdat ik met data uit databases werkte, maar voor de layout van je site zijn divs stukken prettiger.
 
Joren de Wit

Joren de Wit

24/03/2008 13:37:00
Quote Anchor link
Quote:
Ik werkte voornamelijk met tables omdat ik met data uit databases werkte
Dat je met een database werkt is nog geen reden om tabellen voor je layout te gebruiken. Een database icm divs en CSS werkt net zo makkelijk, zo niet makkelijker ;-)
 
Jeffrey

Jeffrey

24/03/2008 13:41:00
Quote Anchor link
Ja dat is zo, maar ik was voorheen nog niet zo thuis in het div wereldje, dus koos ik de 'makkelijke' (lees: bekende) weg.

Inmiddels weet ik wel beter en besef ik dat divs de bom zijn. ;-)
 



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.