Raar menu

jappertjeh · 26 mrt 2010

Daar ben ik weer.
Ben nu aan een ander menuutje begonnen, namelijk horizontaal met hover..De problemen die zich voordoen:
1. Als ik een link aanwijs, word de height van de hover groter dan mijn menubalk zelf, dus steekt onder en boven uit:S met wat padding en margin aanpassingen geprobeerd dit goed te krijgen, maar nog steeds niet helemaal goed.
2. De blauwe balk waarin mijn menu staat en tevens achtergrondkleur van de div, heeft de letters van het menu er niet in staan maar half er in, half er onder. Ook dit al met aanpassen van margins en padding geprobeerd.
3. Meest vreemde probleem: ik maak mijn site in Dreamweaver. Heb voor mijn menubalk lettertype verdana gekozen, die komt ook in beeld als ik Gedeeld aan heb staan. Echter, als ik Live View aanzet en ook als ik de pagina op internet bekijk, zie ik times new roman staan. Heb overal al Verdana bijgezet in CSS maar ook dat werkt niet. Wie helpt?EDIT: opgelost. font-family ipv font als tag.

Hier mijn codes. Dit is mijn CSS van mijn menu:

Code:

#header{
	width:750px;
	height:86px;
	padding-bottom:10px;
	background-image:url(banner.png);
	background-repeat:no-repeat;
}


#menu{
	width:750px;
	height:30px;
	float:left;
	background-color:#000066;
	font:Verdana;
	text-align:center;

}

#menu ul li{
	display:inline;
	list-style-type:none;
	margin-right:10px;
	margin-left:10px;
	font:Verdana;
}

#menu ul li a{padding-left: 20px;
	padding-right:20px;
	padding-top:15px;
	padding-bottom:10px;
	text-decoration:none;
	color:#FFF;
	font:Verdana;
}

#menu ul li a:hover{background-color:#000;

}

En dit de html:

HTML:

<div id="header"></div>
<div id="menu">
<ul>
<li><a href="index.html"><b>Home</b></a></li>
<li><strong><a href="Diensten.html">Diensten</b></a></strong></li>
<li><a href="Werk.html"><b>Werk</b></a></li>
<li><a href="Wie.html"><b>Wie</b></a></li>
<li><a href="Diensten.html"><b>Contact</b></a></li>
</ul>
</div>

Goeroeboeroe · 27 mrt 2010

Je moet aan de ul toevoegen: padding: 0; margin: 0;
1) Verschillende browsers hebben verschillende standaard-instellingen voor margin en padding bij <ul>. Door ze zelf in te stellen, trek je dat gelijk.
2) Niet alleen bij hoveren, maar je <a>'s zijn voortdurend te groot. Alleen zie je dat niet omdat ze geen achtergrondkleur hebben. Bij hoveren geef je 'n achtergrondkleur en valt 't op.
Je hebt bij #menu ul li a 'n padding: 15px 20px 10px opgegeven. Dus 15px aan de bovenkant en 10px aan de onderkant. Dat is te veel, past gewoon niet in de menubalk. Als je dat aanpast is 't opgelost.

Als je bij dit soort problemen (dingen die niet passen) even 'n achtergrondkleur aan 'n element geeft, zie je 't vaak heel snel. Of even 'n border, hoewel die zelf ook 'n afwijking kan opleveren omdat je er aan alle kanten 1 px bij krijgt.

jappertjeh · 27 mrt 2010

Ik krijg het niet voor elkaar. Zou je mijn geplaatste codes aan kunnen passen zodat het wel goed staat en aan willen geven wat je hebt veranderd?

Goeroeboeroe · 27 mrt 2010

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<style type="text/css">
		ul {
		margin: 0;
		padding: 0;
		}
		#header{
		width:750px;
		height:86px;
		padding-bottom:10px;
		background-image:url(banner.png);
		background-repeat:no-repeat;
		}

		#menu{
		width:750px;
		height:30px;
		float:left;
		background-color:#000066;
		font-family:Verdana;
		text-align:center;
		}

		#menu ul li{
		display:inline;
		list-style-type:none;
		margin-right:10px;
		margin-left:10px;
		font-family:Verdana;
		}

		#menu ul li a{
		display: inline-block;
		line-height: 30px;
		padding-left: 20px;
		padding-right:20px;
		text-decoration:none;
		color:#FFF;
		font-family:Verdana;
		font-weight: bold;
		}

		#menu ul li a:hover{
		background-color:#000;
		}
	</style>
</head>
<body>
	<div id="header"></div>
	<div id="menu">
	<ul>
		<li><a href="index.html">Home</a></li>
		<li><strong><a href="Diensten.html">Diensten</a></strong></li>
		<li><a href="Werk.html">Werk</a></li>
		<li><a href="Wie.html">Wie</a></li>
		<li><a href="Diensten.html">Contact</a></li>
	</ul>
</div>

</body>
</html>

1) Heeft niets met je vraag te maken, maar misschien heb je er iets aan. Je was 'n <b> vergeten voor Diensten. Ik heb alle <b>'s en </b>'s bij de links weggehaald en aan #menu ul li a toegevoegd: font-weight: bold; Heeft precies hetzelfde effect, maar is veel makkelijker te veranderen.

2) Toegevoegd aan de css: ul {margin: 0; padding: 0;}
Bij 'n <ul> hebben browsers elk 'n andere standaard-marge en padding. Daardoor geeft elke browser 'n <ul> anders weer. Bij Firefox bijvoorbeeld wordt standaard 'n marge boven en onder de <li> toegevoegd. Door ze gewoon op 0 te zetten, ziet het er nu in alle browsers hetzelfde uit.

3) Bij #menu ul li a had je aan de bovenkant 15 px padding, en onderaan 10 px. Dat is samen al 25 px. Maar de <a> mag niet hoger zijn dan 30 px, want hoger is #menu niet. Dat past dus gewoon niet: de <a> steekt aan de onderkant uit onder #menu.
Alleen zie je dat niet, omdat de <a> geen achtergrondkleur heeft. Maar als je gaat hoveren over 'n <a>, geef je hem 'n achtergrondkleur en dan zie je het opeens.
Oftewel: de <a> moet gewoon lager, dan past het.

Ik heb het zo opgelost: de padding-top en padding-bottom zijn weggehaald.
Ik heb <a> 'n line-height van 30 px gegeven, even hoog als #menu. De tekst wordt automatisch verticaal in het midden van de regelhoogte gezet, dus staat nu altijd netjes in het midden.
Maar 'n <a> is 'n inline-element, en ik kan 'n line-height alleen opgeven bij 'n blok-element. Daarom heb ik toegevoegd bij #menu ul li a: display: inline-block;
Nu kan ik dingen als line-height- gebruiken, maar de <a>'s komen toch niet op 'n nieuwe regel te staan, zoals bij 'n echt blok-element wel zou gebeuren.

4) Als het hele menu altijd Verdana moet zijn, dan kun je ook volstaan met dat alleen op te geven bij #menu. De lettersoort wordt geërfd door de kinderen van 'n element.
Je moet er trouwens van maken:

HTML:

font-family {Verdana, sans-serif;}

Nu zal, als 'n computer geen Verdana heeft, in ieder geval 'n lettersoort zonder schreef (streepjes) worden gekozen.

jappertjeh · 28 mrt 2010

Helemaal geweldig. Ook bedankt voor de heldere uitleg. Dat is nu voor elkaar!
In plaats van steeds nieuwe topics te maken blijf ik maar vragen stellen in deze, er is er weer eentje opgekomen. Ik heb de volgende code voor 1 van mijn tekstvensters:

HTML:

#welkom{
margin-left:10px;
padding-left:5px;
border:1px #000 solid;
float:left;
margin-top:10px;
width:300px;
color:#FFF;
font-family:Verdana;
font-size:14px;
}

#welkomstbalk{color:#FFF;
padding-top:10px;
width:300px;
text-align:center;
background-color:#000066;
font:Verdana;
font-size:16px;
}
Dat is mijn CSS, en mijn html deel is dan gewoon:

<div id="welkom"><div id="welkomstbalk">Welkom</div>Tekst voor in het welkom vak</div>

Die padding-left bij welkom heb ik ingevoerd zodat de tekst niet op de rand van het venster staat maar iets naar binnen. vervelend is dat de welkomstbalk dan ook naar binnen komt, en dat wil ik natuurlijk niet. Hoe los ik dat op?

Goeroeboeroe · 28 mrt 2010

Ja zou #welkomstbalk 'n negatieve linkermarge kunnen geven. Daardoor verschuift hij 5 px naar links. Je moet hem dan wel 5 px breder maken.

Code:

#welkomstbalk {
     margin-left: -5px;
     width: 305px;
     }

'n Andere mogelijkheid is #welkomstbalk 'n relatieve positie te geven en dan 5 px naar links te plaatsen. Ook dan moet je 'm iets breder maken:

Code:

#welkomstbalk {
     position: relative;
     left: -5px;
     width: 305px;
}

Als 't niet heel aparte vragen zijn, bijvoorbeeld over JavaScript, lijkt 't mij ook 't handigst als je ze gewoon hier blijft stellen.

jappertjeh · 28 mrt 2010

Volgende vraag

D):

Ik kreeg eerder de tip om een pagina in het midden van iemands scherm uit te laten komen geef je aan:

body{width:90%; margin 0 auto;}

Hierbij komt de pagina bij mij niet helemaal in het midden, hoogstens een stukje naar t midden toe? hoe doe ik het zo dat de pagina bij iedereen midden in zijn scherm komt?

Goeroeboeroe · 28 mrt 2010

Dit zou moeten werken. Maar het scheelt 'n stuk als je 'n dubbele punt achter margin zet...: margin: 0 auto;
Als 't 'n typo is en je hebt die dubbele punt wel in 't echt, dan is 't zo niet te zeggen. Dan is er meer code nodig.

jappertjeh · 28 mrt 2010

het midden is inmiddels wel goed

nu heb ik nog een probleempje, namelijk dat mn banner een stuk onder de bovenkant van de browser zit. Ik heb mijn margin(top) over al al tussenuit gehaald maar dat leverde niks op. Hoe komt dit en hoe te verhelpen?

HTML:

@charset "utf-8";
/* CSS Document */
body{width:90%;
margin:0 auto;
background-color:#cccccc;
}

#container{
	width:750;
	overflow:hidden;
	background-color:#4b4b4b;
	}

#header{
	width:750px;
	height:86px;
	padding-bottom:10px;
	background-image:url(banner.png);
	background-repeat:no-repeat;
}

ul {    margin: 0;
        padding: 0;
        }

#menu{
	width:750px;
	height:30px;
	float:left;
	background-color:#000066;
	text-align:center;
	font-family:Verdana;

}

#menu ul li{
	display:inline;
	list-style-type:none;
	margin-right:10px;
	margin-left:10px;
	font-family:Verdana;
}

#menu ul li a{padding-left: 20px;
display:inline-block;
line-height:30px;
	padding-left:20px;
	padding-right:20px;
	text-decoration:none;
	color:#FFF;
	font-family:Verdana;
	font-weight:bold;
	
}

#menu ul li a:hover{background-color:#000;

}

#welkom{
margin-left:10px;
padding-left:5px;
border:1px #000 solid;
float:left;
margin-top:10px;
width:300px;
color:#FFF;
font-family:Verdana;
font-size:14px;
}

#welkomstbalk{color:#FFF;
margin-left:-5px;
padding-top:10px;
width:305px;
text-align:center;
background-color:#000066;
font:Verdana;
font-size:16px;
}

Goeroeboeroe · 28 mrt 2010

't Enige dat ik zo kan bedenken is dat er bij body geen padding: 0; staat.
Bij body kun je 't best altijd padding en margin op 0 zetten (of iets anders), want de standaardwaarden bij browsers verschillen.
Als dat niet help, tja, dan kijken we weer verder.

jappertjeh · 29 mrt 2010

Ik had het al even over het midden van mijn pagina met body {width:90% en margin:0 auto;} Hij deed het heel even goed, maar is nu weer verplaatst:S als ik 75% invul, staat hij wel weer in het midden( bij zowel GC als IE) Kan dat ook of is hier iets niet goed aan?

jappertjeh · 30 mrt 2010

En nog een vraagje er bij bij bovenstaande:
Ik heb gedaan wat mij gezegd is door dit in te voeren in mijn css:

HTML:

#home .home,
#wat .wat,
#organisatie .organisatie,
#contact .contact {
   background-color: #003300;
   cursor: default;
   }

En mijn pagina home heeft <body div id="home"> en zo elke pagina.
Alleen mijn pagina contact kleurt de gehele body achtergrond groen, terwijl die grijs hoort te zijn. Als ik bij <body div id="contact"> contact weg haal, word hij weer grijs, dus daar zit het in, maar de code doet het op elke pagina goed behalve deze. Hoe kan dat? of is daar meer code voor nodig? Laat het me weten

Goeroeboeroe · 30 mrt 2010

Met die code hoort de pagina gewoon in het midden te blijven staan, ongeacht de grootte van het scherm en ongeacht het percentage. Dat hij met 75% dan wel in het midden staat, komt gewoon omdat dat toevallig bij dat scherm hoort. Maar bij 'n groter of kleiner scherm gaat 't dan weer mis.
Om de oorzaak te kunnen vinden moet de code kunnen worden bekeken.

<body div id="home">
is hartstikke fout. Je kunt geen div binnen 'n tag zetten Dat moet zijn:
<body id="home">

Maar dit gaat wat lastig worden. Als je 'n vraag hebt over één pagina, kun je eventueel de code nog hier neerzetten. Bij meerdere pagina's gaat dat haast onmogelijk worden omdat het gewoon te veel wordt.
Ik neem aan dat je site vroeger of later online gaat. Heb je nu al geen mogelijkheid om hem online te zetten? Dat geeft de mogelijkheid om de code te bekijken zonder alle pagina's hier neer te zetten.

Verder kun je je site door de validator halen. Voor html is dat op
http://validator.w3.org/
en voor css op
http://jigsaw.w3.org/css-validator/
Die validator haalt fouten zoals 'n vergeten ; en <body id="home"> eruit. Misschien begrijp je de fouten niet gelijk (de uitleg is heel onduidelijk geschreven), maar in ieder geval zie je dat er 'n fout in zit.
Fouten moet je altijd van boven naar beneden verbeteren. Dus eerst de eerste, dan de tweede, enz. Het is niet ongebruikelijk dat je honderden fouten krijgt, die grotendeels zijn verdwenen als je je eerste fout herstelt. De ene fout roept vaak de volgende op.

jappertjeh · 30 mrt 2010

dat was een overtyp foutje, ik had ook niet body div id er in gezet hoor.

Ik heb de fout ook al zelf gevonden, het was niet echt een fout maar meer dubbelop. Ik had een pagina contact genoemd en dus body id="contact", maar op mijn homepage was ook een div die contact heette, dus die kwamen met elkaar in de war. eentje hernoemen en het probleem is opgelost

Ik heb trouwens van een site een php formulier geplukt voor mijn contactpagina, maar die werkt niet helemaal naar behoren. Kan ik dat hier kwijt of toch maar in de php sectie?

Goeroeboeroe · 30 mrt 2010

Ah, ik vond 't al 'n wat vreemde fout.
Overigens is dat valideren echt een van de belangrijkste dingen om te doen. Ook twee keer dezelfde id wordt gemeld. Programma's zijn in dat soort 'domme' controles veel beter dan mensen.
Is het centreren van de pagina nu opgelost?
Die php weet ik eigenlijk niet zo goed, waar dat het best kan. Ik zie het ook vaak hier staan. Dat is ook niet echt mijn terrein. MIsschien dat 'n ander dat even kan melden.

jappertjeh · 30 mrt 2010

maak over die php wel even een topic aan in PHP vragen dan

als ik weer html en css vragen heb kom ik hier weer terug!Ontzettend bedankt tot nu toe. Die width van de body doet het nog steeds niet trouwens. Dit is mijn CSS nu. Maar als het percentage niet uitmaakt zou ik m zo kunnen laten staan toch?

HTML:

body{width:75%;
margin:0 auto;
padding:0;
background-color:#666;
}

Goeroeboeroe · 30 mrt 2010

Nee. percentage is 'n relatieve maat. Dat wil zeggen dat 1 % van 'n breed scherm meer is dan 1 % van 'n smal scherm. Nu gaat er dus op smallere schermen (ook op 1024, het meest gebruikte op 'n desktop) maar liefst 25% van de ruimte verloren. Als dat de bedoeling is, is het prima, maar anders niet.
Op smallere schermen is het nog veel vervelender als 'n kwart van de ruimte niet wordt benut.

Los daarvan: als hij nu op jouw computer netjes in het midden staat met 75%, dan is de kans groot dat hij op 'n smaller of breder scherm niet in het midden staat, want ergens werkt er iets niet goed.

Of je nou 10% of 90% opgeeft, de pagina moet met deze css in het midden staan. Als dat niet zo is, dan zit er waarschijnlijk ergens iets mis. Maar om de fout te kunnen vinden is de html en css nodig van 'n pagina.

jappertjeh · 30 mrt 2010

Los daarvan, zal morgen mn codes even posten, maar waarom moet de body dan 90% en kan ik er niet gewoon 100% van maken?

Goeroeboeroe · 30 mrt 2010

Dat zou ik ook niet zo snel doen.
100% is niet nodig, want dat is de volle breedte van het scherm, en dan kun je 'm niet in het midden zetten. En de body is standaard 100%.

't Nadeel van 90% is dat 't bij 'n heel breed scherm nog steeds veel en veel te breed is, en bij 'n smal scherm mis je 10% en je hebt al zo weinig ruimte.
Soms kan het wel nuttig zijn bij 'n heel aparte lay-out met speciale effecten of zo.

Ik zou persoonlijk kiezen voor 'n vaste breedte in px, als je 'n vaste breedte wilt.
Maar je zou ook helemaal geen breedte op kunnen geven, maar alleen 'n maximum-breedte:

Code:

body {
     max-width: 970px;
     margin: 0 auto;
     }

Nu wordt op 'n scherm smaller dan 970px de volle breedte gebruikt. Maar nooit meer dan die breedte, zodat je geen horizontale scrollbalk krijgt. 'n Horizontale scrollbalk is uiterst onhandig, dus als je die kunt voorkomen, prima.
Op heel brede schermen wordt de pagina nu niet breder dan 970px, wat heel lange regels voorkomt. Die lezen heel vervelend. En door de margin: 0 auto staat hij op brede schermen netjes in het midden.
Internet Explorer 6 kent geen maximum-breedte, maar ik denk niet dat er veel mensen zijn die met dit prehistorische onding op 'n heel breed scherm werken.
Overigens moet je dit wel goed testen op verschillende schermresoluties (groottes), want er willen nog wel 'ns vreemde verschijnselen optreden.

Ik weet niet waar jij je site in maakt, maar Firefox heeft 'n hele reeks hulpmiddelen waarmee je bijvoorbeeld heel simpel 'n kleiner scherm kunt imiteren. Google Chrome begint die ook te krijgen, maar op dit moment heeft Firefox nog verreweg de meeste.
Hier staat 'n serie links naar hulpmiddelen voor 't maken van 'n site in de verschillende browsers:
http://css-voorbeelden.nl/links.html#a-ger-debug

jappertjeh · 31 mrt 2010

Ik heb al vaste breedtes aangegeven aan al mijn divs, dus een max breedte heeft dan niet zoveel zin denk ik? heb gekozen voor 750px zodat mijn site altijd past op het scherm. vond het lastig om alles in procenten te doen, dat word een heel rekenwerk om het dan precies goed te krijgen, of kan dat makkelijker?

Raar menu

Gebruiker

Terugkerende gebruiker

Gebruiker

Terugkerende gebruiker

Gebruiker

Terugkerende gebruiker

Gebruiker

Terugkerende gebruiker

Gebruiker

Terugkerende gebruiker

Gebruiker

Gebruiker

Terugkerende gebruiker

Gebruiker

Terugkerende gebruiker

Gebruiker

Terugkerende gebruiker

Gebruiker

Terugkerende gebruiker

Gebruiker

Wij waarderen jouw privacy