CSS - DIV-navigation-Menü, um die alten ersetzen Sie im Menü TABELLE-element-Größe

Habe ich schon einige Zeit nehmen, diese letzten paar Wochen aktualisiere ich meine HTML/CSS Kenntnisse. Als Ergebnis habe ich zu lernen, wie zu erreichen, layout, dass ich vorher schon mit Tabellen mit DIVs statt.

Für die meisten Teil ist es schon in Ordnung, aber ich habe in ein paar Tücken, die versuchen zu replizieren, ein Stil, der die navigation im Menü verwendet den folgenden code als Tabelle:

HTML:

<div class="navigation">
    <table>
        <tr>
            <td><a href="index.php">home</a></td>
            <td>&nbsp;</td>
            <td><a href="about.php">about</a></td>
            <td>&nbsp;</td>
            <td><a href="music.php">music</a></td>
            <td>&nbsp;</td>
            <td><a href="geeking.php">geeking</a></td>
            <td>&nbsp;</td>
            <td><a href="contact.php">contact</a></td>
        </tr>
    </table>
</div>

CSS:

div.navigation{
    text-align: center;
    color: hsla(200,50%,45%,0.6);
    margin: auto;
    font-family: monospace;
    letter-spacing: 2px;
    position: relative;
    top: -13px;
    margin: 20px auto 20px auto;
    width: 60%;
}

.navigation table{
    height: 70px;
}

th{
text-align: center;
color: hsla(180,50%,45%,0.4);
font-size: 1.1em;
}

table{
border-collapse: collapse;
margin: auto;
margin-top: 0px;
}

table,th{
border: 0px solid black;
padding: 5px;
}    


.navigation a{
    text-decoration: none;
    color: hsla(200,50%,45%,0.6);
    background-color: transparent, white;
    text-transform: lowercase;
    font-size: 1.2em;
    -webkit-transition: all 0.4s linear; 
    -moz-transition: all 0.4s linear; 
    -o-transition: all 0.4s linear; 
    -ms-transition: all 0.4s linear; 
    transition: all 0.4s linear;
    letter-spacing: 0px;
    width: 50px;
    height: 100px;
}

.navigation a:hover{
    color: white;
    -webkit-transition: all 0.2s linear; 
    -moz-transition: all 0.2s linear; 
    -o-transition: all 0.2s linear; 
    -ms-transition: all 0.2s linear; 
    transition: all 0.2s linear;
    width: auto;
    height: auto;
    font-size: 2em;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow:    0 0 20px hsla(180,50%,40%,.6),
                    0 0 40px hsla(200,50%,45%,.8);
}

Können Sie diese Seite hier Leben: http://benjaminsherwood.co.uk/index.php
Klar zu sein - dies ist das Verhalten, ich möchte für mein Menü - für ein schweben-über-element zu vergrößern und den Zeichenabstand, und schieben Sie die anderen Elemente Links und rechts, sondern bleibt auf der gleichen vertikalen Ebene. Es ist die vertikale Ebene Teil, ich bin stecken mit.

Hier ist der code, den ich verwende, um zu versuchen, und erstellen Sie das gleiche Menü mit DIVs:

HTML:

<div class="menu">
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Music</a></li>
        <li><a href="">Geeking</a></li>
        <li><a href="">Contact</a></li>
    </ul>
</div>

CSS:

.menu{
    position: fixed;
    left:0; 
    right:0; 
    top:0;
    margin: auto;
    text-transform: lowercase;
    text-align: center;
}

.navigation table{
    height: 70px;
}

.menu li{
    list-style: none outside none;
    display: inline;
}

.menu a{
    text-decoration: none;
    color: hsla(200,50%,45%,0.6);
    font-size:  1.2em;
    letter-spacing: 0px;
    -webkit-transition: all 0.4s ease; 
    -moz-transition: all 0.4s ease; 
    -o-transition: all 0.4s ease; 
    -ms-transition: all 0.4s ease; 
    transition: all 0.4s ease;
}


.menu a:hover{
    color: white;
    font-size: 2em;
    font-weight: 600;
    letter-spacing: 2px;

    -webkit-transition: all 0.2s ease; 
    -moz-transition: all 0.2s ease; 
    -o-transition: all 0.2s ease; 
    -ms-transition: all 0.2s ease; 
    transition: all 0.2s ease;

    text-shadow:    0 0 20px hsla(180,50%,40%,.6),
            0 0 40px hsla(200,50%,45%,.8);
}

Können Sie diese Seite hier Leben: http://benjaminsherwood.co.uk/test.php

Ich habe versucht, dies herauszufinden, und das ganze Wochenende - ich habe gesucht hoch und niedrig für eine Lösung, und auf verschiedene Methoden zu schaffen, die horizontale Menü-layout, und landete sogar gehen zu einem Freund, der Recht gut mit CSS - aber, egal was ich versuche, ich kann nicht herausfinden, wie man den DIV-basiertes layout verhält sich in der gleichen Weise wie die TABELLE ein.

Es ist fast so, als wenn die Tabellen-layout ist das anwenden der änderungen auf das element aus der Mitte des TD-element, während die DIV-basiertes layout der Anwendung ist es von der oberen Ecke. Als Ergebnis der DIV-basiertes layout scheint zu wachsen nur nach unten, statt der Ausbreitung, und als Folge, die Elemente, die beiden Seiten fließen nicht nach Links und rechts auf der gleichen horizontalen Ebene, wie es der Fall mit dem TISCH-layout, sondern geschoben werden, entweder Links oder rechts und auch nach unten gedrückt.

Ich will ehrlich sein - ich weiß, dass die Lösung gut sein könnte, um einfach akzeptieren, wie es funktioniert unterschiedlich in den DIV-style, oder weiterhin die TABELLE Stil... aber ich bin überzeugt, dass es möglich sein sollte, und dass ich mich einfach etwas fehlt.

Dem TISCH-Stil verwendet, etwas ähnliches zu tun, bis ich definiert:

.navigation table{
    height: 70px;
}

nach dem, begann es sich verhält. Ich kann nicht herausfinden, ob dabei die gleichen, die in DIV-layout irgendwo das Problem zu beheben... ich habe versucht, die Einstellung der Höhe der verschiedenen Elemente, aber nichts scheint einen Unterschied zu machen.

Sorry für die extrem lange Frage. Ich habe es wirklich vermieden, eine Frage zu stellen-mich, aber ich habe wirklich nur gegen eine Wand geprallt.

InformationsquelleAutor Benjamin | 2012-09-10