Позиционирование изображения внизу inline с nav

Question

Я хочу выровнять навигационную панель слева от изображения на этом сайте (http://luucdev.de/workspace/smilex/) до нижней границы (выше границы).

Как я могу это достичь?

Мой текущий HTML является:

<header class="site-header"> 
    <h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1> 
    <h5><?php bloginfo('description'); ?></h5> 

    <img class="pull-right" src="<?php bloginfo('template_directory'); ?>/images/skins.png"> 

    <nav class="site-nav"> 
     <?php wp_nav_menu(array('theme_location' => 'primary')); ?> 
    </nav> 
</header><!-- /site-header --> 

И мой текущий CSS является:

/* Header */ 

.site-header { 
    height: auto; 
    border-bottom: 2px solid #999; 
} 

.site-header img { 
    height: 200px; 
} 

/* Navigation */ 

.site-nav ul { 
    margin: 0; 
    padding: 0; 
    *zoom: 1; 
} 

.site-nav ul:before, .site-nav ul:after { 
    content: ""; 
    display: table; 
} 

.site-nav ul:after { 
    clear: both; 
} 

.site-nav ul li { 
    float: left; 
    list-style: none; 
} 


/* Header Menu */ 

.site-header nav ul { 
    padding-left: 20px; 
} 

.site-header nav ul li { 
    margin-right: 5px; 
} 

.site-header nav ul li a:link, 
.site-header nav ul li a:visited { 
    display: block; 
    padding: 10px 18px; 
    border: 1px solid #bbb; 
    border-bottom: none; 
    text-decoration: none; 
} 

.site-header nav ul li a:hover { 
    background-color: #ececec; 
} 

.site-header nav ul li.current-menu-item a:link, 
.site-header nav ul li.current-menu-item a:visited { 
    background-color: #006ec3; 
    color: #fff; 
    border-bottom: 2px solid #fff; 
} 

Answer 1

Вы можете попробовать использовать относительное и абсолютное позиционирование на содержащих div и ul элементов.

CSS-бы что-то вдоль этих линий:

.menu-menue-container { 
    position: relative; 
    height: 200px; 
} 

.menu-menue-container ul { 
    position: absolute; 
    bottom: 0; 
} 

Это не самый хороший из способов, но это будет получить работу для вас.

Answer 2

Просто укоротите высоту своего элемента UL, который удерживает пункты меню до высоты LI и добавляет верхний край, чтобы соответствовать высоте изображения. я играл немного, и это должно быть достаточно близко (вы можете попробовать добавить несколько пикселей вверх или вниз):

ul{ 
    height: 40px; // instead of 200px 
    margin-top: 180px; 
    // rest of old style 
}