Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 14

Thema: Probleme mit float

  1. #1
    Kaiserliche Hoheit
    Registriert seit
    15.07.2005
    Ort
    Hagen (NRW)
    Beiträge
    1.515
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Probleme mit float

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

    Hier mein Code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http&#58;//www.w3.org/1999/xhtml">
      <head>
        <title>
          &#123;tmpl_var name='title'&#125;
        </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&#58; 778px; margin&#58; 0px; padding&#58; 0px; ">
    
    <div style=" clear&#58; both; float&#58; left; width&#58; 150px; height&#58; 14px; font-size&#58; 10px; ">[img]skin/1/images/1px.gif[/img]</div>
    <div style=" float&#58; left; width&#58; 10px; height&#58; 14px; background-color&#58; #ECF0F4; ">[img]skin/1/images/1px.gif[/img]</div>
    <div style=" float&#58; left; width&#58; 14px; height&#58; 14px; background-image&#58; url&#40;skin/1/images/textbereich_ol.gif&#41;; ">[img]skin/1/images/1px.gif[/img]</div>
    <div style=" float&#58; left; height&#58; 14px; width&#58; 590px; background-image&#58; url&#40;skin/1/images/textbereich_oben.gif&#41;; ">[img]skin/1/images/1px.gif[/img]</div>
    <div style=" float&#58; right; width&#58; 14px; height&#58; 14px; background-image&#58; url&#40;skin/1/images/textbereich_or.gif&#41;; ">[img]skin/1/images/1px.gif[/img]</div>
    
    <div style=" clear&#58; both; float&#58; left; width&#58; 150px; height&#58; 14px; font-size&#58; 10px; ">[img]skin/1/images/1px.gif[/img]</div>
    <div style=" float&#58; left; width&#58; 10px; height&#58; auto; min-height&#58; 14px; background-color&#58; #ECF0F4; ">[img]skin/1/images/1px.gif[/img]</div>
    <div style=" float&#58; left; width&#58; 14px; height&#58; auto; min-height&#58; 14px; background-image&#58; url&#40;skin/1/images/textbereich_links.gif&#41;; ">[img]skin/1/images/1px.gif[/img]</div>
    <div style=" float&#58; left; width&#58; 590px; height&#58; auto; min-height&#58; 14px; background-color&#58; #FFFFFF; ">[img]skin/1/images/1px.gif[/img]</div>
    <div style=" float&#58; right; width&#58; 14px; height&#58; auto; min-height&#58; 14px; background-image&#58; url&#40;skin/1/images/textbereich_rechts.gif&#41;; ">[img]skin/1/images/1px.gif[/img]</div>
    
    <div style=" clear&#58; both; float&#58; left; width&#58; 150px; height&#58; 14px; font-size&#58; 10px; ">[img]skin/1/images/1px.gif[/img]</div>
    <div style=" float&#58; left; width&#58; 10px; height&#58; 14px; background-color&#58; #ECF0F4; ">[img]skin/1/images/1px.gif[/img]</div>
    <div style=" float&#58; left; width&#58; 14px; height&#58; 14px; background-image&#58; url&#40;skin/1/images/textbereich_ul.gif&#41;; ">[img]skin/1/images/1px.gif[/img]</div>
    <div style=" float&#58; left; width&#58; 590px; height&#58; 14px; background-image&#58; url&#40;skin/1/images/textbereich_unten.gif&#41;; ">[img]skin/1/images/1px.gif[/img]</div>
    <div style=" float&#58; right; width&#58; 14px; height&#58; 14px; background-image&#58; url&#40;skin/1/images/textbereich_ur.gif&#41;; ">[img]skin/1/images/1px.gif[/img]</div>
    </div>
    
    </body>
    </html>
    und wie es im IE (oben) und FF (unten) ausschaut:


    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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Zoggerforum.de Betreuer * Mod @ ibforen.de * Admin @ daoc-ds.de
    ICQ Nummer kann via PN erfragt werden

  2. #2
    Kaiserliche Hoheit
    Themenstarter

    Registriert seit
    15.07.2005
    Ort
    Hagen (NRW)
    Beiträge
    1.515
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    *fragt vorsichtig nochmal nach, ob da wer eine idee hat*
    Zoggerforum.de Betreuer * Mod @ ibforen.de * Admin @ daoc-ds.de
    ICQ Nummer kann via PN erfragt werden

  3. #3
    Kaiserliche Hoheit
    Registriert seit
    22.02.2005
    Beiträge
    1.558
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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...
    "Carpe Diem" powered by positiv Feelings

  4. #4
    Kaiserliche Hoheit
    Themenstarter

    Registriert seit
    15.07.2005
    Ort
    Hagen (NRW)
    Beiträge
    1.515
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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:



    Code:
    <!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="&#123;tmpl_var name='template_dir'&#125;css.css">
      <title></title>
      </head>
      <body>
    
    <div class="wrapper">
    
    <div class="zelle1">[img]&#123;tmpl_var name='template_dir'&#125;images/1px.gif[/img]</div>
    <div class="zelle2">[img]&#123;tmpl_var name='template_dir'&#125;images/1px.gif[/img]</div>
    <div class="zelle3">[img]&#123;tmpl_var name='template_dir'&#125;images/1px.gif[/img]</div>
    <div class="zelle4">[img]&#123;tmpl_var name='template_dir'&#125;images/1px.gif[/img]</div>
    <div class="zelle5">[img]&#123;tmpl_var name='template_dir'&#125;images/1px.gif[/img]</div>
    
    <div class="zelle1">[img]&#123;tmpl_var name='template_dir'&#125;images/1px.gif[/img]</div>
    <div class="zelle6">[img]&#123;tmpl_var name='template_dir'&#125;images/1px.gif[/img]</div>
    <div class="zelle7">[img]&#123;tmpl_var name='template_dir'&#125;images/1px.gif[/img]</div>
    <div class="zelle8">[img]&#123;tmpl_var name='template_dir'&#125;images/1px.gif[/img]</div>
    <div class="zelle9">[img]&#123;tmpl_var name='template_dir'&#125;images/1px.gif[/img]</div>
    
    <div class="zelle1">[img]&#123;tmpl_var name='template_dir'&#125;images/1px.gif[/img]</div>
    <div class="zelle2">[img]&#123;tmpl_var name='template_dir'&#125;images/1px.gif[/img]</div>
    <div class="zelle10">[img]&#123;tmpl_var name='template_dir'&#125;images/1px.gif[/img]</div>
    <div class="zelle11">[img]&#123;tmpl_var name='template_dir'&#125;images/1px.gif[/img]</div>
    <div class="zelle12">[img]&#123;tmpl_var name='template_dir'&#125;images/1px.gif[/img]</div>
    </div>
    
      </body>
    </html>
    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

    Angehängte Grafiken Angehängte Grafiken
    Zoggerforum.de Betreuer * Mod @ ibforen.de * Admin @ daoc-ds.de
    ICQ Nummer kann via PN erfragt werden

  5. #5
    Kaiserliche Hoheit
    Registriert seit
    22.02.2005
    Beiträge
    1.558
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    *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?
    "Carpe Diem" powered by positiv Feelings

  6. #6
    Kaiserliche Hoheit
    Themenstarter

    Registriert seit
    15.07.2005
    Ort
    Hagen (NRW)
    Beiträge
    1.515
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    {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 &#123;
      float&#58; left;
      width&#58; 14px;
      height&#58; 14px;
      background-image&#58; url&#40;images/textbereich_ol.gif&#41;;
    &#125;
    div.zelle4 &#123;
      float&#58; left;
      width&#58; 590px;
      height&#58; 14px;
      background-image&#58; url&#40;images/textbereich_oben.gif&#41;;
    &#125;
    div.zelle5 &#123;
      float&#58; right;
      width&#58; 14px;
      height&#58; 14px;
      background-image&#58; url&#40;images/textbereich_or.gif&#41;;
    &#125;
    Code:
    div.zelle7 &#123;
      float&#58; left;
      width&#58; 14px;
      height&#58; auto;
      min-height&#58; 14px;
      background-image&#58; url&#40;images/textbereich_links.gif&#41;;
    &#125;
    Code:
    div.zelle9 &#123;
      float&#58; right;
      width&#58; 14px;
      height&#58; auto;
      min-height&#58; 14px;
      background-image&#58; url&#40;images/textbereich_rechts.gif&#41;;
    &#125;
    div.zelle10 &#123;
      float&#58; left;
      width&#58; 14px;
      height&#58; 14px;
      background-image&#58; url&#40;images/textbereich_ul.gif&#41;;
    &#125;
    div.zelle11 &#123;
      float&#58; left;
      width&#58; 590px;
      height&#58; 14px;
      background-image&#58; url&#40;images/textbereich_unten.gif&#41;;
    &#125;
    div.zelle12 &#123;
      float&#58; right;
      width&#58; 14px;
      height&#58; 14px;
      background-image&#58; url&#40;images/textbereich_ur.gif&#41;;
    &#125;
    Zoggerforum.de Betreuer * Mod @ ibforen.de * Admin @ daoc-ds.de
    ICQ Nummer kann via PN erfragt werden

  7. #7
    Kaiserliche Hoheit
    Registriert seit
    22.02.2005
    Beiträge
    1.558
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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
    "Carpe Diem" powered by positiv Feelings

  8. #8
    Kaiserliche Hoheit
    Themenstarter

    Registriert seit
    15.07.2005
    Ort
    Hagen (NRW)
    Beiträge
    1.515
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Das Problem liegt ja daran, dass das ganze so aussehen soll:


    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
    Angehängte Grafiken Angehängte Grafiken
    Zoggerforum.de Betreuer * Mod @ ibforen.de * Admin @ daoc-ds.de
    ICQ Nummer kann via PN erfragt werden

  9. #9
    Kaiserliche Hoheit
    Registriert seit
    22.02.2005
    Beiträge
    1.558
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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.
    "Carpe Diem" powered by positiv Feelings

  10. #10
    Gast

    Standard

    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.

Ähnliche Themen

  1. CSS float clearen
    Von Dikra im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 17.04.2008, 19:58
  2. float: left macht Probleme im FF
    Von aladin im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 08.03.2008, 23:10
  3. IE 6 kennt float nicht !?
    Von minolta im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 13.10.2007, 12:22
  4. Float und Table - IE-Bug?!
    Von Kasper im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 16.12.2005, 15:18
  5. css problem float
    Von pt-3000 im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 21.07.2005, 16:06

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •