Iconen

Hey,
ik zit met iets te kloten alleen het lukt me totaal niet.
Weet iemand hoe ik een soort icon board kan maken?

Dus je hebt icons, maximaal 4 rijen verticaal en maximaal 7 rijen horizontaal.
Het lijkt eigenlijk dus gewoon op een mac desktop. Hopelijk kan iemand me helpen Alvast bedankt.

Gewoon een div een maximale width van bijvoorbeeld 700px; en overflow: hidden geven, en dan gewoon elk icoontje:

en dan komen ze achter elkaar en onder elkaar

Hey Milan,
dus dit zou moeten werken?

<div style="overflow: hidden; width: 700px;">

<div style="float: left; width: 100px;"><img src="hoi.png" /></div> 
<div style="float: left; width: 100px;"><img src="hoi.png" /></div>
<div style="float: left; width: 100px;"><img src="hoi.png" /></div> 
<div style="float: left; width: 100px;"><img src="hoi.png" /></div> 
<div style="float: left; width: 100px;"><img src="hoi.png" /></div> 
<div style="float: left; width: 100px;"><img src="hoi.png" /></div> 
<div style="float: left; width: 100px;"><img src="hoi.png" /></div> 
<div style="float: left; width: 100px;"><img src="hoi.png" /></div> 

</div>

Reinier, je moet er 1 afhalen, of breedte 800px maken, je hebt nu een breedte van 800px in een div van 700 breed..

En nu staan ze allemaal tegen elkaar aan, je moet er ook nog padding tussen zetten

Bedankt Jesse Ik maak de breedte 1000px, dan kunnen er toch 9 icons als er tussen elk icon 10px zit?

uhu, maar dan moet je enit padding: 10px; doen, want dan heb je links 10 en rechts 10 dus dan moet je paddign-right: 10px; doen

Maar als ik nu boven, onder, rechts en links 10px wil dan moet ik toch wel gewoon padding:10px; gebruiken?

En nu heb ik dus icons, maar nu moet er nog een woord onder Hoe kan ik dat het beste doen?

toevoeging op 25 september 2011, 11:40:46:
Ik heb nu dit:

<div style="overflow: hidden; width: 1000px;">

<div style="float: left; padding:10px; width: 100px;"><img src="" /></div>

 
<div style="float: left; padding:10px; width: 100px;"><img src="" /></div>


<div style="float: left; padding:10px; width: 100px;"><img src="" /></div>


<div style="float: left; padding:10px; width: 100px;"><img src="" /></div>


<div style="float: left; padding:10px; width: 100px;"><img src="" /></div>


<div style="float: left; padding:10px; width: 100px;"><img src="" /></div>


<div style="float: left; padding:10px; width: 100px;"><img src="" /></div>


<div style="float: left; padding:10px; width: 100px;"><img src="" /></div>


<div style="float: left; padding:10px; width: 100px;"><img src="" /></div>


<div style="float: left; padding:10px; width: 100px;"><img src="" /></div>


<div style="float: left; padding:10px; width: 100px;"><img src="" /></div>


<div style="float: left; padding:10px; width: 100px;"><img src="" /></div>


<div style="float: left; padding:10px; width: 100px;"><img src="" /></div>


<div style="float: left; padding:10px; width: 100px;"><img src="" /></div>


<div style="float: left; padding:10px; width: 100px;"><img src="" /></div>


<div style="float: left; padding:10px; width: 100px;"><img src="" /></div>


<div style="float: left; padding:10px; width: 100px;"><img src="" /></div> 


<div style="float: left; padding:10px; width: 100px;"><img src="" /></div>


<div style="float: left; padding:10px; width: 100px;"><img src="" /></div>


<div style="float: left; padding:10px; width: 100px;"><img src="" /></div>


<div style="float: left; padding:10px; width: 100px;"><img src="" /></div>


<div style="float: left; padding:10px; width: 100px;"><img src="" /></div>


<div style="float: left; padding:10px; width: 100px;"><img src="" /></div>


<div style="float: left; padding:10px; width: 100px;"><img src="" /></div>


<div style="float: left; padding:10px; width: 100px;"><img src="" /></div>


<div style="float: left; padding:10px; width: 100px;"><img src="" /></div>


<div style="float: left; padding:10px; width: 100px;"><img src="" /></div>


<div style="float: left; padding:10px; width: 100px;"><img src="" /></div>


<div style="float: left; padding:10px; width: 100px;"><img src="" /></div>

</div>

Met tables gaat het een stuk makkelijker:

He, ja inderdaad! Maar hoe kan ik dat doen?

<table id="forumboard" style="text-align: center;">
                <tr class="dark">
                    <td width="25%"><a href="http://www.riksomers.nl/Myww-DOOOD/area51/stats"><img src="http://www.riksomers.nl/Myww-DOOOD/area51/images/stats.png" alt="Statistieken"></a></td>
                    <td width="25%"><a href="http://www.riksomers.nl/Myww-DOOOD/area51/onderhoud"><img src="http://www.riksomers.nl/Myww-DOOOD/area51/images/onderhoud.png" alt="Onderhoud"></a></td>
                    <td width="25%"><a href="http://www.riksomers.nl/Myww-DOOOD/area51/forum"><img src="http://www.riksomers.nl/Myww-DOOOD/area51/images/forum.png" alt="Forum"></a></td>
                    <td width="25%"><a href="http://www.riksomers.nl/Myww-DOOOD/area51/mail"><img src="http://www.riksomers.nl/Myww-DOOOD/area51/images/mail.png" alt="Mail"></a></td>
                </tr>
                <tr class="superdark">
                    <td><strong><a href="http://www.riksomers.nl/Myww-DOOOD/area51/stats">Statistieken bekijken</a></strong></td>
                    <td><strong><a href="http://www.riksomers.nl/Myww-DOOOD/area51/onderhoud">Onderhouds modus</a></strong></td>
                    <td><strong><a href="http://www.riksomers.nl/Myww-DOOOD/area51/forum">Forum beheren</a></strong></td>
                    <td><strong><a href="http://www.riksomers.nl/Myww-DOOOD/area51/mail">Mail opstellen</a></strong></td>
                </tr>
            </table>

Zo had ik het destijds:

<table id="forumboard" style="text-align: center;">
                <tr class="dark">
                    <td width="25%"><a href="http://www.--/area51/stats"><img src="http://www.--/area51/images/stats.png" alt="Statistieken"></a></td>
                    <td width="25%"><a href="http://www.--/area51/onderhoud"><img src="http://www.--/area51/images/onderhoud.png" alt="Onderhoud"></a></td>
                    <td width="25%"><a href="http://www.--/area51/forum"><img src="http://www.--/area51/images/forum.png" alt="Forum"></a></td>
                    <td width="25%"><a href="http://www.--/area51/mail"><img src="http://www.--/area51/images/mail.png" alt="Mail"></a></td>
                </tr>
                <tr class="superdark">
                    <td><strong><a href="http://www.--/area51/stats">Statistieken bekijken</a></strong></td>
                    <td><strong><a href="http://www.--/area51/onderhoud">Onderhouds modus</a></strong></td>
                    <td><strong><a href="http://www.--/area51/forum">Forum beheren</a></strong></td>
                    <td><strong><a href="http://www.--/area51/mail">Mail opstellen</a></strong></td>
                </tr>
            </table>

pfff, ik was ook al bezig Rik Maar zo is de basis, het zijn maar 5 icons maar je kan er zelf meer toevoegen.

<table>
 <tr>
  <td width="120px" align="center"><img src="icon1.png" alt="" /></td>
  <td width="120px" align="center"><img src="icon2.png" alt="" /></td>
  <td width="120px" align="center"><img src="icon3.png" alt="" /></td>
  <td width="120px" align="center"><img src="icon4.png" alt="" /></td>
  <td width="120px" align="center"><img src="icon5.png" alt="" /></td>
 </tr>
 <tr>
   <td width="120px" align="center">tekst icon 1</td>
   <td width="120px" align="center">tekst icon 2</td>
   <td width="120px" align="center">tekst icon 3</td>
   <td width="120px" align="center">tekst icon 4</td>
   <td width="120px" align="center">tekst icon 5</td></tr>
</table>