faux Columns oder doch anderes Problem?
Eingetragen von killhill (36)am 09.05.2008 - 20:17 Uhr in
Nabend
Ich versuche mich gerade zum ersten mal so richtig an Drupal, habe aber schon direkt ein dummes Problem
beim ersten themen. Und zwar frage ich mich bei nachfolgenden Code, warum #wrapper den Elemente
#left, #content und #right nicht einschließt. Jedenfalls nicht optisch. Wie kann ich das lösen? Ich meine dabei nicht unbedingt, dass alle die Gleich Farbe im Hintergrund haben. Ein Bildchen habe ich da auch schon rein gesetzt und auf der y Achse wiederholen lassen, aber ohne Höheangabe erscheint rein gar nicht von davon.
Besten Dank schon mal
page.tpl.php
<!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" lang="<?php print $language ?>" xml:lang="<?php print $language ?>">
<head>
<title><?php print $head_title ?></title>
<?php print $head ?>
<?php print $styles ?>
<script type="text/javascript"><?php?> </script>
</head>
<body<?php print $onload_attributes ?>>
<div id="wrapper">
<div id="left"><?php print $sidebar_left ?></div>
<div id="content"><?php print $content ?></div>
<div id="right"><?php print $sidebar_right ?></div>
</div>
</body>
</html>style.css
#wrapper {
position:relative;
width:982px;
margin:10px auto;
background-color:#0d0;
border:1px solid #000;
background-image:url(themes/test/images/fauxColumn.gif);
background-repeat:repeat-x;
}
body, html {
margin:0;
padding:0;
font-family:Verdana, Arial, sans-serif;
font-size:76%;
background-color:#fafafa;
}
html{
margin:20px;
}
#left, #content, #right {
position:absolute;
top:0;
border: 1px solid #cdcdcd;
}
#left {
width:200px;
left:0;
}
#content {
width:560px;
left:210px;
}
#right {
width:180px;
left:800px;
}Zum Schluß Vielleicht noch kurz ein Verständnis Frage zu der css Definition von #wrapper.
Ich habe schon ander Layouts umgesetzt (nicht in Drupal) die durch einen solchen Wrapper
zentriert wurden. Dabei reichte mir immer ein margin: auto auto; um es in der Mitte zu halten.
Warum muss hier position:relative; angeben werden? Woran lieg das?
- Anmelden oder Registrieren um Kommentare zu schreiben
Gibt es von diesem Theme
am 09.05.2008 - 23:36 Uhr
Gibt es von diesem Theme eine Demoseite?
-------------
quiptime
Nur tote Fische schwimmen mit dem Strom.
Nun...
am 10.05.2008 - 13:31 Uhr
....ja, gibt es, aber ich finde es nicht mehr. Hatte das ganze schon mal angefangen, dann aber "weggelegt". Jetzt habe ich mich wieder dran gesetzt, weil ich eine Seite mit Drupal aufziehen will (damals war es nur so Interesse halber). War halt ein Tutorial. Ich habe es inzwischen aber auf andere Weise noch mal neu gemacht. Dachte, mir es kann ja nicht sein, dass die andere Methode (die angesprochene) nicht geht. Habe es jetzt auf "meine" Weise zentriert. Und breitet sich der Wrapper dann aus. Allerdings habe ich da, dann vermutlich die faux Columns Geschichte. Falls ich da auch nicht weiter kommen sollte, melde ich mich nochmal.
mhhhh
am 12.05.2008 - 15:31 Uhr
...irgendwie ist es das selbe Problem. Der Wrapper breitet sich jetzt auch wieder nicht aus bzw. nur um den Head Bereich. Keinen Plan warum. Hier mal der Code.
page.tpl.php
<!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" lang="<?php print ($language); ?>" xml:lang="<?php print ($language); ?>">
<head>
<title><?php print ($head_title); ?></title>
<?php print ($head); ?>
<?php print ($styles); ?>
<script type="text/javascript"><?php?> </script>
</head>
<body<?php print ($onload_attributes); ?>>
<div id="my_wrapper">
<div id="my_header"><?php print ($header); ?></div>
<div id="my_main">
<div id="my_main_links">
<div id="my_mission"><?php print ($mission); ?></div>
<div id="my_content"><?php print ($content); ?></div>
</div>
<div id="my_main_rechts">
<div id="my_left"><?php print ($sidebar_left); ?></div>
<div id="my_right"><?php print ($sidebar_right); ?></div>
</div>
</div>
</div>
</body>
</html>
style.css
body {
margin:0px;
margin-top:50px;
padding:0px;
font-family:Verdana, Arial, sans-serif;
background:#9955bb url(images/bb.gif) repeat-x;
}
#my_wrapper {
width:982px;
margin:auto auto;
background-color:#FFFFFF;
border:1px solid #000000;
}
#my_header {
width:982px;
height:80px;
margin:0px;
padding:0px;
}
#my_main {
width:982px;
margin:0px;
padding:0px;
}
#my_main_links {
width:549px;
border-right:1px solid #000000;
float:left;
background-color:#00FFCC;
}
#my_main_rechts {
width:432px;
float:right;
background-color:#FFFF66;
}
#my_mission {
font-size:12px;
}
#my_content {
width:549px;
}
#my_left {
width:216px;
float:left;
}
#my_right {
width:216px;
float:right;
}