Probleme mit float

Modula

Moin zusammen - habe leider beim umgang mit float noch ein paar schwierigkeiten.

Hier mein Code:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
      {tmpl_var name='title'}
    </title>
    <link rel="stylesheet" type="text/css" href="skin/1/css.css">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  </head>
  <body>


<div style=" width: 778px; margin: 0px; padding: 0px; ">


<div style=" clear: both; float: left; width: 150px; height: 14px; font-size: 10px; ">[img]skin/1/images/1px.gif[/img]</div>
<div style=" float: left; width: 10px; height: 14px; background-color: #ECF0F4; ">[img]skin/1/images/1px.gif[/img]</div>
<div style=" float: left; width: 14px; height: 14px; background-image: url(skin/1/images/textbereich_ol.gif); ">[img]skin/1/images/1px.gif[/img]</div>
<div style=" float: left; height: 14px; width: 590px; background-image: url(skin/1/images/textbereich_oben.gif); ">[img]skin/1/images/1px.gif[/img]</div>
<div style=" float: right; width: 14px; height: 14px; background-image: url(skin/1/images/textbereich_or.gif); ">[img]skin/1/images/1px.gif[/img]</div>


<div style=" clear: both; float: left; width: 150px; height: 14px; font-size: 10px; ">[img]skin/1/images/1px.gif[/img]</div>
<div style=" float: left; width: 10px; height: auto; min-height: 14px; background-color: #ECF0F4; ">[img]skin/1/images/1px.gif[/img]</div>
<div style=" float: left; width: 14px; height: auto; min-height: 14px; background-image: url(skin/1/images/textbereich_links.gif); ">[img]skin/1/images/1px.gif[/img]</div>
<div style=" float: left; width: 590px; height: auto; min-height: 14px; background-color: #FFFFFF; ">[img]skin/1/images/1px.gif[/img]</div>
<div style=" float: right; width: 14px; height: auto; min-height: 14px; background-image: url(skin/1/images/textbereich_rechts.gif); ">[img]skin/1/images/1px.gif[/img]</div>


<div style=" clear: both; float: left; width: 150px; height: 14px; font-size: 10px; ">[img]skin/1/images/1px.gif[/img]</div>
<div style=" float: left; width: 10px; height: 14px; background-color: #ECF0F4; ">[img]skin/1/images/1px.gif[/img]</div>
<div style=" float: left; width: 14px; height: 14px; background-image: url(skin/1/images/textbereich_ul.gif); ">[img]skin/1/images/1px.gif[/img]</div>
<div style=" float: left; width: 590px; height: 14px; background-image: url(skin/1/images/textbereich_unten.gif); ">[img]skin/1/images/1px.gif[/img]</div>
<div style=" float: right; width: 14px; height: 14px; background-image: url(skin/1/images/textbereich_ur.gif); ">[img]skin/1/images/1px.gif[/img]</div>
</div>


</body>
</html>

Alles anzeigen

und wie es im IE (oben) und FF (unten) ausschaut:
[Blockierte Grafik: http://tests.daoc-ds.de/bilder/ibplanet/screenshot3.jpg]

Vorschläge, wie ich das hinbekommen könnte?
wichtig wär es mir, dass sich die höhe der divs die den Rahmen darstellen automatisch an die höhe des inneren divs anpasst, geht das irgendwie?

Ich weiß, das ganze würde sich bequem über tabellen lösen lassen, diese möchte ich an dieser Stelle aber nicht verwenden.

Grüße,
Modula

Modula

*fragt vorsichtig nochmal nach, ob da wer eine idee hat*

Torty

Ich seh es grad so im Vorübergehen. Ich würde vorschlagen, dass du deinen Code etwas aufräumst. Inline-Style-Anweisungen sind nur sehr sparsam zu verwenden. Die eigentliche Elementformatierung erfolgt über CSS-Klassen bzw. -ID's.
Du hast hier jedem Element seine CSS-Anweisungen direkt in die Elementdefinition geschrieben. Damit machst du alle Vorteile die CSS hat wieder kaputt.

Und lesen kann/mag man diesen Code dann auch nicht mehr...

Modula

Der Code läuft durch ein Templatesystem, u.a. damit der Besucher später die Möglichkeit hat, sich selbst auszusuchen wie die Seite aussieht.

Im Original schaut mein Code so aus:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <link rel="stylesheet" type="text/css" href="{tmpl_var name='template_dir'}css.css">
  <title></title>
  </head>
  <body>


<div class="wrapper">


<div class="zelle1">[img]{tmpl_var name='template_dir'}images/1px.gif[/img]</div>
<div class="zelle2">[img]{tmpl_var name='template_dir'}images/1px.gif[/img]</div>
<div class="zelle3">[img]{tmpl_var name='template_dir'}images/1px.gif[/img]</div>
<div class="zelle4">[img]{tmpl_var name='template_dir'}images/1px.gif[/img]</div>
<div class="zelle5">[img]{tmpl_var name='template_dir'}images/1px.gif[/img]</div>


<div class="zelle1">[img]{tmpl_var name='template_dir'}images/1px.gif[/img]</div>
<div class="zelle6">[img]{tmpl_var name='template_dir'}images/1px.gif[/img]</div>
<div class="zelle7">[img]{tmpl_var name='template_dir'}images/1px.gif[/img]</div>
<div class="zelle8">[img]{tmpl_var name='template_dir'}images/1px.gif[/img]</div>
<div class="zelle9">[img]{tmpl_var name='template_dir'}images/1px.gif[/img]</div>


<div class="zelle1">[img]{tmpl_var name='template_dir'}images/1px.gif[/img]</div>
<div class="zelle2">[img]{tmpl_var name='template_dir'}images/1px.gif[/img]</div>
<div class="zelle10">[img]{tmpl_var name='template_dir'}images/1px.gif[/img]</div>
<div class="zelle11">[img]{tmpl_var name='template_dir'}images/1px.gif[/img]</div>
<div class="zelle12">[img]{tmpl_var name='template_dir'}images/1px.gif[/img]</div>
</div>


  </body>
</html>

Alles anzeigen

Wollte euch ursprünglich nicht mit meinem ganzem CSS überladen, und hatte den wichtigen CSS Teil daher inline ausgelagert..

hänge Screenshot an und lade das CSS gleich auf einen Server zur einsicht hoch.

EDIT: CSS

[Blockierte Grafik: http://tests.daoc-ds.de/goto/goto/_~b64~~_aHR0cDovL3d3dy5mb3J1bS1oaWxmZS5kZS9kb3dubG9hZC5waHA/aWQ9NzA0_~rem~~_.jpg]

Torty

*kopfkratz* irgendwie stimmt doch da was nicht. In deinem Screenshot sind mind. 3 unterschiedliche Grafiken zu erkennen.
Im Quellcode jedoch taucht nur ein Name auf. -> {tmpl_var name='template_dir'}images/1px.gif
Wie kommt das?

Modula

{tmpl_var name='template_dir'}images/1px.gif wird von meinem Templateobjekt zu skin/1/images/1px.gif und entspricht einer einen pixel breiten und hohen transparenten grafik um dem IE problem mit der Leerzeichenformatierung aus dem Weg zu gehen.

Der rahmen wird aus 8 Grafiken (mein ich *fg*) zusammengebaut die im CSS als Backgroundgrafiken festgelegt sind.

Auszug:

Code

div.zelle3 {
  float: left;
  width: 14px;
  height: 14px;
  background-image: url(images/textbereich_ol.gif);
}
div.zelle4 {
  float: left;
  width: 590px;
  height: 14px;
  background-image: url(images/textbereich_oben.gif);
}
div.zelle5 {
  float: right;
  width: 14px;
  height: 14px;
  background-image: url(images/textbereich_or.gif);
}

Alles anzeigen

Code

div.zelle7 {
  float: left;
  width: 14px;
  height: auto;
  min-height: 14px;
  background-image: url(images/textbereich_links.gif);
}

Code

div.zelle9 {
  float: right;
  width: 14px;
  height: auto;
  min-height: 14px;
  background-image: url(images/textbereich_rechts.gif);
}
div.zelle10 {
  float: left;
  width: 14px;
  height: 14px;
  background-image: url(images/textbereich_ul.gif);
}
div.zelle11 {
  float: left;
  width: 590px;
  height: 14px;
  background-image: url(images/textbereich_unten.gif);
}
div.zelle12 {
  float: right;
  width: 14px;
  height: 14px;
  background-image: url(images/textbereich_ur.gif);
}

Alles anzeigen

Torty

Ok, i see.
Aber zu deinem Problem kann ich recht wenig sagen. Du könntest jedoch damit experimentieren die Grafiken über die CSS-Eigenschaften background-position und no-repeat hier etwas Besserung zu erreichen, aber ohne Gewähr. Bin mir unschlüssig was genau hier den Fehler verursacht... sry

Modula

Das Problem liegt ja daran, dass das ganze so aussehen soll:
[Blockierte Grafik: http://tests.daoc-ds.de/goto/goto/_~b64~~_aHR0cDovL3d3dy5mb3J1bS1oaWxmZS5kZS9kb3dubG9hZC5waHA/aWQ9NzA1_~rem~~_.jpg]

die divs, die um den Bereich in dem der text reinkommt von der Höhe aber leider nicht so hoch sind, wie das div in dem der Text steht (hat das wer verstanden?)

ein no-repeat würde ja eher dazu führen, dass der Hintergrund NICHT wiederholt wird, aber ich will ja grade, dass er bis zum ende wiederholt wird, nur leider ist das ende (von der höhe her) eher als das ende des Textbereiches

(Der Screenshot stammt aus einer Lösung mittels Tabellen, aufdie ich gerne wegen probleme bei unterschiedlichen browsern bei unterschiedlichen fenstergrößen verzichten würde)

Vielen Dank für deine Hilfe!
Vielleicht kann ich irgendwann dir mal helfen

Torty

Online hast du die Testseite noch nicht? Das würde mir ermöglichen mit Hilfe des FF-Webdeveloper-Pugins mal ein paar Sachen abzuklopfen. So wie jetzt komm ich nicht weiter.

Hab die entsprechende Seite verfügbar gemacht:

http://tests.daoc-ds.de/forum-hilfe/test/

Bitte um Verständnis, dass alle anderen Funktionen meines Scriptes hier deaktiviert wurden.

Modula

Zitat von Gast

Hab die entsprechende Seite verfügbar gemacht:

http://tests.daoc-ds.de/forum-hilfe/test/

Bitte um Verständnis, dass alle anderen Funktionen meines Scriptes hier deaktiviert wurden.

Jaja, die hohe Kunst des einloggens *fg*

Torty

Also die Anordnung der Div's sieht irgendwie seltsam aus, die solltest du noch mal überprüfen.

Modula

Die anzeige bestätigt bloß meinen verdacht, dass die divs um den großen weißen nicht die gleiche höhe haben...

ich hab mal ein bild angehängt wie es aussehen sollte - hat jemand einen vorschlag wie ich das über css erreiche?

Modula

Hm, ich bin mitlerweile etwas weiter... im IE schauts schon ziemlich gut aus:

http://tests.daoc-ds.de/forum-hilfe/te…r=wrapper2.html

aber hat jemand eine Idee, wie ich im Mozilla diesen ollen leerraum wegbekomme?

[Blockierte Grafik: http://tests.daoc-ds.de/goto/goto/_~b64_aHR0cDovL3d3dy5mb3J1bS1oaWxmZS5kZS9kb3dubG9hZC5waHA/aWQ9NzI2_b64~__~rem~~_.jpg]

Tags