Diverse Fragen zu meiner Homepage

[W31L1]

Hallo, ich habe folgende Probleme auf meine Homepage (http://w31l1.w3.funpic.de/):

1. Wenn ich auf das Impressum oder die Galerie klicke, verschiebt sich die ganze Seite minimal nach links... und ich habe keine Idee, warum. Vor allem ist das bei dem Impressum komisch, es ist doch ganz genau so aufgebaut wie die anderen Seiten außer der Galerie.

2. Ich würde gerne einen dünnen, 1 Pixel breiten weißen Strich zwischen dem roten content-Bereich und dem schwarzem Banner haben, und habe auf der Index-Seite probeweise dies ausgetestet, indem ich einfach ein Bild under dem Banner eingefügt hab. Aber da ist jetzt ein roter Streifen zwischen dem Banner und der weißen Linie. Kann mir jemand da helfen? (Diese Frage ist eigentlich rein aus Neugier, ich weiß schon, dass ich auch eine weiße Linie auch einfach beim Banner unten einfügen könnte, also dass ich dann ein Image statt zwei hab)

3. In meiner Biographie-Seite würde ich gerne mein Foto auf gleicher Höhe wie der Text daneben haben. Allerdings liegt im moment das Foto etwas höher - ich habe das Foto und den Text in eine Tabelle getan. Mit float habe ich es auch schon probiert - das Bild liegt ebenfalls höher als der Text. Weiß jemand Rat?

 

[W31L1]

Ops sorry, da wurde die hintere Klammer und der Doppelpunkt mit als Adresse aufgefasst. Der Link:

W31L1 :: Home

 

[thuemmy]

Zu 1.) Dass der Inhalt nach links rutscht liegt daran, dass der Inhalt höher ist, als der Viewport des Browsers und deswegen die Scrollleiste eingeblendet wird.

Zu 2.) Da kann ich Dir nur insofern weiterhelfen, dass ich an Deiner Stelle die zweiße 1-Pixelzeile mit in das Headerbild nehmen würde.

Zu 3.) Leider keinen Plan :(

Gruß thuemmy

 

[Efchen]

ich habe das Foto und den Text in eine Tabelle getan.

Unsinnige Auszeichnung kann keine Methode sein, Darstellungsfehler zu beseitigen.

Wenn Du die beiden Bilder floatest und margin/padding-top anpasst, dann gibts keinen Grund, warum das nicht geht. Die Tabelle ist da augenblicklich in der Form sinnfrei. Warum Du aber stattdessen nicht Deine persönlichen Daten als Tabelle ausgezeichnet hast, ist mir ein Rätsel.

Ach ja, und bitte vertiefe Dich etwas in HTML, Deine logische Auszeichnung lässt noch etwas zu wünschen übrig. Du tendierst zu div-Suppe. Ein Menü z.B. ist eine Liste.

 

[W31L1]

Erstmal danke, 1. Frage ist schon beantwortet. Aber ich habe deine Antwort nicht 100% verstanden, Efchen:

Also ich soll das Bild mit float nach links oder rechts verschieben, und dann noch den Abstand nach oben verändern? Woher soll ich den Abstand wissen - durch das Ausprobieren oder was? Ist das nicht etwas umständlich? Gibt es keine Methode, mit der man sofort das Bild auf gleiche Höhe wie den Text daneben bringen kann?

Diese Unterteilung in <container>, <header>, <content> und <footer> ist doch schon fast standart oder?

Also ich habe mir das html-Zeug selbst übers Internet angeeignet, und auch ein bisschen mir von Homepages anderer was abgeschaut. Leider waren die Tutorials im Internet meistens zu einfach und waren meistens für blutige Anfänger - und die Homepages von den anderen Personen waren entweder schlechter als meine eigene oder aber so kompliziert (mit Flash-Animationen usw.), dass ich da nichts davon lernen kann. Weißt du vielleicht, wo es anspruchsvollere Tutorials gibt, die auch vielleicht etwas schwierigere Sachen erklären, wie man z.B. eine Navi als Liste macht und wie man Seiten richtig unterteilt und so?

 

[rexini]

Zu 2:

Warum machst du an den container nicht einfach ein border dran in etwa so:

container {
border-bottom: 1px solid #fff;
}

??
#
EDIT:

header {
border-top: 1px solid #fff;
}

 

[Efchen]

Nein, es gibt keine Methode, mit der man etwas auf die gleiche Höhe bringen kann. Am ehesten könnte dafür noch display:table-cell geeignet sein, aber das ist nicht praktikabel, weil das ein gewisser, "moderner" Browser nicht beherrscht.

HTML IST einfach, deswegen findest Du wahrscheinlich nichts "anspruchsvolles". Eine Navigation macht man als Liste und damit fertig. Ob die horizontal oder vertikal ist, ist nicht Sache von HTML. Das macht man mit CSS. HTML ist nur für die logische Auszeichnung da, mit HTML gibt man dem Inhalt eine Bedeutung - mehr nicht. Aber selbst das zu verstehen, dass HTML so simpel ist, ist für viele Menschen eine echte Hürde, weil sie glauben, HTML müsse viel mehr können.

Links hab ich keine, ich google einfach, dann findet man genug. Für Listen gibt es List-a-matic, da gibts etliche Vorschläge. Horizontal gehts mit entweder display:inline oder float:left.

Was Du mir mit Deiner Standard-Unterteilung sagen willst, habe ich nicht verstanden. Jeder macht sein Layout so, wie er will. Standard gibts da nicht. Höchstens "üblich". Aber ich sehe den Bezug zu meinem Posting nicht.

 

[W31L1]

Hey danke, genau so eine Seite hab ich gesucht für Listen. Gibt es auch eine Seite mit Beispielen, wie man Seite ordnen könnte? Ich benutze ja im Moment in Biographie, Downloads und Links Tabellen, um den Inhalt zu ordnen. Aber man sollte es ja mit css machen, und ich weiß nicht wie.

Also ich wusste nicht, was du mit div-Suppe gemeint hast. Weil ich dachte, dass ich schon sparsam mit div-Tags umgegangen bin und nur die notwendigsten verwendet habe, z.B. container, header, content und footer.

Danke an alle, alle obigen drei Fragen sind beantwortet.

 

[W31L1]

Hm, also ich habe jetzt den oberen Rand vom Header weiß gemacht, aber leider bleibt dort immer noch ein roter Streifen, den ich auch mit

*
{
  margin:0px;
  padding:0px;
}

nicht wegmachen konnte.

 

[Efchen]

Gibt es auch eine Seite mit Beispielen, wie man Seite ordnen könnte?

Du meinst Layout? Das geht ausschließlich mit CSS und kommt drauf an, wie Du Dir das optisch vorstellst. Aber es hat sich geeigt, dass "normale" Layouts mit einer gesunden Kombination aus float und margin auskommen und keine absolute oder relative Positionierung brauchen. Immerhin positioniert jeder Browser die Objekte auf der Seite selbständig. Und das ist auch gut so, denn so nutzt er den vorandenen Platz sinnvoll aus.
Bevor Du aber ans Layout geht, sollte Dein Inhalt und Deine logische Auszeichnung stehen. Und Inhalt sollte man immer von Design&Layout trennen.
Tabellen jedenfalls sind, wie jedes andere HTML-Element auch, nicht geeignet, um Layout zu machen. Layout macht man ausschließlich mit CSS und schon deswegen ist es logisch, dass man dazu kein HTML-Tag benötigt.

Aber man sollte es ja mit css machen, und ich weiß nicht wie.

Sinnvoll beantworten kann man die Frage eigentlich erst, wenn Inhalt und logische Auszeichnung fertig sind.

[@uote]Also ich wusste nicht, was du mit div-Suppe gemeint hast. Weil ich dachte, dass ich schon sparsam mit div-Tags umgegangen bin[/quote]
Das mag sein, aber noch sparsamer bist Du mit anderen HTML-Tags umgegangen. Deswegen fehlt aber die logische Auszeichnung. Ein Menü als "Gruppe von Tags" (= <div>) auszuzeichnen ist nicht sinnvoll. Ein Menü zeichnet man als Liste aus (<ul>). Dann hat Deine Seite beispielsweise keine Überschrift (beginnend mit <h1>) und nichtmal Textabsätze (<p>)!

und nur die notwendigsten verwendet habe, z.B. container, header, content und footer.

Das sind ja nur Namen!
Ein <div id="header">Hallo!</div> wird nicht zur Überschrift, weil die ID "header" heißt. Dieses Konstrukt sagt rein gar nichts aus. Keiner weiß, was das "Hallo!" bedeuten soll. Wenn es als Überschrift gedacht ist, muss es <h1>Hallo!</h1> heißen, natürlich kann das h1 auch die ID "header" bekommen.

Semantik nennt man das.

Was die rote Linie angeht...nachdem die weiße Linie Dein border ist, und Firebug die rote Linie zu #header gehörig anzeigt, kann das nur ein margin sein, denn der Bereich des margin liegt ja außerhalb der borders.

 

[W31L1]

Ich habe jetzt bei der Index-Seite die Navi in eine Liste umgewandelt, und den Banner in <div id="header"></div> gesteckt.

Dann hab ich per css den Rand eingefügt und alle Abstände, egal drinnen oder draußen, auf 0 Pixel gestellt:

#header
{
  border-bottom: 1px solid #FFFFFF;
  padding: 0px;
  margin: 0px; 
}

Trotzdem ist da ein roter Strich zwischen dem Banner und dem weißen Strich.

 

[Efchen]

Zu HTML:
1. Die Liste ist fehlerhaft. Die schließenden Tags hast Du als öffnende geschrieben.
2. Warum ein <div> für den Header? Warum einen header nicht auch als Überschrift auszeichnen? Ist doch ein glasklarer Fall für <h1>. Aber unbedingt solltest Du beim alt-Attribut im img-Tag auch den Text angeben, der im Image steht, sonst wird ja gar nichts angezeigt, wenn keine Images geladen werden und Suchmaschinen sehen auch nichts.

Zu CSS:
Deine #navlist hat keine Angaben über margin/padding. Evtl. liegt es daran. Der rote Strich ist die Hintegrundfarbe von #container, richtig?

 

[W31L1]

Leider ist der Strich immer noch da, nachdem ich bei #navlist und auch bei #navlist ul margin und padding auf 0px gesetzt hab. Jap, das Rot stammt von der Hintergrundfarbe vom Container.

Sollte ich das Impressum auch als Liste schreiben?

 

[Efchen]

Ein Impressum ist ja keine Liste. Was zählst Du denn auf?

Ein Impressum enthält aber eine <address>, nämlich die des Verantwortlichen.

Ich hab die Lösung für Dein Problem:
Der rote Streifen ist noch Teil des #header. Ein Image ist ein Inline-Element, d.h. es wird auf der selben Grundlinie angeordnet wie Text. Darunter liegen dann noch die Unterlängen der Buchstaben "g", "p", usw. Das Image liegt aber auf der Grundlinie, also ein paar Pixel zu hoch.

Ich konnte das Problem lösen, indem ich dem Image sage, es soll sich wie ein Block-Element verhalten, also gib ihm "display:block". :-)

Gruß,
-Efchen

 

[W31L1]

Vielen Dank, das Problem ist jetzt behoben! Neue Frage! :)

Ich habe versucht, die Pipes in meiner Navi mit CSS darzustellen. Dazu habe ich die linken Ränder der einzelnen Listenpunkte 1px solid white gemacht, und wollte den linken Rand des ersten Listenpunktes mit id="first" und in CSS dann #first {border-left:none;} entfernen. Ging aber nicht, sondern ich musste class="first" verwenden. Daher die Frage: warum funktionierte class, id aber nicht?

Edit: Und noch was: Zwischen den Rändern von den <li> Elementen sind eine Lücke (ich habe den rechten Rand blau gefärbt, um das zu verdeutlichen), denn ich bis jetzt nur mit float:left weggekriegt habe. Allerdings verschiebt sich dann auch die ganze Navi nach links. Gibt es da auch eine Lösung, um die Lücke zu schließen?

 

[neuroleptika]

Kann ich so nicht nachvolziehen.
Zeig mal einen Link.

 

[W31L1]

W31L1 | Home

 

[Efchen]

Auf der verlinkten Seite gibt es in der Menüliste weder eine id noch eine class mit Namen "first". Du hast jetzt :first-child verwendet, was ja wohl den gewünschten Effekt hat, aber vermutlich nicht im IE6, oder? IIRC, dann kann der das nicht.

Der Rand zwischen dem blauen und weißen Balken kommt durch Dein padding:0 0.25em", macht insgesamt 0.5em Abstand.

 

[W31L1]

Achso, wusste nicht, dass :firstchild in IE6 nicht geht... wäre eleganter, als immer dem ersten <li> tag noch id oder class="first" hinzufügen...

Habe jetzt auf meiner index.html id="first" hinzugefügt, und im css stylesheet #navlist li#first {border:none;}, funktioniert jetzt. Vorher hatte ich nur #first, und es hat nicht funktioniert. Warum?

Habe auch das padding auf 0 gestellt, der abstand zwischen den bordern ist immer noch da. Padding ist ja der Innenabstand oder? Der Abstand zwischen den bordern ist aber außerhalb... müsste margin sein, aber ich hab margin auch auf 0 gestellt...

 

[W31L1]

Mir hat einer im freenode-Netzwerk geraten, word-spacing auf 0 zu stellen... hat auch nicht geklappt.