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

Weisse Lücke im Menü

L

Loana

Mitglied
Hallo!
Mal eine etwas dumme Frage...ich habe eine einfaches horizentales Menü gemacht und auf der rechten Seite ist eine Lücke wie bekomme ich die weg...wäre toll wenn mir jemand helfen könnte.

Die Seite ist natürlich nicht fertig habs aber mal hochgeladen...also nicht wundern dass es noch so leer aussieht.
Nun hier der Link
http://bastelseiteneu.bplaced.net/indexneu.html
 
Zuletzt bearbeitet:
Der Link scheint nicht zu stimmen. Es lädt endlos, ohne dass etwas passiert. Verdächtig ist, dass der Link im Posting auf indexneu.html lautet, im Browser aber indexnei.html Es passiert aber auch nichts, wenn man das korrigiert.

Lg X.
 
Entferne aus deinem CSS folgende Eigenschaften:
Code: 
#navmenu li { float: left;width: 100px; }

Ergänze im CSS:

Code: 
#navmenu { display: flex; }
#navmenu li { flex-grow: 1; }

Klappt in meinem Firefox einwandfrei.

Moderation: Verschoben von HTML zu CSS, da es um Gestaltung geht.
 
Liebe Loana

Meiner Meinung nach liegt das Problem im (fehlenden) CSS des Elements <ul>, dem Du die ID "navmenu" verpasst hast. Kurz gesagt hast Du diesem Element <ul> (Deiner Navigationleiste also) gar keine CSS-Deklaration verpasst. Das führt (wahrscheinlich ;)) dazu, dass <ul> nur gerade so "lang" wird wie die aneinandegereihten Menüpunkte (Deine <li>) bzw. recht eigentlich CSS-mässig "verschwindet".

Lösungsvorschlag: Verpasse <ul> bzw. #navmenu mal die CSS-Deklaration width: 100%. Mal sehen, ob wir Deiner Navi so ihr Mütchen kühlen können!

Lg X.
 
Das wird auch nichts, da bisher die Listenelemente eine feste Breite haben. Lösungsvorschlag steht oben (fast gleichzeitig gepostet scheint mir ;) ).
 
threadi schrieb:
Das wird auch nichts, da bisher die Listenelemente eine feste Breite haben. Lösungsvorschlag steht oben (fast gleichzeitig gepostet scheint mir ;) ).
Zum Vergrößern anklicken....

Ja, hat sich beim Posten überschnitten.

@TE: threadi hat sehr viel mehr Erfahrung als ich (wie Du leicht an seiner Beitragszahl und so erkennen kannst). Daher hat sein Vorschlag eh Vorrang.

Kritische-konstruktive Bemerkungen jetzt dennoch zu threadis Vorschlag: 1) Die Deklarationen display-flex und flex-grow sind ziemlich hypermodern, wie ist die Browserunterstützung? 2) Bedeuten fixe Breiten der Listenelemente wirklich, dass dann die 100-Prozent-Breite der ganzen Liste ignoriert wird? Ich behaupte jetzt mal frecherweise: nein. Aber jetzt bin ich zu müde für den Praxistest, der es zeigen würde.

Jedenfalls hat der TE jetzt Inputs.

Lg X.
 
Hab mal den HTML-Code aufgeräumt.
HTML: 
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
<title>Basteln mit PI</title>
<style>

* {
 margin:0;
 padding:0;
 list-style:none;
 text-decoration:none;
 border:none;
 box-sizing:border-box;
}

body {
 background-color : #005680;
 color : #005680;
 font-family : Verdana, Arial, Helvetica, sans-serif;
 font-size : small;
}

#wrapper {
 background-color : #dffaff;
 color : #005680;
 width : 960px;
 margin:10px auto;
}

#kopfbereich {
 height:250px;
 color : #000;
 padding:0;
 position:relative;
 text-align:center;
}

#kopfbereich:before {
 content:url(logo.jpg);
 position:absolute;
 left:0;
 top:0;
}

#navmenu {
 overflow:hidden;
 background:#dffaff;
 text-align:center;
}

#navmenu li {
 display:inline-block;
 font-family: Tahoma;
 font-size: 12px;
 width: 100px;
}

#navmenu a {
 display:block;
 padding:20px 10px;
 color:#005680;
 border-bottom:1px solid #dffaff;
}
#navmenu li a:hover {
 border-bottom:1px solid #d90000;
 background: #ecffec;
}

#textbereich {
 padding:20px;
 text-align:center;
}

#textbereich h3  {
 padding:10px 10px 2rem 10px;
}

#textbereich p  {
 padding:10px;
}

#textbereich.willkommen p {
 padding-bottom:100px;
 background:url(images/lilablume.jpg) no-repeat center bottom;
}

#fussbereich {
 padding: 10px;
 border-top : 1px solid #999;
}

address {
text-align : center;
font-size : 80%;
font-style : normal;
letter-spacing : 2px;
line-height : 1.5;
}
</style>


</head>
<body id="startseite">

<div id="wrapper">
<div id="kopfbereich">
<h1>Meine Bastelwelt</h1>
</div>
<!-- Ende kopfbereich -->
<ul id="navmenu">
<li><a href="http://www.gerryundlady.de/indexneu/index.html">Home</a></li>
<li><a href="http://www.gerryundlady.de/indexneu/seiten/ubermich.html">über mich</a></li>
<li><a href="http://www.gerryundlady.de/indexneu/seiten/basteleien.html">Basteleien</a></li>
<li><a href="http://www.gerryundlady.de/indexneu/seiten/wolkis.html">Wolkis</a></li>
<li><a href="http://www.gerryundlady.de/indexneu/seiten/wettbewerbe.html">Wettbewerbe</a></li>
<li><a href="http://www.gerryundlady.de/indexneu/seiten/gastebuch.html">Gästebuch</a></li>
<li><a href="http://www.gerryundlady.de/indexneu/seiten/links.html">Links</a></li>
<li><a href="http://www.gerryundlady.de/indexneu/seiten/kontakt.html">Kontakt</a></li>
<li><a href="http://www.gerryundlady.de/indexneu/seiten/impressum.html">Impressum</a></li>
</ul>
<!--/navi-->

<div id="textbereich" class="willkommen">

<h3>Herzlich Willkommen in meiner Bastelwelt</h3>

<p>
Ich begrüsse euch ganz herzlich und wünsche viel Spass auf meiner Homepage.<br>
Lehnt euch einen Moment zurück und lasst euch überraschen.<br>
Einige Bilder, die ich mit meinem Grafikprogramm Photo ImpactX3 erstellt habe, werdet ihr hier finden.<br>
Die meisten Bilder sind aus meiner Phantasie entstanden und einige nach Tutorials.<br>
Über einen Gästebucheintrag würde ich mich ganz besonders freuen.<br>
</p>

</div>
<!-- Ende textbereich -->

<div id="fussbereich">
<address>
RoseMarie Hellriegel· Lindenstrasse 50 · 06679 Hohenmölsen<br>
Tel: 034441/ 23378<br>
<p><a href="http://www.homepageundgrafik.de/"><img src="images/profilbild.jpg" alt="Link"></a></p>
Update September 2014
</address>

<!-- Ende fussbereich -->
<!-- Ende wrapper -->
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben