navigatie bar over de hele breedte

Status
Niet open voor verdere reacties.
C

cssdouwe

Nieuwe gebruiker
Lid geworden
30 aug 2015
Berichten
1
Hoi,

ik wil mijn navigatie bar over de hele breedte alleen dat lukt niet. Als ik de width op 100% zet gaan ze boven elkaar.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>voorbeeld</title>
<style>


#header {
text-align: center;
Color: black;
background-color: white;
padding:5px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;]
	display: inline;
    }

li {
    display: inline;
    float: left;
}

a:link, a:visited {
    display: block;
    width: 150px;
	height: 38px;
    font-weight: bold;
    color: black;
    background-color: #eeeeee;
    text-align: center;
    padding: 10px;
    text-decoration: none;
    text-transform: uppercase;
	
	
}

a:hover, a:active {
background-color:black;
color: white;
}
</style>
</head> 

<body>
<div id="header"><h1 id="home">home</h1></div>


<div>
<ul>
<li><a href="pagina1.htm">foto's</a></li>
<li><a href="pagina2.htm">login</a></li>
<li><a href="index.htm">home</a></li>
<li><a href="http://www.weeronline.nl/Europa/Nederland/Nederland/4057473"> Weather</a></li>
<li><a href="contact.htm">Contact</a></li>
</ul>
</div>

</body>
</html>
 
Laatst bewerkt door een moderator:
Hey cssdouwe,

Het probleem is, denk ik, dat je de honderd procent op een verkeerde plek in de code hebt gezet. Het volgende blokje:

Code: 
li {
display: inline;
float: left;
}

moet worden aangepast naar:

Code: 
li {
display: inline;
float: left;
width: 20%;
}

Deze code is vereist omdat je gebruik maakt van vijf menu's in je menubalk. Deze moeten naast elkaar kunnen staan: daarom 100 / 5 = 20.
Tevens moet de volgende code:

Code: 
a:link, a:visited {
display: block;
width: 150px;
height: 38px;
font-weight: bold;
color: black;
background-color: #eeeeee;
text-align: center;
padding: 10px;
text-decoration: none;
text-transform: uppercase;
}

worden aangepast naar:

Code: 
a:link, a:visited {
display: block;
width: 100%;
height: 38px;
font-weight: bold;
color: black;
background-color: #eeeeee;
text-align: center;
padding: 10px;
text-decoration: none;
text-transform: uppercase;
}

Dit omdat deze code alleen de gegevens van een enkele link aangeeft. van het geen dat in de link blok staat. Je gebruikt om deze rede width: 100% om te vertellen dat 1 link, de volledige 20% van de pagina die beschikbaar is, moet gebruiken.

Hopelijk is dit wat je wilt. Ik zal ook de volledige code hieronder toevoegen voor je, wel eventjes doorheen scrollen. ;)

MVG
Wboy44

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
	<head>
		<title>voorbeeld</title>
		<style>
			#header {
			text-align: center;
			Color: black;
			background-color: white;
			padding:5px;
			}

			ul {
			list-style-type: none;
			margin: 0;
			padding: 0;]
			display: inline;
			}

			li {
			display: inline;
			float: left;
			width: 20%;
			}

			a:link, a:visited {
			display: block;
			width: 100%;
			height: 38px;
			font-weight: bold;
			color: black;
			background-color: #eeeeee;
			text-align: center;
			padding: 10px;
			text-decoration: none;
			text-transform: uppercase;
			}

			a:hover, a:active {
			background-color:black;
			color: white;
			}
		</style>
	</head> 

	<body>
		<div id="header"><h1 id="home">home</h1></div>

		<div>
			<ul>
				<li><a href="pagina1.htm">foto's</a></li>
				<li><a href="pagina2.htm">login</a></li>
				<li><a href="index.htm">home</a></li>
				<li><a href="http://www.weeronline.nl/Europa/Nederland/Nederland/4057473"> Weather</a></li>
				<li><a href="contact.htm">Contact</a></li>
			</ul>
		</div>

	</body>
</html>
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan