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