für jede seite einen anderen hintergrund

tobik · Post by **tobik** » Wed Feb 11, 2009 5:42 pm

Ganz wie Du preferierst. Geht beides.

exundhopp · Post by **exundhopp** » Mon Feb 23, 2009 10:47 am

joo das mit den hintergründen klappt dankeschön.
nur hab ich jetzt wie schon viele das problem dass sich der footer in die mitte schiebt.

habs auch schon mit

Code: Select all

#footer {position:absolute;bottom:0px;

und

Code: Select all

#footer {
clear: both;
}

probiert.
Hier sind mal Template und Stylesheet

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 */

cyberman · Post by **cyberman** » Mon Feb 23, 2009 3:53 pm

exundhopp wrote: joo das mit den hintergründen klappt dankeschön.

Nur, dass dadurch der Text unlesbar wird $:-\$ ... du solltest da noch was mit den Bildern machen.

nur hab ich jetzt wie schon viele das problem dass sich der footer in die mitte schiebt.

Nimm mal die Höhe für den content-div raus

PS: Evtl. wärst du besser damit gefahren, ein CSS-Framework wie z. Bsp. YAML oder YUI zu verwenden ...

exundhopp · Post by **exundhopp** » Thu Feb 26, 2009 10:08 am

wenn ich die höhe rausnimm funktioniert es, aber das bild wird abgeschnitten und ich hätte gerne, dass der footer nicht direkt unter dem content steht, sonder er fix unten steht.

http://www.exundhopp.at/www1

cyberman · Post by **cyberman** » Thu Feb 26, 2009 7:39 pm

exundhopp wrote: wenn ich die höhe rausnimm funktioniert es, aber das bild wird abgeschnitten

Hmm, dann solltest du es evtl. doch über mehrere divs mit unterschiedlichem z-index machen

http://www.css4you.de/z-index.html

und ich hätte gerne, dass der footer nicht direkt unter dem content steht, sonder er fix unten steht.

das sollte eigentlich mit dem clear:both in der CSS für den Footer erledigt sein

.

Da scheint noch irgend etwas anderes mit deinem Template nicht zu stimmen.

Vielleicht hättest du doch besser auf ein fertiges 3spaltiges Template setzen sollen - ich nehm das YAML ganz gern.

http://themes.cmsmadesimple.org/index.p ... =55#name-1

CMS Made Simple Forums

für jede seite einen anderen hintergrund

Re: für jede seite einen anderen hintergrund

Re: für jede seite einen anderen hintergrund

Re: für jede seite einen anderen hintergrund

Re: für jede seite einen anderen hintergrund

Re: für jede seite einen anderen hintergrund