M
Maik
Genau das, in Form des "abgespeckten" HTML-Codes als Grundgerüst für die 12 Panels, also die "Grundkonstruktion" des von dir eingangs schematierten Layouts, hätte ich ja gerne von dir gesehen :suspekt:
mfg Maik
✔ CSS Anfänger braucht Hilfe :)
- Themenstarter marcoD
- Beginndatum
mfg Maik
M
Maik
Was die Fehldarstellung im IE6 betrifft (im IE7 kann ich soweit keinen Unterschied zu den übrigen Browsern feststellen), vermute ich mal, dass an gewissen Stellen The IE6 Three Pixel Text-Jog auftritt, der in dem Layoutkonzept dann das Umbrechen gewisser Spaltenblöcke zur Folge hat.
Dieser Bug tritt i.d.R. meistens dort auf, wo neben der float-Deklaration dem Spaltenblock eine Höhe mit auf dem Weg gegeben wird - siehe hierzu auch meinen Webmaster-FAQ-Artikel CSS Unerwünschter Abstand zwischen floatenden Boxen im IE6 - was tun?.
mfg Maik
Dieser Bug tritt i.d.R. meistens dort auf, wo neben der float-Deklaration dem Spaltenblock eine Höhe mit auf dem Weg gegeben wird - siehe hierzu auch meinen Webmaster-FAQ-Artikel CSS Unerwünschter Abstand zwischen floatenden Boxen im IE6 - was tun?.
mfg Maik
Also, habs auf ein Minimum begrenzt. Panel 1 fällt weg, und Panel 2+3 werden zusammengeschmissen, sind jetzt Panel 3.
Die width der Panels ist fix, die 481 sind nur bei den letzten 4 so. Ansonsten stehen noch keine genauen width's fest, sind aber fixe Werte. Die height ist grundsätzlich variabel, hab da jetzt nur nen Wert zum testen eingetragen.
Die CSS is unverändert.
ASP-Mini Code:
HTML Output:
Die Panles floaten einfach net und die letzten 4 hängen im Nirvana...
Die width der Panels ist fix, die 481 sind nur bei den letzten 4 so. Ansonsten stehen noch keine genauen width's fest, sind aber fixe Werte. Die height ist grundsätzlich variabel, hab da jetzt nur nen Wert zum testen eingetragen.
Die CSS is unverändert.
ASP-Mini Code:
Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title>Unbenannte Seite</title>
<link href="Layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="div_h1">
<div id="PersBild" class="grouping">
<div id="ProfilPersoenlich" style="border:double ; height: 148px ; width: 481px">
<span>Panel 3 ->> Panel 2+3 wird vereinigt und Panel 1 fällt weg, nicht weiter drauf eingehen ;)</span>
</div>
</div>
<div id="DatenBaum" class="grouping">
<div id="ProfilDaten" style="border:double ; height: 148px ; width: 481px">
<span>Panel 4</span>
</div>
<div id="ProfilBaum" style="border:double ; height: 148px ; width: 481px">
<span>Panel 5</span>
</div>
</div>
</div>
<div id="div_h2">
<div id="KurzBMedLL" class="grouping">
<div id="ProfilKurzbeschreibung" style="border:double ; height: 148px ; width: 481px">
<span>Panel 6</span>
</div>
<div id="ProfilLebenslauf" style="border:double ; height: 148px ; width: 481px">
<span>Panel 8</span>
</div>
</div>
<div id="MedSP" class="grouping">
<div id="ProfilSchwerpunkt" style="border:double ; height: 148px ; width: 481px">
<span>Panel 7</span>
</div>
</div>
</div>
<div id="div_h3">
<div id="PubVid" class="grouping">
<div id="ProfilPublikationen" style="border:double ; height: 148px ; width: 481px">
<span>Panel 9</span>
</div>
<div id="ProfilVideos" style="border:double ; height: 148px ; width: 481px">
<span>Panel 11</span>
</div>
</div>
<div id="AusVer" class="grouping">
<div id="ProfilAuszeichnungen" style="border:double ; height: 148px ; width: 481px">
<span>Panel 10</span>
</div>
<div id="ProfilVeranstaltungen" style="border:double ; height: 148px ; width: 481px">
<span>Panel 12</span>
</div>
</div>
</div>
</div>
</form>
</body>
</html>HTML Output:
Code:
<!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>
Unbenannte Seite
</title><link href="Layout.css" rel="stylesheet" type="text/css" /></head>
<body>
<form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE0MDkxNzYwNDNkZM98zhaPda75XrjX/d4bSEI+Nt55" />
</div>
<div>
<div id="div_h1">
<div id="PersBild" class="grouping">
<div id="ProfilPersoenlich" style="border:double ; height: 148px ; width: 481px">
<span>Panel 3 ->> Panel 2+3 wird vereinigt und Panel 1 fällt weg, nicht weiter drauf eingehen ;)</span>
</div>
</div>
<div id="DatenBaum" class="grouping">
<div id="ProfilDaten" style="border:double ; height: 148px ; width: 481px">
<span>Panel 4</span>
</div>
<div id="ProfilBaum" style="border:double ; height: 148px ; width: 481px">
<span>Panel 5</span>
</div>
</div>
</div>
<div id="div_h2">
<div id="KurzBMedLL" class="grouping">
<div id="ProfilKurzbeschreibung" style="border:double ; height: 148px ; width: 481px">
<span>Panel 6</span>
</div>
<div id="ProfilLebenslauf" style="border:double ; height: 148px ; width: 481px">
<span>Panel 8</span>
</div>
</div>
<div id="MedSP" class="grouping">
<div id="ProfilSchwerpunkt" style="border:double ; height: 148px ; width: 481px">
<span>Panel 7</span>
</div>
</div>
</div>
<div id="div_h3">
<div id="PubVid" class="grouping">
<div id="ProfilPublikationen" style="border:double ; height: 148px ; width: 481px">
<span>Panel 9</span>
</div>
<div id="ProfilVideos" style="border:double ; height: 148px ; width: 481px">
<span>Panel 11</span>
</div>
</div>
<div id="AusVer" class="grouping">
<div id="ProfilAuszeichnungen" style="border:double ; height: 148px ; width: 481px">
<span>Panel 10</span>
</div>
<div id="ProfilVeranstaltungen" style="border:double ; height: 148px ; width: 481px">
<span>Panel 12</span>
</div>
</div>
</div>
</div>
</form>
</body>
</html>Die Panles floaten einfach net und die letzten 4 hängen im Nirvana...
Zuletzt bearbeitet:
M
Maik
Hi,
na, das sieht doch gleich viel übersichtlicher aus
Du redest hier vom IE6, oder?
Ich empfehle dir grundsätzlich, um hier als Beispiel die erste "Panel-Zeile" zu nennen, anstelle von #ProfilPersoenlich, #ProfilDaten und #ProfilBaum die übergeordneten Blöcke #PersBild und #DatenBaum mit der float-Eigenschaft auszuzeichnen.
Eventuell ist es auch hilfreich, zwischen den linken und rechten Spaltenblöcken zu unterscheiden - also sie jeweils mit float:left und float:right auszuzeichnen.
mfg Maik
na, das sieht doch gleich viel übersichtlicher aus
Du redest hier vom IE6, oder?
Ich empfehle dir grundsätzlich, um hier als Beispiel die erste "Panel-Zeile" zu nennen, anstelle von #ProfilPersoenlich, #ProfilDaten und #ProfilBaum die übergeordneten Blöcke #PersBild und #DatenBaum mit der float-Eigenschaft auszuzeichnen.
Eventuell ist es auch hilfreich, zwischen den linken und rechten Spaltenblöcken zu unterscheiden - also sie jeweils mit float:left und float:right auszuzeichnen.
mfg Maik
M
Maik
Der empfohlene Vorschlag für die erste "Panel-Zeile" äußert sich im IE6 dann folgendermaßen:
mfg Maik
mfg Maik
Stehe grad bisschen aufm Schlauch, weiß nicht genau was du meinst. Die übergeordneten Blöcke haben doch den float. Und nicht #PanelPers etc, die liegen nur in den zu floatenden Blöcken drin.
float:right hab ich mal versucht, bringt aber nicht das gewünschte Ergebnis. Jetzt floaten die divs zwar, aber es sieht grausam aus...
Weiß allerdings nicht ob das auch so gemeint hast ^^
Der Browser soll relativ unabhängig gewählt werden. Bevorzugt wird im Moment allerdings Firefox.
float:right hab ich mal versucht, bringt aber nicht das gewünschte Ergebnis. Jetzt floaten die divs zwar, aber es sieht grausam aus...
Weiß allerdings nicht ob das auch so gemeint hast ^^
Code:
<!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>
Unbenannte Seite
</title><link href="Layout.css" rel="stylesheet" type="text/css" /></head>
<body>
<form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE0MDkxNzYwNDNkZM98zhaPda75XrjX/d4bSEI+Nt55" />
</div>
<div>
<div id="div_h1">
<div id="PersBild" class="grouping">
<div id="ProfilPersoenlich" style="border:double ; height: 148px ; width: 481px">
<span>Panel 3 ->> Panel 2+3 wird vereinigt und Panel 1 fällt weg, nicht weiter drauf eingehen ;)</span>
</div>
</div>
<div id="DatenBaum" style="float:right ; width: 481px">
<div id="ProfilDaten" style="border:double ; height: 148px ; width: 481px">
<span>Panel 4</span>
</div>
<div id="ProfilBaum" style="border:double ; height: 148px ; width: 481px">
<span>Panel 5</span>
</div>
</div>
</div>
<div id="div_h2">
<div id="KurzBMedLL" class="grouping">
<div id="ProfilKurzbeschreibung" style="border:double ; height: 148px ; width: 481px">
<span>Panel 6</span>
</div>
<div id="ProfilLebenslauf" style="border:double ; height: 148px ; width: 481px">
<span>Panel 8</span>
</div>
</div>
<div id="MedSP" style="float:right ; width: 481px">
<div id="ProfilSchwerpunkt" style="border:double ; height: 148px ; width: 481px">
<span>Panel 7</span>
</div>
</div>
</div>
<div id="div_h3">
<div id="PubVid" class="grouping">
<div id="ProfilPublikationen" style="border:double ; height: 148px ; width: 481px">
<span>Panel 9</span>
</div>
<div id="ProfilVideos" style="border:double ; height: 148px ; width: 481px">
<span>Panel 11</span>
</div>
</div>
<div id="AusVer" style="float:right ; width: 481px">
<div id="ProfilAuszeichnungen" style="border:double ; height: 148px ; width: 481px">
<span>Panel 10</span>
</div>
<div id="ProfilVeranstaltungen" style="border:double ; height: 148px ; width: 481px">
<span>Panel 12</span>
</div>
</div>
</div>
</div>
</form>
</body>
</html>Der Browser soll relativ unabhängig gewählt werden. Bevorzugt wird im Moment allerdings Firefox.
Hm, sieht doch ganz gut aus. Was hast du denn genau gemacht? Hab deinen Vorschlag nicht gnaz verstanden. kannste den Code mal posten?
M
Maik
Also, es geht um diesen Abschnitt im Markup:
und das Stylesheet lautet für die beiden fettmarkierten IDs lautet:
Vielleicht kannst du jetzt nachvollziehen, worauf ich hinaus will, und wie mein Vorschlag mit den übergeordneten Blöcken gemeint ist?
mfg Maik
Code:
<div id="div_h1">
<div id="PersBild" class="grouping">
<div id="ProfilPersoenlich" style="border:double ; height: 148px ; width: 481px">
<span>Panel 3 ->> Panel 2+3 wird vereinigt und Panel 1 fällt weg, nicht weiter drauf eingehen ;)</span>
</div>
</div>
<div id="DatenBaum" class="grouping">
<div id="ProfilDaten" style="border:double ; height: 148px ; width: 481px">
<span>Panel 4</span>
</div>
<div id="ProfilBaum" style="border:double ; height: 148px ; width: 481px">
<span>Panel 5</span>
</div>
</div>
</div><!-- // #div_h1 -->
Code:
#PersBild,
#DatenBaum {
float:left;
}Vielleicht kannst du jetzt nachvollziehen, worauf ich hinaus will, und wie mein Vorschlag mit den übergeordneten Blöcken gemeint ist?
mfg Maik
Ähm, durch die class grouping, haben die Panels doch schon float:left.
Hab jetzt mal alle Möglichkeiten durchprobiert, aber so ein Ergebnis wie du erhalte ich im IE6 nicht. Die Panels stehen alle untereinander und die letzten vier floaten schön...
Interessanterweise floaten die Panels im FF fast richtig. Nur Panel 9 floatet neben Panel 8, weil da platz ist. Da muss ich doch irgentwie das floaten abgrenzen, oder?
Hab jetzt mal alle Möglichkeiten durchprobiert, aber so ein Ergebnis wie du erhalte ich im IE6 nicht. Die Panels stehen alle untereinander und die letzten vier floaten schön...
Interessanterweise floaten die Panels im FF fast richtig. Nur Panel 9 floatet neben Panel 8, weil da platz ist. Da muss ich doch irgentwie das floaten abgrenzen, oder?
M
Maik
Sorry, die Klasse .grouping hab ich mir vorhin nicht näher angeschaut, und ganz vergessen zu erwähnen, dass ich beim Testen den Aufruf der CSS-Datei auskommentiert hatte :-(
Okay, so sollte es auch bei dir jetzt im IE6 funktionieren:
mfg Maik
Okay, so sollte es auch bei dir jetzt im IE6 funktionieren:
Code:
<div id="div_h1">
<div id="PersBild" class="grouping">
<div id="ProfilPersoenlich" style="border:double ; height: 148px ; /*width: 481px*/">
<span>Panel 3 ->> Panel 2+3 wird vereinigt und Panel 1 fällt weg, nicht weiter drauf eingehen ;)</span>
</div>
</div>
<div id="DatenBaum" class="grouping">
<div id="ProfilDaten" style="border:double ; height: 148px ; /*width: 481px*/">
<span>Panel 4</span>
</div>
<div id="ProfilBaum" style="border:double ; height: 148px ; /*width: 481px*/">
<span>Panel 5</span>
</div>
</div>
</div>
Code:
#ProfilPersoenlich,
#ProfilAuszeichnungen,
#ProfilVeranstaltungen,
#ProfilVideos,
#ProfilKurzbeschreibung,
#ProfilPublikationen,
#ProfilDaten,
#ProfilSchwerpunkt,
#ProfilLebenslauf,
#ProfilBaum {
/*width:481px;*/
/*height:237px;*/
/*float:left;*/
}
#ProfilPersoenlich .content,
#ProfilBaum .content,
#ProfilAuszeichnungen .content,
#ProfilVeranstaltungen .content,
#ProfilVideos .content,
#ProfilPublikationen .content,
#ProfilKurzbeschreibung .content,
#ProfilSchwerpunkt .content,
#ProfilDaten .content,
#ProfilLebenslauf .content{
/*height:189px;*/
width:451px; /* 451px + 18px + 12px = 481px */
background-image:url(LayoutGFX/genericBoxContent2.gif);
background-repeat:repeat-y;
padding-left: 18px;
padding-right: 12px;
}Jo, clear:left erzwingt, dass das Element im Textfluß unterhalb des zu umfliessenden Elements ausgerichtet wird.
mfg Maik
