menu niet goed

Status
Niet open voor verdere reacties.
stykurgh

stykurgh

Gebruiker
Lid geworden
6 jul 2009
Berichten
715
hallo, ik ben beetje nieuw met sites maken, maar ik had dit gemaakt alleen staat niet alles goed. kan iemand mij vertellen wat ik fout doe?

in de bijlage kan je zien hoe het eruit ziet. niet op het groene lette, had ik even gedaan om alles goed te kunnen zien waar wat was :D

ik weet alleen niet hoe ik mijn code kan laten zien, dus ik upload wel wat plaatjes.
sorry voor het gedoe. misschien kan iemand me ook vertellen hoe ik dat kan uploaden :D

<css>

#menu {
float:right;
width:665px;
height:70px;
margin-left:615px;
overflow:hidden;
}


#navmenu {
height:70px;
width:665px;
margin:0px;
list-style:none;
overflow:hidden;
}


#navmenu a {
background-image: url("images/test/images/menu.gif");
float:left;
height:70px;
color:#e7e6e6;
margin:0px;
}


#navmenu li a.home {
width:150px;
background-position:0 0;
}

#navmenu li a.about {
width:160px;
background-position:-150 0;
}


#navmenu li a.links {
width:160px;
background-position:-310 0;
}


#navmenu li a.news {
width:195px;
background-position:-470 0;
}


#wrapper {
width:1275px;
height:800px;
margin:0px;
background-color:green;
overflow:hidden;
}


#header {
margin:0px;
width:615px;
height:70px;
background-image:url("images/test/images/logo.gif");
overflow:hidden;

}


#content {
background-image:url("images/test/images/content.gif");
width:1275px;
height:650px;
background-repeat:no-repeat;
margin:0px;
}


#footer {
width:1280px;
heigth:80px;
background-image:url("images/test/images/footer.gif");
background-repeat:no-repeat;
margin:0px;
}


</css>

mvg
michel
 

Bijlagen

  • Naamloos.jpg
    Naamloos.jpg
    83 KB · Weergaven: 21
  • menu.jpg
    menu.jpg
    97,5 KB · Weergaven: 29
  • home.jpg
    home.jpg
    96,8 KB · Weergaven: 58
Hoi stykurgh,
Eens waren we allemaal een beetje nieuw met sites maken. :)

Als ik zo je plaatjes en codes bekijk, lijken me op verschillende fronten wat dingetjes mis te gaan:
  • De menu.php is een complete pagina in plaats van een code-fragment (zonder <head>, <body>, enz.).
  • De html is niet helemaal correct (in de menu.php en in de index.php).
  • En wat css waar verbetering in nodig is.
Maar voordat ik dwaalwegen ga aanbevelen, eerst even de vraag: is dit ongeveer wat je bedoelt?

stykurgh-screenshot.png

Met vriendelijke groet,
CSShunter
 
... Om te beginnen zou ik momenteel nooit een website met een vaste breedte van rond de 1280px maken. Nog behoorlijk veel mensen gebruiken een resolutie van 1024x768px. Die moeten dan de hele tijd met de scrollbar onderaan heen en weer schuiven om de site te kunnen zien.
Er zijn 2 mogelijkheden:
  1. Een "liquid" website maken, die altijd beeldvullend is op elke resolutie. Dan moet je allerlei maten opgeven in % in plaats van in pixels. Is heel mooi, maar ook weer niet super-eenvoudig als je pas begint. Kan wel (zie bv. hier, met pittig complexe css), hoeft niet.
  2. Een site maken op een vaste breedte die voor 1024x768px geschikt is, en mooi in het midden komt te staan bij grotere schermbreedtes.
Ik zou voor de laatste gaan. Of wil je toch vasthouden aan de 1280-breedte?

Met vriendelijke groet,
CSShunter
 
doe eerst maar dat tweede ;P als ik wat beter ben met sites maken kijk ik wel een keer naar de % :D
 
'kido! Ik stel voor dat we van boven naar beneden de pagina opnieuw gaan bouwen, dat is denk ik sneller dan corrigeren wat er nu is. Ook zéér pedagogisch verantwoord. ;)

  • Wat Dreamweaver kennelijk niet automatisch doet, is er een DOCtype boven zetten. Daar hoort elke zichzelf respecterende html-pagina mee te beginnen! Zie ook de link in m'n handtekening.
  • Dan is handig ook de taal van de tekst aan te geven, o.a. nodig voor een voorlees-browser (anders wordt het NL op z'n EN uitgesproken: geen gehoor!).
  • Er staat ook nog geen "charset" in: dat geeft aan hoe de browser de erna volgende tekens in de code moet interpreteren (is het japans, chinees, universeel, spijkerschrift?, enz.). O.a. nodig om accent-letters goed weer te geven. Aanbevolen wordt "utf-8", dus dat doen we maar.
  • Daar achteraan komt de <title> en wat er nog meer in de <head> mag zitten:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test :: stykurgh</title>
...
Voor het bouwen van een webpagina gebruik ik altijd een style-blok in de <head>, en geen extern stylesheet. Dan kan je zó iets veranderen of aanvullen, in plaats van dat je van scherm moet wisselen. :D
De css gaan we meteen even opvullen met de basis-ingrediënten.
Code: 
html {
    height: 100%;
    padding-bottom: 1px;
    }
Daarmee wordt de hoogte van de pagina net 1px groter dan de beschikbare hoogte, en komt er in Firefox ook bij korte pagina's altijd een scrollbar aan de rechterkant. Als die er niet zou zijn, zie je de pagina's steeds iets links-rechts schuiven, als je wisselt tussen een korte en een lange pagina.
Code: 
body {
    width: 990px;
    margin: 0 auto;
    padding: 0;
    }
Deze breedte houdt rekening met de breedte van de rechter-scrollbar, anders past het er nog niet op bij een resolutie van 1024x768px. En door dit toe te passen op de <body>, hebben we meteen de #wrapper uitgespaard: die is niet meer nodig. :)
De {margin: 0 auto;} zorgt voor het centreren: 0px aan margin onder en boven, en auto (matisch) verdelen tussen het eventuele overschot links en rechts.

Hiermee is onze pagina-in-aanbouw:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test :: stykurgh</title>
<style type="text/css">
html {
    height: 100%;
    padding-bottom: 1px;
    }
body {
    width: 990px;
    margin: 0 auto;
    padding: 0;
    }
</style>
</head>

<body>
    (body)
</body>

</html>

Wordt vervolgd!
CSShunter

[edit]De bb_html-tag op het forum geeft momenteel te weinig hoogte, daarom maar overgerschakeld naar de bb_code tag.[/edit]
 
Laatst bewerkt:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

dat zet hij er wel automatisch boven. alleen ik had eerst mijn site gemaakt in kladblok. ben later dreamweaver gaan gebruiken maar heb toen gewoon mijn oude bestanden geopend ;D welk bestand moet dit eigenlijk worden? gewoon de home pagina?
 
Hoi stykurgh,
Even diep ademhalen... :d

dat zet hij er wel automatisch boven.
Klik om te vergroten...
Prachtig, die Dreamweaver! - Ik maak 'm nu trouwens met Notepad++ (= veredeld Kladblok), dus voor DW rechtstreeks in de code-weergave in te plakken.

Als ik de opdrachtbon-tekening bekijk, moeten we er nu een <header> inzetten, die bestaat uit het menu (rechtsboven) en het logo (aan de linkerkant).
  • Attentie: wederom doen we alles in deze ene pagina, later kan van de header-met-menu-en-logo een php-fragment gemaakt worden, dat automatisch op elke pagina opgeroepen wordt. Eerst maar eens alles op de goede plek krijgen. :)
welk bestand moet dit eigenlijk worden? gewoon de home pagina?
Klik om te vergroten...
Lijkt me een prima idee. Je kunt 'm alvast index.php noemen, dan kunnen er later php-fragmenten in geplaatst worden zonder dat er verder iets aan hoeft te veranderen.
In je menu-bestand stond:
stykurgh-menu-ori.png
En in je pagina-bestand:
stykurgh-html-ori.png

Die gaan we nu samenvoegen. Als we het menu in de #header-div zetten, hoeft er geen aparte <div id="menu"> omheen. De #wrapper waren we al kwijt. Dan krijgen we als structuur:
Code: 
<body>

<div id="header">
	<ul id="navmenu">
		<li><a href="index.php" class="home">home</a></li>
		<li><a href="about.php" class="about">about</a></li>
		<li><a href="links.php" class="links">links</a></li>
		<li><a href="news.php"  class="news">news</a></li>
	</ul>
	<p>(rest van de header)</p>
	<div class="clearB"><!-- nodig voor IE6 --></div>
</div>

<div id="content">
	<p>(content)</p>
</div>

<div id="footer">
	<p>(footer)</p>
</div>

</body>
Dat levert:
Opmerkingen hierbij:
  • In het menu moet elke link binnen een eigen list-item <li>...</li> geplaatst worden (niet alle links achter elkaar in één groot <li>).
  • De achtergronden komen later, eerst zetten we gewone links in het menu.
  • Voor IE6 is een extra <div> in de #header nodig met {clear: both;}, om de #content goed onder de #header te krijgen. Voor de rest kan dit geen kwaad.
  • Bij bekijken in IE6 en IE7 (IE8 niet getest) zien we meteen dat er verschil is met de andere "echte browsers": Firefox, Opera, Chrome, Safari. In Internet Explorer zijn de bullets van de menu-items verdwenen, en is er geen verticale afstand binnen de header.
Maar daar gaan we iets aan doen, want nu komt het leukere werk: stylen! :D

Er zijn geen bullets nodig: dus {list-style: none;}.
Alle browsers op één lijn brengen met {margin: 0;} en {padding: 0;} voor zowel de <ul> als de <li>'s.
Nu kunnen de list items c.q. links hun breedte krijgen van elk 110px of iets anders (dan de totale breedte van de #menu <ul> aan te passen), en hun vereiste hoogte voor de achtergrond-afbeelding die er nog in moet.
Hiermee krijgen we:
Code: 
#navmenu {
	float:right;
	width: 440px;
	border: 1px dotted red; /* tijdelijk */
	margin: 0;
	padding: 0;
	list-style: none;
	}
#navmenu li {
	float: left;
	width: 110px;
	margin: 0;
	padding: 0;
	}
#navmenu a {
	width: 110px;
	height: 50px;
	display: block; /* hoveren over gehele oppervlak */
	}
En op het scherm wordt dat:
Na het in elkaar lijmen van een gecombineerde figuur voor de menu-afbeeldingen (zowel de knoppen naast elkaar, waarvan er dankzij de css background-position steeds maar 1 te zien is; als de hover-status eronder, ook met de bg-position geregeld) ...
stykurgh-menu-bg.png

... kunnen de bijbehorende achtergrond-posities aan de verschillende links gegeven worden:
Code: 
#navmenu a {
	width: 110px;
	height: 50px;
	display: block; /* hoveren over gehele oppervlak */
	background: url(images/stykurgh-menu-bg.png);
	}

#navmenu a.about { background-position: -110px 0; }
#navmenu a.links { background-position: -220px 0; }
#navmenu a.news  { background-position: -330px 0; }

#navmenu a.home:hover,
#navmenu a.home:focus  { background-position: 0 -50px; }

#navmenu a.about:hover,
#navmenu a.about:focus { background-position: -110px -50px; }

#navmenu a.links:hover,
#navmenu a.links:focus { background-position: -220px -50px; }

#navmenu a.news:hover,
#navmenu a.news:focus  { background-position: -330px -50px; }
De "focus" is er telkens bijgezet om mensen die geen muis gebruiken, maar met de tab-toets van link naar link springen, óók te laten zien waar ze zitten.
Met als resultaat:
Nu kan de rest van de header er in gezet worden, bijvoorbeeld...:
... waarmee de header klaar is voor algemeen gebruik op alle pagina's.
Tenminste als alles goed door de browser-tests komt, en als alles valid html en valid css is.
Dat hadden we natuurlijk al systematisch bij elke tussenstap gecheckt. ;)

De hele <div id="header"> t/m zijn eindpunt </div> kan nu uit de pagina geknipt worden, ingeplakt worden in een compleet leeg document (geen html-pagina met <head>, <body> enz.; gewoon alleen het uitgeknipte fragment), en in een aangemaakt mapje "includes" opgeborgen worden.
Alhier:
Bij bekijken: dat ziet er dus niet uit! :D
Niets van het mooie menu te zien. Maar dat kan kloppen, want de css-stijlen (met de bronnen voor de achtergrond-images) staan niet in dit fragment. Niets van het logo te zien: klopt ook, dat staat niet in een map "images" van de map "includes".
Maar met "Beeld > bekijk broncode" in de browser kan je zien dat het fragment wel de complete html-code voor de header bevat. En daar was het om te doen.

Nu kunnen we op de pagina zelf op de plaats van de weggeknipte header de verwijzing gaan zetten, en we houden qua body een prettig kale pagina over:
Code: 
<body>
<?php include("includes/stykurgh-header.php"); ?>

<div id="content">
	<p>(content)</p>
</div>

<div id="footer">
	<p>(footer)</p>
</div>

</body>
Zie hier:
Hm, dat is wel heel erg kaal: de header is er helemaal niet! :eek:
Inderdaad, dat komt omdat dit nog een .htm pagina is. Door de pagina te vernoemen tot .php pagina wordt de php (het "pre-processen") op de server in werking gezet:
Wie nu via de browser in de broncode van de pagina gaat kijken, ziet niet meer de <?php ... ?> verwijzing, maar de door de server ingeplakte header-div: alsof die nooit weggeweest is! :)

Blijft over: ook de css wegknippen, in een stylesheet zetten, en dat koppelen aan elke pagina.

Zo geloof ik dat we wel rond zijn met de grote lijn.
(... en nu kun je weer uitademen) ;)

Succes!
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
bedankt voor je hulp :D. ik ga dit morgen even allemaal verwerken in mijn documenten. moet nu slapen want ik moet morgen weer vroeg op.. xD heel erg bedankt!

met vriendelijke groet

michel
 
oke ik heb em nu in elkaar gezet. alleen staat hij niet in het midden of moet dat ook niet?
en als ik de background-images invoeg, dan komen ze er alleen maar te staan als er ook iets in die div's staat. en als er maar 1 regel staat is er dus maar 1 klein strookje zichtbaar. is dit normaal en kan je dit aanpassen?

edit *ff screenshot toegevoegd*

weer aangepast xD

heb hem nu in elkaar en de plaatjes zijn ook goed. was vergeten de div's waar die in staan width enzo mee te geven. alleen zit er zo'n witte balk tussen elk stuk. hoe krijg ik dat weg?
 

Bijlagen

  • Naamloos.png
    Naamloos.png
    36,7 KB · Weergaven: 25
Laatst bewerkt:
alleen zit er zo'n witte balk tussen elk stuk. hoe krijg ik dat weg?
Klik om te vergroten...
Uit alleen een screenshot zonder css en html valt dat eigenlijk niet goed op te maken.
De dokter kan met alleen een foto van de patiënt niet zo heel veel. ;)
Maar:
  • Het lijkt wel alsof er extra een margin boven/onder de regeltjes-met-de-tekst-tussen-haakjes staat. Heb je de p {margin: 0; padding: 0;} in de css staan?
  • De #content komt nog niet onder de plaatjes van het menu. Heb je de <div class="clearB"> er in staan?
Met vriendelijke groet,
CSShunter
 
oke sorry. zal er volgende keer om denken ;D dacht misschien kan je het zo zien. maar het was inderdaad de P margin en padding ;D.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan