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

Navigation macht Zeilenumbruch

B

blackybaby

Neues Mitglied
Hallo zusammen

Bin grad dabei HTML und CSS zu erlernen und bau für eine Bekannt in kleinen Schritten eine Homepage auf. Nun hab ich folgendes Problem. Hab es nach langem hin und her geschafft, dass der Header oben fest stehen bleibt, doch wenn ich nun die Seite zusammenschiebe springt die Navigation ein Punkt nach dem andern in die nächste Zeile. Dies würd ich gern weghaben.
Kann mir da bitte jemand helfen. Ich stell mal den Code hier ein für CSS und HTML.

HTML: 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>RBauerDesign</title>
<link rel="stylesheet" href="css/style.css" type="text/css">


</head>

<body>

<div id="header"><!-- Anfang Header -->
 <div id="logo"><!-- Anfang Logo -->
 <img src="images/rblogo.png" width="144" height="159" alt="logo"/>
    </div><!-- Ende Logo -->
    <div id="navigation"><!-- Anfang  Navigation -->
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Leistungen</a></li>
        <li><a href="#">Entw&uuml;rfe</a></li>
        <li><a href="#">Referenzen</a></li>
        <li><a href="#">Kontakt</a></li>
        <li><a href="#">Impressum</a></li>
    </div><!-- Ende Navigation -->
 </div><!-- Ende Header -->
 
 
  <div id="hauptbereich"><!-- Anfang Hauptbereich -->
    <div id="container"><!-- Anfang Container -->
 
  <h1>Sie wollen eine neue Homepage?</h1>
  <p>Wir sind f&uuml;r Sie da und setzen Ihr W&uuml;nsche gerne um!</p>
 
  </div><!-- Ende Container -->
 
  <div id="main"><!-- Anfang Main -->
  <div id="linkerblock"><!-- Anfang linker Block -->
  <h3>Webdesign aus der Oberpfalz</h3>
  <p>Wir bieten Ihnen gut strukturierte, &uuml;bersichtliche und suchmaschinenfreundliche<br /> Webseiten an.
  Die Designs erstelle und gestalte ich individuell für jeden<br />einzelnen Auftrag.
  Somit ist die jede Seite  auf Ihren Auftraggeber zugeschnitten. <br />
  </p>
  <h3>Entw&uuml;rfe</h3>
  <p>
      Meine erstellten Designs sind keine Fertigvorlagen, sondern f&uuml;r jedes <br />
      meiner Projekte individuell erstellt worden. Sollten Sie schon ein Logo <br />
      haben, wird  dies natürlich bei der Farbauswahl des Designs  <br />
      mit ber&uuml;cksichtigt.
  </p>
      </div><!-- Ende linker Block -->
      
      <div id="rechterblock"><!-- Anfang rechter Block -->
     <h3>Design und Programmierung</h3>
     <p>
     Da ich gut mit einem Programmierer zusammenarbeite,<br  />
     sparen Sie sich den Weg daf&uuml;r und erhalten so <br />
     eine komplette designte und programmierte Website, <br />
     so gut wie aus einer Hand.
     </p>
      </div><!-- Ende rechter Block -->
  </div><!-- Ende Main -->     



<div id="footer"><!-- Anfang footer -->
    <p>&copy; 2017 Rebecca Bauer</p>
</div><!-- Ende Footer -->
    </div><!-- Ende Hauptbereich -->
    
</body>
</html>


HTML: 
@charset "utf-8";
/* CSS Document */


html {
    width: 100%;
    margin: 0;
    padding: 0;
}



body {
    width: 100%;
    background-color: #fff;
    margin: 0;
    padding: 0;
}

/* Anfang Kopfbereich */

#header{
    width:  100%;
    position:fixed;
    left: 0;
    top: 0;
    height: 180px;
    background-color: #FFF;
}


#logo {
    width: 10%;
    min-width: 5%;
    float: left;
    margin-right:1%;
    margin-top: 1%;
}

#navigation {
    max-width: 100%;
    min-width: 50%;
    list-style: none;
    float: left;
}

#navigation li {
    display: inline;
    font-size: 22px;
    margin-top: 5%;
    padding: 0;
    float: left;
}

#navigation li a {
    padding: 10px 26px;
    color: #000;
    text-shadow: 1px 1px 0px #E37588;
    text-decoration: none;
    display: inline-block;
}

#navigation li a:hover {
    text-shadow:1px  1px 0px #000;
    text-decoration:  none;
    color: #7D7D7D;
}

/*  Ende Kopfbereich */






/* Anfang Hauptbereich */

#hauptbereich {
    width: 100%;
    text-align: center;
}

#container {
    width: 100%;
    height: 180px;
    background-color: #f3f3f3;
    text-align: center;
    font-size: 35px;
    margin-top: 220px;
}

h1 {
    font-size: 60px;
    color: #5A5A5A;
    text-shadow: 1px  1px 0px #fff;
}

#main {
    text-align: center;
    font-size: 20px;
}

#linkerblock {
    width: 50%;
    float: left;
    padding: 20px;
    text-align: left;
}

#rechterblock {
    float: left;
    padding: 20px;
    text-align: left;
}

#footer {
    width: 100%;
    background-color: #f3f3f3;
    height: 40px;
    font-size: 16px;
    color: #000;
    text-align: left;
    float:left;
    padding-left: 20px;
}
    

/*--------------------------------Smartphone---------------------------------*/
@media (-webkit-min-device-pixel-ratio: 1.5) { /* WebKit */ }
@media (min--moz-device-pixel-ratio: 1.5) { /* Mozilla */ }
@media (-o-min-device-pixel-ratio: 3/2) { /* Opera */ }
@media (min-resolution: 1.5dppx) { /* CSS3 */ }

@media all and (max-width: 600px) {
    
    body {
        -webkit-text-size-adjust: none;
        padding:5px;
    }
    
    img {
        max-width: 90%;
        height: auto;
        float: none;
        margin: 0;
    }
    
    #header, #container, #navigation, #main, #footer {
        clear: both;
        display: block;
        width: 100%;
        float: none;
        margin: 0;
        padding: 0;
    }
    
    #navigation li {
        margin: 00 20px 0;
        padding: 0;
        text-align: left;
        width: 100%;
    }
    
    
    #navigation li a{
        display: block;
    }
    
}
 
Werbung:
Hallo

Wenn du schreibst, dass du kein rotes Fahrrad willst kann niemand außer dir wissen, welche Farbe du willst.

Du hast leider nur geschrieben, wie die Webseite sich nicht verhalten soll.

Um dir helfen zu können müssen wir aber wissen wie sie sich verhalten soll. Ansonsten werden unsere Lösungen eine nach der anderen von dir erfahrungsgemäß abgelehnt. Das wollen wir vermeiden.

Teile uns also bitte mit welches Verhalten du erreichen willst.

Gruss

MrMurphy
 
Guten Morgen zusammen

Sorry hatte ich wohl vergessen zu erwähnen, was ich gerne hätte. Dafür möchte ich mich entschuldigen.

Also ich hätte gerne, wenn man die Seite zusammenschiebt oder auch auf dem Handy sieht, dass die Navigation oben Sauber im Header bleibt und nicht ein Teil nach dem anderen in die nächste Zeile hüpft beim Zusammenschieben der Seite.

Hoffe ich konnte einigermassen rüberbringen was ich gerne hätte

LG
blackybaby
 
Werbung:
Hallo

Dann musst du dem #header eine Mindestbreite (min-width) von 900px mit auf den Weg geben. Also

Code: 
   #header {
      min-width: 900px;
      width: 100%;
      position: fixed;
      left: 0;
      top: 0;
      height: 180px;
      background-color: #FFF;
   }

Gruss

MrMurphy
 
Werbung:
Hallo

aber leider hilft das nicht wirklich
Zum Vergrößern anklicken....

Doch, mit dem von dir zur Verfügung gestellten Quelltext (und etwas anderes hatte ich nicht) hilft das.

Dein Link enthält zum Beispiel ein Logo das bislang nur du kanntest.

Bei der Seite musst du halt ein min-width von 1450px statt 900px eintragen.

Gruss

MrMurphy
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben