[CSS] Grafik Overlay

Dieses Thema im Forum "Webdesign" wurde erstellt von Fabi3310, 27. April 2010 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 27. April 2010
    Grafik Overlay

    Hallo, ich habe ein Problem. In Joomla habe ich mir ein Template heruntergeladen und dies nach meinen Wünschen bearbeitet. Nun bin ich aber an einem Punkt, an dem ich nicht weiter weiß.

    Ich möchte die Grafik aus #top (sitename.png) hinter den Text aus dem Contetn machen, also dem was auf der Seite zu lesen ist. Ich habe im Internet gefunden, dass man das mit z-index realisieren kann, doch ich bekomme es nicht hin.

    Hier mal der komplette Code:

    Code:
    /*-- Grey Colorfall --*/

/*-- Bacic HTML elements --*/

body {
 background-color: ##f0f0f0; 
}

h1, h2 {
 color: #333;
}

a:link, a:visited {
 color: #7c7c7c;
}

li {
 background: url(../images/grey/list_g.gif) 0px 6px no-repeat;
}

fieldset {
 border: 1px solid #dedede;
}

/*-- Template Layout --*/

.width_fixed {
 border-left: 1px solid #9e9e9e;
}

.content {
 background: #fff url(../images/grey/lmods_bg_g.gif) right repeat-y;
}

.lmods {
 width: 21%;
 background: #b5b5b5 url(../images/grey/rmods_bg_g.gif) right repeat-y;
}

.rmods {
 background: #000;
 width: 21%;
}

.rmods_bottom {
 background: #000 url(../images/grey/bottomright_g.gif) right bottom no-repeat;
 width: 21%;
}

.content_wide {
 background: #fff url(../images/grey/only_rmods_bg_g.gif) right repeat-y;
}


#top {
 position: relative;
 top: 0px;
 left: 30px;
 width: 304px;
 height: 247px;
 background: url(../images/sitename.png);
 z-index: 1;
 
 
}

#copyright {
 border-top: 3px solid #333;
}

#feeds {
 background: url(../images/grey/feed_g.gif) left no-repeat; 
}

#feeds a {
 color: #333;
}

/*-- Joomla Styles --*/

button, .button {
 background-color: #666;
 color: #fcfcfc;
 border-left: 1px solid #ccc;
 border-top: 1px solid #ccc;
 border-right: 1px solid #898989;
 border-bottom: 1px solid #898989;
}
 
input#email, .inputbox {
 background-color: #dedede;
 color: #000;
 border-left: 1px solid #898989;
 border-top: 1px solid #898989;
 border-right: 1px solid #dedede;
 border-bottom: 1px solid #dedede;
}

ul.menu li a:link, ul.menu li a:visited {
 color: #f5f5f5;
}

ul.menu li a:hover {
 color: #ccc;
}

ul.menu li ul li {
 background: url(../images/grey/submenu_g.gif) 0px 10px no-repeat;
}

ul.menu li ul li a:link, ul.menu li ul li a:visited {
 color: #b2b2b2;
}
 
ul.menu li ul li a:hover {
 color: #898989;
}

.small, .createdate, .modifydate {
 color: #b2b2b2;
}

.smalldark {
 color: #333333;
}

.readon {
 background: #dedede url(../images/grey/readon_g.gif) 5px 8px no-repeat;
 border-top: 1px solid #333;
}

a.readon:link, a.readon:visited, a.readon:active {
 color: #666;
 border-bottom: 1px solid #dedede;
}

a.readon:hover {
 color: #000;
 border-bottom: 1px dotted #000;
}

.contentheading {
 color: #333;
}

a.contentpagetitle:link, a.contentpagetitle:visited {
 color: #333;
}
 
a.contentpagetitle:hover {
 color: #000;
}

.componentheading {
 color: #E84C40;
 border-bottom: 1px solid #9e9e9e;
 font-weight: bolder;
}

table.contenttoc {
 border-top: 1px solid #333;
}

table.contenttoc td {
 border: 1px solid #DBDBDB; 
 border-top: none;
}

table.contenttoc th {
 background-color: #dedede;
}

table.contenttoc a:hover {
 color: #484848;
}

.sectiontableheader {
 background: #dedede;
 border-top: 1px solid #333;
 color: #333;
}

.sectiontableentry1 {
 background-color: #F1F1F1;
 color: #333;
}

.sectiontableentry2 {
 background-color: #F9F9F9;
 color: #333;
}

div.moduletable_menu, div.moduletable, div.moduletable_text {
 color: #dedede;
}

div.module h3 {
 background: url(../images/grey/leftmodules_bg_g.gif) right 20px no-repeat;
 color: #f5f5f5;
}

table.moduletable th {
 color: #f5f5f5;
}

div.moduletable h3, div.moduletable_menu h3, div.moduletable_text h3 {
 background: url(../images/grey/rightmodules_bg_g.gif) right 20px no-repeat;
 color: #b2b2b2;
}

table.moduletable li a, table.moduletable li a:visited {
 color: #333;
}

div.module a, div.module a:visited, table.moduletable a, table.moduletable a:visited {
 color: #fefefe;
}

div.moduletable li {
 background: url(../images/grey/submenu_g.gif) 0px 6px no-repeat;
}

.pollstableborder {
 border-left: 3px solid #898989;
 border-top: 3px solid #898989;
 border-right: 3px solid #dedede;
 border-bottom: 3px solid #dedede;
 margin: 5px;
}
    Falls noch etwas unklar ist, es sind mehrere Dateien, die das aussehen der Seite definieren. Es gibt auch noch eine normale template.css, das oben war template_grey.css da es verschiedene Designfarben gibt.

    Ich füge hier jetzt einfach nochmal den Code von der anderen Datei bei:

    Code:
    /*-- Grey Colorfall --*/

/*-- Bacic HTML elements --*/

body {
 background-color: ##f0f0f0; 
}

h1, h2 {
 color: #333;
}

a:link, a:visited {
 color: #7c7c7c;
}

li {
 background: url(../images/grey/list_g.gif) 0px 6px no-repeat;
}

fieldset {
 border: 1px solid #dedede;
}

/*-- Template Layout --*/

.width_fixed {
 border-left: 1px solid #9e9e9e;
}

.content {
 background: #fff url(../images/grey/lmods_bg_g.gif) right repeat-y;
}

.lmods {
 width: 21%;
 background: #b5b5b5 url(../images/grey/rmods_bg_g.gif) right repeat-y;
}

.rmods {
 background: #000;
 width: 21%;
}

.rmods_bottom {
 background: #000 url(../images/grey/bottomright_g.gif) right bottom no-repeat;
 width: 21%;
}

.content_wide {
 background: #fff url(../images/grey/only_rmods_bg_g.gif) right repeat-y;
}


#top {
 position: relative;
 top: 0px;
 left: 30px;
 width: 304px;
 height: 247px;
 background: url(../images/sitename.png);
 z-index: 1;
 
 
}

#copyright {
 border-top: 3px solid #333;
}

#feeds {
 background: url(../images/grey/feed_g.gif) left no-repeat; 
}

#feeds a {
 color: #333;
}

/*-- Joomla Styles --*/

button, .button {
 background-color: #666;
 color: #fcfcfc;
 border-left: 1px solid #ccc;
 border-top: 1px solid #ccc;
 border-right: 1px solid #898989;
 border-bottom: 1px solid #898989;
}
 
input#email, .inputbox {
 background-color: #dedede;
 color: #000;
 border-left: 1px solid #898989;
 border-top: 1px solid #898989;
 border-right: 1px solid #dedede;
 border-bottom: 1px solid #dedede;
}

ul.menu li a:link, ul.menu li a:visited {
 color: #f5f5f5;
}

ul.menu li a:hover {
 color: #ccc;
}

ul.menu li ul li {
 background: url(../images/grey/submenu_g.gif) 0px 10px no-repeat;
}

ul.menu li ul li a:link, ul.menu li ul li a:visited {
 color: #b2b2b2;
}
 
ul.menu li ul li a:hover {
 color: #898989;
}

.small, .createdate, .modifydate {
 color: #b2b2b2;
}

.smalldark {
 color: #333333;
}

.readon {
 background: #dedede url(../images/grey/readon_g.gif) 5px 8px no-repeat;
 border-top: 1px solid #333;
}

a.readon:link, a.readon:visited, a.readon:active {
 color: #666;
 border-bottom: 1px solid #dedede;
}

a.readon:hover {
 color: #000;
 border-bottom: 1px dotted #000;
}

.contentheading {
 color: #333;
}

a.contentpagetitle:link, a.contentpagetitle:visited {
 color: #333;
}
 
a.contentpagetitle:hover {
 color: #000;
}

.componentheading {
 color: #E84C40;
 border-bottom: 1px solid #9e9e9e;
 font-weight: bolder;
}

table.contenttoc {
 border-top: 1px solid #333;
}

table.contenttoc td {
 border: 1px solid #DBDBDB; 
 border-top: none;
}

table.contenttoc th {
 background-color: #dedede;
}

table.contenttoc a:hover {
 color: #484848;
}

.sectiontableheader {
 background: #dedede;
 border-top: 1px solid #333;
 color: #333;
}

.sectiontableentry1 {
 background-color: #F1F1F1;
 color: #333;
}

.sectiontableentry2 {
 background-color: #F9F9F9;
 color: #333;
}

div.moduletable_menu, div.moduletable, div.moduletable_text {
 color: #dedede;
}

div.module h3 {
 background: url(../images/grey/leftmodules_bg_g.gif) right 20px no-repeat;
 color: #f5f5f5;
}

table.moduletable th {
 color: #f5f5f5;
}

div.moduletable h3, div.moduletable_menu h3, div.moduletable_text h3 {
 background: url(../images/grey/rightmodules_bg_g.gif) right 20px no-repeat;
 color: #b2b2b2;
}

table.moduletable li a, table.moduletable li a:visited {
 color: #333;
}

div.module a, div.module a:visited, table.moduletable a, table.moduletable a:visited {
 color: #fefefe;
}

div.moduletable li {
 background: url(../images/grey/submenu_g.gif) 0px 6px no-repeat;
}

.pollstableborder {
 border-left: 3px solid #898989;
 border-top: 3px solid #898989;
 border-right: 3px solid #dedede;
 border-bottom: 3px solid #dedede;
 margin: 5px;
}
    Wenn jemand den Namen des Templates zur Problemlösung benötigt, er heißt COLORFALL, via google sollte er zu finden sein.


    Über Lösungen würde ich mich sehr freuen,

    Grüßle
     
  3. 27. April 2010
    AW: Grafik Overlay

    Bei Position relative überlagern sich die Container ja auch nicht nur bei absolute klappt das.


    Beispiel:

    Funktioniert:
    HTML:
    <div style="position:absolute;height:50px;width:50px;background-color:red;z-index:100">test</div>
<div style="position:relative;height:150px;width:150px;background-color:#000;">test</div>
    Funktioniert nicht:
    HTML:
    <div style="position:relative;height:50px;width:50px;background-color:red;z-index:100">test</div>
<div style="position:relative;height:150px;width:150px;background-color:#000;">test</div>
     
  4. 27. April 2010
    AW: Grafik Overlay

    Dankeschön, dass mit dem überlagern habe ich hinbekommen. Wenn ich jetzt den z-index allerdings auf eine negative Zahl mache, ist die Grafik nicht hinter dem Text, sondern ganz verschwunden... Wie kann ich das lösen?
     
  5. 27. April 2010
    AW: Grafik Overlay

    So, habs rausbekommen. Danke, nach dem Tipp hat sich's von alleine gelöst^^
     
  6. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.