• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Zwei DIV´s nebeneinander?

Dsimon24

Mitglied
Hallo!

Bin noch ziemlich neu in CSS und bräuchte diesmal dort eure Hilfe...

Angenommen, ich möchte einen header erstellen, mit einem Logo und
einer Navigationsleiste in jeweils einem DIV. Wie kann ich die beiden nun
nebeneinander packen, sodass es beim verkleinern des Browserfensters
zu keinem Konflikt kommt?

Bei mir sieht es jetzt folgendermaßen aus:

HTML:
<div class="header">
    <div class="logo">
        <img src="images/cloud-trans.png" width="300" height="120">
    </div>
   
    <div class="navi">
        <nav>
            <a href="#">Anmelden &nbsp;&nbsp;&nbsp;&nbsp;</a>
            <a href="#">Leistung &nbsp;&nbsp;&nbsp;&nbsp;</a>
            <a href="#">Über uns &nbsp;&nbsp;&nbsp;&nbsp;</a>
            <a href="#">Support &nbsp;&nbsp;&nbsp;&nbsp;</a>
            <a href="#">FAQ &nbsp;&nbsp;&nbsp;&nbsp;</a>
        </nav>
    </div>
</div>

und der dazugehörige CSS-Code:

HTML:
.header {
    max-width: 100%;
}

.logo {
    width: 50%;
    min-width: 600px;
    background: #4F4F4F;
}

.navi {
    width: 50%;
    min-width: 500px;
    background: #4F4F4F;
    color: #FFF;
    padding: 52.5px 0;
    margin: -124.6px 0 0 50%;
}

Klapp eigentlich(!) ganz gut :-D
ABER: Wenn ich das Browserfenster verkleinere, ragt die Linkleiste ins Logo.
Wie kann ich es am elegantesten Lösen, damit es nicht ins Logo ragt?

Gruß, David
 
Hallo,

wie wär's mit dem Lernen der Grundlagen.

Pixel mit Kommastellen???

margin mit minus-Wert???

Lösung:

HTML5 verwenden.
Alle DIVs löschen.
&nbsp; löschen.
Das header-Element verwenden.
Das img-Element in ein figure-Element einschließen.
Für die Navi das ul-Element samt li-Element verwenden
Keine Layoutangaben im Quelltext.

Den gesamten HTML-Quellcode zur Kontrolle hier ins Forum schreiben. CSS interessiert erst mal nicht.

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Angenommen, ich soll eine Jahresbilanz für ein mittelständisches Unternehmen erstellen, kann aber Aktiva nicht von Passiva unterscheiden. Wie schaffe ich es, die Bilanz so wasserdicht zu machen, damit sie vom Finanzamt nicht beanstandet wird? Ich könnte Auszüge daraus in einem Forum für Wirtschaftsprüfer veröffentlichen, in der Hoffnung, dort wichtige Tipps zu erhalten, oder mich zuvor mit BWL und Steuerrecht befassen.

Beantwortet das deine Frage?
 
Hallo,

ich habe nicht nur geschrieben was du nicht machen sollst, sondern auch ganz konkret was du machen sollst. Ich habe die Lösung grade noch mal um jeden Einzelschritt erweitert. Meinst du, das du das hinbekommst?

Gruss

MrMurphy
 
Zurück
Oben