2016-04-09 3 views
0

What the site is supposed to look like Вышеуказанное изображение должно выглядеть так, как должно выглядеть моя навигационная панель. Я кодирую свой сайт WordPress с нуля, и моя панель навигации с заголовком class = "site-header" не будет отображаться: заблокировать или удалить текст. Странно, чтоNav Bar в Wordpress не отображается: Block

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

работает. По какой-то причине коробки не появляются.

Помощь была бы оценена:)

/* 
 
Theme Name: Yonsei Fencing 
 
Author: Yonsei Student 
 
Version: 1.0 
 
*/ 
 

 
body { 
 
\t font-family: 'Malgun Gothic','맑은고딕', Arial, 돋움, Dotum, 굴림, Gulim, AppleGothic, Sans-serif; 
 
\t font-size: 20px; 
 
\t color: #333; 
 
} 
 

 
a:link 
 
a:visited { 
 
\t color: #006ec3; 
 
} 
 

 
p { 
 
\t line-height: 1.65em; 
 
} 
 

 
/* General Layout */ 
 
div.container { 
 
\t max-width: 920px; 
 
\t margin: 0 auto; 
 
\t padding-left: 20px; 
 
\t padding-right: 20px; 
 
} 
 

 
article.post { 
 
\t border-bottom: 2px dotted #999; 
 
} 
 

 
article.post:last-of-type { 
 
\t border-bottom: none; 
 
} 
 

 
/* Header */ 
 
.site-header { 
 
\t border-bottom: 2px solid #999 
 
} 
 

 
/* Footer */ 
 
.site-footer { 
 
\t margin-top: 30px; 
 
\t border-bottom: 2px solid #999 
 
} 
 

 
/* Navigation Menus */ 
 
.site-nav ul { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
.site-nav ul:before, .site-nav ul:after { content: ""; display: table; } 
 
.site-nav ul:after { clear: both; } 
 
.site-nav ul { *zoom: 1; } 
 

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

 
/* Site Header Menu */ 
 
.site-header nav ul li { 
 
\t margin-right: 5px; 
 
} 
 

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

 

 
.site-header nav ul li a:hover { 
 
\t background-color: grey; 
 
}
<!--footer.php--> 
 
    <footer class="site-footer"> 
 
\t 
 
\t \t <nav class="site-nav"> 
 
\t \t \t \t <?php 
 

 
\t \t \t \t $args = array(
 
\t \t \t \t \t 'theme_location' => 'footer' 
 
\t \t \t \t); 
 

 
\t \t \t \t ?> 
 

 
\t \t \t \t <?php wp_nav_menu($args); ?> 
 
\t \t </nav> 
 

 
\t \t <p><?php bloginfo('name'); ?> - &copy; <?php echo date('Y');?></p> 
 
\t 
 
\t </footer> 
 

 
</div><!--/container--> 
 

 
<?php wp_footer(); ?> 
 
</body> 
 
</html> 
 

 
<!--functions.php--> 
 
<?php 
 

 
function learningWordPress_resources() { 
 

 
\t wp_enqueue_style('style', get_stylesheet_uri()); 
 

 
} 
 

 
add_action('wp_enqueue_scripts', 'learningWordPress_resources'); 
 

 
// Navigation Menus 
 
register_nav_menus(array(
 
\t 'primary' => __('Primary Menu'), 
 
\t 'footer' => __('Footer Menu'), 
 
)); 
 

 
<!--header.php--> 
 
<!DOCTYPE html> 
 
<html <?php language_attributes(); ?>> 
 
\t <head> 
 
\t \t <meta charset="<?php bloginfo('charset'); ?>"> 
 
\t \t <meta name="viewport" content="width=device-width"> 
 
\t \t <title><?php bloginfo('name'); ?></title> 
 
\t \t <?php wp_head(); ?> 
 
\t </head> 
 

 
<body <?php body_class(); ?>> 
 

 
\t <div class="container"> 
 

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

 
\t \t \t <nav class="site-nav"> 
 
\t \t \t \t <?php 
 

 
\t \t \t \t $args = array(
 
\t \t \t \t \t 'theme_location' => 'primary' 
 
\t \t \t \t); 
 

 
\t \t \t \t ?> 
 

 
\t \t \t \t <?php wp_nav_menu($args); ?> 
 
\t \t \t </nav> 
 

 
\t \t </header><!--/site-header--> 
 
\t 
 

 
<!--index.php--> 
 
     <?php 
 

 
get_header(); 
 

 
if (have_posts()) : 
 
\t while (have_posts()) : the_post(); ?> 
 

 
\t <article class="post"> 
 
\t <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 
 
\t <?php the_content(); ?> 
 
\t </article> 
 
\t 
 
\t <?php endwhile; 
 

 
\t else: 
 
\t \t echo '<p>No content found</p>'; 
 

 
\t endif; 
 

 
get_footer(); 
 

 
?> 
 

 

My wordpress site}

+0

ваших 'li' элементов' block's но, возможно, 'float' делает их в одной строке? Я не совсем понимаю, что вы имеете в виду. Что касается 'text-decoration', я считаю, что вам нужно применить это к привязным тегам' .site-header nav ul li a'. – Aziz

+0

Эй, Азиз, я загрузил фотографию, которая лучше иллюстрирует то, что я пытаюсь достичь! – noddy

ответ

1

Ваш код незначительная ошибка синтаксиса, в результате чего ваши стили не будут применяться:

.site-header nav ul li a:link, 
.site-header nav ul li a:visited, { 

Дополнительная запятая , в конце ожидает дополнительный селектор, но встречается с {. Просто удалите дополнительную запятую. Это должно решить ваши проблемы.

Работа демо:

/* 
 
Theme Name: Yonsei Fencing 
 
Author: Yonsei Student 
 
Version: 1.0 
 
*/ 
 

 
body { 
 
    font-family: 'Malgun Gothic', '맑은고딕', Arial, 돋움, Dotum, 굴림, Gulim, AppleGothic, Sans-serif; 
 
    font-size: 20px; 
 
    color: #333; 
 
} 
 

 
a:link a:visited { 
 
    color: #006ec3; 
 
} 
 

 
p { 
 
    line-height: 1.65em; 
 
} 
 

 
/* General Layout */ 
 

 
div.container { 
 
    max-width: 920px; 
 
    margin: 0 auto; 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
} 
 

 
/* Header */ 
 

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

 
/* Navigation Menus */ 
 

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

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

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

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

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

 
/* Site Header Menu */ 
 

 
.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: grey; 
 
}
<div class="container"> 
 
    <!--site-header--> 
 
    <header class="site-header"> 
 
    <h1><a href="#">Blog Name</a></h1> 
 
    <h5>Blog Desc</h5> 
 
    <nav class="site-nav"> 
 
     <ul class="menu"> 
 
     <li class="menu-item"><a href="#">Link 1</a> 
 
     </li> 
 
     <li class="menu-item"><a href="#">Link 2</a> 
 
     </li> 
 
     <li class="menu-item"><a href="#">Link 3</a> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    </header> 
 
</div>

+0

Wow ... один запятая haha. Спасибо за помощь !!! :) – noddy

Смежные вопросы