Ergebnis 1 bis 7 von 7

Thema: divx mit faux columns - firefox und ie wollen beide nicht

  1. #1
    mr.tino
    Gast

    Standard divx mit faux columns - firefox und ie wollen beide nicht

    moin,

    erstmal guten tag hier alle zusammen. bin neu hier und hoffe deshalb, die beschreibung entspricht den forderungen und ihr könnt mir hilfen

    ich habe derzeit folgendes problem: ich habe bei meiner homepage drei verschachtelte divs, ein mutter und zwei tochter divs. das mutter-div, page, steht über menue und content. menue ist hierbei eine simple sidebar, content das text- und inhaltsfeld und page eben der gesamte oberblock.

    mithilfe der faux columns methode habe ich das menue-div bis zum seitenende mitwachsen lassen, bekomme nun jedoch einen fatalen fehler (zunächst firefox). sobald des ende des menue-divs erreicht ist, springt der inhalt des content-divs nach links, sprich steht nun unter dem menue-div und nicht rechts, wo er eigentlich sollte. außerdem bekomme ich bei tabellen das problem, das diese das content-feld auf der rechten seite sprengen. dies geschieht nur bei den tabellen; ich suche hier auch einen einfacheren weg als jede tabelle zu verkleinern, da es ja einen allgemeinen befehl geben müsste.

    im ie sind die symptome ähnlich, hier fängt jedoch der komplette inhalt erst nach dem ende des menue-divs an, sprich alles auf der höhe der sidebar ist im content-feld frei, danach läuft alles ungeniert und "schön" links (sollte natürlich rechts stehen) - auch hier wieder das gleiche mit tabellen.

    hier noch ein kleiner auszug aus der extern ausgelagerten css-datei:

    (hinweis: ich habe content dem page-div untergeordnet, weil ich das durch googlen bei einem ähnlichen beispiel gefunden hatte und dadurch für mich ein weiteres problem eliminiert wurde. wenn ich menue nun auch noch page unterordne, wird die sidebar allerdings bis zum content-feld hin nach rechts breiter und der inhalt beginnt erst weiter unten. sehr konfus das ganze.

    Code:
    body {
    
      margin-left: 5px;
    
      margin-top: 5px;
    
    	background-color: #ffffff;
    
    	height: auto;
    
    	width: 878px;
    
    	
    
    
    
    }
    
    body,td,th {
    
    	font-family: Arial, Helvetica, sans-serif;
    
    	font-size: 12px;
    
    	color: #000000;
    
    }
    
    /* hier steht fuer dieses beispiel irrelevanter kram */
    
    
    div#page {
    
    	height: auto;
    
    	top: 0px;
    
    	bottom: 0px;
    
      width:878px;
    
      background-image: url(cms_grafik/back.jpg); 
    
      background-repeat: repeat-y;
    
    }
    
    
    	
    
    .content{
    
    	
    
    	margin-left: 180px;
    
    float: right;
    
    	width: 702px;
    
    	height: auto;
    
    	background-color: #FAFAFA;
    
      font-family: Arial, Helvetica, sans-serif;
    
      font-size: 12px;
    
      font-weight: normal;
    
      color: #000000;
    
    }
    	
    div#menue {
    
    	width: 175px;
    
    	height: auto;
    
    	float: left;
    
    	background-color: #CCCCCC;
    
    	margin-right: 10px;
    
    	}	
    
    
    /* hier steht fuer dieses beispiel irrelevanter kram */
    und nun die index.php:

    komischerweise will das ganze nicht mit code-bbtag, deswegen hier als txt-file auszug auf meinem server: auszug der index.php

    ich bin mir sicher, die antwort liegt direkt vor meiner nase und ich bin vor lauter augenkrämpfen und rumprobieren nur zu blind, sie zu entdecken -- trotzdem bin ich für jegliche hilfe äußerst dankbar

    Aus anschaulichen Gründen habe ich eine Testseite erstellt, an der ihr meine Probleme sehen könnt. In den einzelnen Textabschnitten steht vor den Lorem ipsum Texten immer eine kleine Erläuterung des ganzen. Die Tabelle habe ich mit einem Rahmen von 1px ausgestattet, damit diese deutlich zu erkennen ist.


    lieben gruß,
    mr.tino
    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 !!!!!

  2. #2
    der/die Göttliche Avatar von jojo87
    Registriert seit
    23.03.2007
    Ort
    Leipzig
    Alter
    30
    Beiträge
    3.131
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Abgesehen von diesen Fehlern macht es einfach wenig Sinn, den divs id's zu geben, und sie dann im CSS per Klasse anzusprechen

    Code:
    <div id="content"></div>
    Code:
    #content &#123;&#125;
    und nicht
    Code:
    .content&#123;&#125;
    Dies hättest du mit Firebug übrigens sehr schnell selbst bemerkt, nur so als Tipp.

    Gruß,
    Jojo

  3. #3
    Meister(in)
    Registriert seit
    10.01.2008
    Ort
    Passau/Ösiland
    Beiträge
    267
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hi,

    #page hat width:878px + 5px margin = 883px wahre Breite

    #content hat width:702px + margin:180px =882px wahre Breite
    #menü hat width:175px + margin:10px =185px wahre Breite

    Da #content und #menü durch float nebeneinander stehen sind sie insgesamt
    1067px breit

    Sie passen also nicht in #page, der sie umschließt.

    koslowski

  4. #4
    tino
    Gast

    Standard

    vielen, vielen dank, jojo und koslowski!

    eure tipps habe ich angewandt und sie haben auch beide einwandfrei mein problem gelöst. nur leider bin ich dann wieder so weit wie vorher, ohne die faux columns .. der ie stellt diese mittlerweile (gottseidank!) dar, im firefox ist immer noch sense. das table problem besteht weiterhin (s. testseite). im quelltext steht <table width="100%">, NUR auf was beziehen sich diese 100%?! anscheinend muss es im content-div liegen, darf also maximal 702px groß sein, bewegt sich momentan etwa um die 820px.

    nun also nach den vorschlägen meiner 2 vorredner:

    div#page {

    height: auto;

    top: 0px;

    bottom: 0px;

    width:887px;

    background-image: url(cms_grafik/back.jpg);

    background-repeat: repeat-y;

    }




    #content{





    float: right;

    width: 702px;

    height: auto;

    background-color: #FAFAFA;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    font-weight: normal;

    color: #000000;

    }



    div#menue {

    width: 175px;

    height: auto;

    float: left;

    background-color: #CCCCCC;

    margin-right: 10px;

    }
    achja, wo wir gerade bei faux columns sind: im moment läuft es (im ie, und später höffentlich auch im firefox) so ab, dass die columns bis zum ende des content-divs mitlaufen. was noch schöner wäre, das sie bis zum ende der aktuellen seite mitlaufen, sprich wenn meine bildschirmauflösung ein browserfeld von 1200px zulässt (height) und die aktuelle seite nach 800px schon aufhört, dass die column trotzdem bis 1200px mitläuft. sozusagen min-height, aber ohne festen wert wegen unterschiedlicher auflösungen .. ist so etwas möglich?

    danke für die schnelle hilfe

  5. #5
    der/die Göttliche Avatar von jojo87
    Registriert seit
    23.03.2007
    Ort
    Leipzig
    Alter
    30
    Beiträge
    3.131
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    1. Faux-Columns

    füge nach dem content-div folgendes in den Quelltext:
    Code:
    <div style="clear&#58;both;"></div>
    Grund:
    Da der content-div gefloated ist, befindet er sich nicht mehr im textfluss, was wiederum bedeutet, dass sich die Höhe des #page divs nicht mehr nach ihm richtet und somit nach dem Menu endet.

    Aber:
    2. Faux-columns bis zum unteren Browserrand.

    Das geht recht einfach
    Gib einfach dem Body die faux-columns Hintergrundgrafik, damit hat sich auch erstens erledigt.

    3. Die Tabelle

    Hab ich jetzt nur überflogen und kenne mich auch nicht gut damit aus (hätte das ebenfalls mit divs gelöst), aber du gibst der einen <td> ne Breite von 80%, verstehe nicht, warum, da du den anderen wiederum 50% zuweist, vielleicht liegts daran.

    Gruß,
    Jojo

  6. #6
    tino
    Gast

    Standard

    BOMBE! klappt alles. fehlt nur noch die tabelle, werde mir das morgen aber selbst noch einmal genauer anschauen.

    besten dank,
    tino

    ps: wer sich wundern sollte: der titel sollte natürlich divs, nicht divx beinhalten

  7. #7
    tino
    Gast

    Standard

    pps: achso, wer noch hinweise zur tabelle hat - ich nehm' sie gerne an vielen dank und größte grüße,

Ähnliche Themen

  1. Tabelle wollen nicht
    Von Katti-Maus im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 02.04.2008, 23:33
  2. SmS wollen nicht auf den Pc !!??
    Von alligator im Forum Computer - Internet Forum
    Antworten: 1
    Letzter Beitrag: 06.12.2006, 15:45
  3. faux columns
    Von GreenRover im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 14.09.2006, 15:22
  4. Das erste Bild kommt, das zweite nicht (beide JPG)
    Von beni im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 4
    Letzter Beitrag: 14.06.2006, 08:44
  5. Firefox einstellungen wollen ned :\
    Von gelöschter User im Forum Computer - Internet Forum
    Antworten: 7
    Letzter Beitrag: 01.06.2006, 18:55

Stichworte

Berechtigungen

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