Positionierung des Headers - Problem mit Website!

[Pfohl]

Hallo Leute,

hab ein kleines Problem mit dem Header meiner Webiste und desssen Position .
Der gesamte Header (Logo & Menü) sind
1. in Firefox und IE7 verschieden postioniert (im IE7 um 5px nach links verschoben)
versch. margin, left, position, etc. werte versucht -> hilft nix!

2. und das größere Problem. Der gesamte Header verschiebt sich auf manchen Seiten nach Links ... ist aber auf anderen Seiten richtig zentriert.
Ich werde nicht schlau woran das liegt

Der Link zur Seite:
einfach mal durch die verschiedenen Seiten klicken, dann seht ihr mein problem.

Hoffe ihr könnt mir helfen !!!

 

[Sebil]

AW: Positionierung des Headers - Problem mit Website!

xD ich kann dir sagen woran es liegt:

wenn du mal drauf achtest, verschiebt sich dein header nur wenn die scrollbar aktiv ist also wenn du so viel inhalt hast dass dein fenster scrollen muss.

ich glaube es liegt daran dass du deinen header als einziges objekt auf der seite hast und der rest ist hintergrund bild.

du könntest deinen content bereich (der offensichtlich als hintergrund eingestellt ist) in einer tabellen-zelle als hintergrund setzen.

also mach ne neue tabelle mit 3 zeilen

HEADER (1 spalte)
MENÜ (9 spalten)
CONTENT (1 spalte)

und in der zelle des content bereichs also die 3te zeile machst du unten bei den eigenschaften die url des hintergrund bilds rein und jedes mal wenn deine scrollbar sich aktiviert dann vershciebt sich nicht nur der header sondern die ganze page und das ist nicht weiter schlimm das fällt kaum auf ist ganz normal so.

probiers mal aus gutes gelingen

gruß sebil

 

[thomasspeck]

AW: Positionierung des Headers - Problem mit Website!

Um Dir zu erklären wo Du ansetzen musst, musst Du verstehen, was Position bedeuted.
Du positionierst wie ein Weltmeister nen Haufen Elemente absolut, mit % margins lewft, um das in die Mitte zu kriegen.
Das Ergebnis siehst Du.

Im Grunde genommen sind nur wenige Fehler zu finden. Nur verwendest DU zuviele Divs wo Du auch andere Blockelemente verwenden könntest. Hier beginst Du dann zu positionieren.

Gib der ganzen Site einen Wrapper-div, also einen Div der das ganze umspannt.
Diesem gibst im CSS dann margin: 0 auto.
Damit ist der Kasten mal horizontal zentriert.
Darinnen, brauchst Du den Header nicht mit position zu ärgern. Einfach einfügen. Er wird dann soweit oben wie möglich und mit dem Wrapper zentriert sein.
DU kannst folgende Ressource studieren (gleich den ersten Post) und die darin enthaltenen Links durchackern:
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten - XHTMLforum

Auch meine Seite ist zentriert:
Ich habe versucht, den Quelltext gut zu dokumentieren, ebenso das CSS - schau es Dir mal an.

xD ich kann dir sagen woran es liegt:

wenn du mal drauf achtest, verschiebt sich dein header nur wenn die scrollbar aktiv ist also wenn du so viel inhalt hast dass dein fenster scrollen muss.
ich glaube es liegt daran dass du deinen header als einziges objekt auf der seite hast und der rest ist hintergrund bild.

Nein. Es ist völlig normal, das eine Seite springt, wenn eine scrollbar auftaucht, das vermeidet man, indem man die Anzeige einer Scrollbar erzwingt.

also mach ne neue tabelle mit 3 zeilen

HEADER (1 spalte)
MENÜ (9 spalten)
CONTENT (1 spalte)

gruß sebil

Bitte nicht in ner Tabelle, das ist so was von out!

EDIT: Noch ein Rat:
Verwende beim Erstellen den Firefox, und besorge DIr die Plugins , WebdeveloperToolbar (ist in Deutsch) - damit findest Du Fehler schneller (Einarbeitung vorausgesetzt)
Sieh Dir auf meiner Site an, wie man aus H1 (ist ein Blockelement) einen Header macht. H1 wird von Suma nicht mehr gut indiziert, dafür ab h3 umso besser. H1 und H2 kannst Du also zu informativen Designelementen verwenden.
Tipp: verwende Image-Replace und nicht hidden auf die Linktexte. Hidden ist etwas, was die Google Leute recht gerne beobachten, weil man es zu SEO Zwecken missbrauchen kann. Verwende die Gilder-Levin Methode (G++gle).
Auch ein ul für das Menü ist ein Blockelement, das braucht keinen umgebenden div. Du kannst da ul mit einer id direkt ansprechen.
Du hast noch ein bischen was vor, aber das wird schon!

 

[Sebil]

AW: Positionierung des Headers - Problem mit Website!

pfohl machs mit tabellen vertrau mir

 

[Pfohl]

AW: Positionierung des Headers - Problem mit Website!

Hallo und danke für die schnelle Hilfe!

Also bevor ich den content jetzt umbaue, erstmal zur positionierung der Seite.

Gib der ganzen Site einen Wrapper-div, also einen Div der das ganze umspannt.

Dafür habe ich den div-Tag "Box" eingerichtet, der umschliesst die komplette Seite.

Diesem gibst im CSS dann margin: 0 auto.
Damit ist der Kasten mal horizontal zentriert.
Darinnen, brauchst Du den Header nicht mit position zu ärgern. Einfach einfügen. Er wird dann soweit oben wie möglich und mit dem Wrapper zentriert sein.

Ich kann meine ganze seite bwz. den wrapper/box mit margin: 0 auot zentrieren ... und mir das ganze left, margin-left, postion etc. sparen?
Das wusste ich nicht!

 

[Tattoomaus78]

AW: Positionierung des Headers - Problem mit Website!

Ich kann meine ganze seite bwz. den wrapper/box mit margin: 0 auot zentrieren ... und mir das ganze left, margin-left, postion etc. sparen?
Das wusste ich nicht!

jep...damit ersparst du dir das ganze übrige postitions-chaos

schau dir doch mal die neue Tutorialserie von efox an ....da wird im Prinzip der Aufbau deines Layouts beschrieben

was mir bei dir noch aufgefallen ist, ist deine Hintergrundgrafik....das kann nicht funktionieren....zieh dein Fenster mal zB. auf ne 800x600 Auflösung....den BG solltest du aufteilen in dunkelgrau für body und das hellgrau mit dem border für den wrapper...

 

[esupanetz]

AW: Positionierung des Headers - Problem mit Website!

Lieber Sebil,

schon mal was von Usability und ähnlichem gehört?

Tabellen sind mehr als out, wie schon mal hier geschrieben (und ca 2milliardenmal in anderen Threads)

lG

Eva

 

[Pfohl]

Oke also der Code ist jetz schon mal bisschen einfach geworden ... zumindest was den header angeht.
Seite ist jetz mit dem div-Tag id="box" umschslossen.
Diesen habe ich mit margin:0 auto;und width:800px positioniert = zentriert

Gefällt mir schon mal besser als die Lösung mit left: 50% etc.

Mein nächstes Problem:
Die Seite springt wegen den Scrollbars immer hin und her ...
wie kann ich dieses Problem lösen.

Am liebsten wäre mir die nur! die vertikale Scrollbar immer anzeigen zu lassen.
Wie mache ich das?

@Tattoomaus78:
Danke daran habe ich noch gar nicht gedacht! Aber du hast vollkommen recht ... das funktioniert nicht.
Die Seite war unsprünglich eine Sache für 2 Stunden ... nur mit schwarzem Hintergrund und ohne grafiken (nur Logo oben).
Hab jetz die Tage das neue Design eingefügt und einfach die bg-grafik von unsrer Myspace seite genommen

Also ich schneide die graue fläche + weiße ränder aus und setze diese dann als bg für die "box".

Was mache ich dann mit den dunklen Flächen links und rechts ... dass diese richtig positioniert werden, als wäre es eine grafik. und vor allem gleimäßig kleiner werden wenn ich das fenster minimiere ?

viele fragen...aber vielen dank schon mal für die antworten xD

scrollbalken problem gelöst ... jetz muss nur noch das mit den Hintergrundgrafiken passen ... dann bin ich glücklick xD

edit by Tattoomaus: Bitte keine Doppelposts. Benutze die edit-Funktion unten rechts.

 

[Tattoomaus78]

AW: Positionierung des Headers - Problem mit Website!

Also ich schneide die graue fläche + weiße ränder aus und setze diese dann als bg für die "box".

Was mache ich dann mit den dunklen Flächen links und rechts ... dass diese richtig positioniert werden, als wäre es eine grafik. und vor allem gleimäßig kleiner werden wenn ich das fenster minimiere ?

viele fragen...aber vielen dank schon mal für die antworten xD

ney...du erstellst für den body von deinem dunkelgrauen HG eine kleine Grafik von zB. 10x10px das selbe für den hellgrauen im wrapper....den weißen Rand erzeugst du mittels border:...px solid #fff; ....für den Schatten wendest du zB. die "Zwiebelschalen-Technik" an ->

 

[thomasspeck]

AW: Positionierung des Headers - Problem mit Website!

Um das Problem mit dem Springen zu lösen, mußt DU die Scrollbar zwingen, immer da zu sein. das geht mit einem netten Schmäh:

html{
overflow-y: scroll;}/* geht auch für body

Ich sehe grade, das Du es für body definiert hast - Damit ist das erledigt.
Sieh Dir nochmal auf o.g. Site an, wo und wie ich die HG gesetzt habe. Denke auch dran, das Du evtl auch die paddings zurücksetzen solltest -ich würde das jedenfals global machen:

* {
padding:0;
margin:0;
}

und zwar ganz am Beginn des CSS. (beim body rausnehmen.)
Damit werden alle Default Abstände aller Elemente in allen Browsern auf 0 gestellt.
Dies ist die beste Ausgangslage für Gleichmässige Darstellung.
Zwar mußt Du nun für die Elemente die innen und aussenabstand brauchen, dies separat definieren - das Ergebnis ist aber komplette Kontrolle.


@Sebil: Nicht genügent - Setzen.

 

[Pfohl]

AW: Positionierung des Headers - Problem mit Website!

Also die Seite gefällt mir jetzt vom Aufbau her schon wesentlich besser ...
habe eure Tipps beherzigt und div-Tags eingespart und den Hintergrund angepasst.
Meinen Quelltext habe ich auch noch ein bisschen geordnet.

Ich habe nur noch das Problem, dass der Hintgerund der Hauptox (Wrapper) bei Seiten die nicht genügend Inhalt im Content haben nicht über die ganze Seite geht.
z.b.
Wie kann ich dieses Problem am besten lösen?

 

[wurmie]

AW: Positionierung des Headers - Problem mit Website!

hallo,

du hast ja die breite schon angegeben vergieb jetzt einfach noch einen festen wert für die höhe.

so ist es jetzt bei dir in der css

#text (linie 1)
{
width: 750px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
füge folgende zeile nach "width: 750px;" ein
height: 0px;
passe die pixel andeine bedürfnisse an
du kannst statt px auch % benutzen



beispiel:
width: 750px;
height: 500px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;


das müsste das problem lösen
bis denne

 

[Pfohl]

AW: Positionierung des Headers - Problem mit Website!

Ja das ist mir klar dass ich es mit einem px-Wert für height machen könnte ...
aber meine seiten haben verschiedenen inhalt:
neues.php z.b. hat sehr viel inhalt im content, dagegen bilder.php hat sehr wenig inhalt.

Ich suche ein möglichkeit die höhe, relativ zum inhalt des content, anzugeben.
Jedoch soll die Seite immer über die volle Höhe des Bildschirms gehen.

Mit einer %-Angabe funktioniert es leider nicht ... habe ich schon versucht.

lg Andi

 

[leohh]

AW: Positionierung des Headers - Problem mit Website!

Ohne viel Worte:
New CSS Sticky Footer - 2009

 

[Pfohl]

AW: Positionierung des Headers - Problem mit Website!

Ohne viel Worte:
New CSS Sticky Footer - 2009

Vielen Dank für deine Hilfe!
Hat super geklappt