Wir basteln seit einigen Tagen ein einem kniffligen Problem:
Ein Grundtemplate aus html, css und php (unter dem CMS Drupal) hat einen normalen Header.
Nun 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 korrekt dargestellt:
page.tpl.php
Zitat:
<div id="newsdrum_login"><?php print SEOposition_user_bar(); ?><?php print $header; ?></div>
<div id="header">
<?php if ($site_name): ?>
<h1 class='site-name'><a href="<?php print base_path();?>"><?php print $site_name ?></a></h1>
<?php endif; ?>
<?php if ($site_slogan): ?>
<h2 class="site-slogan"><?php print $site_slogan ?></h2>
<?php endif; ?> </div>
<div id="nav"> <?php if (isset($primary_links)) : ?>
<?php print theme('links', $primary_links, array('class' => 'links primary-links')) ?>
<?php endif; ?> <?php print $search_box ?></div>
<?php if($subnav){?><div id="navsub"><?php print $subnav; ?></div><?php } ?>
|
style.css
Zitat:
* { 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:
Zitat:
<div id="header">
<div id="newsdrum_login"><?php print SEOposition_user_bar(); ?><?php print $header; ?></div>
|
user_bar.css
Zitat:
#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.
