✔ Divs anordnen / Abstände etc.

D

dobber812

Mitglied
Hy,

ich hätte da mal wieder eine Anfängerfrage :-(

Versuche 4 divs anzuordnen aber der FireFox verschiebt mir den main-content unter den header(logo)...

Ist bestimmt nur eine Kleinigkeit aber ich verzweifel bald drann :-(

Code: 
@charset "utf-8";
    body  {
    	font: 100% Verdana, Arial, Helvetica, sans-serif;
    	background: #ffffff;
    	margin: 0px; /* 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: #000000;
    }
    .twoColFixLtHdr #container {
	width: 990px;  /* 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. */
	background: #FFFFFF;
	text-align: left; /* Hierdurch wird die Einstellung text-align: center im Body-Element überschrieben. */
	margin-top: 15px;
	margin-right: auto;
	margin-left: auto;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
    } 
    .twoColFixLtHdr #header {
	float: left;
	width: 250px;
	height: 132px;
	background-color: #8d9caf;
	border: 1px solid #cccccc;
	margin-bottom: 10px;
		
    } 
    .twoColFixLtHdr #header h1 {

	}
	.twoColFixLtHdr #header_logo {
	background-color: #CCCCCC;
	width: 728px;
	height: 132px;
	border: 1px solid #cccccc;
	margin-bottom: 10px;
	float: right;
	
}

    
    .twoColFixLtHdr #sidebar1 {
	width: 200px
	background-color: #E1E1E1;
	border: 1px solid #cccccc;
	clip: rect(auto,auto,auto,auto);
	width: 220px;
	padding-top: 15px;
	padding-right: 10px;
	padding-bottom: 15px;
	padding-left: 20px;
	float: left;
}
		
    .twoColFixLtHdr #mainContent {
	background-color: #eeeeee;
	background-color: #ECECEC;
	margin-left: 260px;
	width: 708px;
	padding-left: 10px;
	height: 200px;
	padding-top: 10px;
	
} 

    .twoColFixLtHdr #footer {
	padding: 0 10px 0 20px;
    } 
    .twoColFixLtHdr #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: left;
    	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:left;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }
 
Zuletzt bearbeitet:
Hi,

könntest du hierzu bitte auch den HTML-Code nachreichen?

Oder erwartest du jetzt, dass wir uns das Markup aus den eigenen Rippen schneiden, um es im Browser betrachten zu können?

mfg Maik
 
ja natürlich, sorry :(

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" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Unbenanntes Dokument</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css"> 
    <!-- 
    --> 
    </style>
<link href="../screen.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. */
    .twoColFixLtHdr #sidebar1 { width: 230px; }
    </style>
    <![endif]--><!--[if IE]>
    <style type="text/css"> 
    /* Fügen Sie CSS-Korrekturen für alle IE-Versionen in diesen bedingten Kommentar ein. */
    .twoColFixLtHdr #sidebar1 { padding-top: 30px; }
    .twoColFixLtHdr #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="twoColFixLtHdr">

    <div id="container">
      <div id="header">
        
      <!-- end #header --></div>
      
      <div id="header_logo"></div>
            <div id="sidebar1">
        <p>hjg</p>
        <p>kjm,n</p>
     </div>

      <div id="mainContent">
                <p>ghjgj</p>
                <p>&nbsp;</p>
      <!-- end #mainContent --></div>
   	  <!-- Dieses clear-Element sollte direkt auf das #mainContent-div folgen, um das #container-div anzuweisen, alle untergeordneten Floats aufzunehmen. --><br class="clearfloat" />
      <div id="footer">
        <p>&nbsp;</p>
      <!-- end #footer --></div>
    <!-- end #container --></div>
    </body>
</html>
 
Zuletzt bearbeitet:
Formatier einfach den Block analog zu #header_logo:

Code: 
    .twoColFixLtHdr #mainContent {
        background-color: #eeeeee;
        background-color: #ECECEC;
        /*margin-left: 260px;*/
        width: 720px;
        padding-left: 10px;
        height: 200px;
        padding-top: 10px;
        float: right;
}


mfg Maik
 
Perfekt, dank dir :-)

In der Entwurfsansicht in dem Editor nimmt er das Float nicht bzw. schiebt es unter die Sidebar. Das irritierte mich...

Gruß
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück