Hallo,
ich würde in meinem Blog gerne ein paar Anpassungen am Menü durchführen, meine CSS Kenntnisse reichen dafür aber nicht aus. Vielleicht hat ja jemand kurz Zeit mir dabei zu helfen.
- Ich möchte den Seitentitel links neben dem Menü haben. Beim einfachen reinkopieren vor den <ul> Teil verschiebt sich aber alles. Was muss ich richtig machen?
- Die aktive Seite soll im Menü mit einem aktiven Hintergrund angezeigt werden, dass funktioniert nur leider nicht.
HTML:
HTML
<div id="nav">
<div id="menus">
<ul>
<li<?php
if (is_home())
{
echo " class=\"current_page-item\"";
}?>>
<a href="<?php bloginfo('url') ?>">Home</a>
</li>
<li<?php
if (is_page('About') || is_single() && !in_category('10'))
{
echo " class=\"current_page-item\"";
}?>>
<a href="<?php bloginfo('url') ?>/about">About</a>
</li>
</ul></div>
<div id="search">
<form id="searchform" method="get" action="http://www.area85.de/">
<input type="text" value="Suchen..." onfocus="if (this.value == 'Suchen...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Suchen...';}" size="35" maxlength="50" name="s" id="s" />
<input type="submit" id="searchsubmit" value="SEARCH" />
</form> </div>
</div>
<div id="wrapper" class="hfeed">
<div id="header">
<h1 id="blog-title"><span><a href="<?php bloginfo('home') ?>/" title="<?php echo esc_attr( get_bloginfo('name') ) ?>" rel="home"><?php bloginfo('name') ?></a></span></h1>
<div id="blog-description"><?php bloginfo('description') ?></div>
</div>CSS:
HTML
#blog-title{
margin-bottom:0.15em;
margin-top: 0px;
}
#blog-title a{
color:#000;
font-weight:normal;
text-decoration:none;
font-size:150%;
}
...
/* #nav */
#nav{z-index:5;position:relative;height:31px;margin:0 auto;padding-top:20px;clear:both;background:#f2f2f2;border-bottom:2px solid #000;}
#menus{width:700px;height:31px;margin:0 auto;padding-right:260px;font-size:14px;text-shadow:0 0px 0 #000;}
#menus a{border:1px solid #555;border-bottom:0px;color:#000000;display:block;line-height:30px;background:#f2f2f2;padding:0 10px;}
#menus ul{list-style:none;margin:0;}
#menus li{list-style:none;margin:0;}
#menus li{float:left;position:relative;margin-right:8px;}
#menus li:hover > a{background:#ce3333;color:#fff;}
#menus ul li.current_page_item > a,
#menus ul li.current-menu-ancestor > a,
#menus ul li.current-menu-item > a,
#menus ul li.current-menu-parent > a{background:#ce3333;color:#fff;text-shadow:0 0px 0 #fff;}
#menus ul li.current_page_item:hover > a,
#menus ul li.current-menu-ancestor:hover > a,
#menus ul li.current-menu-item:hover > a,
#menus ul li.current-menu-parent:hover > a{background:#222;color:#fff;text-shadow:0 0px 0 #000;}
#menus ul li:hover > ul{display:block;}
#menus ul ul a{background:#222;width:160px;height:auto;}
#menus ul ul{display:none;position:absolute;top:31px;left:0;float:left;width:150px;z-index:99999;}
#menus ul ul li{min-width:150px;}
#menus ul ul ul{left:100%;top:0;}
#menus a{-moz-border-radius:6px 6px 0 0;border-radius:6px 6px 0 0;-webkit-border-radius:6px 6px 0 0;}
#menus ul ul a{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;}
/* #search */
#search{box-shadow:2px 2px 5px #777;-moz-box-shadow:2px 2px 5px #777;-webkit-box-shadow:2px 2px 5px #777;position:absolute;background:#f3efea;right:50%;margin-right:-450px;bottom:-14px;width:230px;height:26px;overflow:hidden;border:1px solid #999;}
#search form{padding:0;}
#search input#s{width:190px;height:14px;background:transparent;border:none;color:#000;padding:6px;font-size:12px;}
#search form input#searchsubmit{cursor:pointer;position:absolute;right:2px;top:0;width:30px;height:26px;padding-left:30px;background:#f3efea url('img/search-input-bg.jpg') no-repeat right 0;border:none;border-left:1px solid #999;text-indent:-9999px;}