[CSS] Dropdown menu overlapping.

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Team Lead Applicatie Developers

UPS zoekt een Team Lead Applicatie Developers *THUISWERKEN IS MOGELIJK VOOR DEZE FUNCTIE Heb jij ruime ervaring als applicatieontwikkelaar? En vind je het leuk om boven op de laatste ontwikkelingen in je vak te zitten, mede-developers aan te sturen en altijd te blijven leren? Als Team Lead C# bij UPS werk je aan projecten die in veel verschillende landen worden gebruikt en maak je deel uit van een grote en internationale gemeenschap van agile teams. Dit ga je doen Je gaat aan de slag met het leveren van functionaliteiten voor zeer complexe IT-systemen. Je werkt samen met verschillende agile teams

Bekijk vacature »

Lead Developer in het Spoordomein

Ben jij altijd degene in het team die de knopen doorhakt? Die samen met collega’s de best passende oplossing bepaalt? Wat ga je doen? Als Lead Developer ben je de spil tussen de klant en het ontwikkelteam. Je helpt aan de ene kant de Product Owner met het managen van de backlog en het realiseren van de business doelstellingen. En aan de andere kant zorg je voor een stabiele, flexibele software applicatie van hoge kwaliteit. Je zoekt continu naar verbeteringen in de architectuur, de gebruikte technologieën, het proces en de mensen. Je daagt je team uit om met goede ideeën

Bekijk vacature »

Senior Applicatieontwikkelaar

UPS zoekt een Senior Applicatieontwikkelaar *Thuiswerken is mogelijk voor deze functie Ben jij een gedreven applicatieontwikkelaar met minimaal drie jaar werkervaring? En wil je een uitdagende baan met impact én jezelf breed ontwikkelen? Bij UPS bouw je mee aan complexe systemen die wereldwijd worden gebruikt en krijg je alle ruimte om nóg beter te worden in je vak. Dit ga je doen In een dynamisch scrumteam werk je aan de hand van processen en technologieën zoals CI/CD en DevOps aan het behalen van jullie doelen. Je bent betrokken bij alle facetten van applicatieontwikkeling: van ontwerpen en bouwen tot testen en

Bekijk vacature »

Senior Developer C#

UPS is looking for a Senior Developer C# *REMOTE WORK POSSIBLE FOR THIS ROLE* As a Senior Developer at UPS you work on delivering functionality for highly complex IT systems. You collaborate in agile teams and participate in emerging technologies and processes like CI/CD and DevOps to ensure that we meet our objectives effectively and efficiently. Your primary role is to perform full system life cycle activities, e.g. analysis, technical requirements, design, coding, testing and the implementation of software. Working in our Europe development center in Eindhoven means working in an international team with onsite people as well as team

Bekijk vacature »

Java/Perl Developer @ Rotterdam

2021-07-30 iSense Java/Perl Developer Java/ Perl Developer ISBO50655 Nieuw Organisatie De organisatie is een ambitieuze en vooruitstrevende speler in de markt in de regio Rotterdam. Ze zijn de snelst groeiende in hun branche. Met een excellent aanbod en service willen zij de beste keuze zijn voor hun bestaande en nieuwe klanten. Dit alles doen zij met plezier en enthousiasme. De organisatie is te omschrijven als informeel, pragmatisch en dynamisch. Onze klant is opzoek naar een Java/ Perl Developer. Samen met een team van 8 engineers ben je verantwoordelijk voor alle software-innovaties en -optimalisaties, voor alle facetten binnen de organisatie. Denk

Bekijk vacature »

C# Software Ontwikkelaar MVC ASP.NET / EHerkenning

Voor wie je gaat werken: Ons bedrijf is leverancier van eHerkenning. Ben jij een C# Software Ontwikkelaar? Heb je ervaring met C# ASP.NET, MVC en Web API? Vaste baan: C# Software Ontwikkelaar ASP.NET EHerkenning 2.800 - 4.300 C# Software Ontwikkelaar Wij zijn een groeiend softwareontwikkelingsbedrijf. Wij ontwikkelen betrouwbare online software voor de overheid op het gebied van van eHerkenning. We zijn een veelzijdige organisatie. Je werkt voor onze eigen IT organisatie. We werken met moderne technologie en staan open voor innovatie. Wat wordt er van jou verwacht?: Voor de vacature als C# Software Ontwikkelaar Zaandam EHerkenning ga je het volgende

Bekijk vacature »

Android Software Developer / Atlassian

Over het bedrijf: Wij zijn een grote speler binnen app development. Ben jij een ervaren Android Developer? Ben je een expert met Android architectuur? Vaste baan: Android Software Developer Kotlin 2.700 - 4.300 Android Developer Op dit moment zijn we een scale-up. We zijn een sterke speler binnen app development en zijn hard op weg om marktleider te worden. Wij bieden verschillende opleidings- en ontwikkelingsmogelijkheden binnen ons bedrijf, waardoor je de kans krijgt om door te groeien. Daarnaast hebben we een laagdrempelige en gezellige bedrijfscultuur. Bij ons werk je aan onze eigen bedrijfsapplicaties. Je ontwikkelt met ons de meest nieuwe

Bekijk vacature »

Online Marketing Analyst

Vacancy: Online Marketing Analyst Looking to work in an international company with more than 35 different nationalities where collaboration and innovative ideas are key to drive future success? Seeking a role where you can add value and have the opportunity to develop and grow? Office Depot Viking has an exciting opportunity for an Online Marketing Analyst to join our European headquarters in Venlo, the Netherlands. The role is a fulltime, permanent position offering an excellent salary and benefits package. Your role as an Online Marketing Analyst You will be part of the Online Analytics team. This team plays a crucial

Bekijk vacature »

.NET Developer @ Amsterdam

2020-12-23 iSense .NET Developer Ga jij aan de slag als .NET Developer bij een van de grotere spelers binnen de financiele dienstverlening? Wil jij graag werken met onder andere C#, SQL, MVC, en WCF binnen een grote organisatie om de applicaties binnen de organisatie verder te ontwikkelen en te onderhouden? Lees dan verder! ISKO47001 Nieuw Organisatie De organisatie is werkzaam in de financiële dienstverlening met meer dan 200 medewerkers en meer dan 250.000 eind gebruikers is het een van de grotere binnen haar branche. Je komt te werken in een team waarmee je verantwoordelijk bent voor het ontwikkelen en onderhouden

Bekijk vacature »

Senior Applicatieontwikkelaar

UPS zoekt een Senior Applicatieontwikkelaar *Thuiswerken is mogelijk voor deze functie Ben jij een gedreven applicatieontwikkelaar met minimaal drie jaar werkervaring? En wil je een uitdagende baan met impact én jezelf breed ontwikkelen? Bij UPS bouw je mee aan complexe systemen die wereldwijd worden gebruikt en krijg je alle ruimte om nóg beter te worden in je vak. Dit ga je doen In een dynamisch scrumteam werk je aan de hand van processen en technologieën zoals CI/CD en DevOps aan het behalen van jullie doelen. Je bent betrokken bij alle facetten van applicatieontwikkeling: van ontwerpen en bouwen tot testen en

Bekijk vacature »

Ervaren C# .NET Developer / Javascript

Over het bedrijf: Wij leveren software aan beurzen, banken en pensioenfondsen. Ben jij een ervaren software ontwikkelaar? Heb jij ervaring met C# en Javascript? Vaste baan: Sr C# Developer C# .NET Javascript 3.500 - 5.000 Senior C# Developer Wij zijn een groeiend en innoverend bedrijf dat wereldwijd adviseert over financiële informatie- en analysesystemen die gebruikt worden door bijvoorbeeld banken en pensioenfondsen. Bij ons werk je aan onze eigen bedrijfsapplicaties. Je ontwikkelt met ons de meest nieuwe software. Wij blinken uit als het gaat om de inzet van technologie. Wij staan open voor elke nieuwe trend. Onze systemen zijn groot en

Bekijk vacature »

Technical Lead Developer met doorgroei mogelijkhed

Voor een toonaangevende specialist in softwareoplossingen gericht op strategisch portfolio management ben ik op zoek naar een ambitieuze Technical Lead. De applicatie is volop in ontwikkeling. Zo worden er vele nieuwe functionaliteiten toegevoegd in .Net Core en staat een migratie naar de Azure op de planning. Om deze ontwikkeling te begeleiden en het team aan te sturen, zijn ze op zoek naar een ambitieuze Technical Lead. Wat je gaat doen: Een roadmap maken voor de komende jaren De juiste architectuur neerzetten, hands-on ontwikkelen (front-end en back-end) De migratie naar Azure begeleiden Het 8-koppige ontwikkel team inhoudelijk aansturen en coachen Communicatie

Bekijk vacature »

OutSystems developer @ Regio Amsterdam

2021-06-22 iSense OutSystems developer Ben jij een ervaren OutSystems developer? Werk jij graag aan uiteenlopende complexe projecten? Lees dan snel verder! ISKO48331 Organisatie Onze opdrachtgever, gevestigd in regio Amsterdam, is een innovatieve dienstverlener die zich richt op grote corporates in verschillende sectoren. Doordat je bij veel verschillende klanten aan de slag zal gaan is geen enkel project hetzelfde. De organisatie kenmerkt zich door hoge mate van professionaliteit en innovatieve oplossingen. In de rol van OutSystems developer zal jij verschillende grote klanten helpen om efficiënte OutSystems oplossingen te ontwikkelen en implementeren. Jij zal hierbij vanuit jouw expertise de klant adviseren over

Bekijk vacature »

Java Developer Noord-Nederland

Heb jij een passie voor technologie en ben jij altijd al als eerste op de hoogte van ontwikkelingen en innovaties? Weet jij hoe je de verbinding moet maken tussen business en techniek? Dan ben je welkom bij ons! Wat ga je doen? Als Java developer bij CGI ga je deel uitmaken van de grootste en meest actieve Java community van Nederland. Je levert een bijdrage aan de technische realisatie van complexe systemen voor onze klanten. Hierbij maak je in eenvoudige taal aan de klant duidelijk welke softwareoplossingen op zijn of haar organisatie van toepassing kunnen zijn. Je weet voor onze

Bekijk vacature »

Fullstack developer

Droom jij in PHP of wel JavaScript? Heb jij wel eens een nieuwsbrief ontvangen en gedacht dit kan ik beter en slimmer maken? Wij zoeken dan jou! Wij zijn namelijk opzoek naar zowel front-end developers als backend developers. Functieomschrijving Jij gaat aan de slag om de toekomst te veranderen van e-mails. Jij bent de aangewezen persoon die aan de slag gaat om te werken aan een toekomst waar wij e-mails krijgen die nuttig zijn en superhandig zijn. Je gaat samen met 50 andere collega's in een super open omgeving aan het werk waarbij iedereen dezelfde taal spreekt. Naast werken is

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

02/08/2021 11:51:44
 
- 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.