Füllendes Bild im Header
Posted: Fri May 04, 2012 10:53 am
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
Und hier aus der index.tpl
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 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; }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>Kann mir bitte jemand helfen?
Danke!
Grüsse, Thomas