CSS für CMS - Problem mit background-image

[quiri]

Hallo!
Bin zwar nicht Total-Anfänger, habe aber trotzdem ein Problem das ich dem zuordne :
Und zwar habe ich ein CSS auf ein CMS Theme angewandt. Jetzt habe ich beides in einer Datei zusammengeschmissen, will jetzt ein Hintergrundbild im Container "gesamt" (der über alle drei spalten geht), damit das die drei spalten nach unten hin simuliert ...allerdings repeatet sich das nicht ... es klappt einfach nicht... ich bin am Ende meiner "Kräfte" und weiss nicht weiter. Habe schon alles probiert, guckt euch doch bitte mal das CSS an, woran es liegen kann. Vielleicht hebt sich da ja irgendwas auf das ich nicht erkenne ... oben ist mein teil unten das vom theme .. ist lang ich weiss

Danke
quiri

PS: lokal im CSS ohne theme funzts ...

Code: Alles auswählen

html{
   scrollbar-face-color: #f7eeee;
   scrollbar-highlight-color: #FFFFFF;
   scrollbar-shadow-color: #f7eeee;
   scrollbar-3dlight-color: #F5E9E9;
   scrollbar-arrow-color:  #800000;
   scrollbar-track-color: #fbf5f5;
   scrollbar-darkshadow-color: #cc9999;
}

body {
   color:#000000;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 8pt;
   background-color: #000000;
   height: 100%
   padding-right: 0px;
   padding-left: 0px;
   padding-bottom: 0px;
   padding-top: 4px;
   margin: 0px;
   color: #000;
   voice-family: inherit
   text-align: center;
   height: 100%
}

a:link {
   font-weight: bold;
   text-decoration: none;
   color: #FF4500;
   }
a:visited {
   font-weight: bold;
   text-decoration: none;
   color: #FF4500;
   }
a:hover, a:active {
   text-decoration: none;
   color: #8B0000;
   }


#gesamt {
   background-image: url(images/bg.jpg);
   background-repeat: repeat-y;
   background-position: center 0px;
   vertical-align: middle;
   width:800px;
   padding:0px;
   margin:0px;
   text-align: left;
   margin: 0 auto;
   }

#header {
   background-image:url(images/header.jpg);
   background-position: center 0px;
   vertical-align: bottom;
   text-align: right;
   background-repeat: no-repeat;
   width:800px;
   height:136px;
   margin:0px;
   float: clear;
   }

#left    {
   background-image:url(images/left_bg.jpg);
   position:relative;
   width:158px;
   margin-top:3px;
   margin-left:0px;
   margin-right:0px;
   text-align:justify;
   float: left;
   }


#topbgl   {
   background-image:url(images/left.jpg);
   background-position-y:0px;
              background-repeat:no-repeat;
   width:158px;
   margin-top:0px;
   margin-left:0px;
   margin-right:0px;
   float: left;
   }

#center    {
   position:relative;
   width:462px;
   margin-top:9px;
   margin-right:0px;
   float: left;
   padding:10px;
   text-align:justify;
   }

#right    {
   background-image:url(images/right_bg.jpg);
   width:158px;
   margin:0px;
   margin-top:3px;
   float: left;
   text-align:justify;
   }

#topbgr   {
   background-image:url(images/right.jpg);
   background-position-y:0px;
              background-repeat:no-repeat;
   width:158px;
   margin-top:0px;
   margin-left:0px;
   margin-right:0px;
   float: left;
   }


.outline{
   font-size: 8pt;
   font-weight: normal;
   height: 50px;
   vertical-align: bottom;
   text-align: right;
   padding-right: 10px;
   position:relative;
}

table {
   width: 100%;
   margin: 5;
   padding: 5;
}

table td {
   padding: 0;
   border-width: 0;
   vertical-align: top;
   font-family: Verdana, Arial, Helvetica, sans-serif;
}


td { 
   font-family: Verdana, Arial, Helvetica, sans-serif;
   color: #000000;
   font-size: 8pt; border-top-width : 1px;
   border-right-width : 1px;
   border-bottom-width : 1px;
   border-left-width : 1px;   
}

input {
   background-color : #ffffff;
   color : #000000;
   font-size: 8pt; font-family: Verdana, Arial, Helvetica, sans-serif; 
}

textarea {

   font: normal 8pt Verdana, Arial, Helvetica, sans-serif;
}
select {
   color : #000000;
   font: normal 8pt Verdana, Arial, Helvetica, sans-serif;
   border-color : #000000;
}
img {
   border: 0;
}

ul {
   margin: 2px;
   padding: 2px;
   list-style: decimal inside;
   text-align: left;
}
li {
   margin-left: 2px;
   list-style: disc inside;
}

.odd {
   font-size: 8pt;
   font-weight: normal;    
   text-align:left;
}
.outer {
   font-size: 8pt;
   color: #FF4500;
   font-weight: bold;    
   text-align:left;
      
}
.even {
   font-size: 8pt;
   font-weight: normal;    
   text-align:left;         
}
th {
   text-align: left;
   padding: 5px;
}


.head {
   font-size: 8pt;
   font-weight : bold;
   height: 25px;
   vertical-align: middle;   
}
.foot {
   padding: 3px;
}

.comTitle {
   color: #000000;
   font-size: 8pt;
   font-weight : bold;
   background: #FFFFFF;
   height: 23px;
   text-align: left;
   padding-top: 7px;
   padding-left: 10px;   

}
.comText {
   padding: 20px;
   text-align: left;       
}
.comUserStat {
   font-size: 10px;
   color: #8B0000;
   font-weight:bold;
   background-color: #FFFfFf;
   margin: 2px; padding: 2px;
}
.comUserStatCaption {
   font-weight: normal;
}
.comUserStatus {
   margin-left: 2px;
   margin-top: 10px;
   color: #8B0000;
   font-weight:bold;
   font-size: 10px;
}
.comUserRank {
   margin: 2px;
}
.comUserRankText {
   font-size: 10px;
   font-weight:bold;
}
.comUserRankImg {
   border: 0;
}
.comUserName {}
.comUserImg {
   margin: 2px;
}
.comDate {
   color: #000000;
   font-weight: normal;
   font-size: smaller;
   text-align: right;   
}
.comDateCaption {
   color: #000000;
   font-weight: bold;
   font-style: normal;
   text-align: right;   
}

div.xoopsCode {
   background: #ffffff;
   border: 1px inset #CC9999;
   font: normal 8pt Verdana, Arial, Helvetica, sans-serif;
   padding: 0px 6px 6px 6px;}

div.xoopsQuote {
   background: #ffffff;
   border: 1px inset #CC9999;
   font: normal 8pt Verdana, Arial, Helvetica, sans-serif;
   padding: 0px 6px 6px 6px;}

.item {
   background: #F5F5F5;
   
}
.itemHead {
   color: #000000;
   font-size: 8pt;
   font-weight : bold;
   height: 20px;
   padding-top: 7px;
   padding-left: 0px;
}
.itemInfo {
   text-align: right;
   padding: 3px;
   

}
.itemTitle a {
   font-size: 100%;
   font-size: 8pt;   
   font-weight: bold;
   color: #663300;
   background-color: transparent;
}
.itemPoster {
   color: #000000;
   font-size: 90%;
   font-style:nomal;
}


.itemPostDate {
   font-size: 90%;
   font-style:nomal;
}
.itemStats {
   color: #000000;
   font-size: 90%;
   font-style:nomal;
}
.itemBody {
   color: #000000;
   padding-left: 5px;
   text-align: left;
   border-top: solid 1px #FF4500;
   background: #FFFFFF;   
      
}
.itemText {
   color: #000000;
   margin-top: 5px;
   margin-bottom: 5px;
   line-height: 1.5em;
}

.itemFoot {
   text-align: right;
   padding: 3px;

}
.itemAdminLink {
   font-size: 90%;
}
.itemPermaLink {
   font-size: 90%;
}

.blockTitle {
   font-size: 8pt;
   font-weight: normal;
   text-align: left;
   padding-left: 6px;
   height: 20px;
   vertical-align: middle;   
}

.blockTitle2 {
   color: #FFFFFF;
   font-weight: normal;
   font-size: 8pt;
   text-align: left;
   padding-left: 6px;   
   height: 20px;
   vertical-align: middle;   
}

.blockContent {
   padding-left: 12px;
   text-align: center;   
   height: 16px;
   vertical-align: middle;   
}


[Laus]

Kannst du mal einen Link oder wenigstens den Quelltext dazu posten.

[quiri]

Klar, hier der Quelltext des Themes, der dann hochgeladen die Inhalte des CMS einbaut ... ich hoffe das ist verständlich ...

Code: Alles auswählen

<!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="<{$xoops_langcode}>" lang="<{$xoops_langcode}>">
<head>
<meta http-equiv="content-type" content="text/html; charset=<{$xoops_charset}>" />
<meta http-equiv="content-language" content="<{$xoops_langcode}>" />
<meta name="robots" content="<{$xoops_meta_robots}>" />
<meta name="keywords" content="<{$xoops_meta_keywords}>" />
<meta name="description" content="<{$xoops_meta_description}>" />
<meta name="rating" content="<{$xoops_meta_rating}>" />
<meta name="author" content="<{$xoops_meta_author}>" />
<meta name="copyright" content="<{$xoops_meta_copyright}>" />
<meta name="generator" content="XOOPS" />
<title><{$xoops_sitename}> - <{$xoops_pagetitle}></title>
<link href="<{$xoops_url}>/favicon.ico" rel="SHORTCUT ICON" />
<link rel="stylesheet" type="text/css" media="all" href="<{$xoops_url}>/xoops.css" />
<link rel="stylesheet" type="text/css" media="all" href="<{$xoops_themecss}>" />

<script type="text/javascript">
<!--
<{$xoops_js}>
//-->
</script>
</head>

<body>
<div id="gesamt">

<div id="header">

<!-- login bereich im header -->
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<table class ="outline">
  <tr>
    <td><form style="margin-top: 0px; margin-right: 8px;" action="<{$xoops_url}>/user.php" method="post">
    <{$block.lang_username}>
    <input type="text" name="uname" size="8" value="<{$block.unamevalue}>" maxlength="25" /> 
    <{$block.lang_password}>
    <input type="password" name="pass" size="4" maxlength="32" />
    <!-- <input type="checkbox" name="rememberme" value="On" class ="formButton" /><{$block.lang_rememberme}><br /> //-->
    <input type="hidden" name="xoops_redirect" value="<{$xoops_requesturi}>" />
    <input type="hidden" name="op" value="login" />
    <input type="submit" value="<{$block.lang_login}>" /><br />
    <{$block.sslloginlink}>
</form></td>
  </tr>
</table>

  </div>


  <div id="left">

  <div id="topbgl">

<!-- Start left blocks loop -->

<{foreach item=block from=$xoops_lblocks}>
<table class="outline"><tr><td>
<table cellspacing="0" cellpadding="2">
<tr><td class="blockTitle2">&nbsp;<{$block.title}></td></tr>
<tr><td class="blockContent"><{$block.content}></td></tr></table>
</td></tr></table><br />
<{/foreach}>

<!-- End left blocks loop -->

</td>
<td style="padding: 0px 5px 0px;">

</div>
</div>

<div id="center">
<!-- Display center blocks if any -->

<{if $xoops_showcblock == 1}>
<table cellspacing="0">
<tr><td width="455px" colspan="2">

<!-- Start center-center blocks loop -->

<{foreach item=block from=$xoops_ccblocks}>
<table class="outline"><tr><td>
<table cellspacing="1" cellpadding="5">
<tr><td class="blockTitle">&nbsp;<{$block.title}></td></tr>
<tr><td class="blockContent"><{$block.content}></td></tr></table>
</td></tr></table><br />
<{/foreach}>

<!-- End center-center blocks loop -->

</td></tr>
<tr><td width="50%">

<!-- Start center-left blocks loop -->

<{foreach item=block from=$xoops_clblocks}>
<table class="outline"><tr><td>
<table cellspacing="1" cellpadding="5">
<tr> <td class="blockTitle">&nbsp;<{$block.title}></td></tr>
<tr><td class="blockContent"><{$block.content}></td></tr></table>
</td></tr></table><br />
<{/foreach}>

<!-- End center-left blocks loop -->

</td><td width="50%">

<!-- Start center-right blocks loop -->

<{foreach item=block from=$xoops_crblocks}>
<table class="outline"><tr><td>
<table cellspacing="1" cellpadding="5">
<tr> <td class="blockTitle">&nbsp;<{$block.title}></td></tr>
<tr><td class="blockContent"><{$block.content}></td></tr></table>
</td></tr></table><br />
<{/foreach}>

<!-- End center-right blocks loop -->

</td></tr></table>
<{/if}>

<!-- End display center blocks -->

<div id="content"><{$xoops_contents}></div></td>
<{if $xoops_showrblock == 1}>
<td width=20% align=center>
</div>

<div id="right">
<div id="topbgr">
<!-- Start right blocks loop -->

<{foreach item=block from=$xoops_rblocks}>
<table class="outline"><tr><td>
<table cellspacing="0" cellpadding="2">
<tr><td class="blockTitle2">&nbsp;<{$block.title}></td></tr>
<tr><td class="blockContent"><{$block.content}></td></tr></table>
</td></tr></table>
<br /><{/foreach}>


<!-- End right blocks loop -->

<{/if}></td></tr></table>
</td></tr>
</table>
</body>
</html>
<br />
</td></tr></table>
</div>
</div>
</div>

</body>
</html>



[Laus]

Dein float: clear; im header ist falsch, es muss clear:both; heißen. dann fehlt ein weiteres schließendes clear vor dem abschließendem </div> von #gesamt. Eventuell kannst du dies auch mit -->clearfix:after<-- erreichen.
html und #gesamt brauchen auch noch ein height:100%;

[quiri]

Ok, super! Der Background funktioniert - auch schon ohne das clearfix:after ... was ich noch nicht ganz verstanden habe...
DAs im CSS habe ich aber, reicht das im HTML Doc vor dem abschliessenden #gesamt /DIV:

<p class="clear:after">
.
</p>

Und warum passt sich das ganz immer noch nicht dem Inhalt im center an? Wenn da mehr Text kommt, erweitert sich immernoch nur das Center ... warum ist das so? Liegt das am CMS? (Kann leider den Link und den zugang nicht öffentlich machen, aber per PM ...)

[Laus]

Du hast anscheinend immer noch nicht richtig den Zweck von float und clear verstanden Mal nochmal -->hier<-- zum nachlesen.
In deinem Fall müsste das

Code: Alles auswählen

<p style="clear:both;"> </p>

heißen.

[quiri]

Ok, erwischt ... ... bin da etwas faul ... ich gelobe besserung!
Erstmal vielen Dank für die schnelle Hilfe, hat mir super geholfen.
Wegen dem Inhalt muss ich wohl mal im CMS Forum nachfragen.

gruss
quiri