Tabellenspalten rutschen ineinander

[Tobi44]

Hallo,

habe hier ein ziemlich bescheuertes Problem.

Habe eine Tabelle, welche meine komplette Website umgibt. Die linke Spalte beinhaltet die News, die mittlere die Hauptseite(n) und die rechte ist eine Spalte mit einem Werbeblock (welcher bei eingeloggten Usern wegfällt).

Wird alles richtig angezeigt, nur wenn ich das Browserfenster kleiner mache schiebt sich alles ab Spalte 2 (Hauptseite) in Spalte 1 (News), anstatt dass man vertikal scrollen müsste.
Ich kriegs nicht hin, weiß auch aktuell nicht, was ich an der dämlichen Tabelle verändern müsste.
Natürlich hat die linke Spalte (News) einen width-Wert von 190px zugewiesen. Dennoch drängt sich die mittlere Spalte beim Kleinermachen des Fenters links rein.

Edit: Hier mal 2 Screens. Hier: http://pics-upload.de/img/temp/screen1.png ist es in maximiertem Browserfenster richtig dargestellt, und hier: http://pics-upload.de/img/temp/screen2.png in verkleinertem Browserfenster falsch bzw. ineinanderverschoben. Ist zum Verrücktwerden.
Danke & Gruß

 

[threadi]

Tabellen sind für tabellarische Daten gedacht, nicht für das Grundgerüst einer Webseite. Daher missbrauchst Du hier Tabellen für etwas wofür sie nicht gedacht sind.

Unabhängig davon kann man den Grund dafür nur sagen, wenn man auch den Quellcode kennt.

 

[MrMurphy]

Hallo,

irgendwie lese ich in deiner Beschreibung nur von Tabellen. Leider hast du die div-Orgie unterschlagen. Solche unklaren Aussagen sind bei der Problemlösung nicht grade hilfreich.

Ich habe jetzt nicht den gesamten Quelltext angeschaut. Aber mindestens ein div-Container ist absolut positioniert und damit für den Rest nicht mehr sichtbar. Dadurch kommt es zu dem von dir beschriebenen Problem.

Die Tabellen haben zumindest mit dem Übereinanderschieben nichts zu tun, die Zellen bleiben schön nebeneinander.

Gruss

MrMurphy

 

[Tobi44]

Hallo,

wüsste aktuell nicht, wie ich die Inhalte der Website sonst in dieser Reihenfolge positionieren kann. Also links die Spalte mit den News, in der Mitte die Hauptseite und rechts der Werbeblock.

Nehme ich das position:absolute raus, rutscht nichts mehr ineinander, aber die Box links mit den News ist nicht mehr an richtiger Stelle.

Wie soll ich das Grundgerüst denn sonst machen?

Danke & Gruß

 

[aJunkie]

http://de.selfhtml.org/css/layouts/mehrspaltige.htm#dreispaltig

 

[Witschi262]

HTML zeichnet nur den Inhalt aus.
CSS ist für's Design da.

Wenn du einen Text hast, kannst du diesen beliebig mit CSS positionieren, Farbe geben, Hintergrund geben etc.
Tabellen sind einfach Tabbelen.

 

[Tobi44]

Jau.

Habe nun alles mögliche ausprobiert, auch den zuletzt geposteten Link. Habe meine css-Datei erweitert bzw. die verschiedenen divs dort reingesetzt und anschließend in der header-Datei anstelle der Tabelle eingefügt, aber ich krieg die Dinger nicht nebeneinander.
Durch die Jobbörse hier wurden mir Angebote für 20 bzw. 30 Euro gemacht. Sorry, aber die Anpassung zweier php-Dateien (header+footer) und eine kurze Anpassung der css-Datei ist keine 20 Euro wert. Müssen ja nur die mit den richtigen Eigenschaften versehenen Divs an richtiger Stelle eingefügt werden. Was ich leider nicht schaffe.

Also: Falls das irgendwer schnell machen könnte für kleinen Betrag, dann PN.

Danke, Gruß

 

[MrMurphy]

Hallo,

Durch die Jobbörse hier wurden mir Angebote für 20 bzw. 30 Euro gemacht. ...Falls das irgendwer schnell machen könnte für kleinen Betrag, dann PN.

Ich denke, du unterschätzt den Aufwand ganz enorm. Was ist denn für dich ein "kleiner Betrag", wenn dir offensichtlich 20 bis 30 Euro schon zu viel sind?

Erst mal ist das nicht in 10 bis 20 Minuten erledigt, zumal Experten (egal ob gewerblich oder privat) auch den den Ehrgeiz haben (sollten), eine entwicklungsfähige Webseite zu erstellen. Und dann zahlst du auch nicht nur für den Zeitaufwand, sondern auch für das Wissen, das sich die Experten über einen langfristigen Zeitraum angeeignet haben.

Außerdem ist zumindest meine persönliche Erfahrung, das häufig noch Änderungs- oder Anpassungswünsche nachgeschoben werden, die dann meist nicht extra honoriert werden - ist doch nur eine Sache von ein paar Minuten.

Deshalb von meiner Seite:

Falls das irgendwer schnell machen könnte

Nein danke. Konkrete Fragen beantworte ich gerne, eine weitergehende Leistung sollte aber auch entsprechend honoriert werden.

Gruss

MrMurphy

 

[Tobi44]

Für die komplette Erstellung der Website (Design nicht), also der Bildupload inkl. der anderen Funktionen, habe ich damals genau 88 Euro bezahlt. Design habe ich irgendwann mal machen lassen und nun in diese Seite eingebunden.
Jetzt geht es mir darum, die table als Gerüst rauszunehmen und einfach divs drum zu machen. Angemessen fände ich dafür 10 Euro. Mehr als 3 Dateien müssen nicht angepasst werden.
Klar, dass bei der Erstellung einer Website vom Auftraggeber immer noch paar zusätzliche Wünsche kommen, aber was soll hier noch von mir kommen, wenn die Seite nicht mehr aus einer Table besteht und die 3 Spalten einfach nebeneinander sitzen und sich beim Verkleinern des Browserfensters nicht mehr ineinander schieben?

Gruß

 

[Tobi44]

Hi,

habe es nun soweit selbst hinbekommen, dass die table raus ist und sich die Seite nicht mehr ineinander schiebt.
Die linke "Spalte" mit den News umgibt nun ein div mit den Eigenschaften float:left, top:170px, positon:fixed.
Die Hauptspalte umgibt ein div mit den Eigenschaften: float:left, margin-left:200px.
Nur die 3. Spalte mit dem Werbeblock kriege ich nicht richtig hin. Das div darum hat nun die Eigenschaften float:left, margin-left:10px, top:76px; position:relative.
Wenn ich aber nun das Fenster kleiner mache, schiebt sich der Werbeblock unter div1 und div2, sodass ich runterscrollen muss, das ist natürlich nicht optimal.

Frage: Wieso bleibt der Werbeblock im 3. Div nicht einfach neben dem 2. Div und rutscht einfach drunter, wenn das Fenster kleinergemacht wird?

Danke & Gruß

 

[threadi]

Für die komplette Erstellung der Website (Design nicht), also der Bildupload inkl. der anderen Funktionen, habe ich damals genau 88 Euro bezahlt.

Setz noch eine 0 dran, dann kommst Du bei den untersten meiner Preise raus für sowas.

Die linke "Spalte" mit den News umgibt nun ein div mit den Eigenschaften float:left, top:170px, positon:fixed.

Wieso fixed? Soll sie beim Scrollen immer zu sehen sein? Ist dir bewusst, dass "fixed" von älteren Browsern wie dem IE6 nicht korrekt umgesetzt wird und das Du für diese Browser etwas extra programmieren müsstest?

Die Hauptspalte umgibt ein div mit den Eigenschaften: float:left, margin-left:200px.
Nur die 3. Spalte mit dem Werbeblock kriege ich nicht richtig hin. Das div darum hat nun die Eigenschaften float:left, margin-left:10px, top:76px; position:relative.
Wenn ich aber nun das Fenster kleiner mache, schiebt sich der Werbeblock unter div1 und div2, sodass ich runterscrollen muss, das ist natürlich nicht optimal.

Wieso hast Du der Hauptspalte keine feste Breite gegeben? Wozu dient "position: relative;" bei der dritten Spalte?

Wenn die Hauptspalte variabel sein sollte, dann baue es so auf:

HTML

<div class="rechts">Inhalt rechte Spalte</div>
<div class="links">Inhalt linke Spalte</div>
<div class="content">Inhalt Hauptspalte</div>

CSS

.links { float: left;width: 200px; }
.rechts { float: right;width: 200px; }

Der Sinn des Ganzen:
Durch das floaten werden die beiden gefloateten Elemente links und rechts von der Hauptspalte ausgegeben und haben eine feste Breite. Die mittlere Spalte hat, da sie keine Breitenangaben und kein float hat, eine variable Breite und liegt zwischen den gefloateten Bereichen.

 

[Tobi44]

Habs nun auf meine Methode gelöst, ohne dass sich was verschiebt oder sonstwas. Fazit: Klappt nicht ganz ohne table.

Gruß