zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Divgröße automatisch nach Inhalt anpassen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 26.11.2007, 12:56
Benutzerbild von Carolin
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 26.11.2007
Beiträge: 232
Carolin wird schon bald berühmt werden
Standard Divgröße automatisch nach Inhalt anpassen

Hallo, erst einmal kurz zu mir, da ich ja neu bin.

Ich heiße Carolin, bin fast 24 und beschäftige mich seit ca. 6 Wochen mit xhtml und css. Bisher ging es eigentlich auch ganz gut, nun ist aber ein Problem aufgetreten, für das mir bisher keine Lösung eingefallen ist. Vielleicht hat ja einer von euch eine Idee oder hatte einmal ein ähnliches Problem.

Ich beziehe mich im folgenden, auf das Layout, welches ihr unter nachstehendem Link findet.
Im Moment bin ich mit den Anpassungen für die verschiedenen IE's noch nicht fertig. (Fehler wie Abstand der Googlewerbung zur Überschrift, 3px Bug in IE 6 und 5.5, sowie unterbrochene Darstellung des Hintergrunds der Überschrift h1) Diese trau ich mir allerdings zu, selbst auszubessern. Auf diese braucht ihr in eventuellen Lösungsvorschlägen also keine Rücksicht zu nehmen.

1. Problemseite
2. statische Seite um die Eigenschaft der variablen Breite darzustellen (FF, Opera, Safari)

Also, folgendes Problem:

Die Seite ist in ihrer breite Variabel und minimale Breite liegt knapp unter 1024px. (siehe statische Seite)
Das funktioniert auch sehr gut, so lange die Breite von außen (also durch den Browser/User festgelegt wird. Nun soll sich die Seite aber zusätzlich auch verbreitern, wenn es der Inhalt verlangt. Dies ist natürlich für die Beispielseite nicht so wichtig, da dort normal keine Bilder auftreten, aber da ich anhand dieser Vorlage die Aufgabe habe das komplette Layout aller Seiten anzupassen und teilweise auch von Usern Content erstellt wird, ist es notwendig, dass das Layout durch ein zu großes Bild, oder einen zu langen Link nicht durchbrochen wird.

Wenn ich dem body Tag die Eigenschaft display: table; gebe, funktioniert es im FF, Opera und Safari. Allerdings finde ich diese Lösung nicht unbedingt gut.

Weiterhin wäre ich dankbar, wenn ihr bei Lösungsvorschlägen beachtet, dass die Seite bis IE 5.5 abwärtskompatibel sein sollte.

Liebe Grüße und vielen Dank im voraus,
Carolin

P.S.
Noch eine Bitte. Nachdem ich mich nun durch einige Threads gelesen habe, bitte zerreisst mich nicht gleich. Ich bin wie oben erwähnt noch blutige Anfängerin und ich gehe davon aus, dass ich dementsprechend auch viele Fehler gemacht habe.
Bisher habe ich mich nach folgenden Kriterien gerichtet:
1. XHTML muss valide sein
2. CSS muss valide sein
3. Die Darstellung muss in FF, Opera, Safari, K-Meleon, IE 7, IE 6, IE 5.5. gleich sein.
Sollte ich bei meinen Kriterien etwas wichtiges vergessen haben, nehme ich das gerne mit auf. Denn ich mache die Fehler ja nicht absichtlich, sondern weil ich es bisher nicht besser weiß.
Ich möchte es aber lernen und das möglichst umfassend und gut. Daher schon jetzt Danke für eure Lösungsvorschläge, aber auch für eure Kritik.

(Sollte ich ausversehen die falsche Kategorie ausgewählt haben, verschiebt mein Thread bitte.)

Geändert von Carolin (26.11.2007 um 14:22 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 26.11.2007, 14:21
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Carolin Beitrag anzeigen
teilweise auch von Usern Content erstellt wird, ist es notwendig, dass das Layout durch ein zu großes Bild, oder einen zu langen Link nicht durchbrochen wird.

Wenn ich dem body Tag die Eigenschaft display: table; gebe, funktioniert es im FF, Opera und Safari. Allerdings finde ich diese Lösung nicht unbedingt gut.
Es dürfte die einzig mögliche Lösung sein, wenn du tatsächlich die Ausdehnung willst.
Ich halte das für keine sooo gute Idee, da sich damit auch die Textzeilen verlängern und man beim Lesen dauernd herumscrollen muss.

Zitat:
Weiterhin wäre ich dankbar, wenn ihr bei Lösungsvorschlägen beachtet, dass die Seite bis IE 5.5 abwärtskompatibel sein sollte.
Da bleiben dann nur "echte" Tabellen.

Wie wäre es mit einem ganz anderen Ansatz? Deine Nutzer können Bilder hochladen, diese werden bei Bedarf automatisch auf eine von dir festgelegte Höchstbreite verkleinert.
Oder: die Bilder landen jeweils in einem eigenen Container, der bei Bedarf Scrollbalken einblendet.


Zitat:
(Sollte ich ausversehen die falsche Kategorie ausgewählt haben, verschiebt mein Thread bitte.)
Naja, CSS wäre vielleicht passender gewesen.
Wenn du einen Sitecheck willst, poste bitte im entsprechenden Forenbereich. Das sprengt hier den Rahmen.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 26.11.2007, 14:57
Benutzerbild von Carolin
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 26.11.2007
Beiträge: 232
Carolin wird schon bald berühmt werden
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
Es dürfte die einzig mögliche Lösung sein, wenn du tatsächlich die Ausdehnung willst.
Ich halte das für keine sooo gute Idee, da sich damit auch die Textzeilen verlängern und man beim Lesen dauernd herumscrollen muss.
Ich fand diesen Ansatz auch nicht so gut, wie oben schon erwähnt. Auch weil die Seiten von ca. 50% der User mit dem IE aufgerufen werden, welcher die Eigenschaft display: table; in dem Fall nicht so auslegt wie FF etc.

Zitat:
Zitat von fricca Beitrag anzeigen
Da bleiben dann nur "echte" Tabellen.

Wie wäre es mit einem ganz anderen Ansatz? Deine Nutzer können Bilder hochladen, diese werden bei Bedarf automatisch auf eine von dir festgelegte Höchstbreite verkleinert.
Oder: die Bilder landen jeweils in einem eigenen Container, der bei Bedarf Scrollbalken einblendet.
Die Verkleinerungsvariante für Bilder könnte ich mir vorstellen. Aber ist das ohne JS zu erreichen?
Weiterhin bleibt dann das Problem, dass oft auch zu lange Links angegeben werden. Diese Verhalten sich dann wie das Bild auf der Problemseite. Also laufen auch einfach über das Layout hinaus.
Hier habe ich gesehen, dass sämtliche Links, die man ohne Namen eingibt, einfach einen zugewiesen bekommen. Vielleicht wäre das Problem auf diese Art zu lösen.

Zitat:
Zitat von fricca Beitrag anzeigen
Naja, CSS wäre vielleicht passender gewesen.
Wenn du einen Sitecheck willst, poste bitte im entsprechenden Forenbereich. Das sprengt hier den Rahmen.
Tut mir leid. Ich habe das leider zu spät gemerkt.
Einen Sitecheck möchte ich im Moment besser noch nicht. Dafür gibt es noch zu viele Dinge, die mir selbst noch nicht gefallen. Wenn ich diese jedoch geändert habe, komme ich wahrscheinlich darauf zurück.

Liebe Grüße
Carolin
Mit Zitat antworten
  #4 (permalink)  
Alt 26.11.2007, 15:06
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Carolin Beitrag anzeigen
Ich fand diesen Ansatz auch nicht so gut, wie oben schon erwähnt. Auch weil die Seiten von ca. 50% der User mit dem IE aufgerufen werden, welcher die Eigenschaft display: table; in dem Fall nicht so auslegt wie FF etc.
Kein IE reagiert auf überhaupt auf display:table. Deshalb schrieb ich oben von echten Tabellen.


Zitat:
Die Verkleinerungsvariante für Bilder könnte ich mir vorstellen. Aber ist das ohne JS zu erreichen?
Sowas sollte serverseitig geschehen.

Zitat:
Weiterhin bleibt dann das Problem, dass oft auch zu lange Links angegeben werden.
Auch das lässt sich serverseitig lösen. Verkürzung des angezeigten Linktexts ab einer gewissen Zeichenlänge.

Diese Seiten werden doch vermutlich durch ein CMS generiert. Bietet das keine entsprechenden Möglichkeiten an?
Ansonsten: es gibt hier auch einen Forenbereich Serveradministration und serverseitige Scripte - XHTMLforum
Mit Zitat antworten
  #5 (permalink)  
Alt 26.11.2007, 15:06
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Bilder kannst Du per PHP verkleinern, oder die Alternative wählen, den User in ein mit overflow: auto; versehenes div posten zu lassen (so daß bei Überbreite ein Scrollbalken entsteht).

Edit: zuuu langsam
Mit Zitat antworten
  #6 (permalink)  
Alt 26.11.2007, 15:13
Benutzerbild von Carolin
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 26.11.2007
Beiträge: 232
Carolin wird schon bald berühmt werden
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
Kein IE reagiert auf überhaupt auf display:table. Deshalb schrieb ich oben von echten Tabellen.
Ok, danke für die Information. Das wusste ich bisher nicht. Echte Tabellen schließe ich aber aus, da ich eben kein tabellenorientiertes Layout möchte.


Zitat:
Zitat von fricca Beitrag anzeigen
Sowas sollte serverseitig geschehen.

Auch das lässt sich serverseitig lösen. Verkürzung des angezeigten Linktexts ab einer gewissen Zeichenlänge.

Diese Seiten werden doch vermutlich durch ein CMS generiert. Bietet das keine entsprechenden Möglichkeiten an?
Ansonsten: es gibt hier auch einen Forenbereich Serveradministration und serverseitige Scripte - XHTMLforum
Vom Serverseitigen her weiß ich momentan leider noch so gut wie gar nichts. Da die Umsetzung in dem Bereich von jemand anderem gemacht wird.
Trotzdem vielen Dank für die Hinweise.

LG Carolin
Mit Zitat antworten
  #7 (permalink)  
Alt 26.11.2007, 15:23
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Carolin Beitrag anzeigen
Echte Tabellen schließe ich aber aus, da ich eben kein tabellenorientiertes Layout möchte.
Das ist eine gute Einstellung. Daß der IE (inkl. 7) display: table; und table-cell etc. nicht unterstützt, ist so ziemlich die schwerwiegendste Einschränkung, die er zu "bieten" hat. Vieles wäre einfacher, wenn der IE diese display-Werte unterstützen würde

Zitat:
Zitat von Carolin Beitrag anzeigen
Vom Serverseitigen her weiß ich momentan leider noch so gut wie gar nichts. Da die Umsetzung in dem Bereich von jemand anderem gemacht wird.
Alternativ wie gesagt eine reine CSS-Lösung per overflow.
Mit Zitat antworten
  #8 (permalink)  
Alt 26.11.2007, 15:40
Benutzerbild von Carolin
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 26.11.2007
Beiträge: 232
Carolin wird schon bald berühmt werden
Standard

Zitat:
Zitat von heiko_rs Beitrag anzeigen
Das ist eine gute Einstellung. Daß der IE (inkl. 7) display: table; und table-cell etc. nicht unterstützt, ist so ziemlich die schwerwiegendste Einschränkung, die er zu "bieten" hat. Vieles wäre einfacher, wenn der IE diese display-Werte unterstützen würde
Schön, dass ich immerhin da das richtig mache.


Zitat:
Zitat von heiko_rs Beitrag anzeigen
Alternativ wie gesagt eine reine CSS-Lösung per overflow.
Ich werd mir ne reine CSS Lösung suchen müssen. Habe grade die Absage einer serverseitigen Lösung bekommen, da diese nicht in allen Applikationen problemlos zu integrieren wäre.

Ein Scrollbalken mitten auf einer Seite finde ich nun aber auch weniger prickelnd. Nunja, mal schaun. Vielleicht finde ich ne Möglichkeit. Auch wenn eure Aussagen diesbezüglich eher nicht so hoffnungsvoll waren.

LG Carolin
Mit Zitat antworten
  #9 (permalink)  
Alt 26.11.2007, 18:39
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Carolin Beitrag anzeigen
Ein Scrollbalken mitten auf einer Seite finde ich nun aber auch weniger prickelnd.
Stimmt, aber es wäre ja auch nur im Notfall (d.h. extrem breiter Inhalt bei gleichzeitig schmalem Viewport), und viele Möglichkeiten gibt's ja nicht, wenn der Inhalt breiter ist als sein Elternelement: Überstehen lassen, abschneiden oder eben einen Scrollbalken erscheinen lassen.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 27.11.2007, 15:34
Benutzerbild von Carolin
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 26.11.2007
Beiträge: 232
Carolin wird schon bald berühmt werden
Standard

Alles nicht so einfach... für den FF und K-Meleon hab ich eine Lösung gefunden. Beide verbreitern die Seite bei zu großem Inhalt nun auf eine neue Mindestbreite.

Ist der Inhalt nicht überbreit, richten sie sich nach der zuvor angegeben min-width.

Bin noch am basteln, aber bin eigentlich optimistisch, dass es für die restlichen Browser auch noch nen Weg geben wird.

LG Carolin

Erst mal auf Eis gelegt, da ich feststellen musste, dass ich viel grundlegendere Probleme habe...

Geändert von Carolin (27.11.2007 um 17:27 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

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
CSS-Layout der Browsergröße anpassen Jen CSS 3 14.11.2008 09:39
Problem mit position:relative; McCoRmIcK CSS 0 08.04.2007 17:23
dreispaltiges layout, footer soll immer mitwandern sirrpa CSS 14 24.11.2005 19:57
div box bekomme ich nett zentriert??? Hard@Bowl CSS 1 23.05.2005 12:22
height: 100% beim IE [M.o.C]Co CSS 3 12.05.2005 13:58


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:08 Uhr.