[CSS] Dropdown menu overlapping.

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

PHP Developer @ Nijmegen

2021-09-08 iSense PHP Developer Ben jij een PHP Developer met een aantal jaren ervaring en op zoek naar een nieuwe werkgever? Lijkt het je leuk om te werken in een klein team waar je veel zeggenschap hebt en jouw ideeën gewenst zijn en gehoord worden? Lees snel verder en solliciteer! ISMI47696 Nieuw Organisatie Je komt als PHP Ontwikkelaar te werken bij een familiebedrijf, een kleine en zeer succesvolle organisatie. Ze zijn een online verkoopplatform en in Nederland 1 van de grootste op hun gebied. Ze zijn ook internationaal actief, in de rest van Europa. Totaal werken er ongeveer vijftien collega's,

Bekijk vacature »

Python Developer @ Utrecht

2021-09-06 iSense Python Developer Do you like working with Data? Do you have experience in Python and Azure Cloud? Would you like to implement data modelling and processing applications on top of Azure Native Services? Search no further because we have the vacancy for you! ISKE50429 Organization We are looking for several Python Developers who enjoy programming. Together with your team you will design and develop maintainable systems that allow the organization to calculate it’s credit risk. You will have opportunity to remain abreast of the latest market and technological developments and incorporate these in the execution of your development

Bekijk vacature »

C# .Net Developer WPF .NET5 Backend

Bedrijfsomschrijving Deze mooie klant is een ICT partner binnen de groensector, een van de marktleiders op hun specifieke gebied, en inmiddels werken hier zo'n 50 medewerkers samen aan innoverende backoffice toepassingen. De software wordt gebruikt bij vele middelgrote en grote organisaties om zaken te regelen omtrent voorraadbeheer, managementinformatie, facturatie, bestellijsten en allerlei andere logistieke processen. Je komt hier te werken in een uitdagende en steeds veranderende branche waar constant gezocht wordt naar vernieuwing, onderscheidingsvermogen en optimale werkprocessen! De manier van werken hier voor het ICT team is professioneel, maar vrijheid en flexibiliteit is overal terug te zien. Zo werken er

Bekijk vacature »

Systeembeheerder Windows

Medior Systeembeheerder Windows Opleidingsbudget van € 5.000,- Onze opdrachtgevers werken met de nieuwste techniekendus onze medewerkers ook. Daarom bieden we jou uitgebreide opleidingsmogelijkheden en ondersteunen we je maximaal in je ontwikkeling. We bepalen samen met jou een opleidingstraject want niemand wil stilstaan in zijn ontwikkeling, zeker niet in de IT. Wat mag je nog meer verwachten? Direct een arbeidsovereenkomst voor onbepaalde tijd Een salaris tussen de € 3.500,- en € 4.000,- bruto per maand o.b.v. 40 uur Diverse bonussen: - 1800+ uur bonus - Wervingsbonus, een waardebon naar keus, ter waarde van € 1.500,- netto Een onkostenvergoeding van € 100,-

Bekijk vacature »

PHP developer

Briljante werken-bij websites voor clubs als ABN-AMRO, T-Mobile, KWF Kankerbestrijding en Boskalis. Online recruitmentmarketingcampagnes voor Waterschap Rivierenland, Randstad en VDL Nederland. Dit zijn zomaar een paar van de projecten die we al hebben binnengeharkt. En er kan nog meer bij. Welke projecten oogst jij als PHP developer bij Getnoticed? Als PHP developer bij Getnoticed werk je in een team met acht directe collega’s. Bij ons geen hiërarchie of weken beslissingstijd. Dit betekent korte lijnen en snel schakelen. Dat is ook wel nodig bij alle innovatieve projecten waar we tegelijkertijd aan werken, zoals Google Cloud Talent Solution. Jouw functie bij Getnoticed

Bekijk vacature »

Web Developer (m/w/d)

Web Developer IT and Infrastructure EMBL Heidelberg Closing date: 22 October 2021 Contract duration: 4 years (project related) Grading: 6, 7 or 8; depending on experience (monthly salary starting from 3.8k€ up to 4.8k€ after tax, plus other benefits)s Reference number: HD02055 IT Services operates and supports the IT infrastructure and services at EMBL headquarters in Heidelberg and at the laboratory’s sites in Barcelona and Rome. In collaboration with the EMBL-EBI in Cambridge our team is creating and implementing a new web infrastructure for all EMBL websites. We are looking to recruit an enthusiastic Web Developer to join the Software

Bekijk vacature »

Senior C# Developer

You'll build modern applications for Coolblue back’s office. We have a lot of friends, and they crave well-structured data and user-friendly, task-focused applications. How do I become a Senior C# Developer at Coolblue? You regularly participate in brainstorm sessions about user experience, data, and task flow with the UX Designer, Product Owner, and Data Scientists in your team. Besides that you will create disconnected, highly congruent, and testable code that can easily be maintained and is future-proof. Want to become Senior C# Developer at Coolblue? Read below if the job suits you You enjoy doing this Working with various types

Bekijk vacature »

IT-traineeship Low Code Developer

Vind jij het leuk om veel contact te hebben met een klant en je te verdiepen in een domein? Lijkt het je interessant om enerzijds met de klant mee te denken, maar tegelijkertijd ook zelf een bijdrage te leveren aan de implementatie van een IT oplossing? Wij zijn op zoek naar starters die aan de slag willen als low-code engineer. In deze functie bouw je aan applicaties met behulp van een low-code platform, zoals Outsystems, Blueriq, Mendix of Pega. Dergelijke platformen stellen je in staat om snel een werkende applicatie te ontwikkelen en zijn hierdoor heel geschikt voor maatwerk projecten.

Bekijk vacature »

Oracle BI Developer @ Utrecht

2021-08-16 iSense Oracle BI Developer Ben jij op zoek naar een dynamische omgeving om als Oracle BI Developer aan de slag te gaan? Heb jij goede kennis van Oracle BI, Datawarehouses en Oracle Data Integrator (ODI)? En pas jij dit graag toe in een innovatieve omgeving waar je voldoende uitdaging zult vinden? Reageer dan nu! ISKL48194-1 Organisatie Deze organisatie is internationaal actief binnen de zakelijke dienstverlening en heeft de kwaliteit van de IT afdeling hoog in het vaandel staan. Al vanaf de oprichting, meer dan 30 jaar geleden, heeft de IT afdeling alle systemen in eigen beheer en worden de

Bekijk vacature »

Delphi Developer

As a Delphi Developer you work together with other development teams to make our back-office applications work as optimal as possible. How do I become a Delphi Developer at Coolblue? You work together with other development teams to make our back-office applications work as optimal as possible, being extending features or migrating them to APIs. Everything to put a smile in our colleagues' faces! Although you are a Delphi Developer, you are not averse to a some C# or JavaScript. Would you also like to become a Delphi Developer at Coolblue? Read below if the job suits you. You enjoy

Bekijk vacature »

Software Developer / .NET @ Deventer

2021-06-07 iSense Software Developer .NET Ben jij een Software Developer en heb je eerder ervaring opgedaan met C#? Ben je op zoek naar een nieuwe functie en lijkt het je leuk om mee te denken en te sparren met de Lead Developer? Lees snel verder en solliciteer! ISRO49470 Nieuw Organisatie Je komt te werken als Software Engineer bij een organisatie gespecialiseerd in de Automatisering voor klanten van hen in de productiebranche. Ze zijn ongeveer 100 man groot en je komt terecht in een development team van 7 man. De wens is om dit met een developer uit te breiden; iemand

Bekijk vacature »

PHP Developer Shops United bij PostNL

PHP Developer Shops United Rotterdam HBO/WO IT Professional Ben jij een software developer die naast Nederlands en Engels ook PHP, MySQL, KNOCKOUT, Javascript en GiT spreekt? Dan zijn wij op zoek naar jou! Wat ga je doen? Shops United is een van de grootste e-commerce platformen voor verzendingen van pakketten binnen Nederland. Voldoende aandacht besteden aan het logistieke proces en het bijbehorende digitale proces is hierin essentieel. Shops United is expert op het gebied van pakketverzending en biedt een complete verzendoplossing voor alle pakketten in binnen- en buitenland. Parcel Pro  is onze unieke webapplicatie, uitermate geschikt voor elke webshop. Of

Bekijk vacature »

C# .NET Core Ontwikkelaar

Locatie: Veel van onze werkzaamheden voeren wij uit op ons kantoor in Barendrecht of Nieuwegein of bij onze klanten in de regio. Momenteel werken wij zoveel mogelijk vanuit huis. In de toekomst zullen we juiste balans bieden tussen thuiswerken, op kantoor en of klant locatie. Binnen het domein transport en logistiek hebben wij dagelijks te maken met uitdagende vraagstukken op onder andere het vlak van Iot. Zo ontwikkelen wij bijvoorbeeld aan een Iot oplossing waar we van ruim 200.000 machines hun telemetrie en events verwerken. Dit komt neer op 200 miljoen berichten per dag. Hierin leggen we de focus op

Bekijk vacature »

.Net developer @ Rotterdam

2020-12-18 iSense .Net developer .Net Developer ISRA48298 Organisatie De organisatie waarbinnen je aan de slag zal gaan levert diensten aan een groot aantal organisaties binnen Nederland. De software die zij maken en inzetten voor hun klanten wordt dagelijks door honderden klanten gebruikt. Onze opdrachtgever is marktleider in Nederland als het gaat om full-service HR-dienstverlening. De afgelopen periode is onze klant hard gegroeid en daar zijn de nodige uitdagingen bij komen kijken. Om deze groei voort te kunnen zetten zijn ze op zoek naar nieuwe vaste medewerkers, dit om ervoor te zorgen dat ze marktleider blijven. Zij zijn op zoek naar

Bekijk vacature »

Android Developer

As a Mobile Developer, you make sure our mobile app gives our users the best possible way to buy, browse and interact with Coolblue. How do I become a Android Developer at Coolblue? Your specialty is Android so you are successful in writing Kotlin in an agile fashion and do some pair programming with your colleagues to guarantee higher quality. Besides that you think about technical decisions like architecture, tools and processes. You also keep an eye on the performance of the app and you analyse with your team how to improve it. In short, you get energy from building

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

23/10/2021 07:19:46
 
- 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.