HTML Probleme mit CSS Layout

FuXxMiTdOpPeLX

Commander

Registriert

Mai 2007

Beiträge

2.335

• 17. April 2009

• #1

Hallo,

ich bin gerade dabei ein CSS Layout zu erstellen. Allerdings habe ich nun das Problem, dass bei dieser Webseite http://christoph-schiffer.de/bo/ die Sidebar über den "mainFrame" hinaus geht.

Hat jemand eine Idee, wie ich das beheben kann?

Danke,
FuXx

 

V

volcem

Lieutenant

Registriert

Dez. 2007

Beiträge

1.021

• 17. April 2009

• #2

HTML:

#inhalt {
width: 780px;
}

#sidebar {
width: 191px;
float: left;
}

#content {
width: 589px;
margin-left: 194px;
}

Ändern in:

HTML:

#inhalt {
width: 780px;
}

#sidebar {
width: 191px;
float: left;
}

#content {
width: 589px;
margin-left: 194px;
float:right;
}

Und wenn es immer noch nen bisschen raus guckt -> Hier <- Einfach 2px kleiner machen die Sidebar.

Wäre jetzt meine Idee!

 

FuXxMiTdOpPeLX

Commander

Ersteller dieses Themas

Registriert

Mai 2007

Beiträge

2.335

• 17. April 2009

• #3

Sobald ich den #content auf float: right; stelle, befindet sich die sidebar und der content unter dem mainFrame. Der komplette Inhalt soll aber innerhalb des mainFrames bleiben.

Siehe: http://christoph-schiffer.de/bo/index2.html

 

V

volcem

Lieutenant

Registriert

Dez. 2007

Beiträge

1.021

• 17. April 2009

• #4

Hmm.

Mach die mal nen bisschen kleiner [sidebar] und [content].

Dann sagst du folgendes:

haubt = 780px

mainframe = 780px

sidebar = 191px

content = 589px <-- Und sagst ihm hier :

gehe 194px richtung rechts? Dies passiert ja im MainFrame.

Damit passt das ganze nicht mehr weil 3px zuviel sind = 783px insgesammt (Frame beläuft sich aber nur auf 780px)

Und normal muss das gehen

-->Haubt [sidebar(left)] -> [content(rechts)] -> [text] -> [text] nebeneinander!

*edit*
Lass das float:right; mal drin und kommentier das mal aus: margin-left: 194px;

 

FuXxMiTdOpPeLX

Commander

Ersteller dieses Themas

Registriert

Mai 2007

Beiträge

2.335

• 17. April 2009

• #5

Ok, ich habe nun das margin veringert und float: right; reingeschrieben. Nun sieht es von der Anordnung auch richtig aus, aber der mainFrame hört immer noch vorher auf, obwohl er die andere DIVs eigentlich umschließen soll.

http://christoph-schiffer.de/bo/

Edit: Der einzige Browser in dem es richtig aussieht ist der Internet Explorer 7 (siehe hier http://christoph-schiffer.de/bo/IE7.png)

 

Zuletzt bearbeitet: 18. April 2009

V

volcem

Lieutenant

Registriert

Dez. 2007

Beiträge

1.021

• 18. April 2009

• #6

Hmm.

Irgend wie total komische Geschichte, das heißt irgend wo ist noch nen Fehler:
->Div?
->css.
->html code

Wenn ich gleich nen bisschen Zeit habe, guck ich mal, gerade auf Arbeit :-(

 

B

Batti

Ensign

Registriert

Dez. 2004

Beiträge

164

• 18. April 2009

• #7

Moinsen,

versuch mal folgendes in der CSS für deinen mainFrame

Code:

#mainFrame {
  width: 780px;
  color: #161a1b;
  background-color: #33363b;
  margin: 0px auto;
  border: 2px solid #6d5c2e;
  height: 100$;
  overflow: hidden;
}

Viel Spaß

PS: haste dir den Spaß mal im IE6 angeschaut, sieht auch noch nicht ganz richtig aus ^^ (nicht, dass man diesen Browser noch unterstützen sollte, wollte es aber mal angemerkt haben)

PPS: Ich hab nochmal in deine CSS geschaut, wenn du im div headerbild das margin-left: 191px; auch noch durch float: left; ersetzt, dann passts auch im IE6...


Sooo, ich dann nochmal, ich hab mir deine index.html angeschaut, da waren dann doch ein paar Fehler drin, zB kommt das html-Tag nicht erst nach dem head!

Ich hab dir mal eine bereinigte Version in den Anhang gepackt, inkl. korrigierter CSS.

 

Anhänge

• bo.zip

  99,8 KB · Aufrufe: 89

Zuletzt bearbeitet: 18. April 2009

FuXxMiTdOpPeLX

Commander

Ersteller dieses Themas

Registriert

Mai 2007

Beiträge

2.335

• 18. April 2009

• #8

Hey, das sieht super aus. Vielen Dank an euch beiden für die Hilfe
Ich werde mir das mal genauer anschauen, damit ich verstehe, was da falsch gelaufen ist.