| Autor |
Nachricht |
danielectric
Threadersteller
Dabei seit: 12.12.2007
Ort: München
Alter: 42
Geschlecht: 
|
Verfasst Mi 12.12.2007 17:25
Titel css 3 spalten layout mit fester mitte - bitte um hilfe! |
  |
|
ich weiß, es ist bestimmt schon hunderttausend mal im www behandelt worden und sicher gibt es auch irgendwo eine geeignete vorlage dafür aber für meinen speziellen anwendungsfall habe ich leider während wochenlanger recherche rein gar nichts gefunden.
also folgendes möchte ich machen: meine website soll in 3 bereiche aufgeteilt werden, von denen die beiden äußeren eine variable breite haben. die mitte soll den rest dazu ausmachen, mit fester breite. außerdem sollen alle bereiche einen rahmen von 2px und etwa 5 px außenabstand zueinander haben.
weiterhin sollen oben und unten noch zwei bereiche mit etwa 15px höhe und voller breite dazu kommen, damit das ganze am ende wie ein filmstreifen aussieht!
damit ihr euch das etwa vorstellen könnt, hier mal der komplette quelltext meiner "testseite" dazu:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Testseite</title>
<style type="text/css">
body {margin:0;
padding:0;
background:black;}
div {border:2px solid white;}
body {
margin:0;
padding:0;}
#links {
float: left;
width: 20%;
height: 400px;}
#rechts {
float: right;
width: 20%;
height: 400px;}
#inhalt {
float: left;
width: 700px;
height:400px;
margin:0 5px;}
p.back {
clear: both;
text-align: center;}
</style>
</head>
<body>
<div id="links">...</div>
<div id="inhalt">...</div>
<div id="rechts">...</div>
<p class="back">...</p>
</body>
</html>
das problem hierbei ist, wie man sieht, dass die 3 bereiche umbrechen, wenn man das browserfenster kleinzieht. wie kann ich das verhindern? wie erreiche ich, dass die beiden äußeren bereiche sich variabel in ihrer breite verändern und die mitte fix bleibt?
ich wäre um kompetente hilfe dankbar, bin nämlich ein ziemlicher neuling in diesem bereich 
liebe grüße
Daniel Weber
|
|
| |
   |
 |
emceechen
Dabei seit: 09.09.2005
Ort: Bad Kreuznach
Alter: 41
Geschlecht:
|
Verfasst Mi 12.12.2007 17:42
Titel
|
|
|
|
Den Doctype würde ich schon mal auf XHTML wechseln, mit vielen CSS Deklarationen hast du Probleme wenn du HMTL 4.01 verwendest...
|
|
| |
|
|
|
Anzeige
|
|
|
danielectric
Threadersteller
Dabei seit: 12.12.2007
Ort: München
Alter: 42
Geschlecht:
|
Verfasst Mi 12.12.2007 17:47
Titel
|
|
|
|
gut... das ist ja schonmal ein anfang... danke. und dann?
|
|
| |
|
|
emceechen
Dabei seit: 09.09.2005
Ort: Bad Kreuznach
Alter: 41
Geschlecht:
|
Verfasst Mi 12.12.2007 17:56
Titel
|
|
|
Spricht was dagegen den beiden Containern an den Seiten eine absolute Breite zu geben? Das macht's in diesem Fall a weng einfacher, glaube ich:
| 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=ISO-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
body {margin:0px; padding:0px; background:black;}
div {border:2px solid white;}
#wrapper {margin:0px auto; border:0px; width:1122px;}
#links {float:left; width:200px; height:400px;}
#rechts {float:right; width:200px; height:400px;}
#inhalt {width:700px; height:400px; margin:0 5px 0 209px;}
p.back {clear: both; text-align: center;}
</style>
</head>
<body>
<div id="wrapper">
<div id="rechts">...</div>
<div id="links">...</div>
<div id="inhalt">...</div>
</div>
<p class="back">...</p>
</body>
</html>
|
So, ungefähr. Und den Float des Contents kannst dir sparen, wenn du die Elemente mit Float im Quelltext zuerst definierst...[/quote]
Zuletzt bearbeitet von emceechen am Mi 12.12.2007 18:01, insgesamt 1-mal bearbeitet
|
|
| |
|
|
emceechen
Dabei seit: 09.09.2005
Ort: Bad Kreuznach
Alter: 41
Geschlecht:
|
Verfasst Mi 12.12.2007 18:17
Titel
|
|
|
Wenn du partout eine prozentuale Darstellung willst kannst vielleicht damit was anfangen. Musst nur noch mal nach den prozentualen margins schauen, die passen noch nicht 100%-ig:
| 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=ISO-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
body {margin:0px; padding:0px; background:black;}
div {border:2px solid white;}
#wrapper {margin:0px auto; border:0px; width:100%;}
#links {float:left; width:18%; height:400px;}
#rechts {width:18%; height:400px; margin-left:81%;}
#inhalt {float:left; width:60%; height:400px; margin:0px 1% auto;}
p.back {clear: both; text-align: center;}
</style>
</head>
<body>
<div id="wrapper">
<div id="links">...</div>
<div id="inhalt">...</div>
<div id="rechts">...</div>
</div>
<p class="back">...</p>
</body>
</html> |
|
|
| |
|
|
danielectric
Threadersteller
Dabei seit: 12.12.2007
Ort: München
Alter: 42
Geschlecht:
|
Verfasst Mi 12.12.2007 18:26
Titel
|
|
|
|
grundsätzlich kann ich damit leben. dieser "filmstreifen" soll aber über die gesamte breite der seite gehen und die beiden border links bzw. rechts von den beiden äußeren spalten sollen auch nicht mehr zu sehen sein, um diesen effekt noch zu unterstützen... krieg ich das so hin?
|
|
| |
|
|
orangensaft
Dabei seit: 20.04.2007
Ort: Hamburg
Alter: 33
Geschlecht:
|
Verfasst Mi 12.12.2007 19:02
Titel
|
|
|
| danielectric hat geschrieben: | | grundsätzlich kann ich damit leben. dieser "filmstreifen" soll aber über die gesamte breite der seite gehen und die beiden border links bzw. rechts von den beiden äußeren spalten sollen auch nicht mehr zu sehen sein, um diesen effekt noch zu unterstützen... krieg ich das so hin? |
Wenn du willst, dass die border links bzw. rechts von den beiden äußeren spalten nicht zu sehen sein sollen, musst du im CSS folgendes angeben:
| Code: |
/* das hier bitte aus dem aktuellen Stylesheet entfernen: */
div {
border: 2px solid white;
}
/* #links, #rechts & #inhalt muss dann durch folgenden Code ersetzt werden: */
#links {
float: left;
width: 20%;
height: 400px;
border-top: 2px solid white;
border-bottom: 2px solid white;
border-right: 2px solid white;
}
#rechts {
float: right;
width: 20%;
height: 400px;
border-top: 2px solid white;
border-bottom: 2px solid white;
border-left: 2px solid white;
}
#inhalt {
float: left;
width: 700px;
height: 400px;
margin: 0 5px;
border: 2px solid white;
}
|
Wenn du jetzt noch willst, dass der obere und untere Rahmen von der linken und rechten Box entfernt werden soll, musst du "border-top: 2px solid white;" & "border-bottom: 2px solid white;" entfernen.  Alles verstanden? 
//EDIT: Ach ja, ähm, ich hab den Code von ganz ganz oben genommen und überarbeitet...  Ist das ein Problem?
Zuletzt bearbeitet von orangensaft am Mi 12.12.2007 19:08, insgesamt 2-mal bearbeitet
|
|
| |
|
|
danielectric
Threadersteller
Dabei seit: 12.12.2007
Ort: München
Alter: 42
Geschlecht:
|
Verfasst Mi 12.12.2007 23:47
Titel
|
|
|
vielen dank für den tip! das hatte ich aber auch schon probiert und das gefällt mir leider nicht so, weil da die border an den seiten abgeschrägt sind... sorry für die kleinlichkeit aber schließlich soll es ja dem zelluloid ähnlich sehn
ich hab jetzt mal folgendes versucht:
| 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=ISO-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
body {margin:0px; padding:0px; background:black;}
div {border:2px solid white;}
#wrapper {margin:0px auto; border:0px; width:100%;}
#links {float:left; width:18%; height:400px;margin-left:-2px;}
#rechts {width:19%; height:400px; margin-left:81%;}
#inhalt {float:left; width:60.5%; height:400px; margin:0px 1% auto;}
p.back {clear: both; text-align: center;}
</style>
</head>
<body>
<div id="wrapper">
<div id="links">...</div>
<div id="inhalt">...</div>
<div id="rechts">...</div>
</div>
<p class="back">...</p>
</body>
</html>
|
so sieht das zwar schon so aus, wie ich es mir dachte aber ist das nicht etwas "unsauber"? ich meine, die prozentangaben passen so ja gar nicht mehr... außerdem sind der rechte und linke außenabstand des mittleren bereichs noch nicht gleich, das muss doch noch exakter gehen, oder?
vielen vielen dank schonmal für die spontane hilfe!
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
3 Spalten Layout - aussen fixe Breite, mitte variabel
CSS 3spaltig mit fester Mitte?
liste in einer div-box mit fester höhe über mehrere Spalten?
[CSS] dreispaltiges Layout mit fester Breite im IE6
CSS Problem 2 Spalten fester "footer"
problem mit 3 spalten css-layout
|
|
Willkommen auf dem Portal für Mediengestalter
