background-image und border

[henne32]

Hi!

Ich stehe vor einem "mysteriösen" Problem: Ich habe eine Joomla-Page und dort folgende css-Datei:

html, body {  
         z-index:1;  
         background:url(../images/background.jpg);  
}  
  
#container {  
 z-index:1;  
 position:absolute;  
 top:5;  
 left:50%;  
 margin-left:-500px;  
 width:1000px;  
        background:url(../images/background_container.jpg) repeat-y;  
 border-left:1px solid black;  
        border-right:1px solid black;  
}  
  
#header {  
 z-index:2;  
 position:absolute;  
 top:0;  
 left:0;  
 width:1000px;  
 height:235px;  
 background:url(../images/ips.jpg) no-repeat;  
 overflow:hidden;  
}  
  
#left {  
 z-index:2;  
 position:absolute;  
 top:248px;  
 left:0;  
 width:293px;  
 height:406px;  
 overflow:hidden;  
}  
  
#menu {  
 z-index:2;  
 position:absolute;  
 top:235px;  
 left:768px;  
 width:232px;  
 height:auto;  
         padding:0;  
         margin:0;  
         border:0;  
         background:url(../images/menu_background.jpg) repeat-y;  
         overflow:hidden;  
}  
  
.moduletable_menu {  
 padding:0;  
 margin:0;  
 border:0;  
}  
  
.moduletable h3{  
         color:#000;  
         font:14px normal Verdana, Helvetica, sans serif;  
 padding:0;  
 margin:0 0 10px 25px;  
 border:0;  
}  
  
  
  
#menu ul {  
 z-index:3;  
 list-style:none;  
 padding:0;  
 margin:0;  
 border:0;  
}  
  
#menu li {  
 list-style:none;  
 padding:0;  
 margin:0 0 0 0;  
 border:0;  
}  
  
#menu li a {  
 display:block;  
 width:211px;  
 height:18px;  
 background:url(../images/menu.jpg) no-repeat top left;  
 margin:0 0 15px 6px;  
 padding:0 0 0 0;  
 border:0;  
 font:12px normal Verdana, Helvetica, sans serif;  
 font-weight:bold;  
 color:#fff;  
 text-decoration:none;  
 line-height:18px;  
 overflow:hidden;  
}  
  
#menu li a span {  
 padding:0 0 0 25px;  
}  
  
#menu li#current a {  
 background:url(../images/menu.jpg) no-repeat bottom left;  
}  
  
#menu li a:hover {  
 background:url(../images/menu.jpg) no-repeat bottom left;  
}  
  
#menu li#current ul {  
 list-style:none;  
 padding:0;  
 margin:0 0 15px 0;  
 border:0;  
}  
  
#menu li#current ul li{  
 padding:0;  
 margin:0;  
 border:0;  
}  
  
#menu li#current ul li a {  
 display:block;  
 width:186px;  
 height:18px;  
 background:url(../images/menu.jpg) no-repeat top left;  
 margin:0 0 1px 29px;  
 padding:0;  
 border:0;  
 font:12px normal Verdana, Helvetica, sans serif;  
 font-weight:bold;  
 color:#fff;  
 text-decoration:none;  
 line-height:18px;  
 overflow:hidden;  
}  
  
#menu li#current ul li a span {  
 padding:0 0 0 25px;  
}  
  
#menu li#current a:hover {  
 background:url(../images/menu.jpg) no-repeat bottom left;  
}  
  
#menu li ul {  
 list-style:none;  
 padding:0;  
 margin:0 0 15px 0;  
 border:0;  
}  
  
#menu li ul li{  
 padding:0;  
 margin:0;  
 border:0;  
}  
  
#menu li ul li a {  
 display:block;  
 width:186px;  
 height:18px;  
 background:url(../images/menu.jpg) no-repeat top left;  
 margin:0 0 1px 29px;  
 padding:0;  
 border:0;  
 font:12px normal Verdana, Helvetica, sans serif;  
 font-weight:bold;  
 color:#fff;  
 text-decoration:none;  
 line-height:18px;  
 overflow:hidden;  
}  
  
#menu li ul li a span {  
 padding:0 0 0 25px;  
}  
  
  
  
#content {  
 z-index:3;  
 position:absolute;  
 left:313px;  
 top:250px;  
 width:440px;  
 height:auto;  
 margin:0;  
 padding:0;  
 border:0;  
         font:12px normal Verdana, Helvetica, sans serif;  
 overflow-x:hidden;  
 overflow-y:auto;  
}  
  
table.contentpane, table.contentpaneopen {  
 color:#000;  
 font:12px normal Verdana, helvetica, sans serif;  
}  
  
table.contentpane table, table.contentpaneopen table {  
 color:#000;  
 font:12px normal Verdana, helvetica, sans serif;  
 border:0;  
 padding:0;  
 margin:0;  
}  
  
  
.contentheading, .componentheading {  
 color:#cc9900;  
 font:14px normal Verdana, helvetica, sans serif;  
 text-transform: uppercase;  
}  
  
a:link {color:#cc9900;text-decoration:none;font-style:italic;}  
a:hover {color:#cc9900;text-decoration:underline;font-style:italic;}  
  
fieldset.input {  
 margin:0;  
 padding:0;  
 border:0;  
 font:12px Verdana, Helvetica, sans serif;  
}  
  
fieldset.input label { /* Alle Labels UND Formularelemente auswählen */  
   display: block;  
 clear:both;  
   width:100px; /* Breite.*/  
  font-weight:bold;  
 margin:0;  
 padding:0;  
}  
  
fieldset.input input {  
   display: block;  
 float:left;  
   width:150px;  
   border:1px solid #cccccc;  
 margin:0 0 8px 0;  
 padding:0;  
}  
  
fieldset.input input#submit {  
 display:block;  
 width:150px;  
 height:25px;  
 line-height:25px;  
 clear:left;  
 color:#fff;  
 text-align:center;  
   margin:0;  
 padding:0;  
 border:0;  
}

Interessant sind dabei mehr die ersten Zeilen vor allem die Deklarierung #container. In diesem möchte ich ein Hintergrundbild anzeigen lassen und evtl eine border-right und border-left. Allerdings geschieht dies nicht! HTML-Seite sieht so aus:

<html>  
<head>  
<link rel="stylesheet" type="text/css" href="css/template.css">  
</head>  
<body>  
<div id="container">  
<div id="header"></div>  
<div id="left"></div>  
<div id="content">content</div>  
<div id="menu">test</div>  
</div>  
</body>  
</html>

Habe das jetzt vereinfacht. Sowohl auf der Joomla-Seite als auch bei einem Test "nur" mit HTML funktioniert es nicht.

Hat jemand eine Idee?

Gruß

henne32

[ChrisB]

Hi,

Ich stehe vor einem "mysteriösen" Problem:

Sein Name lautet "Ich weiss nicht, was ich tue, und wundere mich jetzt darueber".

Interessant sind dabei mehr die ersten Zeilen vor allem die Deklarierung #container. In diesem möchte ich ein Hintergrundbild anzeigen lassen und evtl eine border-right und border-left. Allerdings geschieht dies nicht!

Natuerlich siehst du davon nichts - schliesslich hast du alle seine Kindelemente per absoluter Positionierung aus dem Fluss genommen, so dass sie seine Masze nicht mehr beeinflussen koennen.

<gebetsmuehle> Gerade Anfaenger, die die Auswirkungen von absoluter Positionierung noch nicht einschaetzen koennen, sollten erst Mal die Finger von ihr lassen. </gebetsmuehle>

Und zum Aufbau eines kompletten Layouts ist absolute Positionierung auch in den seltensten Faellen geeignet. Beschaeftige dich also mit alternativen Moeglichkeiten,

MfG ChrisB

[henne32]

Tja, manchmal sieht man den Wald vor lauter Bäumen nicht und freut sich dann sogar über ein so tolles unfreundliches Posting! Es tut mir leid, dass ich mit deinem Experten-Wissen in Sachen CSS, HTML und was sonst noch alles nicht mithalten kann, aber: <gebetsmühle>probieren geht über studieren</gebetsmühle>!

In diesem Sinne: einen schönen Abend!

Gruß

henne32

[Sebastian]

Hi,

abgesehen davon, dass du es dir hättest sparen können deine komplette css-Datei hier wiederzugeben, heißt die css-Eigenschaft "background-image"!

gruß
Sebastian

[ChrisB]

Hi,

abgesehen davon, dass du es dir hättest sparen können deine komplette css-Datei hier wiederzugeben,

Da hast du wohl recht,

heißt die css-Eigenschaft "background-image"!

aber die Kurzschreibweise scheint dir nicht bekannt zu sein - vielleicht solltest du das noch mal nachlesen gehen.

MfG ChrisB

[Sebastian]

aber die Kurzschreibweise scheint dir nicht bekannt zu sein - vielleicht solltest du das noch mal nachlesen gehen.

Das wusste ich wirklich nicht. Es scheint sich zu bestätigen das Halbwissen nicht von Nutzen ist.

gruß
Sebastian

[ChrisB]

Hi,

Es scheint sich zu bestätigen das Halbwissen nicht von Nutzen ist.

Nun, man kann immer versuchen, es zu verdoppeln :-)

MfG ChrisB