Dropdown's gaan links te ver door.

siebie505 · 30 nov 2014

Hallo.
Ik heb een navigatie menu met dropdown's gemaakt, maar de dropdown menu's zien er een beetje raar uit.
Aan de linkerkant gaan ze te lang door, maar de tekst staat op de goede plaats.

Ik wil dat de linkerrand van de dropdown's net voor de tekst staat, maar de tekst moet op dezelfde plek blijven staan.
Hoe kan ik dat doen?
Hier het HTML en CSS script:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Tennisschool Frans Bouwhuis | Home</title>

<link href="/stylesheets/main.css" rel="stylesheet">

<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />

</head>

<body>

<div class="header">
<div class="navigation menu and page content">
<a href="index.html">

<img src="/images/logo.png" alt="Tennis school Frans Bouwhuis Logo" title="Tennis school Frans Bouwhuis Logo" width=200px height=100px/>
</a>

<div class="nav">
<ul>
<li><a href="index.html">Home</a></li><li>
<a href="nieuws.html">Nieuws</a></li><li>
<a href="tennisles.html">Tennisles <img src="images/arrow.png" /></a>
<ul id="tennisles">
<li><a href="#">Jeugd Training</a></li><li>
<a href="#">Jeugd Selectie</a></li><li>
<a href="#">Kiezeltennis</a></li><li>
<a href="#">Senioren Training</a></li><li>
<a href="#">A Selectie Senioren</a></li>
</ul>
</li><li id="test">
<a href="tennisregelement.html">Tennisregelement</a></li><li>
<a href="activiteiten.html">Activiteiten</a></li><li id="test2">
<a href="clinic_bedrijven.html">Clinic/Bedrijven</a></li><li>
<a href="inschrijven.html">Inschrijven <img src="images/arrow.png" /></a>
<ul id="inschrijven">
<li><a href="#">Jeugd Training</a></li><li>
<a href="#">Kiezeltennis</a></li><li>
<a href="#">Senioren Training</a></li>
</ul>
</li>
</ul>
</div>
<div id="Pagecontent">
<br>
<br>
<div id="Diashow">

</div>
<br>
<br>
<p>
Welkom bij de website van Tennisschool Frans Bouwhuis!
</p>
<video src="">hello</video>
</div>
</div>
</div>

<div id="footer">
©Tennisschool Frans Bouwhuis 2014-2015
</div>

</body>

</html>

CSS:

.nav {
margin-top: 0%;
height: 3,7%;
background: #484A46;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
body {
background: #BFBFBF;
font-family: Arial;
font-size: 18px;
overflow-y: scroll;
}
html, body {
margin: 0;
padding: 0;
}
.header {
height: 100px;
width: 100%;
background-color: #BFBFBF;
}
.header img {
padding-left: 20px;
}
#footer {
bottom: 0px;
left: 0px;
position:fixed;
width: 100%;
border-top: 1px solid #000000;
background-color: #84857F;
text-indent: 20px;
}
footer {
bottom: 0px;
left: 0px;
position:fixed;
width: 100%;
border-top: 1px solid #000000;
background-color: #84857F;
text-indent: 20px;
}
p {
margin-bottom: 20px;
text-align: center;
}
.nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
.nav ul li {
display: inline-block;
}
.nav ul li:hover {
}
.nav ul li a,visited {
color: #0CB504;
display: block;
padding: 15px;
padding-left: 68px;
text-decoration: none;
}
.nav ul li a:hover {
color: #39E600;
text-decoration: none;
}
.nav ul li:hover ul {
display: block;
}
.nav ul ul {
display: none;
position: absolute;
background-color: #484A46;
}
.nav ul ul li {
display: block;
}
.nav ul ul li a,visited {
color: #0CB504;
}
.nav ul li a:hover {
color: #39E600;
}
.nav ul li a img {
height: 20px;
width: 20px;
padding-left: 3px;
vertical-align: middle;
}
#tennisles {
width: 175px;
border: 3px solid #211300;
border-top: 0;
}
#inschrijven {
width: 188px;
border: 3px solid #211300;
border-top: 0;
}

EDIT: Er staat een afbeelding bij de bijlagen, ik kan hem niet weghalen, Je kunt hem gewoon negeren.

Groetjes,
Siebren.

bron · 30 nov 2014

Misschien deze padding eruit?

Code:

.nav ul li a {
	color: #0cb504;
	display: block;
	padding: 15px;
	/* padding-left: 68px; */
	text-decoration: none;
}

Suc6. Have fun.

Dropdown's gaan links te ver door.

siebie505

Gebruiker

Bijlagen

bron

Moderator

Nieuwste berichten

Wij waarderen jouw privacy