[Gelöst] Text im Header einfügen

[m266]

Hallo zusammen,

ich habe in meinem neuen Layout im Header eine Hintergrundgrafik eingefügt und komme durch klicken in den Header auch wie gewünscht zur Startseite zurück. Jetzt möchte ich im Header Text per HTML (zweizeilige Textmarke) hinzufügen. Wenn ich dazu ein weiteres DIV verwende, geht der Klick in den Header nicht mehr. Hat jemand eine Idee, wie das lösbar ist?

Hier die relevanten Code-Teile:

HTML:


{cms_selflink dir="start"}



CSS:
#header { /* Banner */
background : transparent url(uploads/layout/banner4.jpg) no-repeat scroll center center;
height : 195px;
margin : 0 auto;
border-top : 5px solid #ffffff;
text-align : left;
}

div#header h1 a { /* Relink Startseite */
   display: block;
   height: 190px;
   margin-left: 10px;
   margin-right: 10px;
   text-indent: -999em;  /* this hides the text */
   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

[antibart]

Da der Link ja etwa die gesamte Größe des Headers einnimmt, kann innerhalb des Links kein zusätzlicher Inhalt mehr eingefügt werden.

Aber mit Layern geht es..

Hier Dein modifizierter Code

Ich hab mir den originalen css Code nicht so ganz genau angesehen. Es geht sicher eleganter, weil ein paar Sachen aus dem alten code evtl nun hinfällig sind. Funktioniert aber.

Code: Select all

#header { /* Banner */
background : #F7A66A url(uploads/layout/banner4.jpg) no-repeat scroll center center;
height : 195px;
margin : 0 auto;
border-top : 5px solid #ffffff;
text-align : left;
}

div#header h1 a { /* Relink Startseite */
height: 190px;
 z-index:0;
   position:absolute;
   left: 0; top: 0;
   margin-left: 10px;
   margin-right: 10px;
   width:100%;
   text-indent: -999em;  /* this hides the text */
   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

#text{
z-index:1;
left: 234px; top: 100px;
position:absolute;}

Code: Select all

<div id="header">
<h1><a href="#"></a></h1>
</div>
<div id="text">asdasdasd</div>

[m266]

Danke. Im Prinzip funktioniert es, aber:

Durch die Angabe "left: 234px; top: 100px;" ist die Textmarke je nach Bildschirmauflösung an unterschiedlicher Stelle, ggf. sogar außerhalb des Headers. Mein Layout ist zentriert und hat einen linken Rand von etwa 100px.

Diese Lösung wäre nur für eine bestimmte Auflösung geeignet.

Hat jemand noch ne Idee?

[antibart]

Diese Lösung wäre nur für eine bestimmte Auflösung geeignet.

Falsch...
Nur im Falle deines Codeschnipsels, der ja nichts über das restliche Layout verrät. Demenstprechend hab ich die Layer natürlich lediglich auf den vohandenen Code bezogen positioniert.

Mittlels display:block; sollte die Position auch auf Elternelemente anwendbar sein.

Die zweite Möglichkeit wäre sehr umstandlich: Du zerstückelst den Header in mehrere Divs und verlinkst alle einzeln außer jenem, in dem der Text drin steht.

Andere Möglichkeiten über css sehe ich nicht, da innerhalb einer Hyperlinks kein externer Inhalt stehen kann.

[m266]

Ich nehme an, du meinst so:

#text{margin-top:10px;
z-index:1;
left: 234px; top: 100px;
position:absolute;
display:block;
}


Ein entscheidender Nachteil ist, dass der Sprung zur Startseite im Bereich des Containers text nicht geht.

Werde das Thema vertagen, bis eine bessere Lösung vorliegt. Wenn ich selbst was finde, schreibe ich es hier rein.

Danke für deine Unterstützung.

[antibart]

Ein entscheidender Nachteil ist, dass der Sprung zur Startseite im Bereich des Containers text nicht geht.

Ähem ...aber wie man aus Text einen Hyperlink erstellt, weisst Du ... oder?

Was spricht dagegen, den Text einfach zusätzlich zu verlinken. ... Fette Überschrift mit sprechendem Inhalt recht nahe am Body-Tag und auch noch als Link: Google schlüge Purzelbäume vor Freude. Das Ganze hätte also auch noch SEO-Vorteile.

Werde das Thema vertagen, bis eine bessere Lösung vorliegt.

Ich bin gespannt...

PS: je mehr Du von Beginn an preisgibst, umso schneller ist Dein Problem erledigt.

[antibart]

...

Total simple Lösung:

Warum packst Du das Background-Bild nicht einfach in den Text-Link statt in den Header und formatierst es wie jedes andere Menü auch? 

Letztendlich kannst Du auch einen Link oder / und eine Überschrift ähnlich formatieren wie einen Container. dh: ihm eine Größe, ein Hintergrundbild, Schriftgröße usw verpassen und den Text im Link auch positionieren.


Ich bin zunächst davon ausgegangen, dass der Text ein eigener NICHT verlinkter Container sein soll, da Du es etwas unkonkret beschrieben hast. Deswegen kam ich auf die Idee mit dem Layer.

[m266]

Habe nun diverse Lösungen versucht, welche alle nicht befriedigend waren.
Das Thema gehe ich später wieder an, wenn ich nicht so unter Zeitdruck stehe.

[m266]

Neuer Versuch, aber noch nicht neues Glück...
(Angelehnt an die total simple Lösung von Antibart)

Hier ein Codeauszug:

HTML:











Textmarke





...


CSS:
/* DIV-Container */
#page {
background : #ffffff;
width : 1000px;
margin : 0 auto;
}

#header { /* Banner */
z-index:0;
height : 195px;
margin-left: 10px;
border-top : 5px solid #ffffff;
text-align : left;
}

#header-text{
z-index:1;
position:absolute;
left: 250px; top: 50px;
}

#container {
...

Ich habe somit das Hintergrundbild verlinkt und die Container header und header-text mit z-index versehen. Das Problem bei der absoluten Positionierung ist nun, dass sich header-text wohl auf body bezieht und somit je nach Auflösung hin- und herwandert.

Wie kann ich erreichen, dass sich die Position von header-text auf header bzw. page bezieht? Das Layout ist mit dem Container page zentriert.

[antibart]

Neuer Versuch, aber noch nicht neues Glück...
(Angelehnt an die total simple Lösung von Antibart)

Nein - da hast Du irgendwas komplett missverstanden. Das hat rein gar nichts mit meinem letzten Vorschlag zu tun.

Du brauchst keine layer, kein z-index, keine absolute Positionierung - lediglich einen einzigen Container mit einem einfachen Textlink drin.


Hier ein simples Beipiel, nur um das Priinzip klar zu machen:

HTML
Text

CSS
#header {
height: 190px;
width:1000px;
overflow:hidden;
}

#header a {
background : #F7A66A url(uploads/layout/banner4.jpg) no-repeat;
width:1000px;
height:190px;
padding: 50px 0 0 50px;
display:block;
}


Feddich... Dieser Code zeigt ein 1000 x 190px großen Bereich mit BAckground-Image an, in dem beliebig formatierbarer und positionierbarer Hypertext steht, Der komplette Bereich ist verlinkt.

Im Gegensatz zu Deinem Ursprungscode wird hier fast alles hauptsächlich über den Text-Link selbst formatiert, nicht über den Header-Container PLUS Linkbereich PLUS Text. Der Div="header" erfüllt nur noch formale Aufgaben.

Es ist nur ein Beispiel.  Ein bißchen Arbeit will Dir ja auch noch überlassen.

[m266]

Beim Barte des Propheten: Jetzt habe ich es hinbekommen!

Für die zweizeilige Textmarke habe ich eine eigene Klasse angelegt, den Hovereffekt abgeschaltet und die Linkfarbe (auch Textfarbe) in weiß definiert. Im Link ... habe ich die Raute gelöscht. Geht auch ohne Raute. Hat das einen besonderen Sinn oder war die Raute nur ein Platzhalter?

Hier der aktuelle Code-Auszug:

HTML:






Hans Mustermann
Frankfurt/Main






---

CSS:
/* DIV-Container */
#page {
background : #ffffff;
width : 1000px;
margin : 0 auto;
}

#header {
height: 190px;
width:1000px;
overflow:hidden;
}

#header a{ /* Farbe Textmarke */
color : #ffffff;
}

#header a {
background : #ffffff url(uploads/layout/banner5.jpg) no-repeat;
width:1000px;
height:190px;
margin-left: 10px;
margin-right: 10px;
padding: 50px 0 0 50px; /* Position Textmarke */
border-top : 5px solid #ffffff;
text-align : left;
display:block;
}

.header-text { /* Textmarke */
font-family : arial;
font-size : 250%;
font-style : normal;
font-variant : normal;
font-weight : bold;
line-height : normal;
margin-top : 0;
padding-top : 0;
}
...


Der Code ist valide, aber ggf. kann man noch was verbessern/löschen.

@antibart:
Danke für deine Hinweise. Man(n) lernt nie aus. Bitte kurzes Feedback, ob der Code so OK und sinnvoll ist.

[antibart]

Im Link ... habe ich die Raute gelöscht. Geht auch ohne Raute. Hat das einen besonderen Sinn oder war die Raute nur ein Platzhalter?

Das ist ein blindlink zur aktiven Seiten sozusagen ... also in diesem Fall ein Platzhalter.

Sorry, dass ich nicht so ins Detail gegangen bin ... ich bin von fortgeschrittener Codierungerfahrung ausgegangen. Hätte vielleicht dazu sagen müssen, was wichtig ist und was nicht.

Wenn es so hinhaut, lass es so. Ich selbst würde das DIV für die Textmarke weglassen, weil es im Grunde überflüssig ist und der komplette Text ebenso über #header a{..} formatiert werden kann. Aber das ist Geschmacksache...Für die Textfarbe hast Du einen eigenen css-Aufruf.. ist OK für Deine eigene Übersichtlichkeit, muss aber nicht.

[m266]

Ich bin nicht der große Programmierer, aber mit diversen Änderungen in HTML und PHP komme ich schon zurecht. Werde es so belassen, da es einwandfrei funktioniert. Ich nutze CMSMS seit etwa zwei Jahren und habe ca zehn Websites am Laufen. Finde das Programm sehr gut.

[antibart]

Werde es so belassen, da es einwandfrei funktioniert.

Das ist - wie ich ja sagte - auch völlig OK und eher Geschmacksache oder zumindest eine Frage der Übersicht... die einen finden sich besser zurecht, wenn sie css-Formatierungen sinnvoll aufteilen und trennen. Die anderen - dazu gehöre dann ich  - formatieren lieber möglichst viel in einer {}-Klammer... Jeder wie er mag. Rein technisch kommt es aufs gleiche raus.