Re: für jede seite einen anderen hintergrund
Posted: Wed Feb 11, 2009 5:42 pm
Ganz wie Du preferierst. Geht beides.
Content management as it is meant to be
https://forum.cmsmadesimple.org/
Code: Select all
#footer {position:absolute;bottom:0px;
Code: Select all
#footer {
clear: both;
}
Code: Select all
<!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" xml:lang="en" lang="en">
<!-- Change lang="en" to the language of your site -->
<head>
<title>{sitename} - {title}</title>
{metadata}
{stylesheet}
{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}
{literal}
<__script__ type="text/JavaScript">
<!--
//pass min and max -measured against window width
function P7_MinMaxW(a,b){
var nw="auto",w=document.documentElement.clientWidth;
if(w>=b){nw=b+"px";}if(w<=a){nw=a+"px";}return nw;
}
//-->
</__script>
<!--[if lte IE 6]>
<style type="text/css">
#pagewrapper {width:expression(P7_MinMaxW(750,750));}
#container {height: 1%;}
</style>
<![endif]-->
{/literal}
</head>
</__body>
<div id="pagewrapper">
<!-- start accessibility skip links -->
<ul class="accessibility">
<li>{anchor anchor='menu_vert' title='Skip to navigation' accesskey='n' text='Skip to navigation'}</li>
<li>{anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}</li>
</ul>
<!-- end accessibility skip links -->
<hr class="accessibility" />
<!-- Horizontal ruler that is hidden for visual browsers by CSS -->
<div id="header" align="center">
<img src="http://www.exundhopp.at/www1/uploads/images/Vorschlag-header-10.jpg" alt="logo">
<div id="slogan"></div>
<hr class="accessibility" />
</div>
<!-- End Header -->
<!-- Start Left Sidebar -->
<div id="leftsidebar">
<!-- Start Navigation -->
<div id="menu_vert">
<h2 class="accessibility">Navigation</h2>
{menu template='simple_navigation.tpl' collapse='1'}
</div>
<!-- End Navigation -->
</div>
<!-- End LeftSidebar -->
<!-- Start RightSidebar -->
<div id="rightsidebar">
<!-- Start News -->
<h1>News</h1>
{news number='2' detailpage='news' }
<div id="search">
<!-- End News -->
<!-- Start Search-->
{search submit="Absenden" lang="de_DE"}
</div>
<!-- End Search -->
<br>
<br>
<b><u>Verein Starke Süchtige</u> (coming soon)</b>
<br>
<br>
<br>
<a href="http://www.legalisieren.at/" target="_blank"> <img src="uploads/images/Legalize_1.jpg" alt="Logo" align="center"></a>
<br>
<br>
<br>
<a href="http://www.radioproton.at/" target="_blank"><img src="uploads/images/Proton%20Logo-1.gif" alt="Logo" align="center"></a>
</div>
<! -- End RightSidebar -->
<!-- Start Content -->
<div id="content" style='width: 445px; height: 594px; background-image: url(/www1/uploads/images/backgrounds/{$page_alias}.jpg);'>
<h1>{title}</h1>
{content}
</div>
<!-- End Content -->
<!-- Start Footer -->
<div id="footer">
{global_content name='footer'}
</div>
<!-- End Footer -->
</div><!-- end pagewrapper -->
<__body>
</__html>
Code: Select all
* {
margin:0;
padding:0;
}
body {
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
}
div {
font-size: 11px;
}
img {
border: 0;
}
a,
a:link
a:active {
text-decoration: none;
background-color: inherit;
/* color: #cc6714; */
color: #ff6600;
}
a:visited {
text-decoration: none;
background-color: inherit;
color: #ff6600;
}
a:hover {
text-decoration: none;
background-color: #f3f3f3;
color: #ff6600;
}
body {
color: #666666;
margin:1em;
}
/* center wrapper, min max width */
div#pagewrapper {
margin: 0 auto;
max-width: 1300px;
min-width: 950px;
background-color: #fff;
}
div#header {
/* border-bottom: 4px solid #948979; */
border-bottom: 4px solid #b0a18b;
font-size: 24px;
margin-bottom:15px;
padding-top: 10px;
padding-left: 10px;
padding-bottom: 10px;
}
div#header2 {
/* border-bottom: 4px solid #948979; */
border-bottom: 4px solid #b0a18b;
font-size: 24px;
margin-bottom:15px;
padding-top: 10px;
padding-left: 100px;
padding-bottom: 10px;
}
div#header h1 {
font-size: 32px;
color: #ff6600;
line-height:1em;
margin:0;
text-align:left;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: 6px;
}
div#slogan {
padding-left: 30px;
font-size: 11px;
color: #cccccc;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: 6px;
}
div#search {
width: 20px;
padding: 0.6em 0 0.2em 0;
margin: 0 1em 1.5em 1em;
color: #666666;
}
div#search input {
margin: 4px 0 0 0;
color: #666666;
}
div#content {
color: #666666;
margin-left: 200px;
margin-right: 200px;
width: 500px; /* minus 6px due to ie6 */
}
div#leftsidebar {
float: left;
width: 150px;
display: inline; /* FIX IE double margin bug */
/* margin-left: 0; */
}
div#logos {
margin-top: 40px;
border-top: 1px dotted #cccccc;
border-bottom: 1px dotted #cccccc;
width: 100%;
text-align: center;
}
div#logos img {
padding-top: 20px;
padding-bottom: 20px;
}
div#rightsidebar {
float: right;
width: 175px;
}
div#footer {position:absolute;bottom:0px;
/* background-color: #575352; */
background-color: #3a3429;
color: #89817f;
}
div#footer p {position:absolute;bottom:0px;
font-size: 0.8em;
padding: 1em;
text-align: center;
margin: 0;
}
div#footer p a {position:absolute;bottom:0px;
clear: both;
color: #89817f;
/* border-bottom:1px dotted #89817F; */
border-bottom:1px dotted #564931;
text-decoration: none;
}
div#footer p a:hover {position:absolute;bottom:0px;
color: #fff;
/* background-color: #575352; */
background-color: #3a3429;
text-decoration: none;
border-bottom:1px dotted #fff;
}
/* as we hid all hr for accessibility we create new hr with extra div element */
div.hr {
height: 1px;
/*padding-bottom: 1em;*/
border-bottom: 1px dotted #c0c0c0;
margin-top: 15px;
margin-bottom: 15px;
}
h1 {
color: #666666;
font-size: 15px;
text-align: left;
line-height: 1.5em;
margin: 0 0 0.5em 0;
}
h2 {
color: #666666;
font-size: 14px;
text-align: left;
line-height: 1.5em;
margin: 0 0 0.5em 0;
}
h3 {
color: #666666;
font-size: 13px;
line-height: 1.3em;
margin: 0 0 0.5em 0;
}
h4 {
color: #666666;
font-size: 12px;
line-height: 1.3em;
margin: 0 0 0.25em 0;
}
h5 {
color: #666666;
font-size: 11px;
line-height: 1.3em;
margin: 0 0 0.25em 0;
}
/* END HEADINGS */
/* TEXT */
p {
/*font-size: 1em;*/
margin: 0 0 0.8em 0; /* some air around p elements */
line-height: 1.6em;
padding: 0;
}
blockquote {
border-left: 10px solid #ddd;
margin-left: 10px;
}
strong, b {
/* explicit setting for these */
font-weight: bold;
}
em, i {
/* explicit setting for these */
font-style:italic;
}
/* Wrapping text in <code> tags. Makes CSS not validate */
code, pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
font-family: "Courier New", Courier, monospace;
font-size: 1em;
}
pre {
border: 1px solid #000; /* black border for pre blocks */
background-color: #ddd;
margin: 0 1em 1em 1em;
padding: 0.5em;
line-height: 1.5em;
font-size: 90%;
}
/* Separating the divs on the template explanation page, with some bottom-border */
div.templatecode {
margin: 0 0 2.5em;
}
/* END TEXT */
/* LISTS */
/* lists in content need some margins to look nice */
div#content ul,
div#content ol,
div#content dl {
font-size: 11px;
line-height: 1.6em;
margin: 0 0 1.5em 0em;
}
div#content ul li,
div#content ol li {
margin: 0 0 0.25em 3em;
}
/* definition lists topics on bold */
div#content dl dt {
font-weight: bold;
margin: 0 0 0 1em;
}
div#content dl dd {
margin: 0 0 1em 1em;
}
div#content dl {
margin-bottom: 2em;
padding-bottom: 1em;
border-bottom: 1px solid #c0c0c0;
}
/* END LISTS */
Nur, dass dadurch der Text unlesbar wirdexundhopp wrote: joo das mit den hintergründen klappt dankeschön.
Nimm mal die Höhe für den content-div rausnur hab ich jetzt wie schon viele das problem dass sich der footer in die mitte schiebt.
PS: Evtl. wärst du besser damit gefahren, ein CSS-Framework wie z. Bsp. YAML oder YUI zu verwenden ...
Hmm, dann solltest du es evtl. doch über mehrere divs mit unterschiedlichem z-index machenexundhopp wrote: wenn ich die höhe rausnimm funktioniert es, aber das bild wird abgeschnitten
das sollte eigentlich mit dem clear:both in der CSS für den Footer erledigt seinund ich hätte gerne, dass der footer nicht direkt unter dem content steht, sonder er fix unten steht.