login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Juiste ul of li structuur

Offline karel - 03/05/2010 19:00
Avatar van karelHTML interesse Wie kan mij helpen ?
Ik wens van de volgende html code een juiste ul en/of li structuur maken, wie kan mij hier bij helpen. Eventueel css structuur is ook welkom.

Plaatscode: 139268

Alvast bedankt.

13 antwoorden

Gesponsorde links
Offline vinTage - 03/05/2010 19:08
Avatar van vinTage Nieuw lid ??

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <ul>
  2.   <li>iets</li>
  3.   <li>iets</li>
  4.   <li>iets</li>
  5.   <li>iets</li>
  6. </ul>
Offline karel - 03/05/2010 19:11
Avatar van karel HTML interesse ok, dat wist ik dus, het probleem is dat ik het niet goed krijg met al de afbeeldingen, structuur, enz...
Offline meerweten - 03/05/2010 19:20
Avatar van meerweten Lid de code kan wat beter gestructureerd worden
het lijkt wel een varkens stal 
Offline WouterJ - 03/05/2010 19:28 (laatste wijziging 03/05/2010 19:29)
Avatar van WouterJ HTML gevorderde Daar heb ik je een paar weken geleden ook al antwoord opgegeven:
http://www.site...1#id237025

En de uitgebreide oplossing:
http://www.site...1#id237031
Offline karel - 03/05/2010 19:41
Avatar van karel HTML interesse Ja dat weet ik en nogmaals bedankt alles werkt perfect doch is dit iets speciaal niet ?
Offline WouterJ - 03/05/2010 19:57 (laatste wijziging 03/05/2010 19:58)
Avatar van WouterJ HTML gevorderde Wat bedoel je met speciaals?

Je maak voor elke link een li aan en geeft die li een class:
html code - Bekijk de code zonder highlighting - Klap code in 
  1. <ul>

  2. <li class="home"><a href="#">HOME</a></li>

  3. <li class="thuis"><a href="#">THUIS</a></li>

  4. <li class="contact"><a href="#">CONTACT</a></li>

  5. </ul>


Dan maak je die class op:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. li.home {
  2. list-style: url("/images/opmaak/homebutton.png");
  3. }
  4. li.thuis {
  5. list-style: url("/images/opmaak/thuisbutton.png");
  6. }
  7. li.contact {
  8. list-style: url("/images/opmaak/contactbutton.png");
  9. }


En je hebt voor elke li een ander plaatje

En als je alle li's naast elkaar wilt hebben doe je dit met de CSS code:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. li {
  2. float: left;
  3. }
  4. /* Rest van de code */
Bedankt door: karel
Offline karel - 10/05/2010 08:36
Avatar van karel HTML interesse Ik volgde deze instructie, doch een probleempje.
Voor elke link krijg ik nu een bolletje te staan, hoe doe ik dit weg ?
Offline Stijn - 10/05/2010 12:13
Avatar van Stijn PHP expert Dat komt omdat je list-style in CSS niet op het LI element toepast maar op het UL element. Bijvoorbeeld:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. ul {
  2.     list-style: url('/path/to/list/image.png') circle;
  3. }


Je kan voor iedere LI wel een aparte image geven. Dan moet je list-style op none zetten en een background image geven per LI.

css code - Bekijk de code zonder highlighting - Klap code in 
  1. ul
  2. {
  3. list-style-type: none;
  4. padding: 0px;
  5. margin: 0px;
  6. }
  7. li
  8. {
  9. background-image: url(sqpurple.gif);
  10. background-repeat: no-repeat;
  11. background-position: 0px 5px;
  12. padding-left: 14px;
  13. }
Offline WouterJ - 10/05/2010 13:03
Avatar van WouterJ HTML gevorderde En om dat dan snelller te maken kan je ook dit doen:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. ul {
  2. list-style: none;
  3. padding: 0;
  4. margin: 0;
  5. }
  6. li {
  7. background: url("sqpurple.gif") no-repeat 0 5px;
  8. padding: 0 0 0 14px;
  9. }

Zo hoeft je browser minder in te laden. Je kan de background altijd samen voegen.(maakt niet uit in de volgorde) Je kan list-style altijd samen voegen(volgorde maakt ook niet uit). En je kan padding zo samenvoegen:
padding: top right bottom left;

En zodra je 0 hebt hoeft er geen px achter.

Succes! 
Offline karel - 10/05/2010 15:10 (laatste wijziging 10/05/2010 15:18)
Avatar van karel HTML interesse Bedankt doch ben ik nog niet helemaal mee  

Ik heb dit als html code
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <table width="100%" border="0">
  2.   <tr><ul>
  3.     <td width="13%"><li class="huis1"><a href="1.html" class="bluecap_link">1</a></li></td>
  4.     <td width="18%"><li class="huis1"><a href="2.html" class="bluecap_link">2</a></li></td>
  5.     <td width="26%"><li class="huis1"><a href="3.html" class="bluecap_link">3</a></li></td>
  6.     <td width="23%"><li class="huis1"><a href="4.html" class="bluecap_link">4</a></li></td>
  7.     <td width="20%"><li class="huis1"><a href="5.html" class="bluecap_link">5</a></li></td>
  8.     </ul></tr><tr>
  9.     <td colspan="5"><hr width="100%" size="1" color="#D6D6D6" noshade></td>
  10.     </tr>
  11.  
  12. </table>


Dit is de css
php code - Bekijk de code zonder highlighting - Klap code in 
  1. ul{list-style-type:none}
  2. li.huis1 {list-style: url("/images/bullet-arrow.gif"); float:left;}
  3. li.huis2 {list-style: url("/images/bullet-arrow.gif"); float:left;}
  4. li.huis3 {list-style: url("/images/bullet-arrow.gif"); float:left;}
  5.  
  6. a.bluecap_link:link {font-size: 11px; font-weight: bold; text-transform: uppercase; color: #0786D2; text-decoration: none;}
  7. a.bluecap_link:visited {font-size: 11px;font-weight: bold; text-transform: uppercase; color: #0786D2; text-decoration: none;}
  8. a.bluecap_link:hover {font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #0786D2; text-decoration: underline;}


Mijn bedoeling is dat zowel de images als de stijl van de bluecap opgenomen worden in de li !
Hoe moet het dan met link, visited, hover ?

Alvast bedankt voor de hulp.
Offline WouterJ - 10/05/2010 15:25
Avatar van WouterJ HTML gevorderde Even 2 andere dingen: Je gebruik tables terwijl we het over <ul> hebben... En je zet je css code in een php code box...

1) En wil je dat de image verandert bij link, visited en hover?
Bij het eerste moet je dan zetten:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. a.bluecap_link:link li{
  2. ...code...
  3. }

Nu zeg je: Als de a.bluecap_link:link dan moet de li.huis1.....

2) Of wil je gewoon dat de link kleur, style, enz. verandert?
Dan kan je de code gewoon laten zoals het nu is en alleen de link veranderen.
Offline karel - 10/05/2010 15:36 (laatste wijziging 10/05/2010 15:37)
Avatar van karel HTML interesse Bedoel je zo ?

css code - Bekijk de code zonder highlighting - Klap code in 
  1. a.bluecap_link:link li{font-size: 11px; font-weight: bold; text-transform: uppercase; color: #0786D2; text-decoration: none;}
  2. a.bluecap_link:visited li{font-size: 11px;	font-weight: bold; text-transform: uppercase; color: #0786D2; text-decoration: none;}
  3. a.bluecap_link:hover li{font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #0786D2; text-decoration: underline;}
Offline WouterJ - 10/05/2010 15:49
Avatar van WouterJ HTML gevorderde Ja. En als dat per li verschild moet je gaan werken met classes achter de li. Maar volgens mij moet dit werken.
Bedankt door: karel
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.256s