| Autor |
Nachricht |
der_tim
Threadersteller
Dabei seit: 29.01.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 18.12.2008 11:14
Titel [CSS] 3-spalten layout - aber anders als sonst! |
  |
|
hallo,
im zuge der tabellen-zum-layouten-verschwindibus-aktionen bin ich derzeit an eine grenze gestoßen:
und zwar suche ich eine reine css-variante um folgenden code 1:1 umzusetzen:
| Code: | <table style="table-layout: fixed; width: 100%;" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="50%">links</td>
<td width="1000">main</td>
<td width="50%">rechts</td>
</tr>
</table>
|
das geübte auge erblickt: es gibt einen festen, zentrierten bereich und links / rechts daneben tabellenzellen, die sich soweit ausdehnen, wie das browserfenster gerade breit ist. zweck ist, eine website mit den festen ausmaßen zu zentrieren (auch bei ner < 1024er auflösung), links und rechts aber ein gekacheltes bg-bild zu haben - aber: diese bg-bilder sind links und rechts unterschiedlich! es reicht also nicht, einfach der seite selbst die bg-kachel zu geben.
ich brauche unbedingt 2 divs, die sich nach links und rechts den gegebenheiten der breite anpassen. mein vermessener versuch, die 50%-regel der funktionierenden tabellen-variante in css umzumünzen, ging natürlich daneben.
leider bieten die css/3-spalten-template - websites immer nur designs an, wo die 2 spalten außen eine feste breite haben und sich der mittlere div dynamisch anpasst bzw. alle 3 spalten nur aus %-werten bestehen. aber in meinem fall muss die mittlere spalte nunmal die feste breite haben ...
also: gibt es eine möglichkeit, mit css das obige tabellen-konstrukt zu ersetzen? meine tests mit *, %, em, paddings, margins usw. schlugen bisher fehlt ...
grüße,
tim
|
|
| |
  |
 |
netnite
Dabei seit: 24.12.2005
Ort: Thüringen
Alter: 43
Geschlecht: 
|
Verfasst Do 18.12.2008 11:22
Titel
|
|
|
Schau mal hier: http://www.mycelly.com/
das Template fixed BOX centered, das sollte dem schon nahe kommen was du suchst!
|
|
| |
|
|
|
Anzeige
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
|
| |
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Do 18.12.2008 12:34
Titel
|
|
|
|
gehts dir nur darum, links und rechts hintergründe hinterlegen zu können, oder willst du dort auch inhalt platzieren??
|
|
| |
 |
|
der_tim
Threadersteller
Dabei seit: 29.01.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 18.12.2008 12:56
Titel
|
|
|
hi,
.. also im endeffekt gehts tatsächlich nur darum, in der linken und rechten box jeweils einen gekachelten bg einzugügen. problem ist jedenfalls, dass beide BG-bilder unterschiedlich sind. daher kann ich nicht einfach der kompletten seite die kachel zuweisen. die boxen ziehen sich aber nur auseinander, wenn ich ihnen feste/prozentuale werte gebe (die ja vorher aber nicht wissen kann) oder wenn inhalte in den randboxen sind. aber der inhalt müsste sich dann irgendwie automatisch mit fenster-änderung anpassen (wollte eigentlich kein JS dafür bemühen ..)
im moment sieht mein notbehelf so aus, dass ich ne 2000px-breite grafik habe, die zu 50% aus der linken und zu 50% aus der rechten kachel besteht. das als body-bg zentriert funktioniert ja im prinzip .. nur die dateigröße ist dadurch auch wahnsinig fett .. was ich durch das kacheln ja verhindern wollte.
also soweit ich das sehe, funktioniert das nicht anders. ich werde es wohl wieder mit dem tabellen-konstrukt machen, damit haut es nunmal hin. vielleicht ist der css-gott nicht total sauer, wenn es die einzige layout-tabelle für die ganze site bleibt ... 
mfg,
tim
|
|
| |
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Do 18.12.2008 13:00
Titel
|
|
|
| der_tim hat geschrieben: | | ich werde es wohl wieder mit dem tabellen-konstrukt machen |
bist du denn...!!!!???? 
| Code: |
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
*, html {
height: 100%;
}
#links
{
background-color: #cccccc;
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 50%;
}
#mitte
{
background-color: #eeeeee;
position: absolute;
left: 50%;
margin-left: -500px;
top: 0px;
width: 1000px;
}
#rechts
{
background-color: #cecece;
position: absolute;
right: 0;
top: 0px;
height: 100%;
width: 50%;
text-align: right;
}
</style>
</head>
<body>
<div id="links">links</div>
<div id="rechts">rechts</div>
<div id="mitte">mitte</div>
</body>
</html>
|
|
|
| |
|
|
der_tim
Threadersteller
Dabei seit: 29.01.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 18.12.2008 13:32
Titel
|
|
|
... boah vielen dank!
also so krumm habe ich nun wirklich nicht gedacht. naja man lernt nie aus ....
mfg,
tim
|
|
| |
|
|
zweitaccount
Dabei seit: 25.01.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 18.12.2008 14:01
Titel
|
|
|
Ähem - nur so am Rande, das dürfte in der Form Probleme beim
Scrollen machen (die scrollen ja weg mit nur der Viewport-Höhe).
Besser wärs mit dem Container drumrum:
| Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3Col</title>
<style type="text/css">
HTML {
height:100%;
}
BODY {
text-align:center;
height:100%;
margin:0;
padding:0;
}
DIV#container {
position:absolute;
top:0;
left:0;
width:100%;
min-height:100%;
background:red;
}
DIV#columnLeft {
position:absolute;
top:0;
left:0;
width:50%;
bottom:0;
background:yellow;
text-align:left;
}
DIV#columnRight {
position:absolute;
top:0;
right:0;
width:50%;
bottom:0;
background:pink;
text-align:right;
}
DIV#columnMain {
position:relative;
margin:0 auto;
width:600px;
min-height:100%;
background:blue;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
DIV#columnMain {
height:100%;
}
DIV#columnLeft,
DIV#columnRight {
/* das funzt so noch nicht */
height: expression((document.body.offsetHeight) + 'px');
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="columnLeft">Left</div>
<div id="columnRight">Right</div>
<div id="columnMain">
Content goes here
<script>
for(var i=0;i<100;i++) document.writeln('<p>More Content</p>');
</script>
Content ends here
</div>
</div>
</body>
</html>
|
Wobei die IE6-expression so nicht funzt.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
problem mit 3 spalten css-layout
[css] 3 spalten layout problem
[CSS] Problem mit 3-Spalten Layout
CSS Layout Problem 3 Spalten ich verzweifel (Tabbellenmensch
Zwei Spalten Layout. Linke Seite fix
css 3 spalten layout mit fester mitte - bitte um hilfe!
|
|
Willkommen auf dem Portal für Mediengestalter
