• Login
  • Register
  • Zoek
This Thread
  • Everywhere
  • This Thread
  • This Forum
  • Articles
  • Pages
  • Forum
  • Filebase Entry
  • More Options

ICTscripters

Dé plek voor IT

Dé plek voor IT

Login

Geavanceerde opties
  1. Home
  2. Forum
    1. Alle berichten
    2. Recente activiteiten
  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
  9. Goedkope domeinnamen
  1. Home
  2. Forum
    1. Alle berichten
    2. Recente activiteiten
  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
  9. Goedkope domeinnamen
  1. Home
  2. Forum
    1. Alle berichten
    2. Recente activiteiten
  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
  9. Goedkope domeinnamen
  1. Dé plek voor IT - ICTscripters
  2. Forum
  3. Scripting & programmeren
  4. (X)HTML + XML + CSS

Forum

  • Beta-testers gezocht voor Crypto-oefenplatform

    Syntax 29 januari 2026 om 16:11
  • Na 15 jaar terug van weggeweest: iCriminals.nl is terug (BETA)!

    Syntax 19 januari 2026 om 09:34
  • Developer Gezocht

    Mikevdk 10 januari 2026 om 18:57
  • Op zoek naar de legends

    Syntax 5 januari 2026 om 13:50
  • [FREE] WeFact Hosting module

    Jeroen.G 13 oktober 2025 om 14:09
  • Help testers nodig voor android app Urgent

    urgentotservices 26 september 2025 om 10:21
  • Versio vervanger

    Jeroen.G 25 augustus 2025 om 15:56
  • Afspraken systeem met planbeperking

    Lijno 1 augustus 2025 om 23:04

Marktplaats

  • 350 Nieuwe Domeinnamen Januari 2026

    shiga 1 februari 2026 om 14:21
  • 321 Nieuwe Domeinnamen December 2025

    shiga 1 januari 2026 om 10:26
  • Meerdere mafia game template te koop

    Syntax 26 december 2025 om 00:07

navigatie text onder afbeelding

  • ditismenno
  • 24 juli 2013 om 22:54
  • ditismenno
    Baas van universal-games
    Ontvangen Reacties
    1
    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>
    Toon Meer

    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;
    }
    Toon Meer

    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
    Intermediate
    Ontvangen Reacties
    6
    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
    Ontvangen Reacties
    1
    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
    Intermediate
    Ontvangen Reacties
    6
    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
    Ontvangen Reacties
    1
    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
    Ontvangen Reacties
    11
    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
    Ontvangen Reacties
    1
    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
    Ontvangen Reacties
    11
    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
    Ontvangen Reacties
    1
    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>
    Toon Meer


    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;
    }
    Toon Meer

    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
    Ontvangen Reacties
    197
    Berichten
    7.880
    • 25 juli 2013 om 23:27
    • #10

    Online voorbeeld kan ook soms handig zijn.

  • ditismenno
    Baas van universal-games
    Ontvangen Reacties
    1
    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
    Ontvangen Reacties
    31
    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?

Participate now!

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

Maak een account aan Login

ICT Nieuws

  • Fijne feestdagen

    tcbhome 28 december 2025 om 13:55
  • Kritieke update voor Really Simple Security-plug-in

    K.Rens 16 november 2024 om 16:12
  • ING Nederland streeft naar ondersteuning van Google Pay tegen eind februari

    K.Rens 2 november 2024 om 16:09

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
  1. Marktplaats
  2. Design
  3. Voorwaarden
  4. Ons team
  5. Leden
  6. Geschiedenis
  7. Regels
  8. Links
  9. Privacy Policy
ICTscripters ©2005 - 2026 , goedkope hosting door DiMoWeb.com, BE0558.915.582
Sponsors: Beste kattenhotel provincie Antwerpen | Beste Zetes eid kaartlezer webshop
Style: Nexus by cls-design
Stylename
Nexus
Manufacturer
cls-design
Licence
Commercial styles
Help
Supportforum
Visit cls-design