Frage 3 Divs nebeneinander - Problem

CrystalKoch · 25 August 2015

Guten Tag,
ich bin gerade dabei eine Website zu erstellen mit css und html. ich komme allerdings nicht weiter.

Der Anfang der sieht so aus:

Ich würde aber gerne haben das alle 3 Elemente nebeneinander sind. Folgenden Code habe ich genutzt:

HTML:

        <div id="memberlink">
            <nav>
                        <a href="member.html">Member</a>
            </nav>
        </div>
       
       
        <div id="logomitte">
                        <img id="logo" src="img/logo.png" alt="Fire Gaming">
        </div>
       
   
        <div id="bewerbenlink">
            <nav>
                        <a href="bewerbung.html">Bewerben</a>
            </nav>
        </div>

Für die CSS:

Code:

#logo {
width: 30%;
height: 30%;
vertical-align: middle;
}

#memberlink{
float: left;
margin-top: 80px;
margin-left: 100px;
font-family: Arial;
font-size: 20px;
}

#logomitte {
}

#bewerbenlink {
float: right;
margin-top: 80px;
margin-right: 100px;
font-family: Arial;
font-size: 20px;
}

Ich hoffe mir kann jemand weiterhelfen, habe dazu leider nichts gefunden oder ich übersehe die ganze Zeit einen Fehler.

MfG
Sebastian

MrMurphy · 25 August 2015

Hallo,

dafür gibt es verschiedene Möglichkeiten. Welche am sinnvollsten ist läßt sich deinen Quellcodeschnipseln leider nicht entnehmen.

Am aktuellesten ist das Flexbox-Modell ( display: flex; )

Du könntest auch display: table; verwenden, hast dann aber gestalterisch die gleichen Nachteile wie bei einer Tabelle.

Beliebt ist auch display: inline-block; Wobei dabei wieder auf die Zwangsabstände geachtet werden muss.

Wenn du zum Floaten greifst (display: float) musst du auch clearen.

Zusätzlich musst du allen Elementen Breiten (width) mit auf den Weg geben, damit sie zusammen nebeneinander in den übergeordneten Container passen.

Anschließend kannst du zum Beispiel alle Elemente in die gleiche Richtung floaten.

Ich habe mal ein Beispiel mit float erstellt:

Code:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Layout 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
   @media all {
      body:before,
      body:after,
      .clearfix:before,
      .clearfix:after {
         content: " "; /*Leerstelle ist wichtig*/
         display: table;
      }
      body:after,
      .clearfix:after {
         clear: both;
      }
   }
   @media all {
      * {
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         padding: 0;
      }
      body>* {
         border: 3px solid orange;
      }
      #memberlink{
         width: 30%;
         margin: 0;
         float: left;
         font-family: Arial;
         font-size: 20px;
      }
      #logomitte {
         width: 40%;
         margin: 0;
         float: left;
      }
      #bewerbenlink {
         width: 30%;
         margin: 0;
         float: left;
         font-family: Arial;
         font-size: 20px;
      }
      #logo {
         height: 30%;
         vertical-align: middle;
         margin: 0;
      }
   }
   </style>
</head>
<body>
   <nav id="memberlink">
      <a href="member.html">Member</a>
   </nav>
   <div id="logomitte">
      <img id="logo" src="img/logo.png" alt="Fire Gaming">
   </div>
   <nav id="bewerbenlink">
      <a href="bewerbung.html">Bewerben</a>
   </nav>
</body>
</html>

Du solltest auch auf unnötige div verzichten, das habe ich in meinem Beispiel berücksichtigt.

Gruss

MrMurphy

CrystalKoch · 25 August 2015

Danke hat mir weitergeholfen ...

Frage 3 Divs nebeneinander - Problem

CrystalKoch

Neues Mitglied

Anhänge

MrMurphy

Senior HTML'ler

CrystalKoch

Neues Mitglied

Neueste Beiträge