CSS Navigationsleiste will nicht links bleiben

[Tw!Nk]

Hi,

für ein Web Projekt muss ich eine Seite entwerfen und ich habe ein paar kleinere Fehler im css code, die ich nicht finde, um sie gezielt auszumerzen.
Zum Problem:

1. Navigationsleiste (menu) ist nicht ganz links wie ich es gern hätte in der Seite angeordnet, sondern etwa 40px rechts davon ; hab schon alles mit "left: 0;" abgecheckt ^^
2. headpic ist ein Bild an der Oberseite der Page, das soll definitiv ganz am Rand vom Browser oben stehen (gerade steht es etwa 10px davon ab), "top: 0" hat nicht funktioniert.
3. Egal wo man die Seite öffnet, die Seite hat unten bei jedem Browser einen X-Achse Balken und etwa 10px (x-achse) von der Seite fehlen immer in der Ansicht. (width ist 100%)

html,body {
height: 100%;
width: 100%;
}

body {
font-size: 16px; 
font-family: Tahoma, Geneva, sans-serif;
line-height: 1,5em;
background: url(../img/main.png) repeat-x center top;
background-color: #e0e0e0;
}


#headpic { 
  background: url(../img/headpic.png) no-repeat center top;
  height: 170px;
  width: 100%;
  margin-bottom: 25px;
}

#main
{
min-height:100%;
}


#menu {
width: 180px;
font-size: 1em;
line-height: 1.5;
float: left;
}

#menu ul {
float: left;
width: 140px;
list-style-type: none;
left: 0;
}

/*--definiert die Blocküberschriften--*/
#menu h3 {
font-size: 18px;
text-align: center;
color: #000;
left: 0;
}

/*--definiert die "Drop-Down-Links" im Normalzustand--*/
#menu a {
text-decoration: none;
display: block;
border: solid 1px #000;
border-radius: 5px 20px 20px 5px;
margin: 0px 0px 10px 0px;
text-align: center;
/* background: #ff9224; */
color: #000;
left: 0;
}

/*--definiert die "Drop-Down-Links" im Hoverzustand--*/
#menu a:hover {
color: #000;
background: #61FF76;
}



/*--versteckt die "Drop-Down-Links", solange nicht gehovert wird--*/
#menu ul ul {
position: absolute;
top: -10px;
left: 105px;
z-index: 2;
display: none;
float: left;
}

#menu ul ul a{
font-size: 12px;
}

/*--lässt die Dropdown-Links beim Hovern erscheinen--*/
 #menu ul li:hover ul {
display: block;
}

 #menu li {
position: relative;
}

/* footer */
#footerbg{
	clear: both;
	width: 100%;
	background: url(../img/footer.png) top repeat-x;
}
#date {
margin-right: 10px;
color: black;
font-size: 12px;
text-align: right;
font-weight: bold;
}

#footer {
clear: both;
width: 100%;
padding: 20px 0px;
color: black;
text-align: center;
}

hoffe jemand kann mir so weiterhelfen^^

 

[Lawnmower]

Beispiel auf ein Webspace hochladen und Link posten wäre ganz hilfreich.

html und body margin und padding auf 0 gesetzt? In deinem Code scheints nicht drin zu sein...

 

[Tw!Nk]

Danke, Problem 2 und 3 hat sich damit erledigt; beim body noch margin, padding: 0 eingefügt

 

[Lawnmower]

probier mal ob list-style-position: outside oder inside auf die li Element des menu was bringt.

 

[Daaron]

Das würde evtl. gehen, wäre aber falsch. Es beseitigt nicht die Ursache und löst Folgefehler aus.
Korrekt wäre, den Navigations-<ul>'s margin:0;padding:0; mitzugeben... oder gleich auf einen großflächigen CSS-Reset zu setzen.

Insgesamt ist das hier aber kein CSS-Problem, sondern Unkenntnis des Handwerkszeugs. Die Frage hätte gar nicht auftauchen dürfen, wenn der TE sich mal 5 Minuten mit Webdeveloper-Tools auseinander gesetzt hätte. Und das TOLLSTE? Er muss nicht einmal welche installieren, er HAT sie bereits. Die vom Chrome sind mit Abstand die Besten, die vom FF ziemlich gut, die vom IE11... nun ja. Ich honoriere den Versuch, Microsoft...

Kleiner Geheimtip zur Höhe noch:
Setz sie nicht auf 100%, sondern auf 100.01%. Behebt nerviges Content-Flackern beim Übergang von kurzen auf längere Seiten oder beim Öffnen von Akkordeons.

 

[Tw!Nk]

Webdeveloper tools, von dem spricht kein professor oder dozent bei meiner fh ^^ da gibts nur sublime text 2

 

[Daaron]

Von denen klickt keiner mal im Chrome mit der rechten Maustaste auf ein Element und frag sich, was die Option "Element untersuchen" so macht? Vollidioten, alle miteinander. Denen sollte man die Lizenz zum Unterrichten entziehen.

 

[Lawnmower]

Daaron nicht so radikal, da gibts nix besseres mehr in der Schule bei Euch in Deutschland weil die alle bei uns arbeiten

Vermutlich hat da auch noch keiner was von HTML5 gehört.

 

[Tw!Nk]

ich hätte noch eine frage:

Wir sollen die Navigationsleiste über eine php datei mit arrays erstellen, die über include in alle Seiten verlinkt ist. Wie ändere ich den Style der navigationsleiste, die ja aus arrays besteht.

 

[Daaron]

Was für eine PHP-Datenstruktur dahinter steckt ist doch vollkommen egal, relevant ist, in welcher Form dein PHP-Script aus der Datenstruktur eine HTML-Struktur macht und wie du selbige mit CSS dann zur gewünschten Optik überredest.