CSS-Probleme

[Miezekatzemaus]

Ich bin nicht sicher, ob das in diesen Thread oder in den HTML-Thread gehört, aber ich habe eine Frage, von der ich hoffe, dass sie hier reinpasst. Ich versuche gerade, eine Webseite zu erstellen, und zwar mit HTML5. In den Grundzügen kann ich das, letztes Jahr gab es an der Schule eine AG dazu. Ich bin gerade beim Header (heißt das Header? Oder sidebar oder irgendwie ganz anders?), und der will nicht. Ich habe für den Header bisher nur das hier:
  <div id="navigation">
    <a href="DieseSeite.html"> Home </a>
    <a href="Seite 1.html"> Platzhalter </a>
    <a href="Seite 2.html"> Platzhalter </a>
    <a href="Seite 3.html"> Impressum </a> Anmerkung: Statt url steht in meinem Dokument < / a > (ohne Leerzeichen), aber der Zirkel wandelt das um.
  </div>
In meiner CSS-Datei ist dazu folgendes definiert: (das haben wir in der Schule so zusammen definiert und da hat es bei mir auch nicht funktioniert, wir haben den Fehler aber alle nicht gefunden)
#navigation {
height:100%;
background-color:white;
width:15%;
margin:0px;
padding:10px 0.5% 0px 0.5%;
position:;
top:1px;
left:1px;
right:1px;
border:0px solid black;
border-top: 0px solid black;
border-bottom: 0px solid black }
#navigation a,  #navigation  a visited {
display: inline-block;
height: 30px;
width: 100%;
background-color:#C0C0C0;
border-bottom: 2px solid white;
text-align: center;
text-decoration: none;
font-family: monospace;
font-variant:small-caps}
#navigation a: hover{background-color: white}

Die fett gedruckte Zeile habe ich nachträglich eingefügt, bisher hat sie allerdings nichts verändert. Nun aber erstmal zum eigentlichen Problem: Ich hätte den Header gern so, dass er einfach von links nach rechts über die Seite verläuft (etwa so wie die Links hier von Index bis Logout). Das funktioniert aber nicht. Er ist bisher von oben nach unten gezogen und ich weiß, dass es irgendeinen Befehl gibt, der das rückgängig macht (beziehungsweise das eben von links nach rechts laufen lässt), ich weiß aber weder welchen noch wo ich das eingeben muss.
Nochmal kurz zusammengefasst, weil ich nicht sicher bin, ob das jetzt verständlich war: Der Header (oder die sidebar oder was auch immer) verläuft von oben nach unten, ich hätte sie aber gern von links nach rechts. Weiß zufällig jemand, was ich dazu verändern muss? Ich hab schon mehrfach versucht, daran zu drehen, es hat aber nicht funktioniert.
Wie gesagt, ich hoffe, die Frage passt hier rein und ist nicht zu spezifisch.

[Pandorah]

Ich bin nicht wirklich mit HTML5 und der feineren Kunst von CSS vertraut. Aber du hast oben in #navigation das

Code Auswählen Erweitern

display: inline-block; nicht drin, nur unten hinter #navigatian a, etc. Probier mal aus, ob es hilft, wenn du es auch oben einfügst, denn das ist für die Listung in der Reihe statt untereinander verantwortlich.

Wenn du Code einfügen willst, nutze einfach den Button mit der Raute #, links neben dem Button für Zitat (Sprechblase).

[Eluin]

Huhu Mieze,

Wo fängt denn dein HTML Code an? Da gehört ja noch was davor.

Zum einen Header, Footer und Sidebar / Navigation sind die korrekten Begriffe wobei du bei HTML5 das nicht in ein div schmeißen musst sondern <header> schreiben kannst (die neueren Browser können das, wie weit downwärts sprich ältere weiß ich nicht aus dem Kopf, bin gerade am Smartphone da ist nachgucken nicht so leicht, mach ich später gerne und probiere auch deinen Code aus).

Dann: height 100% macht bei einigen Elementen Probleme, wenn zb kein Inhalt da ist. Aber um das Menü von vertikal auf horizontal umzustellen brauchst du vor allem das Attribut "Display" damit sagst du, ob es in einer Zeile (inline) oder eben in mehreren Zeilen angezeigt werden soll, wenn es um Listen geht. Da du aber keine Liste sondern nur normale links hast, wundert mich gerade, dass die so nicht hintereinander geschrieben werden. Wie sieht der ganze css bzw HTML Code aus? (kannst du mir auch gerne per pn / Mail schicken).

Sehr hilfreich zum ausprobieren finde ich auch immer diese Seite, wenn es um kleine haarige Bereiche im Code geht: https://jsfiddle.net/

Edit: https://jsfiddle.net/03ocv1f8/ hab deinen Code mal eingefügt und zunächst raus gelöscht, was weg kann. Border 0px ist default, braucht also nicht im css stehen. Dito eigentlich mit der background-color white. Ich bin ein freund von minimal Code weil man so Fehler schneller findet. Nach dem Rest muss ich am Laptop gucken. Smartphone ist zu unübersichtlich.

Edit2: ich weiß, warum es nicht geht
Du setzt zweimal eine width. Einmal beim div (15%) - für volle Breite muss das auf 100% - und dann sagst du den links, die sollen jeweils eine width von 100% haben. Diese 100% beziehen sich auf die Größe des parant Containers also vom div. Sprich die links werden jeweils so groß wie das div. Diese width solltest du ganz weglassen oder bspw auf 33% bei drei links setzen (außer du willst noch mehr Platz dazwischen, aber centrieren kannst du eigentlich mit margins und anderen Attributen besser als über die width.
Ich glaube ich geh nachher mal das ganze css bei dir durch, da ist denke ich einige drin, was raus kann. Die Positionen brauchst du da auch nicht eigentlich. Kann ich gerade nicht testen, die Seite macht am Smartphone zu viele Zicken.

[Miezekatzemaus]

Danke, ihr zwei.

Ich hab "display: inline-block" jetzt zusätzlich zu #navigation gesetzt, das hatte zur Folge, dass die Mini-Tabelle aus Links in die Mitte der Seite gerückt ist, aber immer noch untereinander steht. Hmpf.
Elu, ich schicke dir mal den gesamten CSS-Code, ja? An den height-Einstellungen hatte ich vorhin schon von null bis hundert gedreht, aber das hat überhaupt nichts sichtbar verändert.
Edit: Ach ja, mein HTML-Code fängt ganz normal mit <!DOCTYPE html><html><head> (untereinander) an. Ich habe auch, wenn ich das richtig sehe, alle Klammern wieder geschlossen und die Problemstelle befindet sich im Body-Bereich.

[zDatze]

Hallo Mieze,

hast du möglicherweise keinen/den falschen Doctype gesetzt?
Ansonsten: Kannst du einen Link online stellen, der zu der nicht funktionierenden Seite führt, damit ich mir den ganzen Code ansehen kann? Wenn nur ein Ausschnitt zu sehen ist, fällt die Ferndiagnose bisschen schwer.

[Maja]

Du hast hier einen Fehler:

Code Auswählen Erweitern

position:;


Es muss heißen:

Code Auswählen Erweitern

postion: position: [b]Positionsangabe[/b]
Also absolute, relative, static, fixed. Du sagt dem Div, dass er eine Position hat, aber nicht, welche - du machst sofort nach der Angabe wieder zu. Die Werte danach, links, rechts, oben, unten werden nicht auf die Position bezogen, weil jeder Wert bis zum Semikolon bearbeitet wird, danach als geschlossen betrachtet wird und mit dem nächsten weitergemacht wird. Bei diesen Angaben:

Code Auswählen Erweitern


top:1px;
left:1px;
right:1px;

verwirrst du den Browser. Du gibst für einen Div eine Größe an (so-und-so-hoch, so-und-so-breit, entweder in absoluten Zahlen oder Prozenten, in deinem Fall 15%, und dann definierst du eine Ecke, von der aus das ganze dann dargestellt wird. Gibst du Werte an für Top und Left, ist das die linke obere Ecke des Divs - von da aus starten dann die 15% Breite, und hoch wird das ganze dann durch wie viel Inhalt du hast. Top und Right wäre dementsprechend die obere rechte Ecke, Bottom Left die linke untere, und so weiter. Aber du hast einen Wert für Left und einen für Right - und ein Div, der nur 15% der Bildschirmbreite ausnutzt, kann nicht sowohl vom linken als auch vom rechten Rand nur einen Pixel Abstand halten. Entweder oder.
Die Höhenangabe Height wird nur dann interpretiert, wenn du mehr Inhalt hast und der Div unten abgeschnitten werden soll. Wenn du eine Mindesthöhe für den Div vorgeben möchtest, damit er immer im Bild ist (mit Rahmen und allem), dann verwende stattdessen min-height.

Ganz am Schluss ist noch ein Fehler:

Code Auswählen Erweitern

font-variant:small-caps}
Da fehlt das abschließende Semikolon vor der Klammer.

Das sind die Fehler, die ich auf den ersten Blick sehe. Wenn ich die Zeit finde, kann ich es mir nochmal näher anschauen.

[Eluin]

Edit2: ich weiß, warum es nicht geht
Du setzt zweimal eine width. Einmal beim div (15%) - für volle Breite muss das auf 100% - und dann sagst du den links, die sollen jeweils eine width von 100% haben. Diese 100% beziehen sich auf die Größe des parant Containers also vom div. Sprich die links werden jeweils so groß wie das div. Diese width solltest du ganz weglassen oder bspw auf 33% bei drei links setzen (außer du willst noch mehr Platz dazwischen, aber centrieren kannst du eigentlich mit margins und anderen Attributen besser als über die width.
Ich glaube ich geh nachher mal das ganze css bei dir durch, da ist denke ich einige drin, was raus kann. Die Positionen brauchst du da auch nicht eigentlich. Kann ich gerade nicht testen, die Seite macht am Smartphone zu viele Zicken.

Ich zitiere mich mal selbst. In meinem zweiten Edit hatte ich das Problem bereits gelöst. Der Fehler liegt bei den beiden width angaben für die Navigation selbst und die Links.

Hab Mieze ihre HTML und CSS-Dateien bereits mit ausführlichen Kommentaren zurück geschickt.

[Miezekatzemaus]

Vielen Dank euch allen, besonders dir, Elu, ich sehe mir das in Ruhe an, wenn ich die Zeit dafür finde.

[Eluin]

Ich hoffe es hilft dir. Und JAAAA dafür brauchst du Zeit  *pfeif*

[Maja]

Ich zitiere mich mal selbst. In meinem zweiten Edit hatte ich das Problem bereits gelöst. Der Fehler liegt bei den beiden width angaben für die Navigation selbst und die Links.

Hab Mieze ihre HTML und CSS-Dateien bereits mit ausführlichen Kommentaren zurück geschickt.

Danke! Das hatte ich überlesen.

[Eluin]

Danke! Das hatte ich überlesen.

Kein Problem  hab ja genug hin und her editiert (am Smartphone gar nicht so leicht, daher auch sorry für die miserable Rechtschreibung)