Dominik: HTML-Tabelle -> CSS

SELF-Forum

HTML-Tabelle -> CSS

Dominik
– Informationen zu den Bewertungsregeln

Hallo Leute,
ich habe schon länger auf meiner Homepage eine Struktur im Einsatz, die wie folgt aussieht:
http://www.dbruhn.de/div/test.html

jetzt würde ich gern den ganzen tabellen mist durch zwei divs ersetzten. Ich hätte dabei gerne zwei divs die per CSS formatiert werden:

<div class="boxtitel">Titel hier</div>
<div cass="box">Hier der TExt</div>

Die Frage ist welchen Code ich dann im CSS einsetzten kann. Was ich schon hinbekommen habe, ich es mit vier verschachtelten div's zu lösen, was den Code-Aufwand aber nicht sonderlich verkleinert:
http://www.dbruhn.de/div/test2.html
Dazu hat diese Lösung das Problem, das sie im IE nicht sauber angezeigt wird, der Firefox macht keine mucken.

Wer weiß wie es einfacher und besser geht?

Danke
Dominik

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. HTML-Tabelle -> CSS

    Karsten
    – Informationen zu den Bewertungsregeln

    Den Link musst Du noch mal posten, ich kriege nur nen 404error

    Karsten

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. HTML-Tabelle -> CSS

      Dominik
      – Informationen zu den Bewertungsregeln

      Den Link musst Du noch mal posten, ich kriege nur nen 404error

      Karsten

      Danke für die schnelle Antwort,
      bei mir gehen beide Links.

      http://www.dbruhn.de/div/test.html
      http://www.dbruhn.de/div/test2.html

      Gruß
      Dominik

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. HTML-Tabelle -> CSS

        Karsten
        – Informationen zu den Bewertungsregeln

        Ja, jetzt läufts auch bei mir.

        Ich würde es prinzipiell mit nur zwei divs machen, die Du untereinander positionierst. An Hintergrundgrafiken würde ich dann nur eine für das obere div und eine für das untere nehmen. Den Abstand des jeweiligen content zur border kannst Du dann per padding (bezogen auf die divs) oder margin (definiert für die Inhalte) bestimmen.

        <div id="oben">Titel</div>
        <div id="unten">Inhalt</div>

        style:

        #oben {
        padding: 5px;
        background-image: url(kompletter/hintergrund/oben.jpg);
        background-repeat: no-repeat;
        background-position: top;
        }

        #oben {
        padding: 5px;
        background-image: url(kompletter/hintergrund/unten.jpg)
        background-repeat: no-repeat;
        background-position: bottom;
        }

        Ich hoffe, das funzt so und ich habe verstanden, was Du meinst?!

        Karsten

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. HTML-Tabelle -> CSS

          Dominik
          – Informationen zu den Bewertungsregeln

          Hey Karsten,
          danke für die Antwort,
          die Lösung ist mir auch schon gekommen, allerdings setzt die vorraus, das ich die breite der Boxen weiß, und das ist leider nicht gegeben. Ich möchte die Boxen gerne mit Prozentualer Breite verwenden.

          Trotzdem danke
          TO

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. HTML-Tabelle -> CSS

            Karsten
            – Informationen zu den Bewertungsregeln

            O.K., dann vielleicht mit einem Hintergrundbild das 3000px breit ist und auf der rechten Seite noch ein div, das das Design am rechten Rand bestimmt?

            Die Frage ist aber natürlich auch: Was machst Du, wenn jemand 1600 Pixel Brite oder mehr auf seinem Bildschirm hat? Solch ewig lange Textzeilen lassen sich nur sehr schwer lesen. Ausserdem ist es schwierig, den nächsten Zeilenanfang zu finden. Ich finde 755px Breite eigentlich einen guten Kompromiss, denn die Zeilenlänge passt so zumindest in etwa.

            So, ich geh jetzt mal in die Heia. Gute N8

            Karsten

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln