Ernsthafte Probleme mit Design ohne blinde Tabellen



  • Hallo zusammen. Ich habe ein ernstes Problem:
    Ich habe mir ein Buch gekauft, in welchem es darum geht, wie man komplexe Designs anstatt mit blinden Tabellen mit CSS gestalten kann. Ich versuche nun verzweifelt, tatsächlich eine Seite ohne blinde Tabellen zu erstellen, doch scheint das letzten Endes einfach nicht zu funktionieren!
    Beispielsweise dehnt sich ein <div> nicht mehr vertikal aus, wenn der Text grösser wird, sondern schreibt einfach über das Tag hinaus, wenn dieses mit position:absolute, oder position:relative definiert wurde. overflow:visible funktioniert einfach generell auf keinem einzigen Browser. Wie kann ich denn nun erreichen, dass sie die Seite vertikal ausdehen kann? Es kann doch nicht sein, dass anschliessend einfach der Text abgeschnitten wird? 😕 😮 😕

    Ich bekomme echt langsam eine Kriise mit der Scheisse hier! Seit nun mehr als einer Woche bin ich am rumbasteln für ein einfaches Layout und egal wie ichs auch drehe und wende, auf irgendeinem Scheissbrowser funktionierts dann doch wieder nicht!!! 😡 😡 😡


  • Mod

    Wenn du fix die höhe setzt, dann wird da nix automatisch vergrößert.

    du musst code zeigen, wenn du ein problem hast.

    mach dich halt mal an einfachere sachen ran und meide position:* für den anfang mal.



  • @ShadeOfMine

    Der gesammte Code ist unter www.brueschern.ch
    Bitte sie dir die Sache mal an. Ich bringe es einfach nicht fertig, dass sich der Inhaltsteil ausdehnt, wenn der Text zu gross wird! Nun habe ich halt overflow:scroll gesetzt, was zwar funktioniert, aber eigentlich währe mir overflow:visible viel lieber, denn nun habe ich so hässliche Scrollbalken, die mein Design ruinieren...
    Gruss Ishildur


  • Mod

    overflow ist nur dafür da um den overflow, also der text der zuviel ist, darzustellen. der container wird dafür nicht erweitert.

    du hast, wenn ich mich nicht verschaut habe, width und height für den div container gesetzt. ich verstehe das problem also nicht.

    setz overflow auf auto, dann sind die scrollbars nur da, wenn sie nötig sind.

    aber du verwendest ein fixes design, das ist schonmal ein schlechter ansatz... dadurch hast du ja erst das problem bekommen 😉



  • @ShadeOfMine

    aber du verwendest ein fixes design, das ist schonmal ein schlechter ansatz

    Da gebe ich dir vollkommen recht, doch das Problem ist ja, dass ich keine Ahnung habe, wie ich es sonst machen soll. Früher habe ich immer alles mit blinden Tabellen gestaltet, was auch gut funktioniert hat, doch nun ich lese überall, dass man es unbedingt vermeiden solle, mit blinden Tabellen zu arbeiten und dass CSS Layouts diese früher oder später ganz ablösen würden. So habe ich mir gedacht, OK, mache ich die nächste Website mal ohne blinde Tabellen. Doch wie du siehst, endete dies in einer Katastrophe!!

    Das konkrete Problem ist folgendes: das verflixte <div> tag erzwingt einen Zeilenumbruch und das <span> tag darf nur inline elemente enthalten.

    Sie die Bzw. mal folgendes an.
    <div id="body">
    <div id="nav"></div>
    <div id="content"></div>
    </div>

    So, das <div> erzwingt nun, dass der Inhalt von Content unterhalb vom Inhalt von Nav platziert wird. Nebeneinanber ist nur möglich, wenn ich diese mit position:absolut positioniere. Dies hat jedoch zur Folge, dass ich eine width und height vorbestimmen musss. Falls der Inhalt der Tags anschliessend mehr Platz benötigt, als ich vorbestimmt habe, dann dehnt sich das <div> einfach nicht mehr aus...



  • schau dir mal float an.



  • float wird doch verwendet, um bzw. text um eine Bild fliessen zu lassen, aber doch nicht um ein sauberes, pixelgenaues Design zu gestalten 😕



  • Ist es denn wirklich nicht möglich, dass sich ein tag, welches mit position:absolute oder mit position:relative erzeugt wurde, sich wenigstens vertikal ausdehnt?



  • soviel ich weiß muß man die height angabe weglassen und nur width für die breite, so wird die höhe automatisch dem inhalt angepasst.


  • Mod

    Ishildur schrieb:

    Ist es denn wirklich nicht möglich, dass sich ein tag, welches mit position:absolute oder mit position:relative erzeugt wurde, sich wenigstens vertikal ausdehnt?

    sicher nicht, wenn width fix ist.

    aber ehrlich: ich könnte dir das Design hinklatschen, aber es würde nix bringen. Spiel dich ein, zwei nachmittage mal nur mit CSS und erstelle Layouts (ohne grafik, einfach nur pure div-container richtig positionieren).

    Am Anfang ohne position: zu verwenden und nur mit float. Kombiniere span und div (schau dir auch mal display: an) usw.

    Dein Problem ist: du willst etwas komplexes ohne Grundlagenwissen machen. Das geht natürlich nicht gut. Also fang klein an. Kostet dich erstmal 2 Tage und dann kannst du weiter sehen. Oft reicht diese Zeit, CSS ist ja nicht so komplex (komplex sind lediglich die Browserbugs, aber da hilft nur erfahrung).



  • Shade schrieb, wenn "width" fix ist, nene für Vertikal darf "height" nicht fix sein, wie ich schon schrieb.
    Hier mal ein kleines Beispiel:

    <div style="position:absolute; top:110px; left:220px; width:300px; padding:3px; border-width:2px; border-style:solid; border-color:#FFFF00;">
    Bla bla bla bla bla bla bla bla bla bla bla<br>
    Bla bla bla bla bla bla bla bla bla bla bla<br>
    Bla bla bla bla bla bla bla bla bla bla bla<br>
    Bla bla bla bla bla bla bla bla bla bla bla<br>
    Bla bla bla bla bla bla bla bla bla bla bla<br>
    Bla bla bla bla bla bla bla bla bla bla bla<br>
    </div>
    

    Kopier dir mal einige bla bla reihen und vergrößere das damit, du siehst dann das die Box nach unten hin größer wird, sprich sich vertikal erweitert.


Log in to reply