zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 3 Spaltiges Layout tut nichtn (Nachbau gemäss FAQ...)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.07.2008, 01:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.07.2008
Beiträge: 2
zebu befindet sich auf einem aufstrebenden Ast
Standard 3 Spaltiges Layout tut nichtn (Nachbau gemäss FAQ...)

Hallo zusammen

Ich möchte meine Website mit einem Header und darunter 3 Spalten gestalten. Dazu habe ich in der FAQ nachgelesen, wie das so ca. tut.

Mit einfachem Text funktioniert auch alles bestens, aber als nächsten Schritt versuche ich, die mittlere Spalte mit einem Hintergrundbild zu versehen, inkl. runde Ecken, etc. Dazu verschachtle ich weitere divs. Und jetzt klappt es halt nicht mehr: Der Text wird falsch eingerückt und die mittlere Spalte überdeckt die rechte Spalte.

Ich habe alles soweit abgespeckt, dass nur noch das relevante in den Files ist und wäre froh, wenn mir jemand helfen kann:

so ist es gut
so ist es falsch

Danke schon mal an alle, Gruss,
-- zebu
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.07.2008, 13:05
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

Code:
.right_content { /*so_ist_e...alsch.php (Linie 29)*/
...left:238px;
...position:relative;
...width:auto;
}
".right_content" steht in der Mitte deines Layouts, aber zu weit rechts. width auto nimmt 100% der verfügbaren Breite ein, dann verschiebst du das Paket um 238 px nach rechts.
Das kann so nicht gehen.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.07.2008, 20:09
Benutzerbild von RottenRoller
Benutzer
neuer user
 
Registriert seit: 12.05.2008
Ort: Flingern rules!
Beiträge: 53
RottenRoller befindet sich auf einem aufstrebenden Ast
Standard

genau! und dann gibst du deinem p-tag auch nch ein padding:

Code:
div#website p {so_ist_e...alsch.php (Linie 13)
padding:0px 200px 0px 237px;
}
__________________
www.freizeitler.de
Mit Zitat antworten
  #4 (permalink)  
Alt 13.07.2008, 21:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.07.2008
Beiträge: 2
zebu befindet sich auf einem aufstrebenden Ast
Standard

Danke für die Hilfe. Jetzt weiss ich wenigstens schon mal, was falsch ist. Kommen wir zum ersten der beiden Punkte:

Zitat:
Zitat von IChao Beitrag anzeigen
Code:
.right_content { /*so_ist_e...alsch.php (Linie 29)*/
...left:238px;
...position:relative;
...width:auto;
}
".right_content" steht in der Mitte deines Layouts, aber zu weit rechts. width auto nimmt 100% der verfügbaren Breite ein, dann verschiebst du das Paket um 238 px nach rechts.
Das kann so nicht gehen.
Ich möchte aber ja gerade, dass die volle Breite ausgenutzt wird. Ich möchte mich nicht auf eine fixe Breite festlegen, denn für den einen ist es zu wenig, für den anderen zu viel.

Kann ich die Breite irgendwie so in der Art einstellen als width=100% - 237px - 200px? D.h. die ganze Breite abzüglich was ich für links und rechts brauche?

Und nun zum zweiten:

Zitat:
Zitat von RottenRoller Beitrag anzeigen
genau! und dann gibst du deinem p-tag auch nch ein padding:

Code:
div#website p {so_ist_e...alsch.php (Linie 13)
padding:0px 200px 0px 237px;
}
Diese Definition habe ich zwischendurch mal weg genommen. Das Resultat ist aber nicht viel besser. Der Text fliesst dann eingerückt, solange links Menueinträge stehen.

Ich habe euer Feedback in eine dritte Version eingearbeitet:
Version mit dem Feedback

Folgende 3 Probleme stellen sich nun:

1. Die Breite wird nicht optimal ausgenutzt. Im Normalfall wird der Platz zwischen der mittleren und der rechten Spalte nicht verwendet. Wenn das Browserfenster kleiner ist als vorgesehen, dann überlagert die mittlere Spalte nach wie vor den rechten Teil. Wird die Breite noch weiter verkleinert, dann hängt der Content rechts aus dem Browserfenster raus.

2. Der Text innerhalb der mittleren Spalte wird um die Navigation herum eingerückt. Sobald links kein Content mehr steht, wird der Text korrekt am linken Rand der mittleren Spalte angezeigt.

3. Firefox und IE stellen die Seite jetzt nicht mehr identisch dar. Beim IE wird die Hintergrundgrafik in der mittleren Spalte sehr weit eingerückt, dafür ist der Text immer schön linksbündig. Dafür liegt die Hintergrundgrafik auf diese Weise zu weit rechts und überdeckt so den rechten Teil viel eher. Im Firefox sind Probleme 1 und 2 zu beobachten.

Für Hinweise zu obigen Problemen bin ich nach wie vor sehr dankbar.

Geändert von zebu (13.07.2008 um 21:31 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 13.07.2008, 23:54
Benutzerbild von RottenRoller
Benutzer
neuer user
 
Registriert seit: 12.05.2008
Ort: Flingern rules!
Beiträge: 53
RottenRoller befindet sich auf einem aufstrebenden Ast
Standard

versuch mal folgendes:

Code:
.right_content {so_ist_e...dback.php (Linie 28)
background-image:url(http://www.texaswinthem.com/imgs/green_frame_right.gif);
background-position:right center;
background-repeat:repeat-y;

margin:0 200px 0 237px;
padding:0px;
width:auto;
}
alle positions-angaben raus und nur die äußeren abstände des containers an left/right anpassen...
__________________
www.freizeitler.de
Mit Zitat antworten
Antwort

Stichwörter
hintergrundbild, layout, spalten, verschachtelt

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
3 spaltiges Layout mit CSS Serpico CSS 2 20.12.2010 16:53
2 spaltiges Layout, unabhängig scrollbar Plasm CSS 6 15.02.2008 11:31
3 spaltiges Layout mit flexibler Mitte skobe CSS 1 11.12.2007 17:48
3 spaltiges Layout, Außen feste Breite, innen dynamisch NicolaibassDH CSS 3 13.06.2007 12:09
3 spaltiges Layout, die 100.000te Speedoo CSS 21 18.08.2006 11:13


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:50 Uhr.