menu vastzetten

Status
Niet open voor verdere reacties.

gast0510

Gebruiker
Lid geworden
8 mei 2015
Berichten
289
<html>
<head>

<style>
#header {
position: fixed;
width: 100%;
top: 0;
z-index: 10;
text-align: center;
border-bottom: 1px SOLID BLACK;
color: WHITE;
line-height: 50px;
font-size: 40px;
}
.logo {
display: inline-block;
vertical-align: top;
width: 200px;
height: 80px;
margin-left: 150;
}
#content {
margin-top: 60px;
z-index:1;
}
.intro {
margin: 180 0 0 180;
width: 388px;
hight: 500px;
}
</style>

</head>

<body>
<div id="header">
<img class="logo" src="logo.png">
<a href="#">Home</a>
<a href="#">Projects</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Get in Touch</a>
</div>
<div id="content">
<img class="intro" src="rocks.jpg">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
test 2
</div>
</body>

</html>
 

Bijlagen

  • voorbeeld.png
    voorbeeld.png
    286,7 KB · Weergaven: 71
Laatst bewerkt:
Hoi,
Bedoel je zoiets?
 

Bijlagen

  • Floating Navigation Menu.zip
    44,7 KB · Weergaven: 28
ja zoiets, alleen dat die dan over de hele breedte is en boven aan ook, dat er ook niets achter door kan aan tekst zoals ik het nu heb in mijn voorbeeld.
In jouw voorbeeldje heb je 2 verschillende menus als je scrolt dan veranderd die, ik wil dat die hetzelfde blijft.

precies zoals de foto die ik nu (edit) in mijn #1 bericht heb geplaatst.

EDIT: OK ik heb het werkend, alleen dit wilt nog niet lukken:
- hoe maak je nu een gecentreerd menu, ietsjes naar rechts vanaf het midden gezien en dan vooral dat ze verticaal ook in het midden komen te staan.
- dan de content/body wil ik graag laten beginnen in het midden om de foto heen met tekst erboven en rechts ernaast, maar hoe?

Dit is wat ik heb:
Code:
<html>

<head>
<style>
div#header {
	position: absolute;
	top: 0px;
	width: 100%;
	height: 85px;
	background-color: #FFFFFF;
	border-bottom: 0.05px solid #e0d9e0;
	-webkit-box-shadow: 0px 2px 10px 1px rgba(0,0,0,0.08);
	-moz-box-shadow: 0px 2px 10px 1px rgba(0,0,0,0.08);
	box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.09);
	overflow: hidden;
	
	vertical-align: center;
	text-align: center;
	font-size: 20px;
}
	div#header .logo {
		display: inline-block;
		vertical-align: center;
		float: left;
		margin-left: 150px;
		width: 250px;
		height: 85px;
	}
#content {
	height: 100%;
	overflow: auto;
}
body {
	margin: 0px;
	padding: 85px 0px 0px 0px;
	overflow: hidden;
	background-color: #FFFFFF;
}
.intro {
	margin: 180 0 0 180;
	width: 388px;
	hight: 500px;
}
</style>
</head>

<body>
	<div id="header">
		<img class="logo" src="logo.png">
		<a href="#">Home</a>
		<a href="#">Projects</a>
		<a href="#">About</a>
		<a href="#">Services</a>
		<a href="#">Get in Touch</a>
	</div>
	<div id="content">
		About Us<br>
		<img class="intro" src="rocks.jpg">
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		test 2
	</div>
</body>

</html>
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan