Benjamin Söllner: Mit Text umrandete Grafik: Probleme bei Umstellung TABLE->DIV

SELF-Forum

Mit Text umrandete Grafik: Probleme bei Umstellung TABLE->DIV

Benjamin Söllner Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo Forum,

zu dem folgenden Problem solltet ihr euch diese Seite zu Gemüte führen:

http://www.herold-maschinenbau.de/parser.php?main=work

Im Content-Bereich seht ihr eine Grafik, umrandet mit Textabschnitten. Dies ist bis jetzt eine Tabelle nach folgendem Aufbau:
+---------+---------+
|  1      |  2      |
+----+----+----+----+
| 3  |  B      |  4 |
|    +---------+    |
|    |  5      |    |
+----+---------+----+

Nun bin ich aber dabei, die gesamte Homepage XHTML1.0 Strict- und WAI-tauglich zu machen, was heißt, an Stelle von TABLE-Elementen kommen DIV-Container - und hier liegt der Hase im Pfeffer!

Vereinfacht gesehen habe ich folgende DIV-Konstruktion
<div>              <-- [width: 75%]; text-align: center;
                       [margin-left: 12.5%]; [margin-right: 12.5%]
  <div>1</div>     <-- float: left; width: 50%; text-align: left;
  <div>2</div>     <-- float: right; width: 50%; text-align: right;
  <div>3</div>     <-- clear: both; float: left; text-align: left;
                       [margin-top: ...px]
  <div>4</div>     <-- float: right; text-align: right;
                       [margin-top: ...px]
  <img src="B" />  <-- padding: ...px
  <div>5</div>
</div>

Was mich stört (habe ich in "[]" geschrieben):
(1) Ich muss für die äußeren Boxen den Abstand zu den oberen explizit angeben. Das ist nicht im Sinne eines "liquiden Layouts". Wie kann ich die Box 4 bis zum unteren Rand der Box 5 ziehen und gleichzeitig den Inhalt vertikal zentriert ausrichten, ohne dabei pixelgenaue Angaben für alle Boxes zu verwenden?
(2) Ich hätte gerne, dass, wenn das Fenster zu schmal wird, die Breite der "Haupt-Box" (75%) vergrößert wird, und nicht, dass die einzelnen DIV-Container untereinander dargestellt werden. Dies sieht nämlich bei den festgelegten Rändern (margin-top) ziemlich "auseinandergezogen" aus.

Das selbe Problem hab ich auf der Site noch mehrfach, aber ich wäre erst einmal für ein Konzept dankbar

Vielen Dank im Voraus,
Benjamin Söllner

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Mit Text umrandete Grafik: Probleme bei Umstellung TABLE->DIV

    Struppi Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Im Content-Bereich seht ihr eine Grafik, umrandet mit Textabschnitten. Dies ist bis jetzt eine Tabelle nach folgendem Aufbau:
    +---------+---------+
    |  1      |  2      |
    +----+----+----+----+
    | 3  |  B      |  4 |
    |    +---------+    |
    |    |  5      |    |
    +----+---------+----+

    3 und 4 können nicht die Höhe von b+5 haben, sie werden immer so groß wie ihr Inhalt, wenn dieses verhalten nicht gewünscht wird, wird das ganze eine DIV Suppe.

    ansonsten könnte eine Lösung in etwa so aus ausehen:

    <style type="text/css">  
body  
{  
    padding:0 12.5%;  
    margin:0;  
    background-color: #fff;  
}  
#ol  
{  
    width:49.9%;  
    background-color: #ffe;  
}  
#or  
{  
    width:49.9%;  
    background-color: #ff9;  
    text-align:right;  
}  
#links  
{  
float:left;  
width: 5em;  
}  
#rechts  
{  
float:right;  
width: 5em;  
}  
p  
{  
margin:0 5.1em;  
padding: 0;  
background-color: #ff0;  
border:1px solid black;  
text-align:center;  
}  
</style>

    <body >  
<span id="ol"> 1 </span>  
<span id="or"> 2 </span>  
  
<div id="links"> 3 </div>  
<div id="rechts"> 4 </div>  
<p><img src="x.gif"> <br>  
5 </p>  
</body>

    In dem Browser der mir grad zu Verfügung steht (IE 4) ist das zwar nicht perfekt, aber in etwa sollte es hinhauen.

    Struppi.

    --
    Javascript ist toll
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Mit Text umrandete Grafik: Probleme bei Umstellung TABLE->DIV

      Benjamin Söllner
      – Informationen zu den Bewertungsregeln

      Hallo Struppi.

      Danke erstmal für deine Mühe, aber ähnlich weit war ich schon, allerdings habe ich bewusst erstmal noch keine "em"-Größen genutzt, das wäre aber noch zu tun. Das mit 49.9% ist erstmal eine gute Idee, damit zwischen den 2 gefloateten Boxen noch Platz bleibt. Der IE stellt das nämlich sonst falsch dar, hab ich bemerkt.
      Bleibt aber noch zu klären, wie ich ein "Runterrutschen" der gefloateten Divs vermeiden kann, wenn das Fenster zu breit wird...

      MfG Benjamin

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln