✔ 3 Spalten - Mitte mit festgelegt, aussen flexibel

Status
Nicht offen für weitere Antworten.
exitboy

exitboy

Erfahrenes Mitglied
Wie setze ich das um:

Eine 3 Spalten Layout, wo links (Spalte1) und rechts (Spalte3) sich der Browserauflösung anpassen und Spalte 2 in der Mitte 400px breit ist.

So ne Lösung wie bei Frames mit * gibt es ja hier nicht ...
 
Hier ein Lösungsvorschlag:

HTML: 
<!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">
<title></title>

<style type="text/css">
<!--
body
{
padding: 0;
margin: 0;
}

#wrapper
{
width: 100%;
margin: 10px auto;
padding: 0;
}

#links
{
width: 49%; /* kleiner als 50% */
float: left;
background: #cfcfcf;
}

#inhalt
{
position: absolute;
left: 50%;
width: 400px;
margin-left: -200px; /* neg. Hälfte von width:400px = horizontal zentriertes DIV */
background: #809bbe;
}

#rechts
{
width: 49%; /* kleiner als 50% */
float: right;
background: #cfcfcf;
text-align: right;
}
-->
</style>

</head>
<body>

<div id="wrapper">

     <div id="links">links</div>

     <div id="inhalt">inhalt</div>

     <div id="rechts">rechts</div>

</div>

</body>
</html>
  • Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 8.50
 
Super, kannst Du mir vielleicht noch erklären,

1. Warum du
"left:50%"
in der Mitte festlegst?

2. Wie und warum Du auf folgende Zeile kommst:

"margin-left: -200px; /* neg. Hälfte von width:400px = horizontal zentriertes DIV */"

3. weshalb links und rechts die Seite 49% beträgt und nicht 50% ... oder ist das nur, damit da ein gewisser restabstand für die mitte bereit steht ...
 
Mit left:50% sitzt der linke Elementrand in der Fenstermitte (das Element somit außermittig) und wird durch margin-left:-200px zentriert.

Mit width:49% soll ein Sicherheitsabstand zwischen den beiden äußeren DIVs eingehalten werden, wenn das Browserfenster minimiert wird.
 
wie bekomme ich jetzt in den Inhalts DIV weiter DIVs rein, z.B. Grafiken und Texte ...
Inhalts DIV nehme ich jetzt als Grundgerüst.

Jetzt erzeuge ich in diesem INHALT ein neuen DIV Titeltext mit wo eine Textzug in Schriftgröße 18 angezeigt werden soll.

Sobald ich dies erzeuge, zerreißt mir der Text das ganze Layout oder er wird garnicht angezeigt, hab das mal mit Float und ohne versucht, sogar mit Pos. Absolut ... aber selbst hier ist das ja teilweise reiner Horror, wenn ich mir da größere Seiten nur anschaue ...

Habt Ihr hier einen LösungsVorschlag - TAUSEND DANK - nochmal bis hierhin @all
 
Sollte so funktionieren:

HTML: 
<!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">
<title></title>

<style type="text/css">
<!--
body
{
padding: 0;
margin: 0;
}

#wrapper
{
width: 100%;
margin: 10px auto;
padding: 0;
}

#links
{
width: 49%; /* kleiner als 50% */
float: left;
background: #cfcfcf;
}

#inhalt
{
position: absolute;
left: 50%;
width: 400px;
margin-left: -200px; /* neg. Hälfte von width:400px = horizontal zentriertes DIV */
background: #809bbe;
}

#inhalt .texttitel
{
font-size: 18px;
}

#rechts
{
width: 49%; /* kleiner als 50% */
float: right;
background: #cfcfcf;
text-align: right;
}
-->
</style>

</head>
<body>

<div id="wrapper">

     <div id="links">links</div>

     <div id="inhalt">
          <div class="texttitel">inhalt</div>
     </div>

     <div id="rechts">rechts</div>

</div>

</body>
</html>
 
jetzt hab ich das auch mal verstanden mit den classen und IDs :-)


nur warum geht das nicht direkt:

.text sondern muss extra über #inhalt .text aufgeführt werden?
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück