zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 4 Spalten Design mit Faux Columns Trick

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.07.2009, 00:10
Benutzerbild von stipo
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.03.2006
Beiträge: 15
stipo befindet sich auf einem aufstrebenden Ast
Standard 4 Spalten Design mit Faux Columns Trick

Hallo zusammen,

ich habe gerade ein kleines Problem, das mir der "Faux Columns" Trick im IE nicht funktioniert.
Im Firefox wird alles korrekt angezeigt.

Hier mal der HTML-Code:
HTML-Code:
<div id="MasterTableBox">
  <div id="HeaderTableBox">&nbsp;</div>
    <div id="HeaderNavigationBox">
    	<ul class="HeaderNavigation">
        	<li><a href="#">Startseite</a></li>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
       	</ul>
  	</div>
  	<div id="BG">
    	<div id="LeftContentBox">
            <ul class="BoxesLeft">
                <li><h2>Titel</h2></li>
                <li><h3>Sub Titel</h3></li>
                <li><a href="#">&bull;&nbsp;Link 1</a></li>
                <li><a href="#">&bull;&nbsp;Link 2</a></li>
                <li><a href="#">&bull;&nbsp;Link 3</a></li>
                <li><a href="#">&bull;&nbsp;Link 4</a></li>
            </ul>
            <p class="BoxesLeft"><img src="http://xhtmlforum.de/images/Fluegel.png" width="25" height="12" alt="" /></p>
        </div>
        <div id="MasterContentBox">
            content
        </div>
        <div id="CalendarContentBox">
            kalender
        </div>
        <div id="RightContentBox">
            rechts
        </div>
        <br style="clear:both;" />
  	</div>
    <div id="FooterBox">footer</div>
</div>
Und die passende CSS dazu (nur mal das Grundgerüst):
HTML-Code:
#MasterTableBox{
	width: 900px;
	margin-right: auto;
	margin-left: auto;
	border: 4px solid #990000;
	background-color: #FFFFCC;
}
#HeaderTableBox{
	background-image: url(../images/logo.png);
	height: 120px;
	background-repeat: no-repeat;
	background-position: center center;
}
#HeaderNavigationBox{
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #990000;
	margin-right: 5px;
	margin-left: 5px;
	margin-bottom: 5px;
}
#LeftContentBox {
	float: left;
	width: 160px;
}
#MasterContentBox {
	float: left;
	width: 420px;
	height: 100%;
}
#CalendarContentBox {
	float: left;
	width: 160px;
}
#RightContentBox {
	float: left;
	width: 160px;
}
#FooterBox{
	text-align: center;
	background-color: #990000;
	color: #FFFFcc;
	line-height: 20px;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
}
#BG{
	background-image: url(../images/BG_verlauf.png);
	background-repeat: repeat-y;
	background-attachment: scroll;
	margin-bottom: 5px;
}
Für den "Faux Columns"-Trick habe ich eine Grafik angelegt, die genau passt.
Wie gesagt im Firefox wird das so angezeigt wie ich mir das vorstelle, das ich neben jeder Spalte einen senkrechten Strich habe.



Hat mir da jemand einen Tip?
Suche mir schon die Finger wund.

Danke und Grüße
Stipo
__________________
Das ganze Areal des Nichtwissens ist noch nicht vermessen und kartographiert. Im Moment erforschen wir erst seine Randbezirke.

Geändert von stipo (12.07.2009 um 23:41 Uhr) Grund: Link gelöscht
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.07.2009, 00:55
Benutzerbild von plastiko
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.12.2007
Ort: Hannover
Beiträge: 945
plastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblick
Standard

Es funktioniert nur im IE5.5 und IE7 nicht.
Im IE6 und IE8 klappt es.
zoom:1; für #BG sollte helfen.
__________________
MfG
Jens
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 11.07.2009, 14:45
Benutzerbild von stipo
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.03.2006
Beiträge: 15
stipo befindet sich auf einem aufstrebenden Ast
Standard

Hallo Jens,

Danke das hat geholfen.

Dachte mir schon, das es nur ein witz ist mit dem Fehler, den ich noch nicht kenne

Grüße Stephan
__________________
Das ganze Areal des Nichtwissens ist noch nicht vermessen und kartographiert. Im Moment erforschen wir erst seine Randbezirke.
Mit Zitat antworten
Antwort


Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Ist bei dem Design was mit Faux Columns?! oder gibt es überhaupt ne Möglichkeit? dmxrideordie CSS 2 17.12.2007 19:50
Faux Columns - keine Lösung? D3mOn CSS 9 23.09.2007 16:52
faux columns mit 3 spalten clory CSS 1 27.05.2006 16:20
faux columns und height:100% sind keine Lösungen Mambo_mango CSS 18 05.05.2005 19:08


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:31 Uhr.