zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 3 Spaltiges Layout mit CSS - Fluid Fixed Fluid

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.12.2011, 12:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.12.2011
Beiträge: 1
chuha befindet sich auf einem aufstrebenden Ast
Standard 3 Spaltiges Layout mit CSS - Fluid Fixed Fluid

Hallo ihr Lieben,
ich bin gerade am verzweifeln, weil ich schon seit mehreren Tagen versuche, ein Layout mit CSS zu zaubern.
Egal was ich versuche, es klappt einfach nicht. Über Google bin ich schon auf viel Denkanstöße und Beispielen gestoßen, jedoch hat keins so funktioniert, wie es soll :/
Vielleicht könnt ihr mir da weiterhelfen oder einen entsprechenden Tipp geben.

Das Layout sollte wie folgt aufgebaut sein.



Wie im Bild zu sehen, gibt es 3 Spalten. Die mittlere Spalte ist zentriert auf eine bestimmte Größe fixiert (z.b.1000px)
Die linke und rechte Spalte sind jeweils variabel und passen sich an das Fenster an und verschwinden ggf. bei kleinerem Fenster.
Alle Spalten sollen auf 100% Höhe gesetzt werden. Grund dafür ist, dass ich Top:0 sowie Bottom:0 Objekte setzen möchte.
Ganz wichtig ist auch, dass die linke Spalte sich rechts an der mittleren Spalte orientiert (rechtsbündig soll dann ein Background gesetzt werden, nahtlos an der mittleren Spalte).

Mein Codebeispiel, welches ich hier euch zeige, ist schon ziemlich nah dran.
Jedoch, wenn ich das Fenster in der Breite kleiner mache, als die mittlere Spalte groß ist, ist im FF der Text der rechten Spalte nicht mehr linksbündig sondern rechtsbündig. Im IE ist sind in diesem Fall die linke und die rechte Spalte einfach unter der mittleren Spalte gerutscht.

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>Three Column Layout</title>
 
<style type="text/css">
html,body{
    height:100%;
    background:#BBB;
}
body {
	margin: 0px;
	padding: 0px; 
	text-align: center;
}
 
#wrapper {
	width: 100%;
	height: 100%; 
}                
#maincol {
	width: 1000px;
	margin: 0 auto;
	text-align: left;
	background: #888;
	min-height: 100%;
  position:relative;
  float:left;
}
#left {
  width:50%;
  float: left;
  min-height:100%;
  margin-right:-500px;    
  background: #fff;
}
#right {
  width: 50%;
  float: right;
  min-height:100%;
  margin-left:-501px; 
  background: #aaa;
  text-align:left;
} 
</style>
</head>
 
<body>
 
<div id="wrapper">
  	<div id="left">
      <div style="text-align:right;margin-right:500px;">2</div>
    </div>
  	<div id="maincol">123</div>
  	<div id="right">
      <div style="text-align:left;margin-left:500px;">2</div>
    </div>
  </div>
</div>

</body>
</html>
Ich hoffe ihr seid vielleicht schlauer als ich

LG
Daniel
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.12.2011, 17:39
Benutzer
neuer user
 
Registriert seit: 27.05.2011
Beiträge: 54
paulepulmo befindet sich auf einem aufstrebenden Ast
Standard

Mindestbreite min-width: angeben ?

Hier bleibt der Text links
http://www.google.com/search?client=...utf-8&oe=utf-8

Geändert von paulepulmo (22.12.2011 um 17:45 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 23.12.2011, 11:49
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.990
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Das geht nicht, dafür ist HTML nicht gemacht.

Es gibt unterschiedlich breite Bildschirme und du kannst nur über JS rausfinden, wie breit diese sind. 70% der Bildschrime sind übrigens gerade mal 1024 Pixel breit.
So wie du dein CSS im Moment aufgebaut hast hättest du dann (abzüglich Browserränder und Scrollbar) in einem Browser mit Vollbild knapp 2000 Pixel Breite. Prozentangaben orientieren sich nämlich immer an der Breite des Elternelementes.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #4 (permalink)  
Alt 23.12.2011, 12:37
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Welchen Inhalt sollen die beiden fluiden Spalten bekommen?
Wenn die Antwort lautet "ein Hintergrundbild": Dafür brauchst du keine "Spalten". Das ist Tabellendenken.
Ein sehr breites Hintergrundbild im body reicht.
Mit Zitat antworten
Antwort

Stichwörter
3-column, css, fixed, fluid layout, layout

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
3 Spalten fixed width css layout sharepointkb CSS 9 28.02.2010 20:00
Fluid XHTML / CSS Layout Innocentus (X)HTML 1 02.12.2009 16:25
CSS Layout Komplex yanu CSS 0 01.04.2009 20:27
CSS Layout für Fortgeschrittene StefanE CSS 2 15.01.2009 07:39
includes bei css layout dan CSS 2 10.03.2004 18:21


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:00 Uhr.