Supportnet Computer
Planet of Tech

Supportnet / Forum / Webseiten/HTML

Allgemeine Fragen zu position:absolute





Frage

Moin, verzweifele im Moment an einem CSS-Layout, [url]http://www.russland-online.org/index2.php[/url], hatte einfach gehofft ihr hättet ein paar elementare Tipps für mich bezüglich Browserkompatiblität und verschiedenen Auflösungen, ehrlich gesagt sieht es nur in Opera auf 1024x768 überhaupt halbwegs vernünftig aus. ;) Wobei hier aber auch noch ein Problem besteht. height:100% wird leider nur als Höhe des Browserfenster interpretiert und nicht als Höhe des Dokumentes u.a. zu sehen bei den Hintergrundgrafiken auf der linken und rechten Seite. Bezüglich der Probleme bei verschiedenen Browsern hab ich leider gar keine Idee (bin ja noch halbwegs css-Anfänger), wegen der Auflösungen hatte ich vermutet, dass es entweder mit den Bildern oder mit den noch teilweise vorhandenen Tabellen zusammenhängt. Hoffe jemand gibt sich mal die Mühe sich den Code anzuschauen. ;) Grüße, S1lv3R

Antwort 1 von rfb

Wozu brauchst du die position:absolute-Keule?

Tipps:
  • trenne erst einmal Inhalt (HTML) und Layout (CSS) und schmeiss dabei die Layouttabellen raus. So ist jetzt der Code nicht lesbar und Ratschläge daraufhin wären absurd. Tät' mich wundern, wenn du da selber noch durchsteigst.
  • entferne den Landgericht-Hamburg-Unsinn aus dem Impressum - dieses legendäre Urteil hat was ganz anderes besagt als du meinst.
  • mach deinen Code valide, damit die Browser überhaupt kapieren können was du willst und nicht raten müssen.

  • Antwort 2 von S1lv3R

    Ok, erstmal danke für die Hinweise und die schnelle Antwort.
    Ich will aber erstmal ein paar Sachen nachfragen bevor ich nochmal total umbaue.
    Zitat:
    Wozu brauchst du die position:absolute-Keule?

    Wie soll es sonst gehen? Mit float? Ich fand die position:absolute Lösung mit margin ganz praktisch - und vorallem simpel. Was für Nachteile hat denn die "position:absolute-Keule"?
    [quote... ]und schmeiss dabei die Layouttabellen raus.
    Layouttabellen? Also ich dachte immer es wäre legitim Tabellen z.B. auf dieser Seite im "Letzte Beiträge aus dem Forum:"-Block zu benutzen, ich wüsste gar nicht wie ich solche Inhalte sonst in dieser Form strukturieren könnte.

    Danke für den Hinweis mit dem Impressum, man fällt in dieser Hinsicht als Laie ja doch auf einigen Schwachsinn herein. ;)

    Antwort 3 von rfb

    Mit position:absolute nimmst du das Element aus dem Fluss, alle anderen ignorieren es dann mehr oder weniger - das ist die Keule. Du musst anschließend für (fast) jedes Element explizit angeben wo es sich befinden soll.
    float dagegen überlässt sowas dem Browser.

    Tabellen für tabellarische Daten - auf die Forumsbeiträge mag das zutreffen, aber das ist doch nicht die einzige Tabelle auf der Seite, es gibt mindestens 10!

    Laie bin ich auch.

    Antwort 4 von S1lv3R

    N'abend nochmal. ;)
    Habe noch ein bisschen dran gearbeitet.
    Bei den Boxen rechts komme ich allerdings mit float irgendwie nicht weiter.
    Also vereinfacht weiss ich einfach nicht wie man sowas hier mit float hinkriegt.

    Antwort 5 von rfb

    Gegenfrage: warum willst du sowas "hinkriegen"?

    Erschließt sich solch eine Anordnung aus dem Content? Das dürfte in den wenigsten Fällen so sein, außer bei irgendwelchen überdesignerten Künstlerseiten (die dann in der Hälfte aller Browser Sch... aussehen), da dabei auch die Anordnung Informationen tragen soll.

    Und um die Frage trotzdem zu beantworten: wenn es sich nur um die Anordnung der farbigen Kästen geht ist hier position wirklich notwendig - mit allen Problemen die position mit sich bringt.

    Antwort 6 von S1lv3R

    Also prinzipiell geht es dabei ja nur um die Login und Suche-Box auf der Startseite.
    Wegen denen muss ich auch nochmal nachhaken:
    Kann man mit float 2 divs übereinander legen? Mit position ist es ja kein problem überlappende Ebenen zu erstellen. Also konkret geht es um die Login/Suche-Box die über dem Hintergrund liegen, ist das mit float möglich?

    Und mit dem Hintergrund bin ich irgendwie immer noch nicht weiter. Die einzigste Lösung die ich gefunden habe ist wieder eine potentielle "Keule": position:fixed.
    Naja wenn ich position:fixed zusammen mit z-index nehme hätte ich sogar beide Probleme gelöst - allerdings gibt es dort wieder Probleme mit dem Internet Explorer.
    Hättest du denn sonst noch eine Idee den Hintergrund über 100% des Dokumentes zu kriegen?

    Antwort 7 von rfb

    CSS-Eigenschaft
    background
    ?

    Antwort 8 von S1lv3R

    .background_r {
    		float:left;
    		width:15px;
    		height:100%;
    		background: url(templates/RedSilver/images/r.gif) repeat-y;
    }


    So sieht es im Moment aus und so funktioniert es nicht. Ich bin mir nicht sicher ob du das Problem siehst: Der Hintergrund ist über 100% eines Bildschirmfensters und nicht über 100% des Dokumentes, wenn man also runter scrollt hören die roten Linien auf einmal auf.

    Antwort 9 von rfb

    body {background: url(templates/RedSilver/images/r.gif) repeat-y;}

    sollte abhelfen

    Antwort 10 von S1lv3R

    Ist im Prinzip schonmal eine gute Idee - hilft aber leider nicht in diesem konkreten Fall. Der Background soll ja nur für die drei 15 pixel breiten divs gelten. Wenn ich es für den Body definiere habe ich ja nur links eine der Linien, die aber immerhin schonmal über 100% des Dokumentes geht. :)
    Danke für deine Bemühungen trotzdem.
    Habe noch ein bisschen gegoogelt und es scheint leider für dieses Problem wirklich keine Lösung zu geben, allerhöchstens wieder Table zu benutzen.
    Grüße,
    S1lv3R

    Antwort 11 von rfb

    So langsam durchschaue ich deine mangelhafte Problembeschreibung. Warum sagst du nicht gleich, dass es sich nicht um das Dokument sondern um irgendwelche DIVs darin dreht.
    Da entsteht allerdings dieses Viewport-Problem bei width:100%, denn 100% sind hierbei die Fensterhöhe.

    Mal abgesehen davon, dass die Navi in meinem Browser eher besch..en aussieht (die margin- und/oder padding-Werte sind zu klein) solltest du mal darüber nachdenken, warum du für einen Rahmen überhaupt ein HG-Bild nutzt.

    Ergänzung: CSS2 hat Grenzen, weiterhin werden die CSS-Möglichkeiten durch den IE eingeschränkt, der nicht allzugut CSS2 versteht. Aber dies ist noch lange kein Grund das HTML zu vergewaltigen nur um eines Layout-Effekts willen.

    Antwort 12 von S1lv3R

    Zitat:
    So langsam durchschaue ich deine mangelhafte Problembeschreibung.

    Ist leider immer nicht ganz so einfach eine konkrete Problembeschreibung abzugeben, wenn man nicht ganz so in der Materie drinhängt und nur die Symptome sieht.

    Zitat:
    Mal abgesehen davon, dass die Navi in meinem Browser eher besch..en aussieht (die margin- und/oder padding-Werte sind zu klein) solltest du mal darüber nachdenken, warum du für einen Rahmen überhaupt ein HG-Bild nutzt.

    Wäre nett wenn du dazu nochmal mehr schreiben würdest, ich benutze Opera bzw IE7 auf 1024x768 und kann leider gar nicht nachvollziehen was du meinst.

    Zitat:
    Ergänzung: CSS2 hat Grenzen, weiterhin werden die CSS-Möglichkeiten durch den IE eingeschränkt, der nicht allzugut CSS2 versteht. Aber dies ist noch lange kein Grund das HTML zu vergewaltigen nur um eines Layout-Effekts willen.

    Eigentlich ist das ganze nur der Versuch der Umsetzung von einem reinem Table-Layout ... - im Prinzip scheinen viele Sachen die bei dem Table-Layout ohne Probleme gingen mit CSS nun aber gar nicht oder nur mit unsauberen Tricks möglich.

    Antwort 13 von MoRe99

    Zitat:
    Eigentlich ist das ganze nur der Versuch der Umsetzung von einem reinem Table-Layout ... - im Prinzip scheinen viele Sachen die bei dem Table-Layout ohne Probleme gingen mit CSS nun aber gar nicht oder nur mit unsauberen Tricks möglich.

    Da sind noch unheimlich viele Tabellen drin, die du ausmisten könntest. Für eine Navigation z. B. brauchst du keine Tabelle. Das kannst du mit einer Liste viel besser und eleganter lösen. Eines von unzähligen Beispielen im Netz findest du bei fractatulum.net.
    Außerdem bist du inkonsequent; genauer: vieles ist doppelt gemoppelt bei deiner Navigation. Zum einen verwendest du dort eine Tabelle, packst aber in jede Tabellenzelle ein <div> hinein. Wozu?

    Antwort 14 von S1lv3R

    Das mit List ist wohl ne gute Idee, werd ich heut Abend auf jedenfall nochmal versuchen, danke auch für den Link. Wo die divs herkommen weiss ich auch nicht so genau. ;)

    Antwort 15 von rfb

    noch ein Tipp zum CSS:

    ich hab gerade bemerkt, dass du die Browser in den Quirksmode schickst mittels unvollständiger DOCTYPE.
    Ändere das einfach mal (vollständige DOCTYPE, valider Code) und evtl. löst das schon einen Teil deiner Probleme.

    Ich möchte kostenlos eine Frage an die Mitglieder stellen:


    Ähnliche Themen:


    Suche in allen vorhandenen Beiträgen: