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

[ERLEDIGT] Denkanstoss benötigt: <ul> erweitert das Fenster

S

SakuraChen

Neues Mitglied
Hallo zusammen,

ich brauche mal einen Denkanstoss, ich finde den Fehler einfach nicht :)
Zerreisst mich bitte nicht gleich in der Luft, ich bin Frischling ;)

Zu meinem Problem:

Ich habe ein header image auf meiner Seite (in der Breite passgenau zugeschnitten so das es ohne Scrollbalken für meine Auflösung genau passen müsste), darunter eine zentrierte Navigation. Rechts neben dem img habe ich nun plötzlich weißen Freiraum, der dort nicht hingehört. Per border habe ich bereits gerausgefunden das mein <ul> wohl der Verursacher ist, aber ich sitze schon die ganze Nacht wie der Ochs davor und finde den Fehler einfach nicht.. Wäre super lieb wenn einer von Euch mal drüberschauen könnte :)

Um es nochmal genauer zu sagen, ich möchte das der horizontale Scrollbalken (der aufgrund des Weißraums entstanden ist) wieder verschwindet, die zentrierte Navigation möchte ich behalten.


Betreffender Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="style.css">

</head>
<body>
<div class="wrapper">
<header><img src="img/Craft_1920x600.jpg"></header>
<nav>
<ul>
<li><a href="index.html" title="Zurück zur Startseite">HOME</a></li>
<li><a href="about.html" title="Über uns">ABOUT</a></li>
<li><a href="skills.html" title="Skills & Design">SKILLS</a></li>
<li><a href="samples.html" title="Referenzen">SAMPLES</a></li>
<li><a href="contact.html" title="So erreichen Sie uns">KONTAKT / IMPRESSUM</a></li>
</ul>
</nav>

<div class="content">
<p>TEXT FOLGT</p>
</div>

<footer>
<div>
<p>TEXT FOLGT</p>
</div>
</footer>
</div>
</body>
</html>


bisheriges CSS:

*{
margin:0;
padding:0;
font-family:Verdana;
}

ul {
position: relative;
float: left;
left: 50%;
margin: 0 auto;
padding: 0;
border:2px solid green;
}

nav li {
position: relative;
float: left;
right: 50%;
margin-top:20px;
padding: 5px 15px;
background: #FFF;
list-style: none;
}

nav li a{
list-style-type: none;
text-decoration: none;
color:black;
font-size: 18px;
border:1px solid red;
}

footer{
float:left;
border:1px solid grey;
}

.content{
width: auto;
float:left;
border:1px solid yellow;


Ich danke Euch für Eure Hilfe und entschuldige mich schonmal im Vorraus für meine Blindheit, vermutlich ist es wieder einmal was richtig banales.. ;)
 
Ohne Fotolink schwer zu sagen ob das so richtig ist wie du dir das vorgestellt hast
*** Link entfernt, weil nicht mehr erreichbar ***
soll das so aussehen oder wie
 
Zuletzt bearbeitet:
Danke für Deine Antwort,
ich kenne mich hier in dem Forum noch nicht wirklich aus, ich versuche mal Bilder anzuhängen..

So wie auf Bild 1 zu sehen, hätte ich es gerne.. Ohne den horizontalen Scrollbalken. content und footer sollen unter die Navigation, linksbündig mit leichtem margin. Das bekomme ich, denke ich alles hin.. Mir geht es nur um diesen grünen Rahmen (das ist das <ul>) Wie auf dem zweiten Bild zu sehen (da habe ich ganz nach rechts gescrollt), drückt der grüne Kasten nach rechts raus und erzeugt deshalb den horizontalen Scrollbalken.. wäre der grüne Kasten nicht da, würde das Bild eben genau auf Seitenbreite passen und so ausschauen wie ich mir das vorstelle.. Trotzdem finde ich den Fehler im <ul> nicht..

Ich hoffe das war jetzt irgendwie verständlich rübergebracht, inzwischen nagt die Müdigkeit an meinem Hirn ;)
1.jpg 2.jpg
 
So ist es - das 'left: 50%;' schieben das ul über den Rand heraus und das 'right: 50%:' schieben die li wieder zurück. Was willst du damit erreichen? Soll das Menü zentriert über die Seitenbreite sein?
Das geht auch einfacher - ohne seltsame Effekte am Seitenrand.
 
Versuche es mal so...

*{
margin:0;
padding:0;
font-family:Verdana;
}

nav {
width: 100%;
text-align: center;
}
header img {
/*width: 100%;
max-width: 1920px;*/
}
ul {
list-style: none;
margin: 0 auto;
padding: 0;
border:2px solid green;
}

nav li {
display: inline-block;
margin-top:20px;
padding: 5px 15px;
background: #FFF;
}

nav li a{
text-decoration: none;
color:black;
font-size: 18px;
border:1px solid red;
}

footer{
float:left;
border:1px solid grey;
}

.content{
width: auto;
float:left;
border:1px solid yellow;
}


... und setze ein <br style="clear: both"> zwischen .content und footer
 
Sempervivum schrieb:
Ist dieses grüne Rechteck denn gewünscht? Ist ja auf deinem ersten Bild auch, aber sieht für mich eher unschön aus.
Zum Vergrößern anklicken....

Nein, das ist nicht gewünscht, es war nur für mich als Hilfe um zu sehen welches Element diesen Weißraum verursacht. :)

Danke für Deine Hilfe, das Problem ist gelöst. Ich markiere gleich als erledigt :)
 
Sailor schrieb:
So ist es - das 'left: 50%;' schieben das ul über den Rand heraus und das 'right: 50%:' schieben die li wieder zurück. Was willst du damit erreichen? Soll das Menü zentriert über die Seitenbreite sein?
Das geht auch einfacher - ohne seltsame Effekte am Seitenrand.
Zum Vergrößern anklicken....

Tausend Dank, genau da lag das Problem. Ich habe den Code für die Navigation aus dem Netz, da mir entfallen war wie ich etwas flexibel zentriere. Ich muss zugeben das mir von vorneherein nicht klar war, was mir das left und right 50% sagen soll, habe es einfach blindlings übernommen ;) Nach Deiner Erklärung ist es vollkommen logisch, dass es SO nicht funktionieren konnte. Das left 50% hat das ul rausgeschoben und das right 50% schiebt die li zurück, aber logischerweise nicht das ul. Sorgt schon für eine Zentrierung, klar.. Aber eben zu einem unschönen Preis mit dem überhängenden ul.
Klasse, verstanden! :D

Genau, ich wollte ein zentriertes Menü, das sich responsiv verhält. Habe ich dank deines Codes jetzt auch.

und das clear:both hat sogar noch mein zusätzlich entstandenes footer Problem gelöst :D
Ich markiere gleich als erledigt!

Merci! :)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben