Navigatie

Dit forum is bestemd voor (X)HTML-, XML- en CSS-onderwerpen.
Forumregels
Lees onze Huisregels
Reactie plaatsen

Navigatie

BerichtDoor _AN op 10 Jul 2006 17:06

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.
Bekijk websites eenvoudig op de iPhone! www.bekijk-op-iphone.nl
Gebruikersavatar
_AN
Ultieme lid
Ultieme lid
 
Berichten: 3752
Geregistreerd: 14 Apr 2004 18:48
Voorheen bekend als: Angelolel
Naar boven

BerichtDoor battlequeen op 10 Jul 2006 17:17

ik gebruik er zelf lijsten voor

heb je ook geen probleem met text-gebaseerde browsers
Je krijgt niks cadeau, maar je moet ervoor knokken
http://scripthulp.com
IE drop dead!
Gebruikersavatar
battlequeen
Ultieme lid
Ultieme lid
 
Berichten: 3397
Geregistreerd: 15 Jan 2004 10:44
Woonplaats: Den Bosch
Naar boven

BerichtDoor _AN op 10 Jul 2006 18:07

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?
Bekijk websites eenvoudig op de iPhone! www.bekijk-op-iphone.nl
Gebruikersavatar
_AN
Ultieme lid
Ultieme lid
 
Berichten: 3752
Geregistreerd: 14 Apr 2004 18:48
Voorheen bekend als: Angelolel
Naar boven

BerichtDoor piles op 10 Jul 2006 18:08

Gewoon een <ul> :)
Voor allerlei lijsten moet je eigenlijk een lijst gebruiken, ipv <br />'s
Gebruikersavatar
piles
Ultieme lid
Ultieme lid
 
Berichten: 2974
Geregistreerd: 14 Dec 2003 00:33
Woonplaats: Kerkwerve
Naar boven

BerichtDoor dexus op 10 Jul 2006 18:29

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.
hier moet nog een keer iets nuttigs komen te staan.
Gebruikersavatar
dexus
Ultieme lid
Ultieme lid
 
Berichten: 3338
Geregistreerd: 18 Apr 2004 17:01
Woonplaats: Lincoln (UK)
Naar boven

BerichtDoor _AN op 11 Jul 2006 10:59

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
Bekijk websites eenvoudig op de iPhone! www.bekijk-op-iphone.nl
Gebruikersavatar
_AN
Ultieme lid
Ultieme lid
 
Berichten: 3752
Geregistreerd: 14 Apr 2004 18:48
Voorheen bekend als: Angelolel
Naar boven

BerichtDoor Antoinedv op 11 Jul 2006 11:48

Voorbeeld werkt niet mss effe editen ;)
Afbeelding
Gebruikersavatar
Antoinedv
Junior
Junior
 
Berichten: 80
Geregistreerd: 17 Jun 2006 10:39
Naar boven

BerichtDoor piles op 11 Jul 2006 11:51

Je kent margin en padding toch wel?
Gebruikersavatar
piles
Ultieme lid
Ultieme lid
 
Berichten: 2974
Geregistreerd: 14 Dec 2003 00:33
Woonplaats: Kerkwerve
Naar boven

BerichtDoor _AN op 11 Jul 2006 13:10

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.
Bekijk websites eenvoudig op de iPhone! www.bekijk-op-iphone.nl
Gebruikersavatar
_AN
Ultieme lid
Ultieme lid
 
Berichten: 3752
Geregistreerd: 14 Apr 2004 18:48
Voorheen bekend als: Angelolel
Naar boven

BerichtDoor _AN op 13 Jul 2006 18:45

Kickje :)
Bekijk websites eenvoudig op de iPhone! www.bekijk-op-iphone.nl
Gebruikersavatar
_AN
Ultieme lid
Ultieme lid
 
Berichten: 3752
Geregistreerd: 14 Apr 2004 18:48
Voorheen bekend als: Angelolel
Naar boven

BerichtDoor piles op 13 Jul 2006 18:49

En margin/padding op je <li>?
Gebruikersavatar
piles
Ultieme lid
Ultieme lid
 
Berichten: 2974
Geregistreerd: 14 Dec 2003 00:33
Woonplaats: Kerkwerve
Naar boven

BerichtDoor _AN op 13 Jul 2006 19:00

Stom niet aan gedacht, ik laat het vanavond nog even weten of het werkt.
Bekijk websites eenvoudig op de iPhone! www.bekijk-op-iphone.nl
Gebruikersavatar
_AN
Ultieme lid
Ultieme lid
 
Berichten: 3752
Geregistreerd: 14 Apr 2004 18:48
Voorheen bekend als: Angelolel
Naar boven

BerichtDoor _AN op 14 Jul 2006 18:30

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:
Bekijk websites eenvoudig op de iPhone! www.bekijk-op-iphone.nl
Gebruikersavatar
_AN
Ultieme lid
Ultieme lid
 
Berichten: 3752
Geregistreerd: 14 Apr 2004 18:48
Voorheen bekend als: Angelolel
Naar boven

BerichtDoor Th0maz op 15 Jul 2006 16:00

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.
Th0maz
Junior
Junior
 
Berichten: 58
Geregistreerd: 24 Nov 2004 01:15
Woonplaats: Meppel
Naar boven
Reactie plaatsen

Terugkeren naar (X)HTML + XML + CSS



Wie is er online?

Gebruikers in dit forum: Er zijn geen geregistreerde gebruikers en 0 gasten

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Vertaling door phpBBservice.nl.
cron