Button überlappen.

missge8 · 29.01.2014

Hallo Liebes Forum

Ich bin an meiner ersten Webseite am erstellen und habe meine Schwierigkeiten.
Bis jetzt habe ich jedes Problem lösen können mit Google und Co. aber jetzt bin
ich an einen Punkt gekommen wo ich es nicht lösen kann.

Ich will 3 Div id nebeneinander anordnen mit einen button unten dran.
Das nebeneinander ging, aber 2 butten überlappen sich.

http://www.bilder-hochladen.net/files/kq4q-3-eccb-jpg.html

Der HTML Code:

Code:

  <div id="Navi">
        <div id= "main">
        <span style="font-size:2.8em"> 3D Art </span> <br />        
        <span style="font-size:1.8em"><br />
        Hier ist eine Galerie<br>
        der Bilder die ich    <br>
        erstell habe.</span>
    
                <ul><span style="font-size:1.3em">
                    <a href="Gallerie.html"> Stöbern</a>
                </ul></span>
    
        </div> <!-- 3D Art -->
    
    
        <div id= "side">
        <span style="font-size:2.8em"> Kontakte </span> <br />        
        <span style="font-size:1.8em"><br />
        Hier können sie<br>
        mir eine E-Mail<br>
        schreiben
        </span>
    
                <ul><span style="font-size:1.3em">
                    <a href="Kontakte.html"> Anschreiben</a>
                </ul></span>
        
        </div> <!-- Kontakte -->
      
        <div id= "middle">
        <span style="font-size:2.8em"> Game</span> <br />        
        <span style="font-size:1.8em"> <br />
        Hier können sie <br>
        meine Alpha Versionen    <br>
        spielen.</span>
    
                <ul><span style="font-size:1.3em">
                    <a href="Game.html"> Gamen</a>
                </ul></span>     
        
        </div> <!-- Game -->
    </div> <!-- ende Navi -->

Css:

Code:

#Navi{

    background: #ffe486;
     border-color:#ffe486;

    width: auto;
    height: 350px;

    text-align: center;

    padding-left: 120px ;
    padding-right: 120px;


}

    #main {
        float:left;
        height: 0px;
        color: #08bffb;
        color:#666;

    }

    #side {
        float:right;
        height: 0px;
        color: #08bffb;
        color:#666;
    }



    #middle {
        float: center;
        color: #08bffb;
        color:#666;

    }

Ich hoffe ihr könnt was damit anfangen

Liebe Grüsse
Samuel

Jormungand · 29.01.2014

Kannst du da einen Link zu einer Onlineversion geben? Normalerweise kann man eine Seite ganz gut mit dem Firebug untersuchen.
Warum hast du in den Containern #main, #side und #middle zweimal Textfarben vergeben? Es wird nur die untere, also #666 benutzt.
Und warum haben die Container eine Höhe von 0px? Hast du mal probiert das Attribut Höhe zu löschen?

Myhar · 29.01.2014

float:center gibt es nicht.
Beschäftige dich mit floats, dann solltest du dieses Problem lösen können.
Ein kleiner Hinweis: Um drei Elemente nebeneinander anzuordnen, reichen auch zB drei float:left aus.
Beschäftige dich auch mit der korrekten Verwendung von den HTML-Elementen.

Code:

<ul><span style="font-size:1.3em">
<a href="Kontakte.html"> Anschreiben</a>
</ul></span>

Du hast hier keine Aufzählung, also brauchst du auch keine Liste verwenden. Und wenn du schon eine Liste verwendest, dann wenigstens korrekt (mit Listenpunkten)
Auch sind Zeilenumbrüche nicht dazu da, um den Text an der gewünschten Stelle umbrechen zu lassen. Der Text gehört in einen Paragraphen, welcher auf eine gewünschte Breite gebracht wird. Dann bricht der Text automatisch um.