Micha_K
Threadersteller
Dabei seit: 03.03.2010
Ort: Mainz
Alter: 35
Geschlecht: 
|
Verfasst Mo 04.08.2014 13:33
Titel Wordpress Navigation Problem - HILFE |
  |
|
Hallo alle miteinander,
ich habe hier ein kleines Problemchen was die Navigation angeht. Ich habe hier zwei Bilder wie es sein soll und wie es ist:
Soll
Ist
Leider bekomme ich es um's verrecken nicht hin, die Navigation oben an den Rand zu kleben und diese so einzustellen, damit sie nur so viel platz nimmt wie sie auch braucht. Ich erstelle gerade ein Theme für Wordpress, also ist nichts mit in der PHP-Datei genau deklarieren. Meine codes sind folgende:
header.php:
| Code: |
<!-- header -->
<header class="header clear" role="banner">
<div class="wraphead">
<a href="<?php echo home_url(); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="Logo" class="logo">
</a>
<!-- logo -->
<div class="googlep">
<a href="https://plus.google.com/116807733522084356830/about?hl=de&gl=de"><img class="alignright" src="<?php echo get_template_directory_uri(); ?>/img/googleplus.png" height="36px" width="36px"></a>
</div>
<!-- /logo -->
<!-- nav -->
<nav class="nav" role="navigation">
<?php html5blank_nav(); ?>
<img src="<?php echo get_template_directory_uri(); ?>/img/navi_shadow.png">
</nav>
<!-- /nav -->
</div>
</header>
<!-- /header -->
|
style.css:
| Code: |
.header {
top:10px;
background: #FFF;
max-width: 100%;
overflow: hidden;
}
/* logo */
.logo {
width: auto;
position:relative;
padding: 10px;
margin: 0px;
overflow: hidden;
z-index: 1;
}
.googlep {
float: right;
position:relative;
margin: 0 auto;
overflow: visible;
}
/* nav */
.nav {
border: 1px solid red;
margin: 0 auto;
width: 800px;
/*border: 1px solid green;*/
text-align:center;
overflow: visible;
}
.nav ul {
padding: 0px;
margin: 0px auto;
}
.nav ul:after {
clear: both;
content: " ";
display: block;
height: 0;
visibility: hidden;
}
.nav ul li {
border-left: 1px solid;
padding: 0px 2px;
display: inline;
list-style: none;
float:left;
}
.nav ul li a {
text-decoration: none;
display: inline-block;
color: #333;
padding: 5px 25px 5px 25px;
font-size: 1.1em;
}
.nav ul li:hover > ul {
background:#b9d065;
visibility: visible;
}
.nav ul li ul{
display: inline;
visibility: hidden;
position: absolute;
padding:0px;
}
.nav ul li ul li{
float: none;
}
.nav .current_page_item > a, .nav .current_page_item > a:hover,
.nav .current_page_parent > a, .nav .current_page_parent > a:hover,
.nav .current-menu-parent > a, .nav .current-menu-parent > a:hover,
.nav .current-menu-item > a, .nav .current-menu-item > a:hover, .nav li > a:hover, .nav .current_page_ancestor > a, .nav .current-menu-ancestor > a {
background: #b9d065;
color: #fff !important;
text-decoration:none
}
.nav ul li ul li a:hover{
color: #333;
}
|
Danke schonmal für die Antworten...
EDIT: Das png unter der Navigation stellt sich schön mittig ein, jedoch tut es die navigation selbst nicht. Habe jetzt das Attribut "width: 800px;" entfernt. Navigation stellt sich linksbündig - das schattenbild jedoch nicht.
Hier das Bild zum verstehen ^^
Zuletzt bearbeitet von Micha_K am Mo 04.08.2014 13:41, insgesamt 1-mal bearbeitet
|
|
Willkommen auf dem Portal für Mediengestalter
