mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 09:38 Benutzername: Passwort: Auto-Login

Thema: 3-spaltiges Layout: variabel - fix - variabel vom 22.02.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> 3-spaltiges Layout: variabel - fix - variabel
Seite: Zurück  1, 2
Autor Nachricht
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Fr 22.02.2008 21:40
Titel

Antworten mit Zitat Zum Seitenanfang

Wie gesagt, ohne Footer ist es leicht - hier eine Variante mit dem position-absolute-Holzhammer *zwinker*

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Test</title>
<style type="text/css">

* {
   margin: 0;
   padding: 0;
   }

#main {
   width: 500px;
   position: absolute;
   left: 50%;
   top: 0;
   z-index: 2;
   background: red;
   margin-left: -250px;
   }

#links,
#rechts {
   width: 50%;
   position: absolute;
   top: 0;
   z-index: 1;
   }

#links {
   left: 0;
   background: yellow;
   }

#rechts {
   right: 0;
   background: green;
   }

#links-inhalt {
   margin-right: 250px;
   }

#rechts-inhalt {
   margin-left: 250px;
   }

</style>
</head>

<body>

<div id="main">main</div>

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

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

</body>

</html>


Zuletzt bearbeitet von heiko_rs am Fr 22.02.2008 21:40, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
nevermind
Threadersteller

Dabei seit: 17.04.2002
Ort: -
Alter: -
Geschlecht: -
Verfasst Fr 22.02.2008 22:23
Titel

Antworten mit Zitat Zum Seitenanfang

1000 dank! Grins
  View user's profile Private Nachricht senden
Anzeige
Anzeige
rob

Dabei seit: 11.12.2003
Ort: ~/
Alter: 46
Geschlecht: Männlich
Verfasst Sa 23.02.2008 02:24
Titel

Antworten mit Zitat Zum Seitenanfang

Professionelle Websites von Stefan Münz. 1136 Seiten, knapp 60 Euro als gebundenes Buch oder als kostenloser Download im PDF-Format.

Ich hab das PDF jetzt gerade nicht vorliegen, aber dort gibt es u.a. ein Kapitel über so ein Drei-Spalten-Layout mit Beispielen und dem Code.
  View user's profile Private Nachricht senden
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Sa 23.02.2008 09:00
Titel

Antworten mit Zitat Zum Seitenanfang

Damit kein falscher Eindruck entsteht: Ich habe den Code nicht aus diesem Buch abgeschrieben (habe nie dort reingeschaut), sondern mir spontan aus den Fingern gesogen. Übrigens: Um diese Variante auch für schmale Viewports tauglich zu machen, würde ich noch dem body min-width geben. Das klappt auch JS-frei im IE < 7 (je nach Markup mit nur einem bzw. zwei zusätzlichen divs): http://www.cssplay.co.uk/boxes/minwidth.html

Interessant (und kompliziert) wird's natürlich erst, wenn es einen Footer gibt, denn dann geht es nicht mehr so simpel mit dem pos.-abs.-Holzhammer, sondern muss per float gelöst werden. Dazu habe ich mir ebenfalls mal eine Variante überlegt, die im IE ab 5.0, Gecko ab NN 7 und Opera ab 7 funktioniert. Aber Achtung: Der IE möchte statt width: 50%; z.B. 49.9% (am Besten per Conditional Comment), da er Prozent-Werte im Zweifelsfalle leider aufrundet, so dass die beiden Floats bei genau 50% bei manchen Viewport-Breiten nicht nebeneinander passen.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Test</title>
<style type="text/css">

* {
   margin: 0;
   padding: 0;
   }

body {
   min-width: 750px;
   }

#main {
   float: left;
   width: 500px;
   height: 200px;
   background: red;
   position: relative;
   left: 50%;
   margin-left: -250px;
   }

#spalten {
   float: right;
   width: 100%;
   margin-left: -500px;
   }

#links,
#rechts {
   width: 50%;
   }

#links {
   float: left;
   }

#rechts {
   float: right;
   }

#links-inhalt {
   background: yellow;
   margin-right: 250px;
   }

#rechts-inhalt {
   background: green;
   margin-left: 250px;
   }

#footer {
   background: silver;
   clear: both;
   }

</style>
</head>

<body>

<div id="main">main</div>

<div id="spalten">
   <div id="links">
      <div id="links-inhalt">links</div>
   </div>

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

<div id="footer">footer</div>

</body>

</html>
  View user's profile Private Nachricht senden
 
Ähnliche Themen div-Layout variabel gestalten?
3 Spalten Layout - aussen fixe Breite, mitte variabel
[php] variabel IN variabel
variabel von swf zu swf
db >> tabelle >> variabel ...
Div in div, höhe variabel?
Neues Thema eröffnen   Neue Antwort erstellen Seite: Zurück  1, 2
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.