• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Überschrift mit Grafik aufwerten

F

fettarmemilch.com

Neues Mitglied
Einen wunderschönen guten Tag,
ich habe folgendes Problem und versteh es einfach nicht.
Ich möchte Überschriften meiner Seite mit einem grafischen Rahmen versehen.
Dafür habe ich 3 Grafiken, eine rechts, eine links und einen sich wiederholenden Hintergrund.
Ich möchte also die Grafik für links und rechts neben die Überschrift setzen und genau das klappt nicht, dass die Hintergrund grafik so oft wiederholt wird wie der Titel-Text lang ist klappt.

HTML: 
<div id="post-0" class="post error404 not-found">
                <h1 class="entry-title"><?php _e( 'Not Found', 'twentyten' ); ?></h1>
                <div class="entry-content">
                       HIER IST DANN DER CODE FÜR DEN INHALT!
                </div>
</div>

Der CSS Teil für "entry-title" ist hier:
HTML: 
.entry-title{
        display:inline;
        font-family: "Trebuchet MS", Arial;
        background:url(images/titlebackground.jpg);
}

Ich hab jetzt versucht ganz stumpf in die Zeile wo der Titel ausgegeben wird einen <img>-tag zu setzen, wird aber nichts angezeigt, auch nicht wenn ich den <img>-tag in den <h1>-tag schreibe.
Mit google wurde ich auch nicht schlauer wenn ich jetzt darauf verwiesen werde.

Danke schonmal für die Hilfe

PS: Wenn das evtl von bedeutung ist geht es um einen wordpress blog den ich modifiziere.
 
So geht's! (Beispielcode; bitte entsprechend ändern)
HTML: 
<h1><span class="left-bg"></span>Überschrifttext<span class="right-bg"></span></h1>
Code: 
.left-bg, .right-bg {
 display:block;
 height:10px;
 width:5px;
}
.left-bg {
 float:left;
 background:url(img/left.png) no-repeat;
}
.right-bg {
 float:right;
 background:url(img/right.png) no-repeat;
}
 
HTML: 
 <div id="post-0" class="post error404 not-found">
                <h1 class="entry-title"><span class="left-bg"></span><?php _e( 'Not Found', 'twentyten' ); ?><span class="right-bg"></span></h1>
                <div class="entry-content">
                        INHALT
                </div>
</div>

Code: 
.entry-title{
        display:inline;
        font-family: "Trebuchet MS", Arial;
        background:url(images/titlebackground.jpg);
}
.left-bg, .right-bg {
 display:block;
 height:45px;
 width:34px;
}
.left-bg {
 float:left;
 background:url(images/titlebackgroundright.jpg) no-repeat;
}
.right-bg {
 float:right;
 background:url(images/titlebackgroundright.jpg) no-repeat;
}

so siehts jetzt aus und es werden die bilder immernoch nicht angezeigt. abgesehen davon, dass beide bilder die gleichen sind, ist ja erstmal auch egal.
 
Dann existiert entweder der Unterordner nicht oder die Bilder sind nicht unter dem Namen dort.
 
Die Bilder werden GARnicht angezeigt? Sind die Bilder und das Stylesheet in verschiedenen Unterordnern? Wenn ja, dann versuch es mal so:

Code: 
background:url(../images/titlebackgroundright.jpg)
 
Naja der Hintergrund der sich wiederholt, der wird angezeigt, also der background vom title.
Dein Tipp hat leider auch nicht geholfen. Möchte den Link noch nicht freigeben, soll nächste Woche erst online gehen. Spätestens da werd ichs dann hier posten wenn ichs da noch nicht hinbekommen habe.
Ich glaube es liegt einfach daran, dass h1 ne Eigene Klasse hat und sich das irgendwie auffrisst. Hab auch schon versucht noch nen Div reinzusetzen, alles nichts geholfen.
 
Innerhalb eines <h1> hat ein <div> nichts zu suchen. Wenn Du innerhalb von <h1> Hilfselemente verwenden willst, nimm <span>, welches natürlich ein Inline-Element ist. Das dürfte auch das Problem sein, wieso dein obiger Code nicht funktioniert. Du hast die Klasse "left-bg" und floatest sie. Sie hängt aber an einem <span>, welches als Inline-Element nicht gefloatet werden kann. Also müsstest Du bei dieser Klasse noch "display: block" ergänzen um das Element zu einem float-baren Blockelement zu machen.

Alternative: absolute Positionierung von ".left-bg" und dem Gegenstück für die rechte Seite.

Alternative 2: wenn die Grafik nur eine Rundung enthält: border-radius.
 
In dem <h1> ist ja jetzt auch ein <span>, ich hatte probiert das <div> noch vor das <h1> zu setzen, was ich genau damit bezwecken wollte ist mir auch noch nicht so klar.
left-bg und right-bg sind als display:block gesetzt:

HTML: 
 <div id="post-0" class="post error404 not-found">
                <h1 class="entry-title"><span class="left-bg"></span><?php _e( 'Not Found', 'twentyten' ); ?><span class="right-bg"></span></h1>
                <div class="entry-content">
                        INHALT
                </div>
</div>

Code: 
.entry-title{
        display:inline;
        font-family: "Trebuchet MS", Arial;
        background:url(images/titlebackground.jpg);
}
.left-bg, .right-bg {
 display:block;
 height:45px;
 width:34px;
}
.left-bg {
 float:left;
 background:url(images/titlebackgroundright.jpg) no-repeat;
}
.right-bg {
 float:right;
 background:url(images/titlebackgroundright.jpg) no-repeat;
}

wenn ich die positionierung absolut setzte ist die überschrift dann noch variabel? je nach überschrift verändert sich ja die größe und breite des textes!?!?
es ist schon eine richtige grafik, border fällt also raus.

dankte trotzdem schonmal.

Gruß
 
Absolut positionierte Elemente können innerhalb eines relativ positionierten Elements auch mit "left" bzw. "right" versehen werden. Dadurch kann das umgebende, relativ positionierte Element auch eine variable Breite haben.

Du hast aber ja schon die display-Variante probiert. Klappt das denn nun?
 
Um das Problem nochmal aufzugreifen hier der Link zur Seite:
fettarmemilch | Ein weiterer WordPress-Blog

Und hier nen Vorschaubild wie es aussehen soll mit dem Rahmen um die Überschriften:
http://www7.pic-upload.de/31.05.11/61r7nsoonk35.jpg

Soll dann so funktionieren, dass links der Rand ist, in der Mitte, wo die Schrift steht dann der Hintergrund der sich wiederholt und rechts dann wieder der andere Rand.
Ich hoffe mal mit dem Link könnt Ihr mehr Anfangen und diese Nervige Detail kann ich endlich abhaken.

Danke schonmal an die bisherige Hilfe.
 
Hallo, schade dass das nicht funktioniert hat mit den Lösungen.
Es gibt noch eine Variante mit einem span in h1:

Dazu gibst du der h1 (welche als inline-Element angezeigt werden sollte)
das rechte Bild mit dem Nagel (siehe dein Layout) und gibst der h1 noch

HTML: 
background-position:right;
padding-right:breite dieses Bildes;

dem span gibst du dann ein langes Backgroundbild, welches links den Nagel hat und
HTML: 
background-position:left;
padding-left:Wert soviel, bis der Nagel sichtbar wird;
display:block;

Dann wiederholt sich zwar das eine Hintergrundbild nicht, sondern ist sehr lang, aber der flexible Inhalt sollte damit kein Problem sein.
Ich hoffe das ist nicht zu kompliziert, sonst lade ich mal ne Beispiel-Datei hoch, damit der Post nicht umsonst war :) .
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben