✔ dreispaltiges Layout + Header

Status
Nicht offen für weitere Antworten.
W

whiterussian

Erfahrenes Mitglied
Hallo zusammen!

Ich hab ein Problem mit meinem Layout. (siehe angehängte Grafik)

Nach unzähligen Versuchen am Wochenende wende ich mich nun an euch.
Ich habs auch schon mit diesem Tutorial von Maik versucht, doch es will nicht klappen.
Ok, der Header funktioniert, hab ich einfach vor den "wrapper"gesetzt.

Damit der Inhalt eine variable Breite besitzt, hab ich den wrapper auf width: 100% gesetzt
Leider schaff ich es nicht, dass die rechte Spalte auch immer rechts bleibt und nicht beim Verkleinern des Browserfensters unter die beiden anderen Spalten rutscht.

Es sieht einfach echt besch-eiden aus so. Vielleicht kann ja mal wer drüberschauen.

PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="michaelsinterface">
<title>Zentriertes Layout mit drei Spalten</title>

<style type="text/css">
<!--
* { /* Mit Universalselektor die Polsterungseigenschaften aller (Block-)Elemente auf null setzen */
margin: 0;
padding: 0;
}

body {
text-align: center; /* Für IE 5.01 & 5.5, um die Box #wrapper horizontal zu zentrieren */
}

div {
text-align: left; /* text-align:center wieder aufheben, damit DIV-Inhalte linksbündig ausgerichtet sind */
}

/* DIV-Boxen */

#header {
	height: 146px;
	margin: 0 auto; 
	background-image: url(_img/logo.jpg);
	background-repeat: no-repeat;
}

div#wrapper {
width: 100%;
margin: 20px auto;
border: 1px  solid #626262;
border-left: 0;
border-right: 0;
background: url(3cols_border.png) repeat-y;
}

div#leftCol {
float: left;
width: 200px;
}

div#rightCol {
float: right;
width: 280px;
}

div#centerCol {
margin: 0 200px;
text-align: center;
min-width: 450px;
}

/* clearfix zum Aufheben der Floatumgebung */

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/* Listen */

ul {
list-style-type: square;
list-style-position: inside;
margin-left: 10px;
}

/* Überschrift, Absatz */

h1, p {
margin-left: 10px;
}
-->
</style>

</head>
<body>
<div id="header"></div>
<div id="wrapper" class="clearfix">
     <div id="leftCol">
          <h1>leftCol</h1>
          <ul>
              <li>item 1</li>
              <li>item 2</li>
              <li>item 3</li>
              <li>item 4</li>
          </ul>
     </div>
     <div id="rightCol">
          <h1>rightCol</h1>
          <ul>
              <li>item 1</li>
              <li>item 2</li>
              <li>item 3</li>
              <li>item 4</li>
              <li>item 5</li>
              <li>item 6</li>
          </ul>
     </div>
  <div id="centerCol">
          <h1>centerCol</h1>
          <p>dummy text</p>
          <p>dummy text</p>
       <img src="_img/austria.gif" alt="austria map" width="439" height="232">    </div>
</div>

</body>
</html>

Mfg

whiterussian
 

Anhänge

  • layout.jpg
    layout.jpg
    11,8 KB · Aufrufe: 41
Hi,

den Header kannst du auch direkt im DIV #wrapper mit aufnehmen und das Umbrechen der rechten Spalte beim Verkleinern des Browserfensters lässt sich mit einer Mindestbreite min-width für das DIV #wrapper abstellen.
 
Danke für den Tipp!

Habs gleich mit der 1. Methode für Quirks mode probiert.
Funkt perfekt.

PHP: 
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="author" content="michaelsinterface">
<title>Zentriertes Layout mit drei Spalten</title>

<style type="text/css">

* { /* Mit Universalselektor die Polsterungseigenschaften aller (Block-)Elemente auf null setzen */
margin: 0;
padding: 0;
}

body {
text-align: center; /* Für IE 5.01 & 5.5, um die Box #wrapper horizontal zu zentrieren */
}

div {
text-align: left; /* text-align:center wieder aufheben, damit DIV-Inhalte linksbündig ausgerichtet sind */
}

/* DIV-Boxen */

#header {
	height: 146px;
	margin: 0 auto; 
	background-image: url(_img/logo.jpg);
	background-repeat: no-repeat;
}

div#wrapper {
width: 100%;
margin: 0 auto;
border-left: 0;
border-right: 0;
background: url(3cols_border.png) repeat-y;
min-width: 950px;
}

.holder {display:block; color:#000;}

/* method 1 a bodge for IE5.5 and IE6 browsers */
* html div#wrapper {border-right:950px solid #fff; }
* html .holder {display:inline-block; position:relative;  margin-right:-950px;}

div#leftCol {
float: left;
width: 200px;
}

div#rightCol {
float: right;
width: 280px;
}

div#centerCol {
margin: 0 200px;
text-align: center;
min-width: 450px;
}

/* clearfix zum Aufheben der Floatumgebung */

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/* Listen */

ul {
list-style-type: square;
list-style-position: inside;
margin-left: 10px;
}

/* Überschrift, Absatz */

h1, p {
margin-left: 10px;
}
/* generelle styles */
.menu {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	width:106px;
	height:280px;

	left: 0;
	top: 0px !important;
	top: 146px;
	z-index: 18;
	font-size:11px;
	margin:0 0 0 10px;
}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000; width:104px; height:20px; text-align:left; border:1px solid #fff; border-width:1px 1px 0 0; background:#ccc; line-height:19px; font-size:11px;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}

/* für nicht IE browsers */
.menu ul li:hover a {color:#fff; background:#999;}
.menu ul li:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}
.menu ul li:hover ul li a.hide {background:#852114; color:#fff;}
.menu ul li:hover ul li:hover a.hide {width:150px;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#999; color:#fff; width:150px;}
.menu ul li:hover ul li a:hover {background:#852114; color:#fff;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:151px; top:0; color:#000;}
.menu ul li:hover ul li:hover ul li a {display:block; width:200px; background:#852114; color:#fff;}
.menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}

.main {
	align: right;
}

</style>

</head>
<body>

<div id="wrapper" class="clearfix"><div class="holder">
<div id="header"></div>
     <div id="leftCol">
<h1>leftCol</h1>
          <ul>
              <li>item 1</li>
              <li>item 2</li>
              <li>item 3</li>
              <li>item 4</li>
              <li>item 5</li>
              <li>item 6</li>
          </ul>

     </div>
     <div id="rightCol">
          <h1>rightCol</h1>
          <ul>
              <li>item 1</li>
              <li>item 2</li>
              <li>item 3</li>
              <li>item 4</li>
              <li>item 5</li>
              <li>item 6</li>
          </ul>
     </div>
  <div id="centerCol">
          <h1>centerCol</h1>
          <p>dummy text</p>
          <p>dummy text</p>
       <img src="_img/austria.gif" alt="austria map" width="439" height="232">    </div>
</div></div>

</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück