Anzeige

div-Problem

div-Problem | PSD-Tutorials.de

Erstellt von Top_Gun, 20.10.2008.

  1. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    div-Problem
    Ich habe folgendes Layout vor:

    [​IMG]

    Der Content- und der Menubereich sollen vertikal variabel sein. Beide sollen den Hintergrund bis zum Seitenende bzw bis zum Footer beibehalten. Da soll also keine Lücke entstehen bzw zu sehen sein.
    Der Logo-, Content- und Footerbereich sollen horizontal variabel sein.

    Nun stolper ich aber über die üblichen Probleme bei der Gestaltung mit CSS. Hat jemand eine Idee wie man das Umsetzen könnte?
     
    #1      
  2. Ammersee

    Ammersee Laborant

    Dabei seit:
    21.01.2007
    Beiträge:
    130
    Geschlecht:
    männlich
    Ort:
    am Ammersee (Obay)
    Software:
    Adobe Familie
    div-Problem
    AW: div-Problem

    Hallo Top_Gun,

    hier kopier dir einfach den code und schaust dir an.
    Achja wenn du dreamweaver hast kannst du das auch ganz einfach selber machen, es gibt da alle möglichen vorlagen varianten.

    achja die css daten würde ich auch noch extern auslagern.

    ich hoffe das ist das was du gemeint hast.

    HTML:
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    4. <title>Unbenanntes Dokument</title>
    5. <style type="text/css">
    6.     <!--
    7.    body  {
    8.        font: 100% Verdana, Arial, Helvetica, sans-serif;
    9.        background: #666666;
    10.        margin: 0; /* Es empfiehlt sich, margin (Rand) und padding (Auffüllung) des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen Rechnung zu tragen. */
    11.        padding: 0;
    12.        text-align: center; /* Hierdurch wird der Container in IE 5*-Browsern zentriert. Dem Text wird dann im #container-Selektor die Standardausrichtung left (links) zugewiesen. */
    13.        color: #000000;
    14.    }
    15.    
    16.    /* Tipps für elastische Layouts:
    17.    1. Da die Gesamtgröße elastischer Layouts von der Standardschriftgröße des Benutzers abhängt, sind diese Layouts weniger berechenbar. Bei korrekter Verwendung haben sie außerdem für Personen, die größere Schriften benötigen, einen höheren Nutzwert, weil die Zeilenlänge proportional bleibt.
    18.    2. Die Größe der divs in diesem Layout basiert auf der Originalschriftgröße (100%) im Body-Element. Wenn Sie die Textgröße durch eine Einstellung wie font-size: 80% im Body-Element oder im #container global verringern, wird das gesamte Layout proportional verkleinert. Sie sollten die Breiten der verschiedenen divs vergrößern, um hierfür einen Ausgleich zu schaffen.
    19.    3. Wenn Sie in den einzelnen divs unterschiedliche Werte für die Schriftgröße angegeben, anstatt die Schriftgröße im Design global zu ändern (z. B. wenn #sidebar1 die Schriftgröße 70% zugewiesen wird und #mainContent die Größe 85%), so wird die Gesamtgröße der einzelnen divs proportional geändert. Sie sollten anhand der endgültig gewählten Schriftgröße entsprechende Anpassungen vornehmen.
    20.    */
    21.    .twoColElsLtHdr #container {
    22.        width: 46em;  /* Mit dieser Breite wird ein Container erstellt, der in ein 800 Pixel breites Browserfenster passt, sofern für den Text die Standardschriftgröße des Browsers übernommen wird. */
    23.        background: #FFFFFF;
    24.        margin: 0 auto; /* Durch automatische Ränder (in Verbindung mit einer Breite) wird die Seite zentriert. */
    25.        border: 1px solid #000000;
    26.        text-align: left; /* Hierdurch wird die Einstellung text-align: center im Body-Element überschrieben. */
    27.    }
    28.    .twoColElsLtHdr #header {
    29.        background: #DDDDDD;
    30.        padding: 0 10px;  /* Diese Auffüllung entspricht der linksbündigen Ausrichtung der Elemente in den divs, die darunter erscheinen. Wenn im #header anstelle von Text ein Bild eingesetzt wird, sollten Sie die Auffüllung entfernen. */
    31.    }
    32.    .twoColElsLtHdr #header h1 {
    33.        margin: 0; /* Wenn Sie den Rand des letzten Elements im #header-div auf 0 einstellen, können Sie das Auftreten unerwarteter Abstände zwischen divs vermeiden. Wenn das div einen Rahmen hat, ist dies unnötig, weil dieser Rahmen die gleiche Wirkung hat. */
    34.        padding: 10px 0; /* Durch die Verwendung der Auffüllung anstelle von Rändern lässt sich gewährleisten, dass das Element die Kanten des div nicht berührt. */
    35.    }
    36.    
    37.    /* Tipps für sidebar1:
    38.    1. Wenn Sie für dieses div eine Schriftgröße festlegen, wird die Gesamtbreite des div entsprechend angepasst.
    39.    2. Da wir mit Gevierten (ems) arbeiten, ist es empfehlenswert, für die Randleiste selbst keine Auffüllung zu verwenden. Sie wird bei standardgerechten Browsern der Breite hinzugefügt, und dies wiederum führt zu einer unbekannten tatsächlichen Breite.
    40.    3. Zwischen der Kante des div und den darin liegenden Elementen kann ein Abstand eingefügt werden, indem Sie diesen Elementen wie in ".twoColElsLtHdr #sidebar1 p" demonstriert einen linken und rechten Rand zuweisen.
    41.    */
    42.    .twoColElsLtHdr #sidebar1 {
    43.        float: left;
    44.        width: 12em; /* Da es sich hier um ein floatendes Element handelt, muss eine Breite angegeben werden. */
    45.        background: #EBEBEB; /* Die Hintergrundfarbe wird nur für die Länge des Spalteninhalts angezeigt. */
    46.        padding: 15px 0; /* Durch die Auffüllung oben und unten entsteht in diesem div ein visueller Leerraum. */
    47.    }
    48.    .twoColElsLtHdr #sidebar1 h3, .twoColElsLtHdr #sidebar1 p {
    49.        margin-left: 10px; /* Für jedes Element, das in den seitlichen Spalten platziert wird, sollten ein linker und ein rechter Rand angegeben werden. */
    50.        margin-right: 10px;
    51.    }
    52.    
    53.    /* Tipps für mainContent:
    54.    1. Wenn Sie diesem #mainContent-div nicht denselben Schriftgrößenwert wie dem #sidebar1-div zuweisen, basieren die Ränder des #mainContent div auf der Schriftgröße des #mainContent-div, und die Breite des #sidebar1-div basiert auf der Schriftgröße des #sidebar1-div. Sie sollten die Werte dieser divs anpassen.
    55.    2. Der Abstand zwischen mainContent und sidebar1 entsteht durch den linken Rand des mainContent-div. Der Spaltenbereich bleibt unabhängig von der Inhaltsmenge des sidebar1-div immer gleich. Sie können diesen linken Rand entfernen, falls der Text des #mainContent-div den Bereich von #sidebar1 füllen soll, wenn der Inhalt in #sidebar1 endet.
    56.    3. Zur Vermeidung von Float-Drops müssen Sie gegebenenfalls die ungefähre maximale Bild-/Elementgröße anhand eines Tests ermitteln, weil dieses Layout auf der vom Benutzer angegebenen Schriftgröße und den von Ihnen festgelegten Werten basiert. Wenn der Benutzer die Browser-Schriftgröße aber auf einen Wert eingestellt hat, der unter dem Normalwert liegt, steht im #mainContent-div weniger Platz zur Verfügung als beim Test erkennbar.
    57.    4. Im unten stehenden bedingten Kommentar für Internet Explorer wird die Zoom-Eigenschaft verwendet, um mainContent die Eigenschaft hasLayout zuzuweisen. Dadurch wird das potenzielle Auftreten verschiedener IE-spezifischer Fehler verhindert.
    58.    */
    59.    .twoColElsLtHdr #mainContent {
    60.        margin: 0 1.5em 0 13em; /* Der rechte Rand kann in Gevierten (ems) oder Pixel angegeben werden. Durch ihn entsteht der Abstand am rechten Seitenrand. */
    61.    }
    62.    .twoColElsLtHdr #footer {
    63.        padding: 0 10px; /* Diese Auffüllung entspricht der linksbündigen Ausrichtung der Elemente in den divs, die darunter erscheinen. */
    64.        background:#DDDDDD;
    65.    }
    66.    .twoColElsLtHdr #footer p {
    67.        margin: 0; /* Wenn Sie die Ränder des ersten Elements in der Fußzeile auf 0 einstellen, können Sie unerwartete Abstände zwischen divs vermeiden. */
    68.        padding: 10px 0; /* Durch die Verwendung der Auffüllung bei diesem Element entsteht genau wie bei einem Rand ein Leerraum, aber ohne die potenziellen Abstandsprobleme. */
    69.    }
    70.    
    71.    /* Verschiedene wieder verwertbare Klassen */
    72.    .fltrt { /* Mit dieser Klasse können Sie ein Element auf der Seite nach rechts fließen lassen. Das floatende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
    73.        float: right;
    74.        margin-left: 8px;
    75.    }
    76.    .fltlft { /* Mit dieser Klasse können Sie ein Element auf der Seite nach links fließen lassen. */
    77.        float: left;
    78.        margin-right: 8px;
    79.    }
    80.    .clearfloat { /* Diese Klasse sollte in einem div- oder break-Element platziert werden und das letzte Element vor dem Schließen eines Containers sein, der wiederum einen vollständigen Float enthalten sollte. */
    81.        clear:both;
    82.        height:0;
    83.        font-size: 1px;
    84.        line-height: 0px;
    85.    }
    86.    -->
    87.     </style><!--[if IE]>
    88.    <style type="text/css">
    89.    /* Fügen Sie CSS-Korrekturen für alle IE-Versionen in diesen bedingten Kommentar ein. */
    90.    .twoColElsLtHdr #sidebar1 { padding-top: 30px; }
    91.    .twoColElsLtHdr #mainContent { zoom: 1; padding-top: 15px; }
    92.    /* Mit der obigen proprietären Zoom-Eigenschaft wird IE die Eigenschaft hasLayout zugewiesen, die zur Verhinderung verschiedener Fehler erforderlich ist. */
    93.    </style>
    94.    <![endif]--></head>
    95.  
    96. <body class="twoColElsLtHdr">
    97.  
    98.     <div id="container">
    99.       <div id="header">
    100.         <h1>Kopfzeile</h1>
    101.       <!-- end #header --></div>
    102.       <div id="sidebar1">
    103.         <h3>sidebar1-Inhalt</h3>
    104.         <p>Die Hintergrundfarbe für dieses div wird nur für die Länge des Inhalts angezeigt. Sollten Sie eine Trennlinie bevorzugen, fügen Sie der CSS-Regel des entsprechenden Divs (#sidebar oder #mainContent) eine Rahmen-Eigenschaft hinzu. </p>
    105.         <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. </p>
    106.       <!-- end #sidebar1 --></div>
    107.       <div id="mainContent">
    108.         <h1> Hauptinhalt </h1>
    109.         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. </p>
    110.         <p>Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>
    111.         <h2>H2-Überschrift </h2>
    112.         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
    113.         <!-- end #mainContent --></div>
    114.         <!-- Dieses clear-Element sollte direkt auf das #mainContent-div folgen, um das #container-div anzuweisen, alle untergeordneten Floats aufzunehmen. --><br class="clearfloat" />
    115.        <div id="footer">
    116.         <p>Fußzeile</p>
    117.       <!-- end #footer --></div>
    118.     <!-- end #container --></div>
    119.     </body>
    120. </html>
    121.  
    Grüße Andi
     
    #2      
  3. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    div-Problem
    AW: div-Problem

    Danke für die Antwort aber das ist nicht das was ich suche...

    Zwischen Sidebar und Fußzeile ist ein Abstand, dieser wird sogar noch größer, wenn ich mehr Content habe. Und genau das möchte ich vermeiden...
     
    #3      
  4. Ammersee

    Ammersee Laborant

    Dabei seit:
    21.01.2007
    Beiträge:
    130
    Geschlecht:
    männlich
    Ort:
    am Ammersee (Obay)
    Software:
    Adobe Familie
    div-Problem
    AW: div-Problem

    ah ok jetzt weiss ich was du meinst, habs gerade versucht aber auch nicht hinbekommen, aber ich probier noch ein bissl rum das müsste mit den height: und prozent angaben funktionieren evtl. probierst du in dieser richtung auch rum
     
    #4      
  5. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    div-Problem
    AW: div-Problem

    Schon gemacht aber auch das ist eine Sackgasse. 100% vom Browserfenster ist trotzdem eine feste Größe, wenn der Content länger ist als das Browserfenster entsteht wieder so eine hässliche Lücke...
     
    #5      
  6. Ammersee

    Ammersee Laborant

    Dabei seit:
    21.01.2007
    Beiträge:
    130
    Geschlecht:
    männlich
    Ort:
    am Ammersee (Obay)
    Software:
    Adobe Familie
    div-Problem
    AW: div-Problem

    ich habe mich auch noch probiert aber es auch leider nicht hinbekommen.
    Da muss ein Profi ran.

    Viel Glück
     
    #6      
  7. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    div-Problem
    AW: div-Problem

    Das ist nicht sehr kompliziert, nur ein ein bisschen getrickst:
    du packst die drei Bereiche LOgo,content und footer in einen wrapper mit width:100%; und einem linken margin von der breite, die das menü haben soll. in diesen Platz hängst du das menü(absolut positiert) hinein.et viola!.
    der linke(menü-) bereich bekommt einen transparenten Hintergrund durch den der Hintergrund der Seite sichtbar ist (und wirkt somit immer als würde er die volle Höhe einnehmen. Den hintergrund der rechten Bereich nach belieben...
     
    #7      
  8. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    div-Problem
    AW: div-Problem

    Ähm, vielleicht habe ich die Trickserei nicht ganz verstanden, aber ich bin der Meinung, dass ich dabei trotzdem eine Lücke bekomme... gerade dann wenn ich dem Menu sage es soll transparent sein...
    Vielleicht könntest du nen kurzes Beispiel machen?

    Menü und Footer bekommen als Hintertgrundfarbe pink und sollen Logo und Content (mit nem orangen Hintergrund) einfassen wie ein L egal was ich versuche es reißt mir immer auf...
     
    #8      
  9. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    div-Problem
    AW: div-Problem

    ist schon klar.
    ich hab mal ein beispiel geschrieben topgun
     
    Zuletzt von einem Moderator bearbeitet: 20.10.2008
    #9      
  10. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.555
    Geschlecht:
    männlich
    div-Problem
    AW: div-Problem

    sorry hatte edit statt zitat gedrückt ;)


    Mit quewrscrollen? Gib dir mal Mühe, das kannst du doch besser ;)


    Meine Idee: (funzt in IE6) in Moz krieg ich einfach die Höhe von rechts nicht hin (ohne Navi funzt es)

    HTML:
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml">
    4. <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    5. <title>mit Tabelle wäre es einfacher</title>
    6. <style type="text/css">
    7. * {
    8.     margin: 0;
    9.     padding: 0;
    10.     }
    11.  
    12.  
    13. body, html {height: 100%; }
    14.  
    15. body {
    16. /* sonstige body-Angaben machen */
    17. }
    18.  
    19.  
    20. div#menue {
    21. width:150px;
    22. min-height:100%;
    23. background-color:#dedede;
    24. float:left;
    25. }
    26.  
    27. * html div#menue {height:100%; }
    28.  
    29. div#head {
    30.     height: 200px;
    31.     background: #0000dd;}
    32.  
    33. div#inhalt {
    34.     min-height: /* 100%; für den Firefox */
    35.     margin: 0 auto;
    36.     margin-left:150px;
    37.     background: green;
    38.     text-align:left}
    39.  
    40. * html div#inhalt {height: 100%}
    41.  
    42. .clear {
    43.     clear: both;
    44.     height: 100px;
    45.     }
    46.  
    47. div#footer {
    48.     height: 100px;
    49.     background: pink;
    50.     position: relative;
    51.     margin-top: -100px;
    52.     margin-left:150px;
    53.     text-align: left}
    54.  
    55.  
    56. div#aussenrum {
    57. /* hier schaffe ich es nicht die Höhe für Moz anzupassen :( */
    58. }
    59.  
    60. </head>
    61.  
    62.  
    63.  
    64. <div id="menue"></div>
    65. <div id="aussenrum">
    66.         <div id="inhalt">
    67.             <div id="head">Kopfbereich</div>
    68.             <div id="main">Inhaltsbereich</div>
    69.             <div class="clear"></div>
    70.         </div>
    71.         <div id="footer">Footerbereich</div>
    72. </div>
    73. </div>
    74.  
    75. </body>
    76. </html>
    77.  
     
    #10      
  11. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    div-Problem
    AW: div-Problem

    ach du schreck...das hatte ich so schnell zusammengefrickelt, und gar nicht aufgepasst:eek:
    danke für den Hinweis.

    edit: css ist korrigiert

    ps: * html div#menue {height:100%; } verstehen die neueren IE nicht mehr
     
    Zuletzt bearbeitet: 20.10.2008
    #11      
  12. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    div-Problem
    AW: div-Problem

    Das sieht doch schonmal so aus wie ich es haben möchte...

    Ich werd mir das morgen mal in Ruhe anschauen und testen ob es wasserdicht ist ^^

    Edit:
    Danke Sokie, die Lösung funktioniert so wie gewünscht. Damit bin ich ein gutes Stück voran gekommen.

    @Herr_D auf dem Weg hatte ich das auch schon probiert und bin beim gleichen Problem gescheitert. Trotzdem danke für die Mühe.
    Ach und der Aussage in dem Titel stimme ich zu, aber einfach ist auch langweilig ;) außerdem wird soll man es so nicht machen...


    So mal schauen ob ich euch gleich das nächste Problem aufschwatzen kann:

    Mit dem Aspekt im Hinterkopf, dass der Content in der Länge variabel sein soll, stellt sich folgendes Problem:
    Wenn mein Content nun sehr wenige Zeilen hat, fängt der Footer schon im 2. Drittel des Bildschirms an, was total bescheiden aussieht und unerwünscht ist.
    Bei FF und Opera lässt sich dies über min-height umgehen der IE6 jedoch kennt diesen Befehl nicht.

    Gibt es einen Trick mit dem man das Problem umgehen kann?

    Mein Lösungsansatz war, um das Content-div einen weiteren Wrapper zu legen und rechts gefloatet neben den Content einen Placeholder mit fester Höhe. In FF und Opera funktioniert das. Im IE6 "läuft" der Wrapper und damit die Hintergrundfarbe aber nach links unter das Menu aus und zerstört das Design.

    Alternativ aber auch eher ungerne könnte ich mir auch folgendes vorstellen:
    Da ich mit PHP und nem Templatesystem arbeite sind alle Inhalte Variablen. Ich könnte also die Zeilen der Variable Content zählen lassen und unter einer Mindestanzahl über CSS im IE6 eine feste Höhe für das Content-div definieren.

    Hat noch jemand andere Ideen?
     
    Zuletzt bearbeitet: 21.10.2008
    #12      
  13. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    div-Problem
    AW: div-Problem

    Ich befürchte durch mein anständige Editierung schaut keiner mehr in diesem Thread nach und beantwortet so auch nicht meine Frage. Daher dieser Doppelpost:

    Ah, push it - push it real good
     
    #13      
  14. Jooohny

    Jooohny Gesperrt

    Dabei seit:
    17.06.2008
    Beiträge:
    122
    Geschlecht:
    männlich
    Ort:
    Wenden (Sauerland)
    Software:
    Photoshop CS3 ................ Dreamwaver CS3 ................ Cinema 4D V11 ................
    Kameratyp:
    Samsung NV24 HD
    div-Problem
    AW: div-Problem

    Hi Top Gun

    Jaja der scheiß IE sry muste einfach raus hier haste die lösung

    PHP:
    1.  
    2. .dein countent
    3.  
    4.                 {
    5.  
    6.                        min-height:300px;
    7.  
    8.                        height:auto !important;  /* für moderne Browser */
    9.  
    10.                        height:300px;  /*für den IE */
    11.  
    12.                 }
    13.  
    lg:Jooohny
     
    #14      
  15. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    div-Problem
    AW: div-Problem

    auch hier darfst du vertrauenssvoll meinen code noch einmal konsultieren*fg*
    im css siehst du, dass der #content schon die min-height hat(für alle browser), und im Code der Seite gibt es die Extrawurst für den IE per conditional Comment.
    topgun
     
    #15      
  16. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    div-Problem
    AW: div-Problem

    Du bist raus, das ist nicht das was ich haben will...

    Ich war bisher der Meinung, dass auch die Angaben per CC fix sind und ne fixe Höhe will ich ja nicht.
    Aber nach deiner Aussage und einem Test hab ich was dazu gelernt. Danke sehr :)
     
    #16      
  17. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    div-Problem
    AW: div-Problem

    So und nochmal sorry für den zweiten Doppelpost aber nicht, dass ich wieder übersehen werde:

    Durch die weiteren Arbeiten an der Seite habe ich gerade herausgefunden warum ich nicht mit den CC gearbeitet habe wenn ich eine Mindestdefinition brauche:
    Mindestdefinition heißt, dass es nicht kleiner dargestellt wird, selbst wenn die Auflösung oder die Fenstergröße das nicht hergibt. Es heißt aber auch, dass es größer sein kann, wenn Auflösung oder Fenstergröße dies hergeben. Der IE6 interpretiert die CC aber nicht als Mindestmaß sondern als feste Definition solange es keinen Inhalt gibt der diese Maße überschreitet.
    In dem Beispiel mit dem Content und der Höhe erfüllt dies zwar den Zweck sobald ich aber ein leeres div habe und das Mindestmaß durch keinen Inhalt überschritten wird, nimmt der IE das als feste Größe.

    So und jetzt mein aktuelles Problem:

    Das Menu-div ist oben links ausgerichtet und schließt mit 200px breite direkt an meinen Wrapper an. Hier ist der linke Teil einer Grafik eingebunden.
    In meinem Wrapper habe ich meinen Header, der eine Hintergrundgrafik enthält.
    In dem Header habe ich ein Hintergrund-div, dieses hat als Hintergrundgrafik den rechten Teil meiner Grafik.
    In dem Hintergrund-div habe ich ein Logo-div, wie nicht anders zu erwarten war ist die Hintergrundgrafik hier das Logo.

    Da der IE6 bekannterweise Probleme mit PNGs hat (siehe anderer Thread) sind meine schönen geschwungenen Grafiken an keiner Stelle transperent sondern der Hintergrund ist fest eingebunden in die Grafik.

    Wird jetzt das Fenster zu klein, überlagert zuerst das Logo den rechten Teil der Grafik, bis es irgendwann selber abgeschnitten wird. Eine Mindestbreite muss her. Bei Opera und FF kein Problem, beim IE schon...

    Wenn ich nun via CC dem IE sage, dass mein Header eine Breite bekommen soll, passt alles bestens, solange das Fenster nicht größer wird als diese Breite, ansonsten bekomme ich rechts oben ein Loch (sogar in anderer Hintergrundfarbe...)

    Momentan habe ich mir so beholfen, dass ich zwischen Header und den anderen divs noch ein Platzhalter-div eingebaut habe, welches ohne Hintergrund auf eine Breite definiert werden kann. Funktioniert, jedoch ist somit mein Logo nicht mehr zentriert...

    Also das alte Problem: Jemand Ideen, Tricks oder Lösungen wie man dem IE6 eine Mindestbreite beibiegen kann?
     
    #17      
x
×
×
teststefan