Beiträge von sejuma

  • Benutzerinfos, Avatare

    Ich finde es schlecht, dass Benutzerinformationen und Avatar in einer eigenen Zeile (Balken) quer über dem Beitrag angezeigt werden.
    Das bläht nicht nur alles auf (besonders wenn Benutzerbilder verwendet werden), sondern man verliert dadurch auch den Blick für's Wesentliche, nämlich den Beitrag an sich.
    Mittelbare Folge: Die Beitragstextzeilen erstrecken sich damit auf die gesamte Breite, sind somit wesentlich länger und erfordern eine erhöhte Konzentration beim Lesen.
    Vorher gefiel mir's besser und war auch effektiver, als die Benutzerinfos links standen und rechts daneben der Beitrag.

  • CSS - Box-Layout

    Versuch's mal damit (nur im FF getestet):

  • CSS - Box-Layout

    Ohne jetzt bereits ins Problemdetail zu gehen:
    Zunächst solltest du einige grundsätzliche Dinge beachten:

    Deiner Seite Fehlt ein Standarddoctype. Das hat zur Folge, dass der IE das CSS-Boxmodell nicht richtig darstellen kann und es in diesem Browser bereits allein deshalb zu unterschiedlichen Darstellungen kommt. Der Doctype gibt sozusagen an, in welcher "Sprache" die Seite erstellt wurde. Da gibt es gewisse Abweichungen.
    Schreibe deshalb mal das in die allererste Zeile des Quelltextes:

    Code
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

    Nähere Infos zum DT siehe http://de.selfhtml.org/html/allgemein…htm#dokumenttyp

    Der zweite Fehler liegt darin, dass du zwischen jedem Div einen Zeilenumbruch eingefügt hast.
    Lass also mal überall die "
    " weg.

    Nun zu einigen Details:

    Du verwendest unterschiedliche Bezeichnungen:
    Im CSS-Teil schreibst du "Seite" groß, im HTML-Teil klein.
    Verwende am besten durchgehend Kleinschrift. Den vorangestellten div musst du nicht erwähnen, spart Quellcode.
    Also statt bisher "div#Seite" besser "#seite"

    Im body zentrierst du die Schrift, um sie auf #Seite wieder auf linksbündig zu stellen. Beide Angaben sind unnötig, in beiden Elementen kannst du die text-align-Angabe weglassen.

    Solche Sachen lassen sich wesentlich vereinfachen:
    Statt bisher

    Code
    border-width:0 5px 0 0; border-color:#2b6196; border-style:solid;


    Besser:

    Code
    border-right: 5px solid #2b6196;

    Wenn das alles bereinigt ist, solltest du nochmal prüfen, ob die Summe der inneren Div's unter Berücksichtigung von Rahmen, padding und margin so groß ist wie die Breite von #seite. Ansonsten passen sie da nicht rein.

    Versuche mal, diese Punkte abzuarbeiten und dann sollte es schon besser aussehen.

  • Layout auf Browserzooms vorbereiten?

    Der Knackpunkt sind die Grafiken, die nun mal eine feste Pixelbreite und -höhe haben. Das kann man bei den images zwar auch etwas dynamisch gestalten, führt dann aber zu Verpixelungen.

    Hinzu kommt, dass heutzutage die Bildschirmgrößen und damit die Viewports sehr variieren, so dass man bei einem flüssigen Layout kaum noch vorhersehen kann, wie die Seite bei den unterschiedlichen Besuchern angezeigt wird.

    Gerade aus diesem Grund tendiere ich in letzter Zeit zu fixen Layouts.
    Ich achte allerdings auf eine (vermeintlich) ausreichend große Schrift (meist 0.9em), so dass ich zumindest vermute, dass sich das Vergrößerungsbedürfnis in Grenzen hält.
    Wer dennoch zoomt, muss damit rechnen, dass nicht mehr alles perfekt angezeigt wird. Irgendwo müssen sich die Elemente ja ihren Platz suchen.
    Ich meine mich aber zu erinnern, irgendwo mal gelesen zu haben, dass dies für manche Browser kein Problem mehr darstellt und mit der Zoomfunktion alles porportional vergrößert oder verkleinert wird. Möglicherweise gibt es da auch Zusatztools, die man installieren kann. bin mir aber nicht ganz sicher.

  • inneres div so hoch wie äußeres

    Das ist wirklich nicht so schlimm wie du denkst. Probier's einfach mal aus.

    Du kannst natürlich auch jedem Div die gleiche Höhe geben, z.B. einen bestiommten Pixelwert. Das hat allerdings den Nachteil, dass es dann nicht mehr flexibel ist, wenn der Inhalt einmal zu- oder abnimmt. In diesem Fall müsstest du alle Werte immer wieder neu anpassen.

  • Seitenlayout mit DIV

    Die Tipps von koslowski solltest du beherzigen.
    Ich versuch mal ganz vereinfacht float zu erklären:

    Div's sind Blockelemente. Sie ordnen sich standardmäßig immer untereinander an.
    Nun erfordert ein Layout, dass man Div's nebeneinander anordnen muss.
    So z.B. ein dreispaltiges Layout, links die Navi, in der Mitte der Content und Rechts eine Adbar.
    Mit float kannst du nun bewirken, dass diese drei "Spalten" (Div's) nicht untereinander, sondern nebeneinander stehen.
    Es gibt dabei durchaus mehrere Möglichkeiten, diese Anordnung mit unterschiedlichen Styleangaben zu realisieren.
    Ist diese Anornung fertig, dann clearst du im Anschluss, damit sich der nächste Div, z.B. ein Footer wieder quer darunter setzen kann.

    Vielleicht dient diese Anleitung dem besseren Verständnis.

  • Html Boxen abtrennen ???

    Code
    <div style="position:absolute; left:390px; top:300px">
    Code
    <div style="position:absolute; left:390px; top:190px">

    Die Ursache liegt in der absoluten Positionierung. Die solltest du komplett weglassen, weil sonst die Boxen aus dem Fluss genommen sind und sich gegenseitig überlagern können..

    So wie das jetzt dasteht soll wohl die Box mit 190px über der von 300px stehen.

    Das wäre viel eleganter so zu lösen:

    Code
    <div style="margin-left: 390px; margin-top: 190px;"> ...</div>
<div style="margin-left: 390px;">..</div>


    Hier ordnet sich die zweite unmittelbar unter der ersten an.
    Wenn sie von der ersten noch etwas Abstand haben soll, dann gib ihr noch ein paar Pixel margin-top.

    Ob der Leftabstand von 390px sinnvoll ist bezweifle ich. Vermutlich willst du damit eine Art Zentrierung vornehmen, die dann aber nur an deinem individuellen Bildschirm klappt.
    Besser wäre eine Zentrierung (falls das gewollt ist) damit: http://www.ohne-css.gehts-gar.net/0001.php