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