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

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 »

Senior Java Developer

Functie We eisen van onze klanten dat de software die we gaan bouwen of aan sleutelen van hoog kwaliteit is. Hoe kun jij bestaande software verbeteren, als de core gewoon niet klopt? We zijn op zoek naar senior Java developers, lead developers, scrum masters en architecten. Je zal veelal met Java, JEE, Spring Boot en microservices gaan werken. We kijken niet alleen naar wat het beste is voor de klant, maar ook voor jou als consultant. Leasebudget? Geregeld! Trainingsprogramma naar wens? Geregeld! Altijd een opdracht hebben? Geregeld! Vanwege ons reputatie nemen onze klanten altijd Javanen aan. Waar gaat jouw hart

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 »

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

Junior Developer met MBO/HBO opleiding?

Bedrijfsomschrijving Deze organisatie zoekt enthousiaste junior developers die gericht zijn op het versoepelen van logistieke processen. De IT van de klanten wordt op alle fronten aangepakt: websites, (web)applicaties, CRM systemen, responsive mobile applicaties.. je kan het nog niet zo gek bedenken of mijn klant is er mee bezig. Concreet ga je onder andere bezig met magazijnsoftware, kassasoftware, administratieve software en andere software gericht op logistieke processen. Op alle fronten word je ingezet en dat maakt de functie gigantisch veelzijdig. Het kan zijn dat je focus even ligt op back-end development van websites of webapplicaties (middels C# en/of Delphi), maar het

Bekijk vacature »

PHP Webdeveloper JavaScript

Voor wie je gaat werken: WR zoekt voor een vaste medewerker voor de volgende werkgever, je treedt gelijk in dienst bij deze werkgever: Deze werkgever is een reisorganisatie. Ben jij een enthousiaste webdeveloper? Heb jij ervaring met PHP? Vaste baan: PHP Webdeveloper JavaScript Symfony 3.000 - 4.500 Webdeveloper Deze werkgever is een reisorganisatie en richten ons vooral op de reiziger die kiest voor een hoge mate van luxe, comfort, kwaliteit, service en flexibiliteit. Bij deze organisatie krijgen medewerkers veel verantwoordelijkheid, is er ruimte voor eigen initiatief en ontplooiing en het uitbreiden van uw vakkennis staat centraal. Deze werkgever is een

Bekijk vacature »

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 »

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 »

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 »

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 »

Junior/medior PHP developer / Onderwijssector

Functie Momenteel zijn ze op zoek naar een 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), Vue.js

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 »

Front-end developer / Supply Chain / Angular, Reac

Functie Het development team bestaat momenteel uit 9 fullstack (Python en .NET) developers. Binnen het team ga jij je toespitsen op het creëren van de optimale toegankelijkheid en user experience. Om dit voor elkaar te krijgen zul je ontwerpen, programmeren, testen en implementeren. Het hele proces dus! Maar ook bijvoorbeeld meedenken over strategie en design. Hierin krijg je veel vrijheid om de functie naar eigen inzicht in te vullen en te pionieren. Alle data die wordt gebruikt is zichtbaar in een webapplicatie, geschreven in Angular en React. Momenteel zijn ze bezig om de dashboards anders vorm te geven en 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 »
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

19/08/2022 19:13:12
 
- 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.