Lijst skills

[thijmen99]

Hoi,

Ik ben bezig met een update voor mijn portfolio website. Ik wil er graag een lijst met skills in en dan de + allemaal links uitgelijnd. Op dit moment heb ik het heel slordig gedaan door gewoon spaties toe te voegen. Maar dit staat nu ook niet recht (zie bijlage) weet iemand een oplossing om alle + recht onder elkaar te zetten?

Dit is de code die ik nu heb gebruikt:

			<div id="skills">
				<li><h1>Skills<h1></li>
					<ul type="disc">
						<li>Photoshop&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+++++</li>
						<li>InDesign&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+++</li>
						<li>Illustrator&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+++</li>
						<li>After Effects&nbsp;&nbsp;&nbsp;&nbsp;++</li>
						<li>Premiere Pro&nbsp;&nbsp;&nbsp;++	 </li> 
						<li>Html & Css&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;++</li>
					</ul>
				</li>
			</div>

/*Skills*/

#skills li h1{
	font-family: hero;
	color: #c1c1c1;
	text-align: left;
	list-style-type: none;
	list-style: none;
	font-size: 60pt;
}

#skills li{
	font-family: hero;
	font-size: 30pt;
	color: #c1c1c1;
	text-align: left;
	list-style-type: none;
	list-style: none;
}

Alvast bedankt,

Thijmen

 

[Aar]

Gezien het een overzicht met kolommen is zou je best een table kunnen en mogen gebruiken.

 

[thijmen99]

Bedankt! :thumb:

Ik heb het nu zo gedaan:

			<div id="skills">

			<table >

				<th><h1>Skills</h1></th>
				

				<tr>
					<td>Photoshop</td>
					<td>+++++</td>
				</tr>

				<tr>
					<td>InDesign</td>
					<td>+++</td>
				</tr>

				<tr>
					<td>Illustrator</td>
					<td>+++</td>
				</tr>

				<tr>
					<td>After Effects</td>
					<td>++</td>
				</tr>

				<tr>
					<td>Premiere Pro</td>
					<td>++</td>
				</tr>

				<tr>
					<td>Html & Css</td>
					<td>++</td>
				</tr>

			</table>

			</div>

Het staat nu recht maar ik wil nog wat afstand tussen de tekst en de + weet iemand hier een oplossing voor?

 

[Aar]

Kan mooi met CSS:
http://chrisschuld.com/2008/06/cellpadding-and-cellspacing-in-css-part-2/

 

[thijmen99]

Thnx! you're the best :thumb: