Frage stellen
Ein Grundtemplate aus html, css und php (unter dem CMS Drupal) hat einen normalen Header.
Nur soll aber nachträglich eine Login-Leiste über dem Header plaziert werden.
Leider hat das Login-Modul wiederum eine eigene css und irgendwie "beissen" sich die Haupt-css (style.css) und die login-css (user_bar.css) anscheinend.
Das ganze spielt sich ab unter www.newsdrum.de
Setze ich die login-div-box über die eigentliche Banner-div-box, wird der login nicht dargestellt:
page.tpl.php
<div><php><php></div>
<div>
<php>
<h1><a><php></a></h1>
<php>
<php>
<h2><php></h2>
<php> </div>
<div> <php>
<php> 'links primary-links')) ?>
<php> <php></div>
<php><div><php></div><php>
style.css
* { margin: 0; padding: 0; }
body {
background: #aaa url(bg.png) repeat-y scroll center top;
font-family: verdana,arial,sans-serif;
color: #555;
}
a, a:visited { border-bottom: 1px dotted #006286; color: #006286; text-decoration: none; }
a:active, a:hover { border-bottom:1px solid #414141; color:#994D00; text-decoration:none; }
p { margin-bottom: 1em; }
h1, h2, h3, h4 { font-weight: normal; }
table {
margin: 2px 0 10px 0;
font-size: 0.9em; letter-spacing: -1px;
text-align: left;
line-height: 1.3em;
}
td { padding: 0px 3px 2px 3px; }
#container {
width: 980px;
margin: auto;
position: relative;
background: #aaa url(insidebg.png) repeat-y scroll center top;
}
#main {
width: 960px;
padding-top: 160px;
line-height:1.22em;
}
#header {
background: #444 url(header.jpg) repeat-x;
height: 99px; width: 957px;
font-family: helvetica,verdana,arial,sans-serif;
color: #fff;
position: absolute;
padding-top: 36px;
top: 0px; left: 11px;
}
#header h1 { padding: 11px 12px 0.2em 12px; font-size: 1.8em; line-height: 1em; }
#header h2 { padding: 0.2em 13px; font-size: 0.7em; }
#navtop {
background: url(top_menu.jpg) repeat-x;
font-family: helvetica,verdana,arial,sans-serif;
position: absolute;
height: 36px;
width: 947px;
top: 20px; left: 11px;
padding-left: 10px;
font-size: 12px;
}
#nav {
background: url(main_menu.jpg) repeat-x;
font-family: helvetica,verdana,arial,sans-serif;
position: absolute;
height: 30px;
width: 947px;
top: 118px; left: 11px;
padding-left: 10px;
font-size: 12px;
}
#navsub {
background: url(sub_menu.jpg) repeat-x;
font-family: helvetica,verdana,arial,sans-serif;
position: absolute;
height: 26px;
width: 947px;
top: 128px; left: 11px;
padding-left: 10px;
font-size: 12px;
}
Verschachtele ich aber die login-div-box in die header-div-box, entsteht im Template eine Lücke, die exakt der Höhe des Login-Moduls entspricht und die ich auch nicht per padding in der css "geschlossen" kriege.
Ich meine so:
<div>
<div><php><php></div>
user_bar.css
#newsdrum_login {
height: 3em;
background-color: #000000;
background: #EDF2F8 url(../../images/bg_header.gif) repeat-x scroll left bottom;
font-size: 0.8em;
}
/*
by default, the default form adds some surrounding space, this cancels it
*/
#newsdrum_login div.form-item,
#newsdrum_login div.content {
background: #aaa url(top_menu.jpg) repeat-x scroll center top;
padding: .80em 0;
}
/*
this adds some space in top and bottom, so anything inside can look vertically
centered
*/
#user-bar {
padding: .80em 0;
width:450px;
background: #aaa url(top_menu.jpg) repeat-x scroll center top;
float:left;
}
Würde mich über Ratschläge zur Lösung des Problems freuen.