Tijden veranderen
css positionering
Nu de vraag, waarin in mijn volgende script, De navigatie alleen niet meerekt
hoe kan ik ervoor zorgen dat mijn navigatie op de zelfde plek op de achtergrond blijft no matter de browsergroote?
ff snel menutje:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
<title> .:Kobar`s - Index:. </title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="navigatie">
<a href="http://mijnsite" target="_self">Over ons </a>
<a href="http://mijnsite" target="_self">Vraag en Antwoord </a>
<a href="http://mijnsite" target="_self">Portfolio </a>
<a href="mailto:mijnsite" target="_self">Contact</a>
</div>
</body>
</html>
<head>
<title> .:Kobar`s - Index:. </title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="navigatie">
<a href="http://mijnsite" target="_self">Over ons </a>
<a href="http://mijnsite" target="_self">Vraag en Antwoord </a>
<a href="http://mijnsite" target="_self">Portfolio </a>
<a href="mailto:mijnsite" target="_self">Contact</a>
</div>
</body>
</html>
De css:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body { font-family: Verdana; background-color: lightgrey }
BODY { background: url(images/layerd.png) center; background-repeat: no-repeat }
h2 { color: black; font-style: italic }
p { text-decoration: underline }
div#navigatie {
margin-left: 50%;
position: absolute;
font-color: lightgrey;
padding: 0px;
top: 70%;
a:link: lightgrey;
a:visited: lightgrey;
a:hover: lightgrey;
}
BODY { background: url(images/layerd.png) center; background-repeat: no-repeat }
h2 { color: black; font-style: italic }
p { text-decoration: underline }
div#navigatie {
margin-left: 50%;
position: absolute;
font-color: lightgrey;
padding: 0px;
top: 70%;
a:link: lightgrey;
a:visited: lightgrey;
a:hover: lightgrey;
}
De A linken werken niet, En met deze div instellingen staat het menu goed voor 1920xnogiets weet mijn resolutie zo niet, alleen wanneer ik hem bijv kleiner maak, raaks alles in de war, staat het menu niet meer op de goede plek
Alvast bedankt :)
Gewijzigd op 04/02/2012 08:53:57 door Kobar Secret
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
#navigatie
{
width: 100px; /* voorbeeldje */
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px; /* - de helft van de hoogte */
margin-left: -50px; /* - de helft van de breedte */
}
{
width: 100px; /* voorbeeldje */
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px; /* - de helft van de hoogte */
margin-left: -50px; /* - de helft van de breedte */
}
Je gebruikt div#navigatie, dit is trager en een id is uniek dus hoef je niet per se die div te schrijven. Dat maakt je code wat sneller.
Verder is een navigatie een lijst. Die hoort dus in een lijst te staan:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<div id="navigatie">
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</div>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</div>
@ Wouter, oke nu staat me nav in het midden, en kan aanpassen aan de heigts en width war ik wil (ja margins halveer ik) en toch wil hij niet ''lager'' komen dan nu, omhoog krijg ik hem wel maak laten zakken op de pagina niet...
Ik wil mijn navigatie onderaan de pagina
Ook nu ik de cms aangepast heb, Zet hij mij navigatie menu onder elkaar en niet meer naast elkaar?
@ reshadd ik zal idd later vandaag als ik dit opgelost heb die spatie`s vervangen voor een stukje cms dat er een x-aantal ruimte tussen houd maar deed het zo ff snel omdat ik deze manier al wel ken en cms mij nog een beetje een raadsel is xD
Toevoeging op 04/02/2012 11:14:20:
en door die ul`s komen er bolletjes voor... Ik geen geen uls of ols omdat dat niet mooi is in een menu, kan de ul er gewoon uit halen denk ik?
Code (php)
1
2
3
4
2
3
4
#navigatie ul li
{
list-style: none;
}
{
list-style: none;
}
de top en left veranderen?
Toevoeging op 04/02/2012 11:24:48:
thnx dat heeft de bolletjes de das omgedaan :)
laatste 2 vraagjes (ja weet het ben lastig :))
hoe krijg ik mijn menu meer naar beneden? (top en left aanpassen?)
En hoe krijg ik de 'buttons' naast elkaar ipv onder elkaar net als nu (de <li>`s weghalen? of is dit ook weer een css iets?)
sorry ik ben hier echt nog heel slecht mee :P
Toevoeging op 04/02/2012 12:24:17:
ja nu heb ik de top aangepast, en zakt hij wel, probleem is nu weer terug bij het begin dan, Wanneer ik het formaat van de browser veranders, verplaatst het menu zich
Gewijzigd op 05/02/2012 13:38:20 door Kobar Secret
Elementen naast elkaar krijgen doe je door gebruik te maken van de float propertie.
En heb je geen online voorbeeld, plaats even wat code op tinkerbin.com en geef de link aan ons. Dan kunnen we er mee spelen.
heb hem ff snel online gezet om je een idee te geven
online voorbeeld
Mijn index.html
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<head>
<title> .:Kobar`s - Index:. </title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="navigatie">
<a href="/index.html">Over ons</a> <a href="/vea.html">Vraag en Antwoord</a> <a href="/portfolio.html">Portfolio</a> <a href="/contact.html">Contact</a>
</div>
</body>
</html>
<head>
<title> .:Kobar`s - Index:. </title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="navigatie">
<a href="/index.html">Over ons</a> <a href="/vea.html">Vraag en Antwoord</a> <a href="/portfolio.html">Portfolio</a> <a href="/contact.html">Contact</a>
</div>
</body>
</html>
Mijn css
Code (php)
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
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
body { font-family: Verdana; background-color: lightgrey }
body { background: url(images/layerd.png) center; background-repeat: no-repeat; background-attachment: scroll }
h2 { color: black; font-style: italic }
p { text-decoration: underline }
a:link { color: darkgrey; text-decoration: none }
a:visited { color: darkgrey; text-decoration: none }
a:hover { color: grey; text-decoration: none }
a:active { color: grey; text-decoration: none }
#container {
margin-left: auto;
margin-right: auto;
width: 800px;
height: 400px;
}
#navigatie
{
word-spacing: 7pt
}
#navigatie ul li
{
list-style: none;
}
body { background: url(images/layerd.png) center; background-repeat: no-repeat; background-attachment: scroll }
h2 { color: black; font-style: italic }
p { text-decoration: underline }
a:link { color: darkgrey; text-decoration: none }
a:visited { color: darkgrey; text-decoration: none }
a:hover { color: grey; text-decoration: none }
a:active { color: grey; text-decoration: none }
#container {
margin-left: auto;
margin-right: auto;
width: 800px;
height: 400px;
}
#navigatie
{
word-spacing: 7pt
}
#navigatie ul li
{
list-style: none;
}
Zoals je ziet, staat het plaatje netjes in het midden, en wanneer je je browser formaat aanpast blijft dit zo...
nu is alleen het hele euvel dat mijn ff snel opgestelde menu links boven in de hoek blijft staan, Terwijl deze op de doorzichtige lijn moet komen naast kobar designs
en hij moet daar dan natuurlijk ook blijven ongeacht de browsergroote :)
B.v.d
Gewijzigd op 05/02/2012 13:31:06 door Kobar Secret
bijv.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class=menu>
// hier je navigatie in
</div>
<!-- en dan zit je css er zo uit -->
.menu {
float:left;
width:110px;
height:90px;
margin:5px;
position:fixed;
top:100px;
right:250px;
}
// hier je navigatie in
</div>
<!-- en dan zit je css er zo uit -->
.menu {
float:left;
width:110px;
height:90px;
margin:5px;
position:fixed;
top:100px;
right:250px;
}
met de top en de right moet je even spelen ik heb hierboven maar wat ingevuld maar als je zelf de goede waarden erin zet dan moet het lukken :)
Toevoeging op 05/02/2012 14:08:36:
hmm, Nu heb ik het in me css en me index.html aangepast
Wat zorge dat mijn menu weer onder elkaar kwam ipv naast elkaar
Wanneer ik de width aanpaste, kwam dit weer goed, nu staat het dus weer naast
elkaar... probleem blijft alleen wat ik ook aan de top of aan de right verander
hij komt niet ''los'' van zijn plek, kan hem gewoon niet van positie veranderd krijgen
Meschien omdat ik het nav menu ook nog in de container div en de menu div heb?
sorry :P
Toevoeging op 05/02/2012 14:11:21:
/edit
Heb net even de container en de navigatie div weggehaald en het alleen met de class menu geprobeerd
ook dan blijft hij alleen links boven in de hoek staan... Met geen mogelijkheid krijg ik het menu verplaatst?
@Kobar, ik heb even een voorbeeldje gemaakt met uitleg erbij. Kijk maar eens of je het allemaal begrijpt en haal anders wat dingen weg om het nut ervan in te zien: http://cssdesk.com/CEk9Z
Maargoed, begon wat te rommelen en met de padding kreeg ik wel de menu over het plaatje, Zou ik meschien wat paddingen erin moeten gooien?
Toevoeging op 05/02/2012 15:24:40:
/edit heb het formaat gevonden, En deze nu aangepast
Alleen omdat het formaat van het plaatje nu is aangepast, staat hij weer niet in het midden, Nu ben ik hem handmatig aan het centreren met de margin left en margin top, maar denk dat dit makkelijker zou moeten kunnen?
En als ik hem nu in het midden heb gekregen, en ik pas straks de browser groote aan?
aangezien hij de positie een absoluut geeft?
Je maakt een element absolute, zodat je met de scherm groottes kan werken. Vervolgens zet je hem 50% vanaf de top en 50% vanaf de linkerkant. Deze procenten zijn gebaseerd op de zijkant van het element en je wilt het vanaf het midden van dit element hebben.
Om dit voor elkaar te krijgen moet je hem de helft van de breedte naar links duwen en de helft van de hoogte naar boven. Dit doe je door margin-top en margin-left de helft van de breedte negatief te geven. Dus als je element 500px bij 200px is wordt het margin-top: -250px; margin-left: -100px;
Dit moet je dus telkens aanpassen.
Dit met
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
#wrapper
{
font-family: sans-serif;
width: 994px;
height: 652px;
position: absolute;
top: 50%;
left: 50%;
padding-left: -490px;
padding-top: -400px;
z-index: 5000;
}
{
font-family: sans-serif;
width: 994px;
height: 652px;
position: absolute;
top: 50%;
left: 50%;
padding-left: -490px;
padding-top: -400px;
z-index: 5000;
}
Nu staat mijn menu wel OVER de achtergrond, maar het probleem blijft, dat wanneer de browsergroote aanpast, hij hier toch niet aan mee werkt?
Gewijzigd op 05/02/2012 16:49:05 door Kobar Secret
is gelukt, topic kan eventueel gesloten worden