Webmastercity.nl

Voor al uw vragen en antwoorden op webmaster gebied
http://www.webmastercity.nl/forum/

Navigatie

http://www.webmastercity.nl/forum/viewtopic.php?f=15&t=29010

Pagina 1 van 1

Navigatie

BerichtGeplaatst: 10 Jul 2006 17:06
Door _AN
Code: Alles selecteren
<p>
<a href="index.php?page=">Menu Item</a><br>
<a href="index.php?page=">Menu Item</a><br>
<a href="index.php?page=">Menu Item</a><br>
<a href="index.php?page=">Menu Item</a><br>
<a href="index.php?page=">Menu Item</a><br>
<a href="index.php?page=">Menu Item</a><br>
</p>


Ik maak eigenlijk altijd simpel op bovenstaande manier mijn navigatie. Ik denk er eigenlijk nooit bij na of dit wel makkelijk is of dat dit wel mag volgens de regels? Of moet ik hier lijsten voor gebruiken? (die gebruik ik nooit).

Hoe doen jullie dit altijd? Maken jullie gebruik van lijsten? Of handelen jullie dit ook gewoon zo simpel af? Ik was daar wel benieuwd naar :)

Edit: Hier moet ik nog wel even bij vertellen dat ik hier nog niks heb gedaan met de opmaak.

BerichtGeplaatst: 10 Jul 2006 17:17
Door battlequeen
ik gebruik er zelf lijsten voor

heb je ook geen probleem met text-gebaseerde browsers

BerichtGeplaatst: 10 Jul 2006 18:07
Door _AN
Stel dat ik nu met Javascript een functie wil maken dat er een link uitgeklapt kan worden en ook weer ingeklapt kan worden. Kan ik hier dan gewoon lijsten voor gebruiken? En welke lijsten kan ik hier het beste voor gebruiken?

BerichtGeplaatst: 10 Jul 2006 18:08
Door piles
Gewoon een <ul> :)
Voor allerlei lijsten moet je eigenlijk een lijst gebruiken, ipv <br />'s

BerichtGeplaatst: 10 Jul 2006 18:29
Door dexus
http://www.alistapart.com/articles/taminglists/
http://css.maxdesign.com.au/

Er zijn 3 soorten lijsten:
  • Unordered lists (UL)
  • Ordered lists (OL)
  • Definition lists (DL)

Voor navigatie wordt meestal een ul gebruikt.
Omdat het meestal ongeordent is. :D

Als je het echt goed wil doen moet je trouwens maar eens hier kijken naar het map element.

BerichtGeplaatst: 11 Jul 2006 10:59
Door _AN
Danku! Ik ben toch even gaan kijken naar lijsten. En ik heb nu de volgende code:

Code: Alles selecteren
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Lelieveld-net</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
html,body{
   margin:0;
   padding:0
}
body{
   font-family: Arial,Verdana;
   font-size: 12px;
   text-align:center;
}
img{
   border: 0px;
}
h1{
   font-family: Arial;
   font-size: 17px;
   font-weight: bold;
}
p{
   margin:0 10px 10px;
}
a{
   display:block;
   color: #000;
   padding:2px;
}
div#container{
     text-align:left;
}
div#content p{
   line-height:1.4;
   color: #333;
}
div#navigation{
   background:#dcebf1;
}
div#extra{
   background:#dcebf1;
}
div#footer{
   background: #0B5F7E;   
   color: #FFF;
}
div#footer p{
   margin:0;
   padding:5px 10px;
}

div#container{
   width:600px;
   margin:0 auto;
   background: #FFF url('/lelieveld-net/images/div.gif');
}
div#content{
   padding: 10px 0 0 10px;
   float:left;
   width:450px
}
div#navigation{
   margin-left: 0;
   padding: 0;
   float:right;
   width:139px;
   height:100%;
}
#headnavigation {
   padding: 0;
   margin: 3px 0 0 10px;
   list-style-type: none;
}
div#extra{
   float:right;
   clear:right;
   width:139px;
   height:100%;
}
div#footer{
   clear:both;
   width:100%;
}
</style>
</head>
<body>
<div id="container">
<div id="header"><img src="/lelieveld-net/images/header.png" style="display:block; " alt="Lelieveld-net" title="Lelieveld-net"></div>
<div id="wrapper">
<div id="content">
   <h1>Lelieveld-net</h1>
   
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut malesuada risus mollis erat. Ut iaculis venenatis magna. In luctus leo id risus. Morbi laoreet, odio quis facilisis tristique, dui ante faucibus magna, viverra accumsan justo risus in odio. Morbi vitae metus. Sed et diam. Aliquam vulputate erat sit amet mi pellentesque convallis. Mauris laoreet, purus vitae congue ornare, diam magna accumsan est, a scelerisque mi massa ut leo. Proin pharetra. Nulla facilisi. Morbi dignissim. Sed sed nisl id leo cursus tincidunt. Morbi eu risus vitae nisl aliquam posuere.

Morbi orci mi, vestibulum a, tincidunt ut, rutrum eget, enim. Suspendisse suscipit, diam vitae pretium pellentesque, turpis ipsum placerat est, et volutpat erat nunc vitae pede. Mauris velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam nulla. Cras lectus quam, lobortis lobortis, fringilla ac, nonummy vel, libero. Morbi rutrum venenatis pede. Vivamus porta nisl in nisi. Pellentesque pede libero, ullamcorper ultrices, ultricies vel, molestie vitae, felis. Nam eu dolor in turpis imperdiet tristique. Curabitur lorem. Curabitur vel nulla et purus commodo vulputate. Donec eget tellus. Nulla facilisi. Nam neque urna, elementum nec, posuere ut, adipiscing eu, metus. Aliquam eget nunc non massa interdum dictum. Duis mollis. Nullam auctor, ipsum a auctor eleifend, lacus eros varius enim, ut fringilla mi neque et nisi. Donec auctor dictum velit.

Aenean vel justo ut pede viverra laoreet. Donec arcu quam, commodo ut, bibendum ac, fringilla ac, eros. Duis est tortor, volutpat id, interdum sit amet, pellentesque at, tellus. Proin bibendum ipsum sed nulla. Cras id est a purus varius vulputate. Phasellus mollis ipsum non lectus. In nec mi. Donec sapien purus, commodo nec, posuere eget, vestibulum sit amet, nisi. Maecenas posuere, lectus at aliquam congue, elit diam aliquet felis, in interdum neque dolor eu urna. Sed venenatis egestas turpis. In turpis. Maecenas tortor orci, accumsan at, gravida dictum, posuere ut, ipsum. Vestibulum varius mi a risus. Pellentesque justo.
</div>
</div>
<div id="navigation">
   <ul id="headnavigation">
      <li><a href="" alt="" title="">Index-pagina</a></li>
      <li><a href="" alt="" title="">Portfolio</a></i>
      <li><a href="" alt="" title="">Foto`s</a></i>
      <li><a href="" alt="" title="">Contact opnemen</a></i>
   </ul>
</div>

<div id="extra">
   <p>
       <a href="http://validator.w3.org/check?uri=referer"><img
        src="/lelieveld-net/images/valide_html.gif"
        alt="Valid HTML 4.01 Strict" height="31" width="88"></a>
       <a href="http://jigsaw.w3.org/css-validator/validator?uri=www.lelieveld-net.nl#css"><img
        src="/lelieveld-net/images/valide_css.gif"
        alt="Valid HTML 4.01 Strict" height="31" width="88"></a>
   </p>
</div>
<div id="footer"><p>© Lelieveld-net.nl - Versie 1.0</p></div>
</div>
</body>
</html>


Zoals u in het voorbeeld kunt zien, ziet het er in IE weer heel anders uit dan in FF :? Zeer vervelend dit. Hoe kan ik voorkomen dat IE zulke grote ruimte tussen de LI gebruikt?

Online Voorbeeld: Klik

BerichtGeplaatst: 11 Jul 2006 11:48
Door Antoinedv
Voorbeeld werkt niet mss effe editen ;)

BerichtGeplaatst: 11 Jul 2006 11:51
Door piles
Je kent margin en padding toch wel?

BerichtGeplaatst: 11 Jul 2006 13:10
Door _AN
piles schreef:Je kent margin en padding toch wel?


Voorbeeld werkt gewoon hoor :wink:

@Piles: Zoals je ziet in de code heb ik die ook gebruikt. Alleen ze zijn totaal verschillend in IE en FF.

BerichtGeplaatst: 13 Jul 2006 18:45
Door _AN
Kickje :)

BerichtGeplaatst: 13 Jul 2006 18:49
Door piles
En margin/padding op je <li>?

BerichtGeplaatst: 13 Jul 2006 19:00
Door _AN
Stom niet aan gedacht, ik laat het vanavond nog even weten of het werkt.

BerichtGeplaatst: 14 Jul 2006 18:30
Door _AN
Sorry een beetje laat, maar goed ik heb het ook geprobeerd op het LI element en ik krijg nog steeds een raar effect. De HTML-code is nu als volgt:

Code: Alles selecteren
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Lelieveld-net</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
html,body{
   margin:0;
   padding:0
}
body{
   font-family: Arial,Verdana;
   font-size: 12px;
   text-align:center;
}
img{
   border: 0px;
}
h1{
   font-family: Arial;
   font-size: 17px;
   font-weight: bold;
}
p{
   margin:0 10px 10px;
}
a{
   display:block;
   color: #000;
   padding:2px;
}
div#container{
     text-align:left;
}
div#content p{
   line-height:1.4;
   color: #333;
}
div#navigation{
   background:#dcebf1;
}
div#extra{
   background:#dcebf1;
}
div#footer{
   background: #0B5F7E;   
   color: #FFF;
}
div#footer p{
   margin:0;
   padding:5px 10px;
}

div#container{
   width:600px;
   margin:0 auto;
   background: #FFF url('/lelieveld-net/images/div.gif');
}
div#content{
   padding: 10px 0 0 10px;
   float:left;
   width:450px
}
div#navigation{
   margin-left: 0;
   padding: 0;
   float:right;
   width:139px;
   height:100%;
}
ul {
   padding: 0px;
   margin: 0px;
   list-style-type: none;
}
li {
   padding: 0px;
   margin: 0px;
   list-style-type: none;
}
div#extra{
   float:right;
   clear:right;
   width:139px;
   height:100%;
}
div#footer{
   clear:both;
   width:100%;
}
</style>
</head>
<body>
<div id="container">
<div id="header"><img src="/lelieveld-net/images/header.png" style="display:block; " alt="Lelieveld-net" title="Lelieveld-net"></div>
<div id="wrapper">
<div id="content">
   <h1>Lelieveld-net</h1>
   
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut malesuada risus mollis erat. Ut iaculis venenatis magna. In luctus leo id risus. Morbi laoreet, odio quis facilisis tristique, dui ante faucibus magna, viverra accumsan justo risus in odio. Morbi vitae metus. Sed et diam. Aliquam vulputate erat sit amet mi pellentesque convallis. Mauris laoreet, purus vitae congue ornare, diam magna accumsan est, a scelerisque mi massa ut leo. Proin pharetra. Nulla facilisi. Morbi dignissim. Sed sed nisl id leo cursus tincidunt. Morbi eu risus vitae nisl aliquam posuere.

Morbi orci mi, vestibulum a, tincidunt ut, rutrum eget, enim. Suspendisse suscipit, diam vitae pretium pellentesque, turpis ipsum placerat est, et volutpat erat nunc vitae pede. Mauris velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam nulla. Cras lectus quam, lobortis lobortis, fringilla ac, nonummy vel, libero. Morbi rutrum venenatis pede. Vivamus porta nisl in nisi. Pellentesque pede libero, ullamcorper ultrices, ultricies vel, molestie vitae, felis. Nam eu dolor in turpis imperdiet tristique. Curabitur lorem. Curabitur vel nulla et purus commodo vulputate. Donec eget tellus. Nulla facilisi. Nam neque urna, elementum nec, posuere ut, adipiscing eu, metus. Aliquam eget nunc non massa interdum dictum. Duis mollis. Nullam auctor, ipsum a auctor eleifend, lacus eros varius enim, ut fringilla mi neque et nisi. Donec auctor dictum velit.

Aenean vel justo ut pede viverra laoreet. Donec arcu quam, commodo ut, bibendum ac, fringilla ac, eros. Duis est tortor, volutpat id, interdum sit amet, pellentesque at, tellus. Proin bibendum ipsum sed nulla. Cras id est a purus varius vulputate. Phasellus mollis ipsum non lectus. In nec mi. Donec sapien purus, commodo nec, posuere eget, vestibulum sit amet, nisi. Maecenas posuere, lectus at aliquam congue, elit diam aliquet felis, in interdum neque dolor eu urna. Sed venenatis egestas turpis. In turpis. Maecenas tortor orci, accumsan at, gravida dictum, posuere ut, ipsum. Vestibulum varius mi a risus. Pellentesque justo.
</div>
</div>
<div id="navigation">
   <ul id="headnavigation">
      <li><a href="" alt="" title="">Index-pagina</a></li>
      <li><a href="" alt="" title="">Portfolio</a></i>
      <li><a href="" alt="" title="">Foto`s</a></i>
      <li><a href="" alt="" title="">Contact opnemen</a></i>
   </ul>
</div>

<div id="extra">
   <p>
       <a href="http://validator.w3.org/check?uri=referer"><img
        src="/lelieveld-net/images/valide_html.gif"
        alt="Valid HTML 4.01 Strict" height="31" width="88"></a>
       <a href="http://jigsaw.w3.org/css-validator/validator?uri=www.lelieveld-net.nl#css"><img
        src="/lelieveld-net/images/valide_css.gif"
        alt="Valid HTML 4.01 Strict" height="31" width="88"></a>
   </p>
</div>
<div id="footer"><p>© Lelieveld-net.nl - Versie 1.0</p></div>
</div>
</body>
</html>


Ik vind dit toch maar vreemd dat het zo verschillend door de browser wordt opgepakt, of ik doe het fout dat kan ook :wink:

BerichtGeplaatst: 15 Jul 2006 16:00
Door Th0maz
Als je eerst alles op 0 margin en padding zet dan? Je hebt nu(padding vergeten af te sluiten):

Code: Alles selecteren
html,body{
   margin:0;
   padding:0
}


staan, zelf gebruik ik altijd:

* {
margin: 0px;
padding: 0px;
}


Zo zet je alles op nul zodat ie geen andere marges kan geven dan andere browsers.

Heb hier geen internet explorer, dus kan het niet testen.
Alle tijden zijn UTC + 1 uur [ Zomertijd ]
Pagina 1 van 1
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/