Menu wil niet centreren

Status
Niet open voor verdere reacties.
H

henri2500

Gebruiker
Lid geworden
28 feb 2007
Berichten
265
Hey,

Ik krijg mijn menu niet gecentreerd. Hij blijft naar links hangen, en in IE staat hij zelfs helemaal links :confused:. Het al wat proberen aan te passen, maar niks lijkt te helpen.

http://www.creations-of-nature.com/test/

HTML: 
	<!-- HTML -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

	<!-- Titel -->

<title>Creations of Nature - Home</title>

	<!-- META TAGS -->

<meta name="keywords" content="" />

	<!-- CSS Include -->

<link href="layout.css" rel="stylesheet" type="text/css" media="screen" />
</head>

	<!-- BODY -->

<body>

<div class="centerdiv">

	<!-- Header -->

<br>
<br>
<TABLE BORDER="0" WIDTH="100%">
<TR>
<TD WIDTH="33%" ALIGN='left'></TD>
<TD WIDTH="33%" ALIGN='center'><a href="http://www.textspace.net/metallic_text/"><img src="http://img155.imageshack.us/img155/5603/1299357655b3becea9i.gif" border="0" alt="Metallic Text Generator at TextSpace.net" /></a></TD>
<TD WIDTH="33%" ALIGN='right'></TD>
</TR>
</TABLE>
<br>


	<!-- Menu -->

  </div>
</div>
 <div id="menu-bg">
<div id="menu">
    <ul id="main">
      <li class="current_page_item"><a href="LINKNOGINVOEGEN">Home</a></li>
      <li><a href="#">Projecten</a></li>
      <li><a href="#">Kweken</a></li>
      <li><a href="#">Artikelen</a></li>
      <li><a href="#">Dagboek</a></li>
      <li><a href="#">Links</a></li>
      <li><a href="#">Met dank aan</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </div>
  </div>
</div>

	<!-- Body -->

<p>

	<!-- FOOTER -->

<div id="footer">
    <p>Copyright &copy; Creations of Nature 2011</p></center>
  </div>
</body>
</html>

HTML: 
body {
	margin: 0;
	padding: 0;
	background: #191E1A;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: white;
}

/* Menu */

#menu-bg {
	background: #1E3227;
	height: 45px;
}

#menu {
	width: 1000px;
	margin: 0 auto;
}

#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#menu li {
	display: inline;
}

#menu a {
	display: block;
	float: left;
	margin: 0 3px 0 0;
	padding: 12px 15px 10px 15px;
	border: none;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: white;
}

#menu a:hover {
	margin: 0 3px 0 0;
	background: #191E1A;
	border-bottom: 3px solid white;
	color: #FFFFFF;
}

#menu .current_page_item a {
	background: none;
	margin: 0 3px 0 0;
	background: #191E1A;
	border-bottom: 3px solid white;
	color: #FFFFFF;
}


/* Footer */

#footer {
	background-color: #0D170F;
	height: 50px;
}

#footer-content {
	width: 1000px;
	margin: 0px auto;
}

#footer p {
	margin: 0;
	padding: 20px 0 0 0;
	text-align: center;
	font-size: 14px;
	color: white;
}

#footer a {
	color: #FBD900;

}
 
je hebt overal in de css bij margin en padding overal geen ..px achter de cijfers staan. Ik weet niet of dat zo wel werkt?
Wat het dan zou kunnen zijn is dat de width misschien teveel is? Zorg wel dat je de totale 1000px gebruikt wil je hem centreren met margin: auto
 
Heb je code even wat opgeschoond en wat verbeterd :D ook heb ik het voorzien van comment in de css hoop dat je er iets van leert.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Titel van je website</title>
  <link type="text/css" rel="stylesheet" href="layout.css">
  </head>
  <body>
  
    <div id="header" class="wrap">
      <div id="header-inner">
        <ul id="nav">
          <li class="active"><a href="http://www.">Home</a></li>
          <li><a href="#">Projecten</a></li>
          <li><a href="#">Kweken</a></li>
          <li><a href="#">Artikelen</a></li>
          <li><a href="#">Dagboek</a></li>
          <li><a href="#">Links</a></li>
          <li><a href="#">Met dank aan</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </div>
    </div>
    
    <div id="content" class="wrap">
      <div id="content-inner">
        <h1>Titel</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at quam sem, eget euismod risus. Pellentesque massa eros, aliquet sit amet consequat ultrices, mollis et urna. Sed aliquet sollicitudin metus, et dapibus diam gravida aliquam. Nunc malesuada, nulla quis volutpat suscipit, velit justo pharetra sapien, vel mattis magna lectus et nisi. In libero magna, blandit sit amet placerat eget</p>
        <h3>Sub titel</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at quam sem, eget euismod risus. Pellentesque massa eros, aliquet sit amet consequat ultrices, mollis et urna. Sed aliquet sollicitudin metus, et dapibus diam gravida aliquam. Nunc malesuada, nulla quis volutpat suscipit, velit justo pharetra sapien, vel mattis magna lectus et nisi. In libero magna, blandit sit amet placerat eget</p>
      </div>
    </div>
    
    <div id="footer" class="wrap">
      <div id="footer-inner">Copyright © Creations of Nature 2011</div>
    </div>

  </body>
</html>

HTML: 
/* CSS Document */

body{
margin:0;
padding:0;
font:normal 14px/24px 'Arial';
background-color:#191E1A;
color:#FFF;
}

ul{
list-style:none;
}

/* buitenste divs hebben een class met width 100% */
.wrap{
width:100%;
}

/* algemene link opmaak */
a{
text-decoration:underline;
}

/* algemene tags opmaak */
ul, p, h1, h2, h3, h4, h5, h6{
margin:0;
padding:0;
}

/* h tags overrulled door dieper te specifieren  */
#content h1{
margin-bottom:20px;
}

#content h3{
margin-bottom:15px;
}

#content p{
margin-bottom:10px;
}

/* buistenste header wrap met achtergrond */
#header{
background:url(bg-header.jpg) repeat-x;
}

/* binnenste divs hebben position relative (margin:0 auto zet ze in het midden) */ 
#header-inner,
#content-inner,
#footer-inner{
position:relative;
margin:0 auto;
}

#header-inner{
width:900px;
height:120px; /* padding komt bij de hoogte op en header is dus in totaal 160px hoog */
padding-bottom:40px;
background:url(logo.gif) no-repeat center 30px; /* center zet de img in het midden  30 px is hoogte vanaf top 
center = vanaf de linker kant aantal px is vanaf de top */
}

/* menu */
#nav{
width:900px;
position:absolute;
left:0;
bottom:0;
height:40px;
background-color:#1E3227;
}

#nav li{
float:left;
height:40px;
}

#nav a{
display:block;
padding:8px; /* lineheight = 24 px padding 8 rondom = boven + onder 16: (18 + 24) = 40 hoogte van menu */
text-decoration:none;
color:#FFF;
}

#nav a:hover,
#nav li.active{
background:url(hover.jpg) repeat-x;
}

/* content */
#content-inner{
width:900px;
padding:20px 0 5px;
}

/* buistenste footer wrap met achtergrond kleur */
#footer{
background-color:#0D170F;
}

/* footer-inner */
#footer-inner{
text-align:center;
width:880px;
padding:8px;
background-color:#0D170F;
}
 

Bijlagen

  • logo.gif
    logo.gif
    11,1 KB · Weergaven: 22
  • hover.jpg
    hover.jpg
    328 bytes · Weergaven: 35
  • bg-header.jpg
    bg-header.jpg
    354 bytes · Weergaven: 14
Laatst bewerkt:
Ha, die is heel mooi geworden! :thumb:
Zó: centreren-test.htm
En de pagina is prachtig gecentreerd.
Alleen één vraagje blijft nog over: "Ik krijg mijn menu niet gecentreerd". ;)
 
... maar geen grappen van de zijlijn zonder alternatief! :)
Ik heb deze gefabriekt:
De wijzigingen zijn:
  • xmlns-eigenschap en lang-eigenschap toegevoegd aan <html>-tag,
  • utf-8 als "charset" gebruikt (beter dan windows-1250),
  • fixed font-size vervangen door relatieve font-size,
  • wrappers weggelaten, en menu en footer gecentreerd met text-align:center,
  • logo als voorgrond-img i.p.v. background-img: nu aanklikbaar,
  • andere bg-images vervangen door css-kleuren resp. border-bottom in menu,
  • hidden <h1> voor text-browsers (en Google) toegevoegd,
  • menu-items naast elkaar d.m.v. display:inline i.p.v. float:left (wat het centreren verhindert),
  • overbodige <div>'s geschrapt.
Nadeel van deze versie:
  • op resolutie kleiner dan ingestelde paginabreedte (900px) worden menu-balk en footer-balk niet verlengd als je naar rechts scrollt om de rechterkant van de pagina te zien,
  • maar bezoekers op 800x600px zullen zo langzamerhand heel dun gezaaid zijn,
  • en eventueel kunnen de wrappers er weer bij komen.
Niet getest:
  • ipads, ipods, mobilofoons, enz.
Met vriendelijke groet,
CSShunter
 
Iedereen super hartelijk en geweldig veel bedankt! Ik ga hier zeker serieus naar kijken en mee verder.
 
Hoi Henri2500,
Eerst wat vraagjes terug:
  • Is het de bedoeling dat het logo van je laatste link www.creations-of-nature.com/test/ ook als logo voor de rest gaat dienen, en slaat je vraag daarop?
  • Of bedoel je dat je deze test-homepagina zelf met mooie css wilt hebben?
En los hiervan:
  • Zelf krijg ik altijd een narrelig gevoel als ik op een nietszeggende vóórpagina van een site kom, waarop ik alleen maar uit een taal kan kiezen.
  • Google zal voor zo'n inhoudloze portaal-pagina ook weinig oog hebben.
  • Ik zou er de voorkeur aan geven om direct op de echte homepage uit te komen, in één van de twee talen, en daar op een opvallende plek het vlaggetje voor de andere taal te zien. Dan heb ik alvast een eerste indruk van wat de site te bieden heeft als ik naar de andere taal wil gaan.
  • Je kan er dan voor kiezen om de homepage in die taal op te stellen, waarin je de meeste bezoekers verwacht (of: de taal van de bezoekers van wie je de meeste reacties / opdrachten / bestellingen / enz. verwacht).
    Die hoeven dan 1 keer minder te klikken, terwijl de andere soort bezoekers de pagina mooi van taal zien wisselen (terwijl de rest gelijk blijft) als ze op hun vlaggetje klikken.
  • Voor de vervolgpagina's in beide talen kan je hetzelfde doen: telkens het vlaggetje voor de andere taal erbij. Dit is dan voor die bezoekers, die via Google of een link op een andere site direct op een vervolgpagina uitkomen.
Wat dacht je daarvan?

Met vriendelijke groet,
CSShunter

PS: mijn eerste associatie bij de test homepage is, dat ik op de site zit van een fotograaf die gespecialiseerd is in mooie dierenfoto's. Maar uit het eerder hierboven opgegeven menu (met o.a. "kweken", "artikelen") haal ik heel iets anders!
 
Laatst bewerkt:
Hallo CSShunter,

Het is inderdaad de bedoeling dat dat logo gebruikt wordt.

Ik ga zeker je advies opvolgen en de taal in de welkomstpagina van de website zelf verwerken, al moet ik nog even bedenken waar ik dit mooi kan verwerken en de pagina. Misschien heb jij een idee? Zou het bijvoorbeeld rechts van het menu kunnen, in de menu balk? Of rechts naast het logo? Ik snap precies je punt (Y)

Dit moet dus de pagina worden: http://www.creations-of-nature.com/test/ , maar er zit me te weinig (oftewel geen) ruimte tussen het menu en het logo... en dat vind ik niet zo mooi.

Groeten Henri
 
... dat vind ik niet zo mooi.
Klik om te vergroten...
Dan maak je het mooier door even de height:90px; van de <h1> te veranderen in height:110px; :)

Taal ... Zou het bijvoorbeeld rechts van het menu kunnen, in de menu balk?
Klik om te vergroten...
Lijkt me een goed idee!
con-taal.png

(Met de links/rechts-padding van de #nav a {padding: .6em 15px;} kunnen de menu-items wat smaller worden, zodat ie er nog bij kan.)

Met vriendelijke groet,
CSShunter
 
Voor de finishing touch: wat je nog kan doen, is automatisch alleen het EN vlaggetje tonen op de NL pagina, en omgekeerd. Want de taal-van-dienst hoeft niet op geklikt te worden, die heeft men al voor zich staan.
Kan als volgt; in het menu:
HTML: 
...
<li id="en"><a href="en/index.html"><img ... enz.></a></li>
<li id="nl"><a href="nl/index.html"><img ... enz.></a></li>
Dan in de css:
Code: 
.en #en { display: none; }
.nl #nl { display: none; }
En tenslotte geef je bij de <body> van elke pagina aan, in welke taal die pagina is:
HTML: 
<body class="nl">
of
<body class="en">
De css zegt: als er ergens een class="en" in de html voorafgaat aan de id="en" (en alleen dan!), moet het list-item met de id="en" niet getoond worden. En dat gebeurt alleen op de pagina's waarvan de <body> met de class="en" getooid is.
Plus omgekeerd voor als het NL is. :)

Met vriendelijke groet,
CSShunter
 
Dat is inderdaad ook erg mooi! Ik snap alleen nog niet helemaal waar ik dat CSS stukje precies moet verwerken....
 
O, dat zet je gewoon ergens in het stylesheet:
Code: 
/* CSS Document */
html { ... }
body { ... }
.en #en { display: none; }
.nl #nl { display: none; }
a img { ... }
... enz.
(Voor het gemak bij het ontwerpen staan de style-opdrachten nu nog in de <head> van de pagina. Als alles klaar is, kan het een apart .css bestand worden, dat op elke pagina wordt aangehaakt. Dan hoeft het niet telkens opnieuw in de <head> geplakt te worden.)
 
Haha! Ik zie het al, ik had de code er heel leuk tussengezet en geprobeerd, maar het werkte dus niet. Nu je zegt dat het niet uitmaakt waar het staat, ben ik even de fout gaan zoeken. Jij gebruikte voor Nederlands nl en ik ne, daardoor stonden er 2 namen voor 1 variabele, dus dat zag hij even niet. Ik ga binnenkort het CSS excluden zodat dit in een apart bestand komt :P
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan