nicht angemeldet
Hallo zusammen,
Ich habe auf einer Intranet Seite eine Navigation mit einer Liste gemacht.
<ul id ="MainNavigation1">
<li>
<input name="image_job" id="image_job" type="image" title="Job" src="../image/job.gif" alt="job" />
<label for="image_job">Job</label>
</li>
<li>
<input name="image_document" id="image_document" type="image" src="../image/document.gif" alt="documentjob" title="Dokument" />
<label for="image_document">Dokument</label>
</li>
<li>
<input name="image_project" id="image_project" type="image" src="../image/partitialjob.gif" alt="partitialj title="Projekt" />
<label for="image_project">Projekt</label>
</li>
<li>
<input name="image_photo" id="image_photo" type="image" src="../image/hard.gif" alt="hardcopyjob" title="Foto" />
<label for="image_photo">Foto</label>
</li>
<li>
<input name="image_remove" id="image_remove" type="image" alt="remove" src="../image/remove.gif" title="Entfernen" />
<label for="image_remove">Entfernen</label>
</li>
</ul>
Die CSS dazu:
#MainNavigation1{
padding: 0;
margin: 0;
text-align:center;
}
#MainNavigation1 li{
float:left;
padding: 0;
margin: 0;
list-style: none;
}
#MainNavigation1 label{
margin: 2px;
}
#MainNavigation1 input{
margin: 6px;
display:block;
width:auto;
}
Jetzt ist es so das sowohl das Bild des Input als auch der Text von Label immer linksbündig ist.
Schöner wäre es, wenn alles horizontal zentriert ist. Also das Bild mittig zum Text darunter ist.
Man sollte ja nicht mehr "align=center" verwenden.
Mit CSS komme ich aber nicht so recht weiter.
Versucht habe ich noch mit zusätzlichem DIV.
z.b.
<li>
<div>
<input name="image_job" id="image_job" type="image" title="Job" src="../image/job.gif" alt="job" />
<label for="image_job">Job</label>
</div>
</li>
und dann in der CSS:
#MainNavigation1 li div{
text-align:center;
}
Aber das wirkt sich dann ja nicht auf das Input und Label aus.
Hat jemand sonst eine Idee?
vielen Dank und viele Grüße
hawk