[CSS] Dropdown menu overlapping.

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Doorgewinterde .NET Developer

Wie zijn wij 2-Control is een IT-bedrijf dat audit, interne controle en compliance diensten en add-ons voor Dynamics 365 Business Central en Finance & Operations levert. Wij ontwikkelen Authorization Box, een cloudoplossing waarmee gebruikers rechten eenvoudig kunnen beheren en monitoren. Dit wordt gebouwd door een klein ontwikkelteam, momenteel gefocused op de migratie naar .NET 5 en het operationeel houden van het product. Hoewel gevestigd in een oud gemeentehuis in Breda (recent gerenoveerd), is de bedrijfssfeer een stuk minder formeel dan wat de voorgevel doet vermoeden. Wie zoeken wij Als je lang genoeg in code bezig bent geweest om patronen, best

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 »

Dynamics Ontwikkelaar @ Regio Eindhoven

2021-06-03 iSense Dynamics Ontwikkelaar Ben jij een ervaren Dynamics Ontwikkelaar? Wil je meedenken over de toekomst van de organisatie op het gebied van Dynamics en dit zelfde verschil gaan maken op grote schaal bij andere bedrijven? Lees dan snel verder! ISTA50095 Organisatie Onze opdrachtgever, gevestigd in regio Eindhoven, levert een compleet dienstenpakket op het gebied van IT. Zij pakken verschillende (complexe) vraagstukken van grote organisaties op. De sfeer intern is gezellig en informeel. Men houdt van hard werken maar gezelligheid door middel van een borrel of gezamenlijke lunch komt er veel voor. Als Dynamics Ontwikkelaar word jij de specialist binnen

Bekijk vacature »

Delphi Developer Software / Python

Bij welk bedrijf je gaat werken: Wij zijn een geotechnisch en milieutechnisch onderzoeks- en adviesbureau. Ben jij een Delphi Developer? Heb jij ervaring met Delphi? Vaste baan: Delphi Developer Software Delphi 3.500 - 4.700 Delphi Developer Ons bedrijf is gespecialiseerd in geotechnisch en milieutechnisch advies. Bij ons werk je samen met uitstekende vakspecialisten, die graag hun kennis met jou willen delen. Wij werken voor grote klanten. We doen omvangrijke projecten die we bij ons op kantoor realiseren (geen detachering). Wij werken met state-of-the-art technologie en lopen daarin voorop. Wil jij de diepte in en veel leren, dan is deze baan

Bekijk vacature »

C# .NET Software Ontwikkelaar Magazijnsystemen / H

Over het bedrijf: Wij leveren integrale oplossingen voor logistieke processen. Wil jij software ontwikkelen voor magazijnsystemen? Heb jij ervaring met .Net en SQL? Vaste baan: C# .NET Software Ontwikkelaar Magazijnsystemen HBO WO 3.300 - 4.800 Software Engineer Ons bedrijf levert diverse integrale oplossingen om het logistieke proces aan te sturen van zowel nationaal- als internationaal toonaangevende bedrijven. Wij werken in een topsegment met vaktechnische uitdagingen. Daarnaast is er voldoende ruimte voor professionele ontwikkeling, zowel vaktechnisch als op persoonlijk niveau. Wij werken voor grote klanten. We doen omvangrijke projecten die we bij ons op kantoor realiseren (geen detachering). Wij werken met

Bekijk vacature »

Full Stack Developer JavaScript HBO / GIT

Over de werkgever: Wij creëren ultramoderne digitale producten. Ben jij een Full Stack Developer? Heb je ervaring met programmeren? Vaste baan: Full Stack Developer Programmeren HBO 3.300 - 4.500 Full Stack Developer Wij zijn een Fullservice Internetbureau. Wij maken Websites, Apps en Portals, en zijn actief op gebied van E-commerce. We hebben ook veel aandacht voor websiteoptimalisatie (SEA en SEO), en systeemintegratie, en maken datakoppelingen met veel verschillende systemen. 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

Bekijk vacature »

IT-traineeship junior software developer

Zoek jij een stevige uitdaging en de mogelijkheid om veel nieuwe dingen te leren in een dynamisch vakgebied? Doe mee aan ons IT Professional Program en ontwikkel jezelf tot software engineer! Je begint met een opleidingstraject van ongeveer 4 maanden. Hierin ga je aan de slag met verschillende technieken die je op conceptueel niveau leert te overzien en interpreteren. Onderwerpen die aan bod komen zijn o.a. programmeren (Java/C#/Python), Object Oriëntatie, Databases, Webservices & webtechnologieën, Domain Driven Design en Continuous Integration/Continuous Delivery. Sommige van deze onderdelen sluit je af met een examen en bijbehorende certificering. Het opleidingstraject zelf sluit je af

Bekijk vacature »

Python developer @ Nederland

2021-06-28 iSense Python developer Python Developer Full Stack ISW50340 Nieuw Organisatie Onze klant is een zakelijke dienstverlener in de regio Rotterdam, bij hun staat de medewerker centraal en daarna de klant. Ze zijn op zoek naar Phyton Developer om hun klanten te helpen bij de digitale transformatie. Je gaat werken voor grote uitdagende klanten en ontwikkelen aan enterprise applicaties. Samen met het team bouw je de gewenste oplossingen. Naast het bouwen van oplossingen denk je mee met de klant en adviseer je de klant over bepaalde technische vraagstukken. De focus ligt bij deze functie vooral op de back-end. Ben jij

Bekijk vacature »

Experienced Python Developer - Banking

We are looking for Python Developers with experience in Risk Model Management Your day-to-day activities As an experienced Python developer, you will be responsible for designing and developing robust and maintainable systems for our clients so that it can calculate credit risk. You will work in multidisciplinary teams collaborating on run and change processes of risk modeling and management applications. Together you will help design and build a robust, secure cloud environment in Azure. You are comfortable with solving the problems posed by the cloud, such as security, resilience and scaling and help solve the problems posed by the cloud,

Bekijk vacature »

Developer / Python / Azure / Financial Organisatio

2021-06-10 iSense Developer Python Azure Financial Organisation Do you have experience as an IT Developer? Do you want to learn all there is to know about SAS? And do you like to work in an innovative and international environment? Then read on, because we're looking for you! ISDI45920 Salarisindicatie Depending on relevant work experience and or certification, you can expect a salary between €3.500,- and €5.500,- gross per month based on a 40-hour workweek. Aanvullende informatie opdracht iSense is a young, energetic and ambitious specialist in ICT employment mediation. iSense helps you find a job on operation, business consultancy and

Bekijk vacature »

Datawarehouse specialist / ETL Ontwikkelaar @ Rott

2021-04-12 iSense Datawarehouse specialist / ETL Ontwikkelaar Datawarehouse ontwikkelaar / ETL ontwikkelaar / DWH ISRA49558 Nieuw Organisatie Onze klant is een semi overheidsinstelling. Ze zijn bezig met het bouwen van een nieuwe BI omgeving. Ze hebben onderzocht hoe het datalandschap en de informatievoorziening geprofessionaliseerd kan worden. Als DWH Ontwikkelaar kun jij hier een belangrijk rol in gaan spelen over hoe je het verder gaat uitvoeren. Het is een informele organisatie met een goede werksfeer. De mensen die er werken zijn ambitieus en werken met de nieuwste technieken. Ben jij toe aan een nieuwe uitdaging als datawarehouse ontwikkelaar waar jij kunt

Bekijk vacature »

Senior C# Developer (NL) bij PostNL

Senior C# Developer (NL) Den Haag HBO/WO IT Professional "Als Senior C# Developer impact maken op de groeiende E-commerce markt met onze logistieke software. Je doet dit door complexe bedrijfskritische logistieke business processen te vertalen naar de ontwikkeling en uitbreiding van onze Cloud IT-platformen en software oplossingen in C# en AWS" Wat ga je doen? PostNL is becoming a postal tech company. Als Senior C# Developer ben je onderdeel van een multidisciplinair Business-IT-team bestaande uit onder andere een Lead Engineer, Developers en Solution Consultants. Samen zijn jullie verantwoordelijk voor het bouwen aan onderdelen uit onze logistieke software omgeving. Binnen het

Bekijk vacature »

PHP Backend Webdeveloper Lead HBO / Wordpress

Voor wie je gaat werken: Wij zijn een creatief digitaal bureau. Ben jij een Backend Developer? Heb jij ervaring met Laravel? Vaste baan: Backend Developer Webdeveloper HBO Laravel 3.000 - 4.500 Backend Developer Als internetbureau maken wij websites en softwareapplicaties op maat. Ook complexere projecten gaan we niet uit de weg. Wij werken voor MKB klanten. We hebben veel verschillende projecten. Houd jij van afwisseling? Dan zit je bij ons goed! We hebben een bijzondere, open cultuur, waarin er veel ruimte is om het enthousiasme voor wat we doen te delen. Wat wordt er van jou verwacht?: Voor de vacature

Bekijk vacature »

Full Stack Java Developer Graduate Program - Exper

Via Experis Academy krijg je een unieke kans om de in de branche gewilde expertise op te doen die jou tot een gewilde Full Stack Java Developer met een frontend-specialisatie maken. Het programma duurt 21 maanden en eindigt met een vaste baan bij een van onze vele, boeiende klanten, of je blijft bij ons (Experis) werken. Ons programma tot Java Developer Experis Academy start met een op maat gemaakte cursus die drie maanden duurt. Gedurende deze maanden komen theorie, praktijk en Java-certificeringen aan bod. Hierbij is het onderwijsprogramma gebaseerd op de principes als versnelde training en flipped classroom. De volgende

Bekijk vacature »

Salesforce developer

Functieomschrijving Do you want to help shape the global Salesforce environment of the world’s largest HR service provider, defining, building and continuously improving the solution 28.000 people will use on a daily basis? Helping shape the working life of over 500 million talented individuals? As part of building a global Salesforce programme we are looking for multiple experienced Salesforce Developers. You work closely with our Technical lead, product owner and other salesforce developers and consultants to implement and integrate a global package of features based on Sales Cloud, Services Cloud, Marketing Cloud and Bullhorn for Salesforce, including but not limited

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

21/09/2021 11:29:19
 
- 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.