CSS: Breite von 3 Spalten: 20%-60%=20%

dh1sbg · 03.10.2008, 10:41

Hallo!

Ich möchte via CSS die Breite von 3 Spalten einstellen

Folgende Effekte:
1. im IE wird die rechte Spalte nicht bis an die mittlere herangeführt.
2. im FireFox überlappt die rechte Spalte die mittlere, so dass die rechte Spalte "eine Zeile" tiefer dargestellt wird.

Wo liegt mein Problem?

Grüße
Bruno

p.s.: die PHP Variablen enthalten Text, der aber rechtzeitig umgeborchen wird.

Mein CSS:

PHP-Code:

  body {

    margin:0px;

    padding:0px;

    height:100%; /* this is the key! */

    background:#efefef;

    font-family: Verdana, Geneva, Arial, helvetica, sans-serif;

    text-align: center;

}

#sidebar_top {

    left:0px;

    top:30px;

    padding:0px;

    width:100%;

    height:90px;

}

#sidebar_left {

    float: left;

        width: 20%;

    min-height:100%; /* works only if parent container is assigned a height value */

    color:#333;

    background:#fff;

    border:1px solid #dadada;

}

#content {

    float: left;

    width: 60%;

    background-image: url(../images/uebergang.png);

    border:1px solid #dadada;

 
}

#sidebar_right {

    float: right;

    min-width: 20%;

    min-height:100%; /* works only if parent container is assigned a height value */

    background:#fff;

    border:1px solid #dadada;

}

.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 alle seine untergeordneten Floats enthalten sollte. */

        clear:both;

        height:0px;

        font-size: 1px;

        line-height: 0px;

}

#footer{

    text-align:center;

    border-top:1px solid #dadada;

}

Ich habe dazu diesen Code

PHP-Code:

   
<body class="body" onload="document.qForm.input.focus();sTime()">

    <div id="container">

      <div id="sidebar_top">        $sidebar_top    </div>

      <br class="clearfloat" />

 
      <div id="sidebar_left">    $sidebar_left        </div>

      <div id="content">        $content    </div>

      <div id="sidebar_right">           $sidebar_right  </div>

      <br class="clearfloat" />

 
    <div id="footer">            $sidebar_bottom    </div><!-- end #footer -->

    </div>

 
 
</body>

nikosch · 03.10.2008, 11:33

Hm Floating und Breitenangaben für alle drei Spalten hate ich nicht für sinnvoll. Versuch doch mal width für #content wegzulassen.

[edit] Vergiss es, ich sehe gerade die rechte Spalte soll variabel sein... Aber wozu die minwidth Angabe?

dh1sbg · 03.10.2008, 11:57

Ich versuchte mit min-width die rechte Spalte an die mittlere heranzuführen - klappt aber nicht

nikosch · 03.10.2008, 12:04

Gäbe es eine feste Breite rechts, könnte der Block'umbruch' bereits an den 1px breiten Rahmen liegen...
Gibts ein online Beispiel?

dh1sbg · 03.10.2008, 15:18

http://www.yourseminar.de/index1.php

der rechte Teil sieht bei den verschiedenen Browsern sehr unterschiedlich aus.

Bruno

nikosch · 03.10.2008, 15:33

Tja, diese Lücke istr wahrlich seltsam. Habe ich noch nie gehabt, bekomme ich auch nicht weg.

dh1sbg · 03.10.2008, 15:54

jau, habe da auch schon Stunden damit verbracht. Es gibt eine Variante: <table> - aber das solls ja nicht sein. Ev. kennt jemand eine Lösung?

Bruno

Baltasar · 09.10.2008, 12:07

ich liebe diese internet-explorer spielchen..ich würde an deiner stelle mal versuchen, der #sidebar_right auch nen float: left zu verpassen. dann noch den br rausnehmen und dem #footer einfach den clear:left verpassen..den abstand, den der br erzeugt hat, kriegst du ja auch mit margin hin...wäre jetzt mal meine vermutung (auch wenn es total hirnrissig klingt), weil ich solche problem mit dem ie kenne

nikosch · 09.10.2008, 12:10

Ähm, mein Browser zeigt Deine Stylsheet-Angabe so an:

Code:

<link href="css/css1	.css" rel="stylesheet" type="text/css" />

Die wird zwar trotzdem verarbeitet, aber..

Ansonsten:

Zitat:

1. im IE wird die rechte Spalte nicht bis an die mittlere herangeführt.

tritt bei mir auch im FF 3.0.3 auf. Also nix IE Spielchen. Laut Firebug ist das kein margin. Gäbs rechts ne feste Breite würde ich sagen, irgendwas drück die Gesamtbreite auf. Aber ist ja nicht....

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Hilfe bei Mysql Query aus mehreren spalten benötigt	cytrobic	Datenbanken	8	18.05.2007 11:36
maximalwert aus mehreren Spalten	obi	PHP Tipps 2006	9	17.10.2006 12:55
[CSS] Verschachtelte Div Container - Breite anpassen	I-Spy	HTML, Usability und Barrierefreiheit	7	14.05.2006 11:51
Thumbnail proportional mit Max. Breite u. Höhe	.fox	PHP Tipps 2006	3	25.03.2006 07:03
Wie kann ich die Spalten einer Tabelle auslesen ?		Datenbanken	0	31.10.2005 00:29
drei Spalten einer Tabelle zusammenfügen	Lia	PHP Tipps 2005-2	24	16.08.2005 15:58
spalten zählen mit ausnahmen		Datenbanken	8	16.07.2005 13:04
spalten pro zeile erstellen		PHP Tipps 2005-2	6	05.07.2005 08:36
Addieren von 3 Spalten, nach Ergebnis sortieren		Datenbanken	11	15.06.2005 09:54
Spalten Dynamisch als Tabelle anzeigen lassen(Spalten ausl.)	Cyberbob_at_tot	PHP Tipps 2005-2	6	04.06.2005 22:55
spalten verschieben	Sclot	Datenbanken	4	12.04.2005 12:44
CSS: 2 Spalten á 50% ohne float		HTML, Usability und Barrierefreiheit	2	31.03.2005 14:37
IE: Breite = width + 0; FF: Breite = width + padding -- Häh?	tapferesschneiderlein	HTML, Usability und Barrierefreiheit	1	09.12.2004 18:45
[Erledigt] Breite von Tabellenspalten festlegen		HTML, Usability und Barrierefreiheit	7	09.12.2004 15:22
[Erledigt] [OT] besser eine Tabelle mit mehr Spalten oder aufteilen ?		Datenbanken	1	22.10.2004 17:26

03.10.2008, 10:41
dh1sbg Erfahrener Benutzer Registriert seit: 03.07.2003 Beiträge: 292 PHP-Kenntnisse: Fortgeschritten	CSS: Breite von 3 Spalten: 20%-60%=20% Hallo! Ich möchte via CSS die Breite von 3 Spalten einstellen Folgende Effekte: 1. im IE wird die rechte Spalte nicht bis an die mittlere herangeführt. 2. im FireFox überlappt die rechte Spalte die mittlere, so dass die rechte Spalte "eine Zeile" tiefer dargestellt wird. Wo liegt mein Problem? Grüße Bruno p.s.: die PHP Variablen enthalten Text, der aber rechtzeitig umgeborchen wird. Mein CSS: PHP-Code: body { margin:0px; padding:0px; height:100%; /* this is the key! / background:#efefef; font-family: Verdana, Geneva, Arial, helvetica, sans-serif; text-align: center; } #sidebar_top { left:0px; top:30px; padding:0px; width:100%; height:90px; } #sidebar_left { float: left; width: 20%; min-height:100%; / works only if parent container is assigned a height value / color:#333; background:#fff; border:1px solid #dadada; } #content { float: left; width: 60%; background-image: url(../images/uebergang.png); border:1px solid #dadada; } #sidebar_right { float: right; min-width: 20%; min-height:100%; / works only if parent container is assigned a height value / background:#fff; border:1px solid #dadada; } .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 alle seine untergeordneten Floats enthalten sollte. */ clear:both; height:0px; font-size: 1px; line-height: 0px; } #footer{ text-align:center; border-top:1px solid #dadada; } Ich habe dazu diesen Code PHP-Code: <body class="body" onload="document.qForm.input.focus();sTime()"> <div id="container"> <div id="sidebar_top"> $sidebar_top </div> <br class="clearfloat" /> <div id="sidebar_left"> $sidebar_left </div> <div id="content"> $content </div> <div id="sidebar_right"> $sidebar_right </div> <br class="clearfloat" /> <div id="footer"> $sidebar_bottom </div><!-- end #footer --> </div> </body>


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

03.10.2008, 11:33
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Hm Floating und Breitenangaben für alle drei Spalten hate ich nicht für sinnvoll. Versuch doch mal width für #content wegzulassen. [edit] Vergiss es, ich sehe gerade die rechte Spalte soll variabel sein... Aber wozu die minwidth Angabe? __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

03.10.2008, 11:57
dh1sbg Erfahrener Benutzer Registriert seit: 03.07.2003 Beiträge: 292 PHP-Kenntnisse: Fortgeschritten	min-width Angabe Ich versuchte mit min-width die rechte Spalte an die mittlere heranzuführen - klappt aber nicht

03.10.2008, 12:04
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Gäbe es eine feste Breite rechts, könnte der Block'umbruch' bereits an den 1px breiten Rahmen liegen... Gibts ein online Beispiel? __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

03.10.2008, 15:18
dh1sbg Erfahrener Benutzer Registriert seit: 03.07.2003 Beiträge: 292 PHP-Kenntnisse: Fortgeschritten	Beispiel http://www.yourseminar.de/index1.php der rechte Teil sieht bei den verschiedenen Browsern sehr unterschiedlich aus. Bruno

03.10.2008, 15:33
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Tja, diese Lücke istr wahrlich seltsam. Habe ich noch nie gehabt, bekomme ich auch nicht weg. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

03.10.2008, 15:54
dh1sbg Erfahrener Benutzer Registriert seit: 03.07.2003 Beiträge: 292 PHP-Kenntnisse: Fortgeschritten	Lücke jau, habe da auch schon Stunden damit verbracht. Es gibt eine Variante: <table> - aber das solls ja nicht sein. Ev. kennt jemand eine Lösung? Bruno

09.10.2008, 12:07
Baltasar Erfahrener Benutzer Registriert seit: 26.10.2003 Beiträge: 592	ich liebe diese internet-explorer spielchen..ich würde an deiner stelle mal versuchen, der #sidebar_right auch nen float: left zu verpassen. dann noch den br rausnehmen und dem #footer einfach den clear:left verpassen..den abstand, den der br erzeugt hat, kriegst du ja auch mit margin hin...wäre jetzt mal meine vermutung (auch wenn es total hirnrissig klingt), weil ich solche problem mit dem ie kenne