zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden zwei Spalten layout, IE Abstandproblem

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.07.2008, 00:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.07.2008
Beiträge: 2
paramit befindet sich auf einem aufstrebenden Ast
Standard zwei Spalten layout, IE Abstandproblem

Hallo miteinander,

ich sitze seit Stunden an folgendem Problem:

der rechte Layer verschiebt sich im IE6/7 immer um etwa 20 px nach unten und das soll er eben nicht. Beide Layer (links und rechts) sollen bündig sein. Hab schon alles Mögliche versucht mit css, aber es will einfach nicht weg.
Würd mich freuen wenn jemand Rat wüsste bevor ich noch durchdrehe

Viele Grüße und schon mal Danke, paramit

PictureUpload (Hosted By PictureUpload.de)



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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link href="css/blabla.css" rel="stylesheet" type="text/css" />
<!--[if IE 5]>
    <style type="text/css"> 
    /* Fügen Sie CSS-Box-Modell-Korrekturen für IE 5* in diesen bedingten Kommentar ein. */
    .twoColFixRtHdr #sidebar1 { width: 220px; }
    </style>
    <![endif]--><!--[if IE]>
    <style type="text/css"> 
    /* Fügen Sie CSS-Korrekturen für alle IE-Versionen in diesen bedingten Kommentar ein. */
    .twoColFixRtHdr #sidebar1 { padding-top: 30px; }
    .twoColFixRtHdr #mainContent { zoom: 1; }
    /* Mit der obigen proprietären Zoom-Eigenschaft wird IE die Eigenschaft hasLayout zugewiesen, die zur Verhinderung verschiedener Fehler erforderlich ist. */
    </style>
    <![endif]--></head>

<body class="twoColFixRtHdr">
    <div id="container">
<div id="header"><a href="#"><img src="http://xhtmlforum.de/images/start_1.gif" alt="Startseite" width="118" height="55" border="0" /></a><a href="#"><img src="http://xhtmlforum.de/images/angebot_1.gif" alt="Angebote" width="133" height="55" border="0" /></a><a href="#"><img src="http://xhtmlforum.de/images/wir_1.gif" alt="Wir" width="114" height="55" border="0" /></a><a href="#"><img src="http://xhtmlforum.de/images/franchise_1.gif" alt="Franchise" width="137" height="55" border="0" /></a><a href="#"><img src="http://xhtmlforum.de/images/kontakt_1.gif" alt="Kontakt" width="99" height="55" border="0" /></a><img src="http://xhtmlforum.de/images/lexis_languages.gif" alt="blbla" width="296" height="55" border="0" /><img src="http://xhtmlforum.de/images/willkommen.gif" alt="Willkommen auf Lexis Languages" width="601" height="139" /><!-- end #header --></div>
<div id="sidebar1">
<div id="sidebar1Orte">
        <?php 
	if(file_exists("doc/admin/inc/passwort/csv/orte.xml")){
		$xml = simplexml_load_file("doc/admin/inc/passwort/csv/orte.xml");
		$count=sizeof($xml->orte);
		?>
        <h1>Standorte</h1>
        <?php 
		for($i=0; $i<$count; $i++){
			?>
           <a href="#" onClick="window.open('doc/admin/inc/passwort/orte/orte.php?id=<?php echo $i+1; ?>','Standorte','status=no,resizable=no,scrollbars=yes,menubar=no,location=no,toolbar=no,directories=no,width=600,height=600')">
                <?php echo $xml->orte[$i]->title ?></a>
          <p><?php echo $xml->orte[$i]->teaser ?></p>
            <?php
        } ?>
	<?php	
	}
	?>
        </div>
        <div id="sidebar1News"><?php 
	if(file_exists("doc/admin/inc/passwort/csv/news.xml")){
		$xml = simplexml_load_file("doc/admin/inc/passwort/csv/news.xml");
		$count=sizeof($xml->news);
		?>
        <h1>News</h1>
        <?php 
		for($i=0; $i<$count; $i++){
			?>
           <a href="#" onClick="window.open('doc/admin/inc/passwort/orte/orte.php?id=<?php echo $i+1; ?>','Standorte','status=no,resizable=no,scrollbars=yes,menubar=no,location=no,toolbar=no,directories=no,width=600,height=600')">
                <?php echo $xml->news[$i]->title ?></a>
                <p><?php echo $xml->news[$i]->teaser ?></p>
            <?php
        } ?>
	<?php	
	}
	?></div> 
    <!-- end #sidebar1 --></div>
  <div id="mainContent">
    <div id="contentContainer">
      <h1>blbla</h1>
    blbla.<br/><br/>
    <p><img src="http://xhtmlforum.de/images/aufzaehlung_kl.gif" alt="" width="32" height="13" /><span class="bold">In-House-Sprachunterricht</span></p>
    <p><img src="http://xhtmlforum.de/images/aufzaehlung_kl.gif" alt="" width="32" height="13" /><span class="bold">In-House-Sprachunterricht</span></p>
    <p><img src="http://xhtmlforum.de/images/aufzaehlung_kl.gif" alt="" width="32" height="13" /><span class="bold">In-House-Sprachunterricht</span></p>
    </div>
    <div id="articleListContainer">
    <ul id="articleList" class="articleList">
		<li id="article1"><img src="http://xhtmlforum.de/images/aufzaehlung_gr.gif" alt="" width="118" height="39" class="bildlinks"/>
	    <p>This is article number one</p></li>
        <li id="article1"><img src="http://xhtmlforum.de/images/aufzaehlung_gr.gif" alt="" width="118" height="39" class="bildlinks"/>
        <p>This is article number one</p></li>
      </ul>
    </div>
  <!-- end #mainContent --></div>
<br class="clearfloat" />
      <div id="footer">
        <p>Fußzeile</p>
      <!-- end #footer --></div>
<!-- end #container --></div>
    </body>
</html>
Code:
@charset "utf-8";
body  {
    	font: 100% Arial, Verdana, Helvetica, sans-serif;
    	margin: 0; /* Es empfiehlt sich, margin (Rand) und padding (Auffüllung) des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen Rechnung zu tragen. */
    	padding: 0;
    	text-align: center; /* Hierdurch wird der Container in IE 5*-Browsern zentriert. Dem Text wird dann im #container-Selektor die Standardausrichtung left (links) zugewiesen. */
    	color: #919191;
		background-image:url(../images/content_bg.gif);
    }
    .twoColFixRtHdr #container { 
    	width: 1024px;  /* Mit einer Breite, die 20 Pixel unter der vollen Breite von 800 Pixel liegt, können Sie dem Browser-Chrome Rechnung tragen und gleichzeitig eine horizontale Bildlaufleiste vermeiden. */
    	margin: 0 auto; /* Durch automatische Ränder (in Verbindung mit einer Breite) wird die Seite zentriert. */
    	text-align: left; /* Hierdurch wird die Einstellung text-align: center im Body-Element überschrieben. */
    } 
    .twoColFixRtHdr #header { 
    	margin: 0px;
		padding: 94px 48px 37px 79px;  /* 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. */
		height:193px;
		width:897px;
		background-image:url(../images/top_bg.gif);
		background-repeat:no-repeat;
	} 
    .twoColFixRtHdr #sidebar1 {
		margin: 0;
		float: right; /* Da es sich hier um ein floatendes Element handelt, muss eine Breite angegeben werden. */
		width: 200px; /* Die tatsächliche Breite dieses div umfasst in standardgerechten Browsern bzw. im Standardmodus von Internet Explorer außer der Breite auch die Auffüllung und den Rahmen. */
		padding: 0px 144px 12px 0px;
		height: 708px;
		background-image:url(../images/sidebar1_bg.gif);
		background-repeat:no-repeat;
    }
	.twoColFixRtHdr #sidebar1Orte {
    	margin: 0px;
		width: 170px; /* Die tatsächliche Breite dieses div umfasst in standardgerechten Browsern bzw. im Standardmodus von Internet Explorer außer der Breite auch die Auffüllung und den Rahmen. */
    	padding: 20px 30px 0px 0px;
		height: 303px;
		background-image:url(../images/standorte_bg.gif);
		background-repeat:no-repeat;
		text-align:right;
		border-bottom:1px solid #c8c8c8;
		color:#919191;
		font-size:.7em;
    }
	.twoColFixRtHdr #sidebar1Orte normal {
		color:#919191;
		font-size:.7em;
    }
	.twoColFixRtHdr #sidebar1Orte h1 {
		color:#666666;
		font-size:1.2em;
		font-weight:bold;
    }
	.twoColFixRtHdr #sidebar1Orte a {
		color:#aeaeae;
		font-size:1em;
		font-weight:bold;
		text-decoration:none;
    }
	.twoColFixRtHdr #sidebar1Orte p {
    	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. */
    	padding: 6px 0; /* Durch die Verwendung der Auffüllung bei diesem Element entsteht genau wie bei einem Rand ein Leerraum, aber ohne die potenziellen Abstandsprobleme. */
    }
	.twoColFixRtHdr #sidebar1News {
    	margin: 0px 0px 0px 0px;
		width: 170px; /* Die tatsächliche Breite dieses div umfasst in standardgerechten Browsern bzw. im Standardmodus von Internet Explorer außer der Breite auch die Auffüllung und den Rahmen. */
    	padding: 59px 30px 0px 0px;
		height: 287px;
		background-image:url(../images/news_bg.gif);
		background-repeat:no-repeat;
		text-align:right;
		color:#919191;
		font-size:.7em;
    }
	.twoColFixRtHdr #sidebar1News normal {
		color:#919191;
		font-size:.7em;
    }
	.twoColFixRtHdr #sidebar1News h1 {
		color:#333333;
		font-size:1.2em;
		font-weight:bold;
    }
	.twoColFixRtHdr #sidebar1News a {
		color:#ed811d;
		font-size:1em;
		font-weight:bold;
		text-decoration:none;
    }
	.twoColFixRtHdr #sidebar1News p {
    	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. */
    	padding: 6px 0; /* Durch die Verwendung der Auffüllung bei diesem Element entsteht genau wie bei einem Rand ein Leerraum, aber ohne die potenziellen Abstandsprobleme. */
    }
    .twoColFixRtHdr #mainContent {
	margin: 0p; /* Durch den rechten Rand dieses div-Elements entsteht die Spalte am rechten Seitenrand. Der Spaltenbereich bleibt unabhängig von der Inhaltsmenge des sidebar1-div immer gleich. Sie können diesen Rand entfernen, falls der Text des #mainContent-div den Bereich von #sidebar1 füllen soll, wenn der Inhalt in #sidebar1 endet. */
	padding: 0px 0px 12px 79px; /* padding bezeichnet den Innenabstand und margin (Rand) den Außenabstand der div -Box. */
	height:708px;
	width:593px;
	background-image:url(../images/mainContent_bg.gif);
    }
	.twoColFixRtHdr #contentContainer {
	margin: 0px 0px 0px 0px;
	/* Durch den rechten Rand dieses div-Elements entsteht die Spalte am rechten Seitenrand. Der Spaltenbereich bleibt unabhängig von der Inhaltsmenge des sidebar1-div immer gleich. Sie können diesen Rand entfernen, falls der Text des #mainContent-div den Bereich von #sidebar1 füllen soll, wenn der Inhalt in #sidebar1 endet. */
	padding: 20px 0px 0px 203px; /* padding (Auffüllung) bezeichnet den Innenabstand und margin (Rand) den Außenabstand der div -Box. */
	height:223px;
	width:390px;
	background-image:url(../images/contentContainer_bg.gif);
	background-repeat:no-repeat;
	color:#919191;
	font-size:.7em;
    }
	.twoColFixRtHdr #contentContainer h1 {
	font-size:1.2em;
	color:#666666;
    }
	.twoColFixRtHdr #contentContainer .bold {
	font-size:1.2em;
	color:#666666;
	font-weight:bold;
    }
	.twoColFixRtHdr #contentMain {
	margin: 0px 0px 0px 0px;
	/* Durch den rechten Rand dieses div-Elements entsteht die Spalte am rechten Seitenrand. Der Spaltenbereich bleibt unabhängig von der Inhaltsmenge des sidebar1-div immer gleich. Sie können diesen Rand entfernen, falls der Text des #mainContent-div den Bereich von #sidebar1 füllen soll, wenn der Inhalt in #sidebar1 endet. */
	padding: 59px 0px 0px 46px; /* padding (Auffüllung) bezeichnet den Innenabstand und margin (Rand) den Außenabstand der div -Box. */
	width:555px;
	height:385px;
	background-image:url(../images/ContentMain_bg.gif);
	background-repeat:no-repeat;
	color:#919191;
	font-size:.7em;
    }  
    .twoColFixRtHdr #footer { 
    	padding: 0 10px 0 20px; /* Diese Auffüllung entspricht der linksbündigen Ausrichtung der Elemente in den divs, die darunter erscheinen. */
    	background:#DDDDDD; 
    } 
    .twoColFixRtHdr #footer p {
    	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. */
    	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. */
    }
    .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. */
    	float: right;
    	margin-left: 8px;
    }
    .fltlft { /* Mit dieser Klasse können Sie ein Element auf der Seite nach links fließen lassen. */
    	float: left;
    	margin-right: 8px;
    }
    .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. */
    	clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }
	.twoColFixRtHdr #articleListContainer {
	float: left; /* Da es sich hier um ein floatendes Element handelt, muss eine Breite angegeben werden. */
	width: 519px; /* Die tatsächliche Breite dieses div umfasst in standardgerechten Browsern bzw. im Standardmodus von Internet Explorer außer der Breite auch die Auffüllung und den Rahmen. */
	padding: 0px 0px 9px 32px;
	height: 78px;
    }
	.articleList{
	margin:0px;
	padding:0px;
}
	.articleList li{	/* General layout article in list */
	list-style-type:none;
	border-bottom:1px solid #cccccc;
	height:39px;
	cursor:pointer;
	color:#ed811d;
	font-weight:bold;
}
.articleList p {
    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. */
    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. */
    }
.articleList li.articleMouseOver{	/* Mouse over article in list - layout */
	border:1px solid #000;
	color:#000;
}
.articleList li.articleClick{	/* Active article in list - layout */
	border:1px solid #000;
	color:#000;
	background-color:#317082;
	color:#FFF;
}
	.bildlinks{
    float: left;
    margin: 0px 0px 0px 0;
    padding: 0px;
}

    .bildrechts{
    float: right;
    margin: 0 0 10px 10px;
	padding: 0px;
}

Geändert von paramit (03.07.2008 um 00:43 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.07.2008, 11:18
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 09.07.2004
Beiträge: 1.121
cgdesign befindet sich auf einem aufstrebenden Ast
Standard

Kannst du nicht den fertigen HTML-Code posten? Wir können hier mit den PHP-Zeugs nichts anfangen.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.07.2008, 13:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.07.2008
Beiträge: 2
paramit befindet sich auf einem aufstrebenden Ast
Standard

Hey,

der php- Kramm kann einfach ignoriert werden, der tut nix was mit dem Porb zu tun hat.
Hab das Problem aber eben lösen können. Finde den Hacken für "beantwortet leider nicht".
Der rechte Layer "sidebar1" hat zicken gemacht und den habe ich nun entfernt. Jetzt sieht alles im IE so aus wie es aussehen soll

Ich danke dir trotzdem für deine Hilfe.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

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
2 Spalten Layout INKL. 1 Spalten Layout miedsegadse CSS 20 14.04.2011 00:02
Layout: 2 Spalten gleich langer Höhe Boof CSS 1 05.03.2010 10:50
3 Spalten fixed width css layout sharepointkb CSS 9 28.02.2010 20:00
Layout mit bis zu 7 Spalten (DIV) michael-r CSS 3 23.06.2009 18:26
3 Spalten Layout, mal anders Sushimeister CSS 2 05.03.2007 11:15


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:48 Uhr.