Background verschiebt sich.
 

Moin ich hab folgendes Problem. Ich möchte eine seite erstellen die in zwei klassen aufgeteilt ist ( header - content)

Das Problem was ich hab ist das der Header soweit inordnung ist nur wenn ich den main bereich erstelle streckt sich das bild komplett also auch hinter dem header. Das bild soll zwar sich auf ganze bildschirm strecken aber nur in der fläche die für ihn zur verfügung steht ( alles nachm dunklen balken. )

Die Seite soll auch kein Scrollbalken oder so haben.


Was mich noch mehr wundert ist wieso der maincontent, bei angaben wie zb margin-top die komplette seite nach untenschiebt je nach angabe.

was muss ich machen damit ich die fläche nachm header mit dem bild bzw. inhalt füllen kann.

Hier mal ein bild wie es aussehen soll http://i43.tinypic.com/2vv43dj.jpg

und hier mal die seite. (hab beim header mal die background farbe rausgenommen damit man sieht wie sich das bild dahinter streckt).http://www.care-verlag.de/try/index.html

Du meinst das leere Element mit der Klasse .maincontent? Ja, dieses Element beginnt ganz links -- denn nur die Inhalte (die es nicht gibt) weichen dem Float aus, nicht die gesamte Box. Bitte lies über Grundlagen zu Float nach. Little Boxes ist empfehlenswert.
Wenn du willst, dass .maincontent einen Abstand von links hat, dann gib einen an. Margin.

Keine gute Idee. So ist deine Seite unzugänglich, wenn jemand einen kleineren Viewport hat, als du gerne hättest. Und das kommt sehr oft vor.


Stichwort: "Collapsing Margins". Die Suchfunktion sowohl hier als auch in Little Boxes liefert Information dazu.

ja aber maincontent hat ja kein float:left

wenn ich zb ja was reinschreibe setzt es auch direkt am linken dunklen balken an

nur wenn ich es positionieren will bewegt sich der ganze inhalt inkl. header

und wie gesagt das mit dem bild irritiert. weil der sollja nur im maincontent seien.

Der header hat float. .maincontent steht nicht neben dem header, sondern verhält sich, als wäre der header gar nicht da. Nochmal: Lies über Float nach.

Weil nur die Inhalte dem Float ausweichen, nicht aber die gesamte Box. Das schrieb ja bereits.

hmm glaub ich habs hinbekommen.

könnt ihr mal ein blick drauf werfen ?

Jetzt hast du die gesamte Situation verändert. Dabei hättest du deinem .maincontent einfach nur einen linken margin zu geben brauchen.
Bitte mach das rückgängig, das geht so nicht. .maincontent hat jetzt float und width:100%. Wenn du nicht die Scrollbalken kaputtmachen würdest, würdest du sehen, dass das Element jetzt nach rechts außen übersteht. Das willst du doch bestimmt nicht.

Deine Seite ist unbenutzbar, wenn du das Menü fix positionierst und das Scrollen kaputtmachst.

ich wollt ja keine scrollbalken.

Das, das bild etwas abgeschnitten ist , ist kein problem.

Wie krieg ich jetzt aber den text nach unten . also zentriert unten. ??? Praktisch da wo es jetzt ist nur halt am unteren rand.

Bin gerade dabei die beiden boxen zu erstellen wie aufm bild .

ach jetzt versteh ich es.

ein align center nimmt er zwar an aber da es ja abgeschnitten wird ist natürlich das ganze nicht mittig.

also hab ma jetzt die positionierung fixed rausgenommen - maincontent hat kein float left mehr. und margin left auf 388px. Jetzt hab ich aber immer noch das problem das es abgeschnitten wird.

Könnt ihr mir sagen was ich zu machen hab ? bzw. was ich schreiben muss ? beiß mir da gerade die zähne dran aus

%-Angaben und Box-Model ändern
* { box-sizing: border-box } FTW - Paul Irish

sorry ..... werd nicht so richtig schlau draus

soll ich nun jquery implentmentieren ? ich dacht mit ein paar css angaben wäre es erledigt