• Inloggen
  • Registreer
  • Zoeken
Dit topic
  • Overal
  • Dit topic
  • Dit forum
  • Artikelen
  • Pagina's
  • Forum
  • Downloads
  • Meer opties

ICTscripters

Dé plek voor IT

Dé plek voor IT

Aanmelden

Geavanceerde opties
  1. Home
  2. Forum
    1. Alle berichten
    2. Recente activiteiten
    3. Onopgeloste topics
  3. ICT Nieuws
  4. Blog
  5. Marktplaats
    1. Werk
    2. Advertenties
    3. Domeinnamen
    4. Websites
    5. Design & lay-outs
    6. Scripts
    7. Overige
  6. Design
  7. Leden
    1. Actieve bezoekers
    2. Team
    3. Leden zoeken
  8. Downloads
  1. Home
  2. Forum
    1. Alle berichten
    2. Recente activiteiten
    3. Onopgeloste topics
  3. ICT Nieuws
  4. Blog
  5. Marktplaats
    1. Werk
    2. Advertenties
    3. Domeinnamen
    4. Websites
    5. Design & lay-outs
    6. Scripts
    7. Overige
  6. Design
  7. Leden
    1. Actieve bezoekers
    2. Team
    3. Leden zoeken
  8. Downloads
  1. Home
  2. Forum
    1. Alle berichten
    2. Recente activiteiten
    3. Onopgeloste topics
  3. ICT Nieuws
  4. Blog
  5. Marktplaats
    1. Werk
    2. Advertenties
    3. Domeinnamen
    4. Websites
    5. Design & lay-outs
    6. Scripts
    7. Overige
  6. Design
  7. Leden
    1. Actieve bezoekers
    2. Team
    3. Leden zoeken
  8. Downloads
  1. Dé plek voor IT - ICTscripters
  2. Forum
  3. Scripting & programmeren
  4. (X)HTML + XML + CSS

Forum

  • nieuwe game

    frio 1 november 2026 om 14:08
  • Criminolz

    qevanto 31 oktober 2026 om 20:52
  • [Beta] Ottomaan: gratis browserspel met een echte, levende stad. Feedback gezocht!

    frio 27 oktober 2026 om 12:22
  • Port Father: beta van een browsergame in Antwerpen 1931, feedback welkom

    Jeroen.G 26 oktober 2026 om 10:33
  • Maffia Hotel: een browsergame waarin je van lobbygast naar spil van het hotel groeit

    eeyk 22 oktober 2026 om 18:43
  • Crime Club volledig herschreven vanaf nul

    frio 19 oktober 2026 om 23:57
  • Malavita (nieuwe maffia game, van 0)

    jos 19 oktober 2026 om 23:18
  • Herkent deze Notion-structuurscan echte problemen?

    Jeroen.G 19 oktober 2026 om 15:09

Marktplaats

  • [Aanbod] Stadskaart voor je browsergame: van menu naar klikbare stad, vanaf €200

    frio 29 oktober 2026 om 18:17
  • [Verkoop] G4G (Gangsters 4 Gangsters): volledige broncode, nieuw gebouwd in PHP 8.3 | € 30 per domein

    frio 27 oktober 2026 om 18:54
  • [TE KOOP] Malavita.be [Maffiaspel, gebaseerd op omicidio.nl, unieke code]

    Dpm_x 26 oktober 2026 om 00:22

navigatie text onder afbeelding

  • ditismenno
  • 24 juli 2013 om 22:54
  • ditismenno
    Baas van universal-games
    Berichten
    563
    • 24 juli 2013 om 22:54
    • #1

    Beste ICTer's

    Ik ben bezig met mijn webhosting site die morgen online moet zijn.
    Nu wil ik dat mijn text onder de afbeeldingen komt te staan van het menu.
    Mijn html is goed dat weet ik zeker nu mijn css nog.
    Mijn html is:

    PHP
    <nav>
    		<div class="container">
    			<ul>
    				<li class="span2"><a href="#" class="active"><img src="assets/img/icon/webhost.png" width="72" height="72" alt="Webhosting">Webhosting</a></li>
    				<li class="span2"><a href="#"><img src="assets/img/icon/webhost.png" width="72" height="72" alt="A">A</a></li>
    				<li class="span2"><a href="#"><img src="assets/img/icon/webhost.png" width="72" height="72" alt="B">B</a></li>
    				<li class="span2"><a href="#"><img src="assets/img/icon/webhost.png" width="72" height="72" alt="C">C</a></li>
    				<li class="span2"><a href="#"><img src="assets/img/icon/webhost.png" width="72" height="72" alt="D">D</a></li>
    				<li class="span2"><a href="#"><img src="assets/img/icon/webhost.png" width="72" height="72" alt="E">E</a></li>
    			</ul>
    		</div>
    	</nav>
    Meer tonen

    En dit gebruikt de volgende CSS:

    PHP
    .container
    {
    	height:80px;
    	width:1400px;
    	background-color:#5DB9F5;
    	margin:auto;
    	-webkit-border-bottom-right-radius: 10px;
    	-webkit-border-bottom-left-radius: 10px;
    	-moz-border-radius-bottomright: 10px;
    	-moz-border-radius-bottomleft: 10px;
    	border-bottom-right-radius: 10px;
    	border-bottom-left-radius: 10px;
    	margin-top:2px;
    	padding:5px;
    	text-align:center;
    }
    nav li{
    	list-style-type:none;
    	display:inline;
    	text-align:center;
    	margin:0 auto;
    }
    
    
    nav li a{
    	text-decoration:none;
    }
    Meer tonen

    TEST ughost nu zelf "Klik hier voor trial"
    Let op:
    -Je pakket eindigd naar 2 weken dan worden ook alle bestanden verwijderd.
    -Je moet een eigen domein regelen (hebben,kopen)

  • Gast, wil je besparen op je domeinnamen? (ad)
  • GiovanniK
    Gevorderd
    Berichten
    252
    • 25 juli 2013 om 09:09
    • #2

    Maak een nav { } aan in je CSS en zat daar eens clear: both; in.

    Kijk eens of dat het probleem verhelpt?

  • ditismenno
    Baas van universal-games
    Berichten
    563
    • 25 juli 2013 om 09:23
    • #3
    Citaat van GiovanniK

    clear: both;


    Werkt niet.

    TEST ughost nu zelf "Klik hier voor trial"
    Let op:
    -Je pakket eindigd naar 2 weken dan worden ook alle bestanden verwijderd.
    -Je moet een eigen domein regelen (hebben,kopen)

  • GiovanniK
    Gevorderd
    Berichten
    252
    • 25 juli 2013 om 10:05
    • #4

    Dan is er iets anders mis in je CSS/HTML opbouw. Clear: both; zorgt ervoor dat hij eronder komt, en niet links of rechts.

  • ditismenno
    Baas van universal-games
    Berichten
    563
    • 25 juli 2013 om 10:15
    • #5
    Citaat van GiovanniK

    Dan is er iets anders mis in je CSS/HTML opbouw. Clear: both; zorgt ervoor dat hij eronder komt, en niet links of rechts.


    enig idee wat daar fout is dan?

    TEST ughost nu zelf "Klik hier voor trial"
    Let op:
    -Je pakket eindigd naar 2 weken dan worden ook alle bestanden verwijderd.
    -Je moet een eigen domein regelen (hebben,kopen)

  • wimmpie
    âllo âllo
    Berichten
    1.170
    • 25 juli 2013 om 10:35
    • #6

    zet de breedte van je li naar 72px? of doe gewoon een br naast de foto?

  • ditismenno
    Baas van universal-games
    Berichten
    563
    • 25 juli 2013 om 11:05
    • #7

    width:72px;
    Werkt helaas niet.
    En met </br> naar de foto gaan alle foto's onderelkaar staan en staan de letters er nog steeds naast.

    TEST ughost nu zelf "Klik hier voor trial"
    Let op:
    -Je pakket eindigd naar 2 weken dan worden ook alle bestanden verwijderd.
    -Je moet een eigen domein regelen (hebben,kopen)

  • wimmpie
    âllo âllo
    Berichten
    1.170
    • 25 juli 2013 om 15:09
    • #8

    doe display: block?
    dan zou de lijst normaal gezien onder elkaar moeten komen en dan zet je nog <br> tussen de tekst en de foto's

  • ditismenno
    Baas van universal-games
    Berichten
    563
    • 25 juli 2013 om 23:19
    • #9

    Ok de tekst staat er onder maar ik krijg hem niet in het midden.
    De nieuwe HTML:

    PHP
    <nav>
    		<div class="container">
    			<ul class="row-fluid">
    				<div class="middle">
    					<li class="span2"><a href="?page=home"><img src="http://icons.iconarchive.com/icons/mag1cwind0w/akisame/512/Home-icon.png" width="72" height="72" alt="Home">Home</a></li>
    					<li class="span2"><a href="http://www.universal-games.nl"><img src="http://icons.iconarchive.com/icons/icons-land/vista-people/128/Groups-Meeting-Light-icon.png" width="72" height="72" alt="Forum">Forum</a></li>
    					<li class="span2"><a href="?page=helpdesk"><img src="http://icons.iconarchive.com/icons/icons-land/vista-people/128/Occupations-Technical-Support-Representative-Female-Light-icon.png" width="72" height="72" alt="Helpdesk">Helpdesk</a></li>
    					<li class="span2"><a href="?page=home"><img src="http://icons.iconarchive.com/icons/treetog/junior/128/network-icon.png" width="72" height="72" alt="Webhosting">Webhosting</a></li>
    				</div>
    			</ul>
    		</div>
    	</nav>
    Meer tonen


    De huidige CSS

    PHP
    .container
    {
    	background: url('../img/menu.png') no-repeat center top #34a8f3;
    	height:80px;
    	margin-top:10px;
    	padding:5px;
    	text-align:center;
    }
    
    
    a {
    	text-decoration:none;
    	color:#005176;
    	-webkit-transition:color .2s ease-in-out;
    	-moz-transition:color .2s ease-in-out;
    	transition:color .2s ease-in-out;
    }
    
    
    a:hover,a:focus {
    	color:#005580;
    	text-decoration:underline;
    }
    
    
    .row-fluid {
    	width:1400px;
    	margin:auto;
    	text-align:center;	
    }
    
    
    .row-fluid [class*=span] {
    	display:block;
    	min-height:30px;
    	width:1400px;
    	margin:auto;
    	float:left;
    }
    
    
    .row-fluid .span2 {
    	width:80px;
    	margin:auto;
    }
    
    
    ul,ol {
    	margin:0 0 10px 25px;
    	padding:0;
    }
    nav div ul il {
    	width:30px;
    	margin:auto;
    	text-align:center;
    }
    .middle
    {
    	width:100%;
    	margin:auto;
    	text-align:center;
    }
    Meer tonen

    TEST ughost nu zelf "Klik hier voor trial"
    Let op:
    -Je pakket eindigd naar 2 weken dan worden ook alle bestanden verwijderd.
    -Je moet een eigen domein regelen (hebben,kopen)

  • Thisguyisgone
    Elite members
    Berichten
    7.880
    • 25 juli 2013 om 23:27
    • #10

    Online voorbeeld kan ook soms handig zijn.

  • ditismenno
    Baas van universal-games
    Berichten
    563
    • 25 juli 2013 om 23:28
    • #11
    Citaat van Ferhat.Remory

    Online voorbeeld kan ook soms handig zijn.


    Deze is helaas niet beschikbaar.

    TEST ughost nu zelf "Klik hier voor trial"
    Let op:
    -Je pakket eindigd naar 2 weken dan worden ook alle bestanden verwijderd.
    -Je moet een eigen domein regelen (hebben,kopen)

  • M.Beers
    Elite members
    Berichten
    460
    • 29 juli 2013 om 01:16
    • #12

    Hallo menno, ik zie dat je al lekker bezig bent... Ik denk dat je tekst onder de afbeelding komt omdat een img-tag vaak als block-element word gezien door de browser, daarnaast is het niet gebruikelijk om images in een menu te gebruiken. In HTML en CSS is het voornamelijk heeeeeel belangrijk om je content (teksten/afbeeldingen) te scheiden van je opmaak, waar CSS bedoeld voor is!

    Dus hier de gouden tip! maak gebruik van een background image, padding en line-height dan moet het goedkomen :thumbup:. Verder... ga eens lezen wat de verschillen zijn tussen block-elementen en inline-elementen dan ga je die fout namelijk niet vaker maken. Mocht je er echt niet uit komen PM dan even dan stuur ik de code van jouw probleem simpel op want ik ga het ofcourse niet voor zeggen anders leer je niks.

    Dit was mijn spreekbeurt, zijn er nog vragen?

Registratie

Nog geen account? Registreer je nu en word deel van onze community!

Nu registreren Aanmelden

ICT Nieuws

  • PHP waarschuwt voor twee ernstige bugs die makkelijk uit te buiten lijken

    Aaron 22 oktober 2026 om 22:19

Blogs

  • Functioneel ontwerp

    Dees 28 december 2014 om 12:38
  • Access Control List implementatie in PHP/MySQL - deel 1/2

    FangorN 28 december 2018 om 12:35
  • Access Control List implementatie in PHP/MySQL - deel 2/2

    FangorN 29 december 2018 om 12:37

Gebruikers die dit topic bekijken

  • 1 Gasten
  1. Marktplaats
  2. Design
  3. Voorwaarden
  4. Ons team
  5. Leden
  6. Geschiedenis
  7. Regels
  8. Links
  9. Privacyverklaring
  10. Contact
ICTscripters ©2005 - 2026 , goedkope hosting door DiMoWeb.com, BE0558.915.582
Sponsors: Beste kattenhotel provincie Antwerpen
Style: Nexus by cls-design
Stylename
Nexus
Manufacturer
cls-design
Licence
Commercial styles
Help
Supportforum
Visit cls-design