No0oB.com's Topic!! :)

    Hi Leute.
    Die Homepage ist eventuell noch vom Webdesigner Event bekannt.
    Da <div> Layouts immer populärer werden, habe ich beschlossen meine Seite in <div>-Container zu gestalten. Ja, ich, der immer die Tabellenlayouts verteidigt hat, bin auf eine solche Idee gekommen.
    Also, habe ich angefangen, das ganze zu realisieren, allerdings komme ich recht schnell an meine CSS Grenzen, was mir ein wenig peinlich ist....

    Ich schaffe es einfach nicht, dass sich die einzelnen <div> aneinander von der Höhe angleichen.

    Hier sind ein paar Informationen und Wünsche von mir, bei denen ich hoffe, dass ihr mir helfen könnt

      Die Höhe soll 100% des Browsers nehmen. Bis jetzt hab ichs mit height:100% gemacht (bei dem Hauptinhaltsfenster), allerdings wird das dann zu lang. Daher hab ichs mit overflow:hidden abgeschnitten

      Die rechte kleiner Spalte soll am besten so lange sein, wie das Hauptinhaltsfenster, allerdings ist auch dieser so wie das Hauptfenster begrenzt (also height:100%, overflow:hidden)Dadurch wird aber auch längerer Inhalt abgeschnitten

      Der Schatten links und rechts soll ebenfalls so lang wie die Seite sein

      Die Seite soll zentriert sein!

    Ggf. könnt ihr auch die Seite bewerten, soll aber nicht so dermaßsen im Mittelpunkt stehen.

    Danke.

    PS: http://www.no0ob.com
    PPS: Falls jemand die CSS-Datei durchgucken will: http://www.no0ob.com/style.css

    @ DarkSyranus: Du meinst ich soll den kompletten Webspell Ordner reinmachen?
    Ausserdem, sowas im Forum schreiben :P

    Gibt es noch vielleicht Hilfestellungen zu meinen Problemen?
    Siehe Verlängerung der div Boxen? Das ist mir das wichtigste

    Also mal der Reihe nach, wenngleich sich jetzt sicher nicht alle Probleme lösen lassen.

    Seite zentrieren:
    http://css.fractatulum.net/sample/layout4format.htm
    http://www.css4you.de/wslayout1/ex0003.html

    100% Höhe:
    Warum eigentlich, die Container wachsen doch automatisch mit dem Text mit. Und wenn man mehr Inhalt als Höhe hat, ist es doch eigentlich egal, ob man innerhalb des Containers oder die ganze Seite scrollt. Overflow hidden schneidet den Inhalt ab, so dass er verloren geht.
    http://css.fractatulum.net/sample/layout7format.htm

    Rechte Spalte so lang wie der Hauptcontainer:
    Entweder ebenfalls 100 % oder für beide feste Pixelwerte (würd ich eher nicht machen).
    Besser: Die Container sollen sich in der Höhe ihrem Inhalt anpassen.
    Mit faux columns kann man erreichen, dass sich die Höhen zweier Container angleichen. Aber das musst du dir für den Anfang jetzt nicht auch noch zumuten.

    edit:
    Und noch eine Bitte: Schmeiß deine Tabellen raus, das kann man mit einer Klassendefinition viel eleganter lösen.

    HI,

    das was Sejuma erklärt ist genau das was ich auch immer vermittle, wenn man 2 DIVs in der selben Höhe haben will. Allerdings finde ich die Umsetzung relativ simpel :)

    Du schachtelst einfach deine beiden DIVs in ein weiteres DIV
    also:

    <div>
    <div></div>
    <div></div>
    </div>

    und gibst dem umschließenden DIV als Hintergrund mit repeat-y ein Bild das so aussieht wie deine beiden DIVs.

    Ich hoffe das war einigermaßen verständlich

    MfG
    LizZard

    Sometimes you have a programming problem and it seems like the best solution is to use regular expressions; now you have two problems.

    Ja, auf so eine banala Idee komme ich halt nicht.
    Ich stell mich mit <div> dümmer an als ich egtl. bin :/
    Allerdings erweist sich das als schwierig, wegen den Schatten rechts und links....

    Und zu den Tabellen...
    Ich habs einfach nicht geschafft, die News anders darzustellen.
    Mit <div> hab ichs nicht geschafft, dass der text genau neben dem Bild angezeigt wird.
    Wenn vll. jemand Zeit hat, bzw. wenn jemand so nett wäre, kann er mir ja dabei helfen :)

    Bild links, Text rechts daneben:

    CSS (Abstände ggf. anpassen, ggf. noch Rahmen und andere Infos einfügen):

    Code
    .left
{float:left;
margin-right:12px;
margin-top:10px;
}


    HTML

    Code
    [img]bild.jpg[/img]
Dieser Text müsste rechts neben dem Bild stehen.

    Für Schatten mittels border-style eines containers oder einer Klasse gibts diese Möglichkeiten:
    http://www.css4you.de/border-style.html