div element lässt sich nicht in tabelle zentrieren

    Hallo,


    ich bin HTML Neuling und weiss leider nicht weiter :(


    Ich möchte 4 div-elemente (Inhalt: img + text) mit Hilfe einer Tabelle zentriert ausrichten. Leider sieht alles recht verzehrt aus :-/ :


    [Blockierte Grafik: http://s1.directupload.net/images/130629/vncgqjoa.jpg]


    Die Border ist nur da, um kenntlich zu machen das etwas nicht stimmt.



    der Code ist:


    <table id="navigation_info" border="1" cellpadding="0" width="800" height="200">


    <tr>


    <td align="center">


    <div class="transparenz auswahl_2">


    <a style="text-decoration: none;" href="#"><img src="img/info_test_1.png" alt="Lebenslauf Daniel Rüdiger"><br>Lebenslauf</a>


    </div>


    </td>


    <td align="center">


    <div class="transparenz">


    <a style="text-decoration: none;" href="#"><img src="img/info_test_2.png" alt="Kenntnisse Daniel Rüdiger"><br>Kenntnisse</a>


    </div>


    </td>


    <td align="center">


    <div class="transparenz">


    <a style="text-decoration: none;" href="#"><img src="img/info_test_3.png" alt="Interessen Daniel Rüdiger"><br>Interessen</a>


    </div>


    </td>


    <td align="center">


    <div class="transparenz">


    <a style="text-decoration: none;" href="#"><img src="img/info_test_3.png" alt="SWOT Daniel Rüdiger"><br>SWOT</a>


    </div>


    </td>


    </tr>


    </table>


    CSS ist:


    .transparenz {


    text-decoration: none;


    border: 0;


    width: 80px;


    height: 80px;


    font-size: 14px;


    -webkit-transition: all 0.25s ease;


    -moz-transition: all 0.25s ease;


    -o-transition: all 0.25s ease;


    transition: all 0.25s ease;


    opacity: 0.6;


    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* IE8 */


    filter: alpha(opacity=60); /*IE7 und kleiner*/


    }


    .transparenz:hover {


    opacity: 1.0;


    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";


    filter: alpha(opacity=100);


    }


    .auswahl_2 {


    opacity: 1.0;


    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";


    filter: alpha(opacity=100


    Habe schon einiges ausprobiert, was jetzt nicht mehr drin steht. Kann mit bitte jemand helfen??


    Vielen Dank im Voraus!


    ruedi

    Also soll alles in der Mitte positioniert sein?


    Ich würde an deiner Stelle wirklich alle Positionsangaben nur in CSS machen. Macht es erst mal übersichtlicher. Und dann alles mit padding ausrichten. Also sollte beim Bild und Text der selbe Abstand links und rechts sein, oben und unten nur größer beim Bild ausrichten. Einfach mal austesten :)
    Ich selber mache eher nichts mit Tabellen ,daher kenn ich mich auch nicht so damit aus. Aber normalerweise nimmt man:
    text-align: center; (für die Textgestalltung mittig) und
    die einzelnen Angaben für padding. Zur positionierung des Bildes und auch der Schrift.
    natürlich kannst du auch float nehmen. Ist aber bei dem eher nicht so praktisch.


    Ja ich hab deinen Code nochmal durch gekuckt, ein deutig fehlen dir die padding Angaben ,damit du alles genau nach deinen Wünschen positionieren kannst.
    Natürlich musst du das mit den Pixeln erst mal ausprobieren ;) Aber alzu schwer ist ,dass nicht. :thumbup:


    Ich hoffe ich konnte dir ein wenig helfen :D


    lg little cloud

    Zitat von littlecloud


    Ich selber mache eher nichts mit Tabellen


    Das ist auch für die Seitengestaltung richtig nur wenn man wirklich eine tabelle darstellen will verwendet man table.


    ruedi1986
    Wenn du etwas mittig darstellen willst braucht dein block eine breite und margin.
    z.b.

    HTML
    <style>
#meinCentrierterBlock{
width:500px;
margin:0 auto;
height:700px; /* Das ist jetzt nur da das element sonst keine höhe hätte da es ja keinen inhalt hat */
background:#FF0000; /* damit man das element sich auch farblich von den rest der seite unterscheidet*/
}
</style>
<div id="meinCentrierterBlock"></div>

    danke littlecloud und roland,


    eure hinweise haben mir sehr weitergeholfen. ich hatte zwar vorher auch schon gelesen, dass die verwendung von tabellen wie bei mir sehr unsauber ist, wusste aber nicht recht weiter.


    Naja, jetzt hat es auf jeden fall geklappt, auch wenn ich mit margin und nicht mit padding gearbeitet habe damit hover nur anschlägt wenn ich auch wirklich auf dem div bin.


    Vielen Dank noch einmal euch beiden :)


    MfG


    ruedi

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden