Anzeige

Button überlappen.

Button überlappen. | PSD-Tutorials.de

Erstellt von missge8, 29.01.2014.

  1. missge8

    missge8 Noch nicht viel geschrieben

    Dabei seit:
    21.12.2013
    Beiträge:
    1
    Button überlappen.
    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 (Text):
    1.   <div id="Navi">
    2.         <div id= "main">
    3.         <span style="font-size:2.8em"> 3D Art </span> <br />        
    4.         <span style="font-size:1.8em"><br />
    5.         Hier ist eine Galerie<br>
    6.         der Bilder die ich    <br>
    7.         erstell habe.</span>
    8.    
    9.                 <ul><span style="font-size:1.3em">
    10.                     <a href="Gallerie.html"> Stöbern</a>
    11.                 </ul></span>
    12.    
    13.         </div> <!-- 3D Art -->
    14.    
    15.    
    16.         <div id= "side">
    17.         <span style="font-size:2.8em"> Kontakte </span> <br />        
    18.         <span style="font-size:1.8em"><br />
    19.         Hier können sie<br>
    20.         mir eine E-Mail<br>
    21.         schreiben
    22.         </span>
    23.    
    24.                 <ul><span style="font-size:1.3em">
    25.                     <a href="Kontakte.html"> Anschreiben</a>
    26.                 </ul></span>
    27.        
    28.         </div> <!-- Kontakte -->
    29.      
    30.         <div id= "middle">
    31.         <span style="font-size:2.8em"> Game</span> <br />        
    32.         <span style="font-size:1.8em"> <br />
    33.         Hier können sie <br>
    34.         meine Alpha Versionen    <br>
    35.         spielen.</span>
    36.    
    37.                 <ul><span style="font-size:1.3em">
    38.                     <a href="Game.html"> Gamen</a>
    39.                 </ul></span>    
    40.        
    41.         </div> <!-- Game -->
    42.     </div> <!-- ende Navi -->
    43.  
    Css:
    Code (Text):
    1. #Navi{
    2.  
    3.     background: #ffe486;
    4.      border-color:#ffe486;
    5.  
    6.     width: auto;
    7.     height: 350px;
    8.  
    9.     text-align: center;
    10.  
    11.     padding-left: 120px ;
    12.     padding-right: 120px;
    13.  
    14.  
    15. }
    16.  
    17.     #main {
    18.         float:left;
    19.         height: 0px;
    20.         color: #08bffb;
    21.         color:#666;
    22.  
    23.     }
    24.  
    25.     #side {
    26.         float:right;
    27.         height: 0px;
    28.         color: #08bffb;
    29.         color:#666;
    30.     }
    31.  
    32.  
    33.  
    34.     #middle {
    35.         float: center;
    36.         color: #08bffb;
    37.         color:#666;
    38.  
    39.     }
    40.    
    Ich hoffe ihr könnt was damit anfangen :)

    Liebe Grüsse
    Samuel
     
    #1      
  2. Jormungand

    Jormungand VonAllemEtwas

    Dabei seit:
    23.09.2008
    Beiträge:
    727
    Geschlecht:
    männlich
    Software:
    Adobe Creative Cloud, C4D R 11.5
    Kameratyp:
    Nikon D5000
    Button überlappen.
    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?
     
    #2      
  3. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.049
    Geschlecht:
    männlich
    Ort:
    Ö
    Button überlappen.
    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 (Text):
    1.  
    2. <ul><span style="font-size:1.3em">
    3. <a href="Kontakte.html"> Anschreiben</a>
    4. </ul></span>
    5.  
    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.
     
    #3      
x
×
×