[CSS] Dropdown menu overlapping.

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Randstad - Fullstack Java Developer (Freelance/ZZP

Start date: ASAP Duration: 1 year initially Hours per week: 40 (32 minimum) Dutch is mandatory Max hourly rate: 85€ Strong communicator There is a vacancy in the Corporate Client Solutions (CCS) team. This team works closely together with the Online Client Solutions (OCS) team and the product owner on the client portal. Through the web portal, the various services from the business are delivered to the clients of Randstad Group Netherlands. CCS works for the corporate customers of Randstad and OCS works for customers in the SME segment. Both teams consist of a number of full stack developers, an

Bekijk vacature »

Full Stack Java Developer

Functieomschrijving Are you an experienced Full Stack Java Developer looking for an international, creative and innovative environment? Would you like to work on a self-service data platform, making sure our data makes its way from a vast array of sources to the right place? At Randstad Groep Nederland (HQ) we are looking for you! We’re looking for a Full Stack Java Developer available to join our internal team immediately. Full Stack Java Development at Randstad Groep Nederland (HQ) Team Chef’s Special consists of a group of experienced professionals who together are pioneering in a development environment that is new to

Bekijk vacature »

Senior Robotics Developer (Freelance/ZZP)

Duur opdracht: 12 mnd (met optie tot verlenging) We zoeken senior profielen. Die junioren kan bijscholen op de technische skills. Wordt 1x per week op kantoor (Eindhoven) gewerkt. Voertaal is Nederlands & Engels. Start datum: ZSM Max tarief: 74€ Wij zijn ter versterking van het RPA team van Operations Financieren per direct op zoek naar een RPA Engineer die ons kan helpen bij de ontwikkeling van de robots. Bij voorkeur kennis van cq. ervaring met Kofax Kapow en ervaring met het werken in grote organisaties met complexe systemen. Het RPA Team team zorgt voor de verdere optimalisatie van de processen

Bekijk vacature »

Senior Robotics Developer (Freelance/ZZP)

Duur opdracht: 12 mnd (met optie tot verlenging) We zoeken senior profielen. Die junioren kan bijscholen op de technische skills. Wordt 1x per week op kantoor (Eindhoven) gewerkt. Voertaal is Nederlands & Engels. Start datum: ZSM Max tarief: 74€ Wij zijn ter versterking van het RPA team van Operations Financieren per direct op zoek naar een RPA Engineer die ons kan helpen bij de ontwikkeling van de robots. Bij voorkeur kennis van cq. ervaring met Kofax Kapow en ervaring met het werken in grote organisaties met complexe systemen. Het RPA Team team zorgt voor de verdere optimalisatie van de processen

Bekijk vacature »

Wolters Kluwer - PHP Developer (Freelance/ZZP)

Voorstellen met CV en korte toelichting 2 dagen naar kantoor (di + do) Ontwikkelen van producten van Schulinck. Product: https://gripop.schulinck.nl/ Startdatum: ZSM Max tarief: 90€ per uur Procedure: Gesprek en test: code en analyse (oplossingsvermogen). Periode is tenminste 6 maanden met optie op verlenging Fullstack PHP Developer Ben jij een ervaren Fullstack PHP Developer die op zoek is naar een nieuwe uitdaging? Vind je het belangrijk om werk te doen waarmee je het verschil maakt in de maatschappij? En wil je onderdeel worden van ons ervaren IT-team? Lees dan snel verder! Schulinck, onderdeel van Wolters Kluwer Schulinck (onderdeel van Wolters

Bekijk vacature »

PHP developer/ Laravel

Functie Het team telt momenteel 20 collega’s, bestaande uit developers (front- en backend) en het operations team, waaronder ook het management en twee scrum masters vallen. Ze zijn op zoek naar een PHP developer die in staat is zelfstandig te werken. Je komt te werken in één van de drie scrumteams en gaat aan de slag met een project voor de klant. Het fijne hieraan is dat je wel afwisseling hebt qua werk, maar tegelijkertijd doorlopend werkt voor bestaande klanten. Hierdoor krijg je ook de kans om echt de diepte in te gaan en innovatieve technische oplossingen neer te zetten.

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 »

Medior Senior Frontend developer

Functie Binnen de organisatie bestaan er developer teams bestaande uit totaal 11 man. De verdeling van deze teams is opgebouwd tussen de backend en de frontend. Op dit moment zijn we op zoek naar een frontend-developer die ons team kan komen versterken. Dit door de toename van opdrachtgevers. Als frontend developer heb jij oog voor detail. Samen met de andere ux-er uit je team zorg je voor passende oplossingen. Je werkt samen om een zo’n gebruiksvriendelijke interface te bouwen. Daarnaast ga je in overleg met de backenders hoe je het beste de API’s kunt koppelen. Je denkt mee aan de

Bekijk vacature »

KPN - Backend Developer - Product Master (Freelanc

Must: Scala and Akka Senior positon Start date: ZSM End date: 01-07-2023 Max hourly rate: 79,25€ Your job as a Backend Developer Many KPN employees in all different types of processes rely on accurate and complete product data. The product master will be a new master data management implementation within KPN for the business market. It supports the goals of KPN to become the best service provider, simplification in processes and IT, digitalization and most of all to become a data driven organization. The essence is to have a single master platform that embodies all the needed product data in

Bekijk vacature »

Randstad - Salesforce Developer (Freelance/ZZP)

Startdate: ASAP As part of our strategy, Randstad is strengthening its digital capabilities and strives to work more closely with the 38 Randstad countries in collective leadership. The program that will bring many of these developments together is Connect IT. The program will start with the implementation in the Netherlands and will become the main platform for all operating companies (opcos) of Randstad in the coming years. The platform is synchronized with omnichannel, data, marketing and IT service solutions and is based on Salesforce and Bullhorn technology. The challenge is to keep all roadmaps and priorities aligned as the core

Bekijk vacature »

C#. NET Software Ontwikkelaar Backend

Over het bedrijf: WR zoekt voor een vaste medewerker voor de volgende werkgever, je treedt gelijk in dienst bij deze werkgever: Wij ontwikkelen en produceren systemen voor de distributie van bedrijfskleding. Ben jij geschikt als Software Engineer? Heb je ervaring in een soortgelijke functie? Vaste baan: C#. NET Software Ontwikkelaar Backend HBO 3.300 - 5.000 Software Engineer Wij ontwikkelen en produceren systemen voor de distributie van bedrijfskleding. Deze werkgever levert volledig maatwerk voor bijv. ziekenhuizen. Ons bedrijf heeft een platte structuur en er is een informele sfeer. Wij hebben uitstekende vakspecialisten in huis, die graag hun kennis met jou delen.

Bekijk vacature »

Oracle PL/SQL developer

Wat je gaat doen: In de functie van Oracle Developer werk je zelfstandig of in teamverband mee aan projecten bij onze opdrachtgevers. Je bent verantwoordelijk voor de bouw en implementatie van bedrijfskritische applicaties. Daarnaast adviseer je de opdrachtgever over de inzet van verschillende technologieën tot aan de implementatie van de diverse systemen. Je hebt brede interesse en naast projectervaring met Oracle, heb je veel kennis opgedaan met de traditionele Oracle systemen zoals PL/SQL, Forms en Designer. Via trainingen en opleidingen kunnen we je bijvoorbeeld ook ondersteunen om kennis van APEX te krijgen of te vergroten. Wat we vragen: Minimaal 5

Bekijk vacature »

Junior .NET developer

Functie Wij zijn bezig met het ontwikkelen van een nieuw product en wij hebben jouw hulp hierbij nodig! Als junior .NET ontwikkelaar krijg jij de kans om samen met ons deze nieuwe uitdaging aan te gaan! Momenteel bestaat ons team uit drie interim Software Engineers. Twee hiervan zijn zeer ervaren .NET specialisten die inmiddels hun strepen in dit vakgebied al hebben behaald. Ook hebben wij een junior als onderdeel van ons team die zich op dit moment nog bezig houdt met de Front-end (Angular/TypeScript), maar zich nu ook meer gaat verdiepen in de backend. Wij willen ons team graag verder

Bekijk vacature »

Randstad - Salesforce Developer (Freelance/ZZP)

Startdate: ASAP As part of our strategy, Randstad is strengthening its digital capabilities and strives to work more closely with the 38 Randstad countries in collective leadership. The program that will bring many of these developments together is Connect IT. The program will start with the implementation in the Netherlands and will become the main platform for all operating companies (opcos) of Randstad in the coming years. The platform is synchronized with omnichannel, data, marketing and IT service solutions and is based on Salesforce and Bullhorn technology. The challenge is to keep all roadmaps and priorities aligned as the core

Bekijk vacature »

Randstad - Salesforce Developer (Freelance/ZZP)

Startdate: ASAP As part of our strategy, Randstad is strengthening its digital capabilities and strives to work more closely with the 38 Randstad countries in collective leadership. The program that will bring many of these developments together is Connect IT. The program will start with the implementation in the Netherlands and will become the main platform for all operating companies (opcos) of Randstad in the coming years. The platform is synchronized with omnichannel, data, marketing and IT service solutions and is based on Salesforce and Bullhorn technology. The challenge is to keep all roadmaps and priorities aligned as the core

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

17/08/2022 00:17:51
 
- 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.