1. Dashboard
  2. Artikel
  3. Mitglieder
    1. Letzte Aktivitäten
    2. Benutzer online
    3. Team
    4. Mitgliedersuche
  4. Forum
    1. Unerledigte Themen
  • Anmelden
  • Registrieren
  • Suche
Dieses Thema
  1. HTML - Webmaster Forum
  2. HTML / Webmaster Forum
  3. HTML & CSS Forum

css Teil x

  • NyctalusNoctula
  • 11. April 2008 um 20:23
  • NyctalusNoctula
    König(in)
    Beiträge
    1.316
    • 11. April 2008 um 20:23
    • #1

    So, ich hab schon wieder ein css Problem.
    Und zwar möchte ich ganz einfach 3 divs nebeneinander, die in einem übergeordneten div sind.

    Das Problem hierbei:
    - ich möchte keine feste Breite angeben, deshalb scheidet position: absolute aus
    - wenn ich floate geht der Übergeordnete div der eine Art Rand um die anderen divs bilden soll nicht um diese herum, sondern wird gar nicht angezeigt, da er ja auch keinen Inhalt hat (außer den 3 divs halt)
    - mit position: relative sind die divs untereinander
    - mit span werden die ersten 2 divs zwar bei mir nebeneinander angezeigt, allerdings rutscht der dritte span aus mir nicht erfindlichen Gründen unter die anderen 2.

    Irgendwie bekomme ich immer wieder das gefühl, dass die divs nicht richtig durchdacht sind. Mit ner Tabelle hätte ich überhaupt keine Probleme.

    EDIT: Noch eine weitere Verschärfung: der mittlere div soll so hoch sein wie der höhere der beiden anderen divs.

    StudiAnzeigen - Kleinanzeigen für Studenten

  • nesti
    Schüler
    Beiträge
    58
    • 11. April 2008 um 20:38
    • #2

    hi,

    sitzt der dritte div den tiefer als die 2 anderen?
    post mal dein script und das resultat bitte

  • NyctalusNoctula
    König(in)
    Beiträge
    1.316
    • 11. April 2008 um 20:39
    • #3

    Ok, bevor sich hier jemand die Mühe macht etwas zu schreiben. Problem 1 ist gelöst.

    Einfach alle 3 divs float: left und nach den 3 divs noch <br clear="both">, dann schließt das große div die 3 anderen ein.

    bleibt nur noch das Problem der dynamisch sich anpassenden Höhe.

    StudiAnzeigen - Kleinanzeigen für Studenten

  • synaptic
    Forum Guru
    Reaktionen
    11
    Beiträge
    10.917
    • 11. April 2008 um 20:40
    • #4

    http://www.ohne-css.gehts-gar.net/0007.php#

    überhaupt ist sejumas fundgrube die ultimative css-page!!!

  • NyctalusNoctula
    König(in)
    Beiträge
    1.316
    • 11. April 2008 um 21:09
    • #5

    Ich weiß ja wie man ein normales dreispaltiges Layout macht. Das ist nicht das Problem.

    Das Problem leigt darin, dass der mittlere div (grauer Trennbalken) so hoch sein soll wie der höhere der beiden anderen divs.

    hier der Link zur "Page"
    http://mitglied.lycos.de/sirtobiiv/braun/layout_strich.html

    Dieses Logo hier hat mich übrigens dazu inspiriert. Ein Frabverlauf von oben nach unten wäre also auch nicht schlecht.
    [Blockierte Grafik: http://www.osp-rhein-neckar.de/cms/images/image33232.jpg]

    StudiAnzeigen - Kleinanzeigen für Studenten

  • sejuma
    Kaiser(in)
    Reaktionen
    5
    Beiträge
    2.720
    • 11. April 2008 um 21:21
    • #6

    Wenn du prozentuale Breiten nimmst, fällt mir da keine Lösung ein.
    Außer du vergibst beiden Divs einen identischen height-Wert. Hat dann aber Unflexibilität zur Folge.

    Bei festen Breiten kannst du nach dieser Anleitung verfahren: http://www.ohne-css.gehts-gar.net/0005.php

    Ursprünglich war ich ein Befürworter von flexiblem Layout. Seit ich jedoch einen 1440er Bildschirm habe, neige ich dazu, den Div's feste Breiten zu geben. Das Layout ist damit besser kalkulierbar und du kannst dir ein Bild machen, wie die Seite überall dargestellt wird. Unabhängig von der Auflösung. Da kann es seltsame Überraschungen geben, z.B. wenn bilder eingebunden sind.

    [Blockierte Grafik: http://www.ohne-css.gehts-gar.net/img/banner/banner350x20.png]
    sejuma's CSS-Einsteigerkurs

  • synaptic
    Forum Guru
    Reaktionen
    11
    Beiträge
    10.917
    • 11. April 2008 um 21:38
    • #7

    mit javascript willste da net arbeiten oder?

  • NyctalusNoctula
    König(in)
    Beiträge
    1.316
    • 11. April 2008 um 21:47
    • #8

    javascript muss nicht unbedingt sein

    hm die Faux Colums sind auch nicht unbedingt das, was ich suche. ne Hintergrundgrafik muss ja auch nicht unbedingt sein.

    Scheint wirklich schwieriger zu sein als ich dachte. Ich glaube ich werde jetzt einfach dem content nen Rahmen links verpassen und darauf achten, dass der Content immer die längere Spalte ist. Dann hab ich halt meine einrückung von oben des Trennstriches nicht mehr. :cry:

    StudiAnzeigen - Kleinanzeigen für Studenten

  • sejuma
    Kaiser(in)
    Reaktionen
    5
    Beiträge
    2.720
    • 11. April 2008 um 21:58
    • #9

    Du musst ja die Hintergrundgrafik nur türken. Kannst also durchaus ne weiße Hintergungfarbe mit links und rechts einem Pixel Rot verwenden.

    [Blockierte Grafik: http://www.ohne-css.gehts-gar.net/img/banner/banner350x20.png]
    sejuma's CSS-Einsteigerkurs

  • koslowski
    Meister(in)
    Beiträge
    267
    • 12. April 2008 um 09:41
    • #10

    Moin,

    Zitat von NyctalusNoctula

    javascript muss nicht unbedingt sein

    hm die Faux Colums sind auch nicht unbedingt das, was ich suche. ne Hintergrundgrafik muss ja auch nicht unbedingt sein.

    Scheint wirklich schwieriger zu sein als ich dachte. Ich glaube ich werde jetzt einfach dem content nen Rahmen links verpassen und darauf achten, dass der Content immer die längere Spalte ist. Dann hab ich halt meine einrückung von oben des Trennstriches nicht mehr. :cry:

    wenn eine kürzere Spalte genauso lang wie die längste sein soll ist "Faux Columns" die übliche verwendete Technik.

    Deine Aussage das sei nicht unbedingt das was suchst läßt entweder auf eine gewisse Beratungsresistenz schließen, oder du verstehst die "Faux Column-Technik" nicht richtig anzuwenden.

    Zitat

    Ich weiß ja wie man ein normales dreispaltiges Layout macht. Das ist nicht das Problem.

    Sorry aber weißt du offensichtlich nicht, oder warum hast du sonst so viele Fehler in deinem Dokument: W3C-Validatorergebnis


    koslowski

    :arrow: Mein Blog

  • NyctalusNoctula
    König(in)
    Beiträge
    1.316
    • 12. April 2008 um 15:11
    • #11
    Zitat von koslowski

    Moin,


    wenn eine kürzere Spalte genauso lang wie die längste sein soll ist "Faux Columns" die übliche verwendete Technik.

    Deine Aussage das sei nicht unbedingt das was suchst läßt entweder auf eine gewisse Beratungsresistenz schließen, oder du verstehst die "Faux Column-Technik" nicht richtig anzuwenden.

    Mal ganz abgesehen davon, dass ich deinen Post recht unfreundlich finde, habe ich das System schon verstanden, nur leider lässt sich das Faux Coulums System nicht auf Spalten mit variabler Breite anwenden.
    Ich bin außerdem kein Freund von Hintergrundgrafiken, da sie immer eine gewisse Größe (ich mein hier jetzt Dateigröße) haben. Ist inzwischen vermutlich egal, die Ablehnung kommt wohl noch aus meiner Modemzeit. :roll:

    Zitat

    Sorry aber weißt du offensichtlich nicht, oder warum hast du sonst so viele Fehler in deinem Dokument: W3C-Validatorergebnis
    koslowski

    Wenn du genau geschaut hättest, wäre dir bestimmt aufgefallen, dass diese Fehler alle in den google Adds bzw. in dem Javascript von Lycos vorkommen, das eigentlich ein Werbelayer einblenden soll, dies aber aufgrund des Fehlerhaften Codes nicht tut. Sprich lycos hat keine Ahnung davon von css und javascript. Über die Unfähigkeit von Lycos habe ich mich auch schon des öfteren aufgeregt, da mir der Fehlerhafte Code auch schon Layouts zerschossen hat.

    StudiAnzeigen - Kleinanzeigen für Studenten

  • The User
    Forum Guru
    Beiträge
    4.044
    • 12. April 2008 um 15:37
    • #12

    Kannst du dem Balken nicht einfach die höhe vom übergeordneten div geben und dann für den übergeordneten pading setzen?

    Freiheit bedeutet mehr.

    "Mir ist die gefährliche Freiheit lieber als eine ruhige Knechtschaft."
    (Jean Jacques Rousseau)
    Mein Blog zum Programmieren, GNU/Linux etc.
    Free Chelsea Manning!
    Stolzer Nutzer von KDE, openSUSE und Qt.

  • koslowski
    Meister(in)
    Beiträge
    267
    • 12. April 2008 um 16:29
    • #13

    Hi,

    Zitat


    Mal ganz abgesehen davon, dass ich deinen Post recht unfreundlich finde, habe ich das System schon verstanden, nur leider lässt sich das Faux Coulums System nicht auf Spalten mit variabler Breite anwenden.
    Ich bin außerdem kein Freund von Hintergrundgrafiken, da sie immer eine gewisse Größe (ich mein hier jetzt Dateigröße) haben. Ist inzwischen vermutlich egal, die Ablehnung kommt wohl noch aus meiner Modemzeit. Rolling Eyes

    sorry wenn ich so unfreundlich rüberkomme. Bin manchmal etwas "krachert".
    Ist aber nicht böse gemeint. :)

    Eine etwas unschöne Lösung hätte ich anzubieten:

    Gib dem kürzeren Container soviel padding-bottom das es paßt.
    Das müßtest du dann aber evtl. für jede Unterseite anpassen je nachdem wieviel Text drin ist.

    clear:all gibt es übrigens nicht, nur left, right, both oder none.

    Bei prozentualen Breitenangaben für die Container hast du auch den Nachteil das dein Layout je nachdem in breiten oder normalen Viewports komisch ausschauen kann.

    koslowski

    :arrow: Mein Blog

  • sejuma
    Kaiser(in)
    Reaktionen
    5
    Beiträge
    2.720
    • 12. April 2008 um 17:38
    • #14
    Zitat

    Gib dem kürzeren Container soviel padding-bottom das es paßt.

    Das passt dann aber nur an dem Bildschirm wo die Seite entwickelt wird (und vergleichbaren anderen). Bei unterschiedlichen Auflösungen sind die prozentualen Div's unterschiedlich breit und damit unterschiedlich hoch.
    Außer der #wrapper hätte eine feste Breite. Aber dann ist auch der Prozentwert immer konstant.

    [Blockierte Grafik: http://www.ohne-css.gehts-gar.net/img/banner/banner350x20.png]
    sejuma's CSS-Einsteigerkurs

  • NyctalusNoctula
    König(in)
    Beiträge
    1.316
    • 12. April 2008 um 17:53
    • #15

    Ich seh schon, dass ich um ne feste Breite nicht drumrumkomm.
    Werde ich halt ne fest Breite machen. So schlimm ist das auch nicht.

    koslowski: keine Problem, wolltest ha nur helfen

    Danke übrigens für den Hinweis auf clear:all
    ich habs in both geändert, lustigerweise hab ich damit trotzdem den Effekt erreicht, den ich erreichen wollte. ;)

    Noch ne Frage: habe es noch mit heigth: 100% versucht, die Prozentuale Höhenangabe scheint sich aber auf die Fenstergröße zu beziehen und nicht auf das übergeordnete div. warum das denn?
    Ich hätte ja gerne noch nen Farbverlauf im Trennbalken. Wie könnte man das realisieren außer mit ner großen Hintergrundgrafik, die ich je nach Inhalt etwas strecke oder stauche. Kann man Hintergrundbilder dynamisch der sie umgebenden Divgröße anpassen?

    StudiAnzeigen - Kleinanzeigen für Studenten

  • koslowski
    Meister(in)
    Beiträge
    267
    • 12. April 2008 um 18:20
    • #16

    Hi,

    Zitat von sejuma

    Das passt dann aber nur an dem Bildschirm wo die Seite entwickelt wird (und vergleichbaren anderen). Bei unterschiedlichen Auflösungen sind die prozentualen Div's unterschiedlich breit und damit unterschiedlich hoch.
    Außer der #wrapper hätte eine feste Breite. Aber dann ist auch der Prozentwert immer konstant.

    ähem...., könnte es sein das wir etwas aneinander vorbeireden?

    height wird selbstverständlich nicht angegeben, weil die sich ja aus der Menge des Textes der Box und angegebenem vertikalen padding definiert.

    Wenn eine Box width in Prozent hat kann man doch padding-bottom in Pixel oder em angeben (ist ja vertikal und nicht horizonzal!).

    Das hätte ich vielleicht in meinem Posting näher erläutern sollen.
    So kam es wohl mißverständlich rüber.:wink:

    Imho ist das ein unschöner aber gangbarer Weg die Container gleichlang zu machen.

    NyctalusNoctula Hast du in allen wichtigen Browsern geprüft ob richtig gecleart
    wird?
    Der IE schließt die Container nämlich normal ohne clear fälschlicherweise mit
    ein.

    koslowski

    :arrow: Mein Blog

  • sejuma
    Kaiser(in)
    Reaktionen
    5
    Beiträge
    2.720
    • 12. April 2008 um 18:40
    • #17

    Klar kannst du das machen.
    Aber das Ergebnis ist bei unterschiedlichen Auflösungen nicht einheitlich:

    Nimm nen div mit 50% Breite.
    Bei ner 800er Auflösung ist er 400px breit.
    Bei ner 1440er Auflösung ist er 720px breit.

    Im zweiten Fall passt viel mehr Text rein, da der div breiter ist. Also ist die Höhe des Gesamttextes niedriger als im ersten Div.
    Optimierst du nun für den ersten Fall mit Padding, wird der Paddingwert bezogen auf den zweiten Fall zu niedrig sein.

    Habe die x jetzt nicht abgezählt, aber nur mal zur Verdeutlichung was ich damit meine:

    xxxxxxx xxxxxxxxxxxxxxxxxxxxxxx
    xxxxxxx xxxxxxxxxxxxxxxxxxxxxxx
    xxxxxxx
    xxxxxxx
    xxxxxxx

    [Blockierte Grafik: http://www.ohne-css.gehts-gar.net/img/banner/banner350x20.png]
    sejuma's CSS-Einsteigerkurs

  • koslowski
    Meister(in)
    Beiträge
    267
    • 12. April 2008 um 18:55
    • #18

    Hi,

    Zitat von sejuma

    Klar kannst du das machen.
    Aber das Ergebnis ist bei unterschiedlichen Auflösungen nicht einheitlich:

    Nimm nen div mit 50% Breite.
    Bei ner 800er Auflösung ist er 400px breit.
    Bei ner 1440er Auflösung ist er 720px breit.

    Im zweiten Fall passt viel mehr Text rein, da der div breiter ist. Also ist die Höhe des Gesamttextes niedriger als im ersten Div.
    Optimierst du nun für den ersten Fall mit Padding, wird der Paddingwert bezogen auf den zweiten Fall zu niedrig sein.

    Habe die x jetzt nicht abgezählt, aber nur mal zur Verdeutlichung was ich damit meine:

    xxxxxxx xxxxxxxxxxxxxxxxxxxxxxx
    xxxxxxx xxxxxxxxxxxxxxxxxxxxxxx
    xxxxxxx
    xxxxxxx
    xxxxxxx

    Alles anzeigen

    oh mann.:oops:

    ja klar, du hast natürlich recht (Wer richtig nachdenken kann, ist immer im
    Vorteil :lol: )

    koslowski

    :arrow: Mein Blog

Tags

  • www
  • bilder
  • http
  • links
  • text
  • layout
  • problem
  • php
  • anleitung
  • bot
  • bottom
  • div
  • bildschirm
  • lösung
  • script
  • height
  • css
  • wert
  • container
  • padding
  • flexibilität
  • resultat
  • wrapper
  1. Datenschutzerklärung
  2. Impressum
Community-Software: WoltLab Suite™
  • Alles
  • Dieses Thema
  • Dieses Forum
  • Artikel
  • Seiten
  • Forum
  • Erweiterte Suche
Zitat speichern