[CSS] Dropdown menu overlapping.

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

PHP Backend Developer Javascript

Wie wordt jouw werkgever?: WR zoekt voor een vaste medewerker voor de volgende werkgever, je treedt gelijk in dienst bij deze werkgever: Deze werkgever is een groep tech-gedreven lead generation specialisten. Ben jij geschikt als Backend Developer? Heb je ervaring met Javascript? Vaste baan: PHP Backend Developer Javascript HBO 3.000 - 4.600 Backend Developer Deze werkgever is een groep tech-gedreven lead generatie specialisten verspreid over negen landen (and counting!) die ernaar streven om bedrijven te helpen de best mogelijke ROI te krijgen door middel van hoogwaardige potentiele nieuwe klanten die we voor hen genereren via Facebook, Instagram, display, native en

Bekijk vacature »

Back end developer / PHP Symfony

Functie Jij als senior PHP ontwikkelaar zult je voornamelijk bezighouden met het ontwikkelen van webapplicaties en de juiste infrastructuur hierachter hangen. Op projectbasis werken ze momenteel 1 project per keer af. Doordat ze sneller willen innoveren is er een sterke behoefte om te groeien als organisatie zodat ze aan 2 projecten tegelijkertijd kunnen werken. Projecten worden afgerond via de een eigen manier van Scrum. 3 keer in de week is er een stand up waarin besproken wordt wie wat oppakt. Per project is er telkens een iemand verantwoordelijk en dit is per project iemand anders, omdat degene met de meeste

Bekijk vacature »

Senior Fullstack (web)developer

Functie Als webdeveloper werk je samen met je collega’s aan het vernieuwen en efficiënter maken van het platform. Met de focus op de user experience. Functionaliteiten moeten niet alleen mooi zijn, maar zorgen voor een efficiënter verloop en meer/betere resultaten. Binnen ieder thema worden de te ontwikkelen functionaliteiten en feautures bepaald. Vervolgens worden deze in 2-wekelijkse sprints gedefinieerd. In de refinement fase toetsen alle teamleden de feauture o.b.v. de vooraf gestelde requirements. Hierbij gaan ze proactief op zoek naar edge cases en de impact daarvan op de user experience. Samen bepaal je hoe het precies gebouwd dient te worden, pas

Bekijk vacature »

Lead Webdeveloper Javascript

Wie wordt jouw werkgever?: WR zoekt voor een vaste medewerker voor de volgende werkgever, je treedt gelijk in dienst bij deze werkgever: Wij helpen merken, PR, Media en Marketing Bureaus bij het efficient managen en implementeren van hun ambities. Ben jij geschikt als Lead Webdeveloper? Heb je ervaring in een soortgelijke functie? Vaste baan: Lead Webdeveloper Javascript HBO 4.000 - 6.000 Lead Webdeveloper Ze kijken altijd vanuit verschillende invalshoeken naar het vraagstuk van onze klanten om tot de meest innovatieve oplossingen te komen. Een ontdekkingstocht leidt ten slotte niet langs de gebaande paden en iedere ontdekkingstocht is uniek. Zij werken

Bekijk vacature »

CICD Engineer Developer

Your contribution to TenneT You will work within our multi-disciplinary CI/CD DevOps team. Together with architects, lead developers and engineers you align to identify improvements for the Developer Experience within TenneT. You will define, design, develop, build and run cloud native CI/CD platform services and opionated pipelines that will be: - available on-demand, through self-service automation for DevOps teams, fully documented, tested and secure - high available, disaster resilient - integrated with infra-as-code / config-as-code automation Next to above mentioned tasks you will define standardized building blocks, provide suggestions and tools to help development decrease lead time. You will ensure

Bekijk vacature »

Golang Developer

Dit ga je doen Het bouwen van nieuwe functionaliteiten met Golang; Het inventariseren van de wensen van de klanten en proactief nieuwe ideeen aandragen; Het onderhouden en doorontwikkelen van het platform voor de beste gebruikerservaring; Je denkt mee over het verder vormgeven van het platform. Op termijn stuur je andere ontwikkelaars aan en pak je de rol van CTO. Hier ga je werken Wil jij werken in het centrum van Rotterdam en aan de basis staan van veel mooie ontwikkelingen? Binnen deze start-up kan jij aan de slag gaan als dé technische man. Je bent daardoor verantwoordelijk voor de (door-)ontwikkeling

Bekijk vacature »

PHP ontwikkelaar

Functie Jij komt te werken in een development team van 9 man. Het grootste deel doet back end development en daarnaast is er 1 teamlead en 1 tester in het team. Dit Agile team is van groots belang voor de organisatie omdat zij voornamelijk alle eigen systemen in-house ontwikkelen. Naast het door ontwikkelen van het bestaande platform en de software die daarbij komt kijken, zul jij je ook bezighouden met het realiseren en opzetten van nieuwe projecten binnen het bedrijf. Je staat nauw met de klant in contact om zo hun wensen zo goed mogelijk te kunnen realiseren. Daarnaast ontwikkel

Bekijk vacature »

Als Front-end developer (React) bijdragen aan de z

Functie Het front-end team bestaat uit 2 (medior) developers, momenteel zijn ze op zoek naar een medior of senior developer die dit team komt versterken. Hij of zij zal zich, samen met het team, vooral gaan bezighouden met vraagstukken rondom onderhoud, testen en doorontwikkeling. Zo komt er bijvoorbeeld een update aan m.b.t. het React framework welke zij graag willen doorvoeren. Hierin kiezen ze echt voor kwaliteit en krijg je dan ook de ruimte om zonder strakke deadlines hiermee aan de slag te gaan. Als Front-end developer binnen deze organisatie fungeer je echt als schakel tussen UX (Research) en back-end. De

Bekijk vacature »

PHP Developer

Functie Als ervaren PHP developer kom jij terecht in ons monoliet team, een team wat bestaat uit ervaren developers die op dagelijkse basis in PHP en Symfony werken. Het afgelopen jaar heeft dit team zich gericht op het onderhouden van ons monoliet applicatie. Een ander team richt zich momenteel op de ontwikkeling van een nieuwe Serverless microservice architectuur in AWS wat gebruikt maakt van alle moderne methodieken zoals Event Sourcing, Domain Driven design en CQRS. Dit wordt met Node.js in de backend gedaan en Vue.js in de Frontend. Deze transitie is nu voor zo een 40% klaar en wordt ook

Bekijk vacature »

Full Stack Java Developer

Functieomschrijving Als Senior Java Full Stack Developer binnen ons Client domein maak je directe impact op de dienstverlening van heel Randstad Groep Nederland. Je bent onderdeel van onze interne IT afdeling. Ondanks de domein naam dus geen eindeloze klantopdrachten, maar juist focus op de technische innovatie van onze eigen processen en dienstverlening. Om dit continu te kunnen optimaliseren zitten we middenin een grote transformatie en zijn daarom op zoek naar een tweetal vaste senior developers die ruimte en vrijheid zoeken om hun kennis en ervaring in te zetten. Wat bieden wij? Het nodige vertrouwen en de autonomie om je werk

Bekijk vacature »

Junior Developer GO

Functie Het development team is klein en compact. Dit is altijd zo geweest en zal ook altijd zo blijven. Dit betekent dat je heel nauw samenwerkt met je collega’s en de lijnen erg kort zijn. Er wordt voornamelijk geprogrammeerd in GO, PHP, Javascript en Node.js, maar ook zul je zo nu en dan gebruik maken van talen zoals; C en Python. Wij hebben met veel data te maken en dit is momenteel onze grootste uitdaging op de backend. We maken gebruik van ruim 800 servers, waarvan 600 servers gebruikt worden voor dataopslag. Er draaien meerdere microservices op deze servers, maar

Bekijk vacature »

Team Lead/ Lead developer gezocht (Hands-on, PHP,

Functie Als Team Lead ben je de leider van één van de ontwikkelteams binnen de organisatie. Je leidt als lead developer een goed draaiend team dat werkt aan complexe en duurzame applicaties en API’s. Vanuit je kennis en ervaring ben je in staat het grote plaatje te blijven overzien, en kritisch mee te denken over bijvoorbeeld de architectuur, maar ook de algehele aanpak binnen het project. Je laat je team niet alleen technisch goed functioneren maar ben ook betrokken bij het menselijke aspect. Zo weet jij je collega’s te motiveren en begeleiden in hun dagelijkse werk. Buiten het team ben

Bekijk vacature »

Medior/ Senior PHP developer

Functie Je zal samen met jouw team gaan werken aan verschillende projecten. Dit zijn diverse opdrachten van diverse klanten. Het team bestaat momenteel uit 2 PHP developers die momenteel aangestuurd worden door een mede-eigenaar. Daarnaast zijn er 5 Python developers waarvan 1 Lead (mede-eigenaar) die het team aanstuurt. Ook zijn er 2 externe developers die momenteel het team versterken. Er zijn genoeg developers om jou heen waarmee jij zou kunnen sparren en daarnaast is er de mogelijkheid om jouw ervaring en kennis te delen aan anderen of om anderen te begeleiden/aan te sturen. Door de variëteit binnen het bedrijf zijn

Bekijk vacature »

Medior Fullstack (web)developer

Functie Momenteel bestaat het IT-team uit 2 vaste fullstack ontwikkelaars, beide hebben ze ruime ervaring met het platform en kennen ze echt de ins en outs. Ze zijn open-minded en zoeken ook iemand die met graag met een realistische blik te werk gaat, niet alles kan tegelijk, maar middels korte sprints kunnen ze iedere 2 weken waarde toevoegen aan het platform. Als fullstack (web)developer werk je samen met je collega’s aan het vernieuwen en efficiënter maken van het platform. Met de focus op de user experience. Functionaliteiten moeten niet alleen mooi zijn, maar zorgen voor een efficiënter verloop en meer/betere

Bekijk vacature »

Junior Android developer

Functie Ons team van Android developers is dagelijks bezig met het verzorgen van de Android variant van ons spel, het ontwikkelen van nieuwe game modes, zorgen dat ieder device “compatibel” is, de UI en UX perfect is en alle vragen en suggesties van spelers worden gehonoreerd. Uiteraard werk je met de laatste versie van Java en op de nieuwste, snelste systemen om de workflow positief te beïnvloeden. Ben jij goed met Android, gek op voetbal en wil je werken aan een van ’s werelds meest en langst gespeelde games? Neem dan contact op voor meer informatie. Eisen - Uitstekende beheersing

Bekijk vacature »
Arjen K

Arjen K

10/01/2012 20:36:34
Quote Anchor link
Goedenavond,

Ik weer eens begonnen met scripten. In de tijd dat ik nog bezig was maakte ik al mijn websites nog in tabellen, iets dat tegenwoordig niet meer mag. Vroeger plaatste ik mijn vragen vaak op de website wmcity.nl maar deze is min of meer dood heb ik het idee. Vandaar dit ik hier eens binnen loop :-) Ik heb dus nog erg weinig verstand van de divs, en vooral het positioneren hiervan. Nu heb ik het volgende probleem. De html opzet is als volgt.

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Untitled Document</title>
</head>

<body>
    <div class="head">
        <div class="title">Titel van pagina</div>
    </div>
    <div class="dropdowndiv">
                <ul id="dropdownmenu">
                
                <li><a href="#">Menu 1</a>
                
                    <ul>
                        <li><a href="#">Sub item 2.1</a></li>
                        <li><a href="#">Sub item 2.2</a></li>
                        <li><a href="#">Sub item 2.3</a></li>
                        <li><a href="#">Sub item 2.4</a></li>
                        <li><a href="#">Sub item 2.5</a></li>
                    </ul>
  
                </li>
                
                <li><a href="#">Menu 2</a>
                
                    <ul>
                        <li><a href="#">Sub item 2.1</a></li>
                        <li><a href="#">Sub item 2.2</a></li>
                        <li><a href="#">Sub item 2.3</a></li>
                        <li><a href="#">Sub item 2.4</a></li>
                        <li><a href="#">Sub item 2.5</a></li>
                    </ul>
                                
                </li>

                <li><a href="#">Menu 3</a>
                
                    <ul>
                        <li><a href="#">Sub item 2.1</a></li>
                        <li><a href="#">Sub item 2.2</a></li>
                        <li><a href="#">Sub item 2.3</a></li>
                        <li><a href="#">Sub item 2.4</a></li>
                        <li><a href="#">Sub item 2.5</a></li>
                    </ul>
                                
                </li>
                
            </ul>
    </div>
    <div class="body">Body</div>
    <div class="footer">Footer</div>
</body>
</html>

 


met de volgende css

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

body {
    font-size:100%;
    font-family:Helvetica,Arial,sans-serif;
    }

.head {
    height: 90px;
    width: 1024px;
    background-color: #046380;
    margin-left: 200px;
    margin-right: 200px;
    margin-top: -10px;
    position:absolute;
}

.title {
    font-size: 30px;
    font-weight: 800;
    color: #ffffff;
    width: 160px;
    margin-top: .7em;
    margin-left: 1em;
    position: relative;
    }

.dropdowndiv {
    width: 1024px;
    height: 20px;
    margin-top: 70px;
    margin-left: 200px;
    background-color: #efecca;
    position: absolute;
    }

.body {
    width: 1024px;
    height: 750px;
    margin-top: 90px;
    margin-left: 200px;
    background-color: #efecca;
    position: absolute;
    }

.footer {
    width: 1024px;
    height: 70px;
    margin-top: 90%;
    margin-bottom: 5%;
    margin-left: 200px;
    position: absolute;
    border-top: 2px solid #046380;
    }
    
#dropdownmenu, #dropdownmenu ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

#dropdownmenu li {
    float: left;
    width: 120px;
}

#dropdownmenu ul {
    position: absolute;
    width: 120px;
    left: -1000px;
}

#dropdownmenu li:hover ul {
left: auto;
}


Probleem hier is het volgende, het dropdown menu klapt zichzelf uit onder de body div. Ik zie de list options dus helemaal niet. Als ik de body div even er uit haal zie ik het gehele menu incl.. dropdown. Hoe zorg ik dat de dropdown div bovenop de body div komt te liggen. Heb een hoop lopen googlen maar ik zie het probleem maar niet. Heb een aantal float opties geprobeerd en overflow's maar ik heb echt geen idee of ik hier mee in de buurt zit. Anyone ? Thanks!
Gewijzigd op 10/01/2012 20:46:26 door Arjen K
 
PHP hulp

PHP hulp

14/08/2022 06:00:24
 
- Jim  -

- Jim -

10/01/2012 20:44:23
Quote Anchor link
Je kunt kijken naar z-index.
Daarmee kun je lagen op elkaar plaatsen.
 
Eddy B

Eddy B

10/01/2012 20:45:37
Quote Anchor link
Wil je je titel veranderen in iets wat de inhoud omschrijft?
 
Arjen K

Arjen K

10/01/2012 20:46:58
Quote Anchor link
@Jim, dankje wel, ga er nu naar kijken.
@Eddy, done :)

edit: Jim, mijn dank is zeer groot. Werkt :)
Gewijzigd op 10/01/2012 20:48:33 door Arjen K
 
- Jim  -

- Jim -

10/01/2012 20:54:59
Quote Anchor link
Verkorte 'studie CSS' is wel handig als je veel met DIV's gaat klooien... :p
 
Arjen K

Arjen K

10/01/2012 21:08:56
Quote Anchor link
Ghehe, yeah, working on it. Nogmaals dank!
 
Wouter J

Wouter J

10/01/2012 21:55:45
Quote Anchor link
Allereerst welkom op dit forum (zijn andere leden vergeten :S).

Ondanks dat het werkt wil ik je toch nog wat tips geven:
- Je positioneert veel doormiddel van absolute. Dit is niet waar je naartoe moet werken. Verklein je scherm maar eens en aanschouw wat er gebeurd. Het is veel beter te leren werken via, zoals wij dat noemen, de floating flow methode.. Dit betekend dat je rekening houd met de normale flow van elementen en je werkt doormiddel van margin, padding en float.
- Gebruik in je HTML niet alleen classes. Gebruik ook id's. id's zijn unieke namen voor elmenten, deze mogen maar 1 keer voorkomen en moet je bijv. voor header navigatie content en footer gebruiken. Een id heeft altijd voorrang op een class.
- Niet alles moet in een div. Je hebt ook nog eens 1000den andere tags. Voor titels hebben we bijv. <h1> t/m <h6>, h1 is een zeer belangrijke unieke titel en h6 is de meeste onbelangrijke titel.
 
Arjen K

Arjen K

10/01/2012 22:28:04
Quote Anchor link
Wouter,

bedankt voor je reactie.

- Op het moment dat ik mijn scherm verklein loopt inderdaad de layout niet geheel lekker meer, op zijn minst gezegd. Ik ga wat meer lezen over de floating flow methode.
- Juist gebruik van ID's en Classes is mij duidelijk. Ga dit aanpassen.
- Ik wil toch delen van de pagina van elkaar onderscheiden. Vroeger deed ik dit in tabellen en nu, zoals nu bij mij bekend is, moet dit nu in div containers. Hier binnen maak ik inderdaad gebruik van dingen als H1, H2 enz. maar deze zijn in dit voorbeeld en dit probleem niet relevant.

Bedankt voor je extra info. Ga er mee bezig. Goed behulpzaam forum tot nu toe!
 



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.