Füllendes Bild im Header

You made an own skin or theme for phpMyFAQ. You can share it here with others!

Moderator: Thorsten

Post Reply
tom_ch
Posts: 8
Joined: Fri May 04, 2012 10:45 am

Füllendes Bild im Header

Post by tom_ch »

Hallo,

ich bin daran, für unsere Firma eine Knowledgebase aufzubauen und bin jetzt über mangelnde CSS-Kenntnisse gestolpert.

Im Header möchte ich füllend (also vom oberen Rand bis zum schwarzen Navigationsbalken und über die ganze Breite) ein Bild einfügen.
Als Anhang ein Screenshot, wie es jetzt aussieht.

Nun, die Loginbox soll natürlich über dem Bild sein.

Hier der Auszug aus der style.css

Code: Select all

/* Header */

#header {
    width: 100%; margin: 0 auto; padding: 0 0 0 0; }
#header h1 {
    font-size: 48px; padding-top: 5px; line-height: .6; }
#header h1 a:link, header h1 a:visited {
    color: #444; display: block; margin: 0; text-decoration: none; }
#header h1 a:hover, header h1 a:active {
    background: none; text-shadow: none; }
#header #loginBox {
    float: right; top: 0; width: 185px; background: #F67600; color: #fff;
    border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; position: absoulte; }
#header #loginSelection {
    text-align: center; padding: 5px; }
#header #loginSelection a:link, #header #loginSelection a:visited {
    color: #fff; }
#header #loginForm {
    position: absolute; width: 175px; z-index: 50; background: #F67600; padding: 5px; margin-top: -5px; border-radius: 5px;
    -moz-border-radius: 5px; -webkit-border-radius: 5px; }
#header #loginForm form input[type="text"], #header #loginForm form input[type="password"] {
    display: table-cell; height: 14px; border: 1px solid #d7d7d7; font-size: 14px; border-radius: 3px;
    -moz-border-radius: 3px; -webkit-border-radius: 3px; }
#header #loginForm .error {
    color: #8b0000; padding: 2px; background-color: #d3d3d3; border-radius: 3px; -moz-border-radius: 3px;
    -webkit-border-radius: 3px; font-weight: bold; z-index:1; }
#header#logo {
	margin-top:0px; margin-left:0px; z-index:2; position: relative; }
Und hier aus der index.tpl

Code: Select all

<header id="header">
<div id="logo"><a title="{header}" href="{faqHome}"><img src="template/spektra/images/cloudy_sky.jpg" width="100%" height="100%" /></a></div>
    <div id="loginBox">
        {loginBox}
    </div>
	
   <!-- <h1>
        <a title="{header}" href="{faqHome}">{header}</a>
    </h1>-->
	
</header>
Für das "Übereinanderlegen" der Container bin ich nach dieser Anleitung vorgegangen: http://www.bennyn.de/programmierung/css ... legen.html

Kann mir bitte jemand helfen?
Danke!

Grüsse, Thomas
You do not have the required permissions to view the files attached to this post.
Iblerinho
Posts: 2
Joined: Fri Dec 07, 2012 4:52 pm

Re: Füllendes Bild im Header

Post by Iblerinho »

tom_ch wrote:Hallo,

ich bin daran, für unsere Firma eine Knowledgebase aufzubauen und bin jetzt über mangelnde CSS-Kenntnisse gestolpert.

Im Header möchte ich füllend (also vom oberen Rand bis zum schwarzen Navigationsbalken und über die ganze Breite) ein Bild einfügen.
Als Anhang ein Screenshot, wie es jetzt aussieht.

Nun, die Loginbox soll natürlich über dem Bild sein.

Hier der Auszug aus der style.css


Für das "Übereinanderlegen" der Container bin ich nach dieser Anleitung vorgegangen: http://www.bennyn.de/programmierung/css ... legen.html

Kann mir bitte jemand helfen?
Danke!

Grüsse, Thomas
Ich bin beim Übereinanderlegen auch auf einen ähnlichen Fehler gekommen und hatte kleine Erfolge mit einer anderen Ausrichtung. Aber ich komme aufgrund von Erfahrungsdefiziten nicht weiter. Schließe mich daher der Suche einfach mal an!
Post Reply