Header-Bild mit 3 Schatten-PNGs versehen bei Theme AVitamin+
Eingetragen von KnobelVogel (61)am 12.01.2011 - 22:08 Uhr in
Hallo Forum,
ich verzweifle mal wieder. Leider bin ich noch nicht sicher genug in CSS und brauche Hilfe.
Was ich tun und wissen möchte:
- Im Theme AVitamin+ ist ein einziges (sehr großes) Header-Image vorgesehen. Ich möchte mein eigenes mit verlaufenden Schatten versehen, um das Hauptbild als jpg einzubinden, aber ausdrücklich mit Schatten für Links, Rechts und Unten. Die PNGs für die Schatten sind vorhanden. (Ähnliches will ich evtl. noch an anderer Stelle tun). Ich möchte ausdrücklich NICHT NUR EIN einziges Schattenbild in den Hintergrund setzen!
- Was ist eigentlich ein Wrapper? Ich kann nirgendwo in den Dateien des Themes erkennen, wo es mittig ausgerichtet wird. Bei manchen Änderungen ist die Ausrichtung bei mir immer gleich kaputt.
Was habe ich bisher getan (tausende Versuche und Änderungen, inkl. Cache leeren - was ich anfangs vergaß):
1. ich habe folgenden Teil in der page.tpl.php
<?php if($header){?><div id="header"><!--HEADER-->
<?php print $header ?>
</div><!--END HEADER--><?php } ?>durch
<div id="header"><!--HEADER-->
<div id="_links">
</div>
<div id="_oben">
</div>
<div id="_rechts">
</div>
<div id="_unten">
</div>
<div class="block-region">
</div>
</div><!--END HEADER-->ersetzt.
In der CSS habe ich folgende Punkte, z.T. auskommentiert weil zig andere Sachen, wie über "top, left, etc." oder "position:relative, etc.", schon probiert:
#header{
margin-top:8px;
margin-bottom:8px;
/* background-image:url(img/bild.png); */
background-position:-8px 5px;
width:930px;
height:238px;
background-repeat:no-repeat;
padding-top:0px;
overflow:visible;
}
#_links{
background-image:url('img/links.png');
background-repeat:no-repeat;
background-position:0px 0px;
/* position:absolute;
top:0px;
left:0px; */
width:7px;
height:230px;
overflow:visible;
}
#_oben{
background-image:url('img/bild.jpg');
background-repeat:no-repeat;
background-position:7px 0px;
/* position:absolute;
top:0px;
left:7px; */
width:924px;
height:230px;
overflow:visible;
}
#_rechts{
background-image:url('img/rechts.png');
background-repeat:no-repeat;
/* position:absolute;
top:0px;
left:931px; */
width:7px;
height:238px;
}
#_unten{
background-image:url('img/unten.png');
background-repeat:no-repeat;
/* position:absolute;
top:230px;
left:0px; */
width:931px;
height:8px;
}An übergeordneten Divs/Klassen/Ids nix geändert...
Sobald ich irgendwie Positionen angebe oder die Anordnung gestalten will, ist das mittig ausgerichtete Layout entweder kaputt (also auch bei dem folgenden Content und Sidebars), oder eben einfach die erforderlichen Schatten untereinander, hinter anderem Content, etc.
Das Problem ist, ich weiß nicht wie ich bezügl. der übergeordneten Divs richtig die Position angeben und gleichzeitig der Content nach wie vor zentriert ist.
Wenn ich nur dieses BilderPuzzle gesondert in einer HTML-Datei mach mit gleichem Code (also nicht dem hier natürlich, sondern einheitlich und nur diese Divs), funktioniert es perfekt.
Wer kann mir helfen?
Ich wäre sehr dankbar!
Grüße
KnobelVogel
Als Ergänzung noch das Beispiel, das einwandfrei sozusagen "stand-alone" funktioniert * , aber in das Theme übertragen eben nicht.
*mit Ausnahme, dass die Grafiken nicht zentriert sind natürlich.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> </title>
<style type="text/css">
body {
color: black; background-color: white;
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
margin: 0; padding: 0em 0;
text-align: center; /* Zentrierung im Internet Explorer */
}
div#Inhalt {
margin-top:0px;
border: 1px dashed silver;
}
#header{
position:relative;
top:50px;
margin:0px 0 0 0;
padding:0 0 0 0;
}
#links{
background-image:url('links.png');
background-repeat:no-repeat;
position:absolute;
top:0px;
left:0px;
width:7px;
height:230px;
}
#oben{
background-image:url('bild.jpg');
background-repeat:no-repeat;
position:absolute;
top:0px;
left:7px;
width:924px;
height:230px;
}
#rechts{
background-image:url('rechts.png');
background-repeat:no-repeat;
position:absolute;
top:0px;
left:931px;
width:7px;
height:238px;
}
#unten{
background-image:url('unten.png');
background-repeat:no-repeat;
position:absolute;
top:230px;
left:0px;
width:931px;
height:8px;
}
</style>
</head>
<body>
<div id="Inhalt">
blabla
<div id="header">
<div id="links">
</div>
<div id="oben">
</div>
<div id="rechts">
</div>
<div id="unten">
</div>
</div>
</div>
</body>
</html>- Anmelden oder Registrieren um Kommentare zu schreiben
KnobelVogel schrieb Hallo
am 13.01.2011 - 00:37 Uhr
Hallo Forum,
ich verzweifle mal wieder. Leider bin ich noch nicht sicher genug in CSS und brauche Hilfe.
Was ich tun und wissen möchte:
- Im Theme AVitamin+ ist ein einziges (sehr großes) Header-Image vorgesehen. Ich möchte mein eigenes mit verlaufenden Schatten versehen, um das Hauptbild als jpg einzubinden, aber ausdrücklich mit Schatten für Links, Rechts und Unten. Die PNGs für die Schatten sind vorhanden. (Ähnliches will ich evtl. noch an anderer Stelle tun). Ich möchte ausdrücklich NICHT NUR EIN einziges Schattenbild in den Hintergrund setzen!
- Was ist eigentlich ein Wrapper? Ich kann nirgendwo in den Dateien des Themes erkennen, wo es mittig ausgerichtet wird. Bei manchen Änderungen ist die Ausrichtung bei mir immer gleich kaputt.
Was habe ich bisher getan (tausende Versuche und Änderungen, inkl. Cache leeren - was ich anfangs vergaß):
1. ich habe folgenden Teil in der page.tpl.php
<?php if($header){?><div id="header"><!--HEADER--><?php print $header ?>
</div><!--END HEADER--><?php } ?>
durch
<div id="header"><!--HEADER--><div id="_links">
</div>
<div id="_oben">
</div>
<div id="_rechts">
</div>
<div id="_unten">
</div>
<div class="block-region">
</div>
</div><!--END HEADER-->
ersetzt.
In der CSS habe ich folgende Punkte, z.T. auskommentiert weil zig andere Sachen, wie über "top, left, etc." oder "position:relative, etc.", schon probiert:
#header{
margin-top:8px;
margin-bottom:8px;
/* background-image:url(img/bild.png); */
background-position:-8px 5px;
width:930px;
height:238px;
background-repeat:no-repeat;
padding-top:0px;
overflow:visible;
}
#_links{
background-image:url('img/links.png');
background-repeat:no-repeat;
background-position:0px 0px;
/* position:absolute;
top:0px;
left:0px; */
width:7px;
height:230px;
overflow:visible;
}
#_oben{
background-image:url('img/bild.jpg');
background-repeat:no-repeat;
background-position:7px 0px;
/* position:absolute;
top:0px;
left:7px; */
width:924px;
height:230px;
overflow:visible;
}
#_rechts{
background-image:url('img/rechts.png');
background-repeat:no-repeat;
/* position:absolute;
top:0px;
left:931px; */
width:7px;
height:238px;
}
#_unten{
background-image:url('img/unten.png');
background-repeat:no-repeat;
/* position:absolute;
top:230px;
left:0px; */
width:931px;
height:8px;
}
An übergeordneten Divs/Klassen/Ids nix geändert...
Sobald ich irgendwie Positionen angebe oder die Anordnung gestalten will, ist das mittig ausgerichtete Layout entweder kaputt (also auch bei dem folgenden Content und Sidebars), oder eben einfach die erforderlichen Schatten untereinander, hinter anderem Content, etc.
Das Problem ist, ich weiß nicht wie ich bezügl. der übergeordneten Divs richtig die Position angeben und gleichzeitig der Content nach wie vor zentriert ist.
Wenn ich nur dieses BilderPuzzle gesondert in einer HTML-Datei mach mit gleichem Code (also nicht dem hier natürlich, sondern einheitlich und nur diese Divs), funktioniert es perfekt.
Wer kann mir helfen?
Ich wäre sehr dankbar!
Grüße
KnobelVogel
Als Ergänzung noch das Beispiel, das einwandfrei sozusagen "stand-alone" funktioniert * , aber in das Theme übertragen eben nicht.
*mit Ausnahme, dass die Grafiken nicht zentriert sind natürlich.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> </title>
<style type="text/css">
body {
color: black; background-color: white;
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
margin: 0; padding: 0em 0;
text-align: center; /* Zentrierung im Internet Explorer */
}
div#Inhalt {
margin-top:0px;
border: 1px dashed silver;
}
#header{
position:relative;
top:50px;
margin:0px 0 0 0;
padding:0 0 0 0;
}
#links{
background-image:url('links.png');
background-repeat:no-repeat;
position:absolute;
top:0px;
left:0px;
width:7px;
height:230px;
}
#oben{
background-image:url('bild.jpg');
background-repeat:no-repeat;
position:absolute;
top:0px;
left:7px;
width:924px;
height:230px;
}
#rechts{
background-image:url('rechts.png');
background-repeat:no-repeat;
position:absolute;
top:0px;
left:931px;
width:7px;
height:238px;
}
#unten{
background-image:url('unten.png');
background-repeat:no-repeat;
position:absolute;
top:230px;
left:0px;
width:931px;
height:8px;
}
</style>
</head>
<body>
<div id="Inhalt">
blabla
<div id="header">
<div id="links">
</div>
<div id="oben">
</div>
<div id="rechts">
</div>
<div id="unten">
</div>
</div>
</div>
</body>
</html>
Mein erster Gedanke zu dem Thema war Bildbearbeitung. Damit dürfte es ganz leicht sein den gewünschen Effekt zu erzielen. Gimp wäre eine kostenlose Alternative zu teuren Programmen wie Photoshop und Co.
Kirreth schrieb Mein erster
am 13.01.2011 - 01:56 Uhr
Mein erster Gedanke zu dem Thema war Bildbearbeitung. Damit dürfte es ganz leicht sein den gewünschen Effekt zu erzielen. Gimp wäre eine kostenlose Alternative zu teuren Programmen wie Photoshop und Co.
Hallo Kirreth!
Nee, Photoshop oder Gimp ist Wurst. Da bin ich fit genug (kenne ich besser als studiert - behaupte ich dreist). Das Problem sind nicht die Grafiken, sondern die Formatierung/Layout in CSS (die aber unstudiert) hierarchisch unterhalb des Themes bzw. mangelnde Kenntnisse in CSS.
Schau aber bitte nochmal drüber, insbesondere die HTML-Datei/Code am Ende im Vergleich zur Einbindung der DIVs am Anfang ins Theme. Wie gesagt, a) die relativen Koordinaten und b) die Zentrierung des Contents insgesamt (evtl. nicht ersichtlich ohne übergeordnete DIVs) sind der Punkt.