Styling Navbars

-1

enter image description here Styling Navbars

Я хочу, чтобы создать пространство между представьтесь и главной навигационной панели, как один между Share Истории и Представьтесь, пожалуйста. Код, который стилирует навигационную панель «Представить себя» и панель навигации «Share Stories», одинакова, поэтому я немного смущен, почему она отображается так.

Вот код CSS:

div.IntroduceYourself nav, 
div.IntroduceYourself nav ul, 
div.IntroduceYourself nav li, 
div.IntroduceYourself nav a { 
    list-style: none; 
    margin: 8px 8px 8px 8px; 
    padding: 2px 2px 2px 2px; 
    border: 2px 2px 2px 2px; 
    font-size: 12px; 
    font-family: Helvetica; 
    line-height: 1; 
} 

div.IntroduceYourself nav ul { 

    zoom: 1; 
    background: #a7bc7a url(images/pattern.png) top left repeat; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    border: 1px solid #839b4e; 
    -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3); 
    -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3); 
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3); 
    width: 578px; 
    margin: 0 auto; 
    padding: 0; 
} 

div.IntroduceYourself nav ul:before { 
    content: ''; 
    display: block; 
} 

div.IntroduceYourself nav ul:after { 
    content: ''; 
    display: table; 
    clear: both; 
} 

div.IntroduceYourself nav a, 
div.IntroduceYourself nav a:link, 
div.IntroduceYourself nav a:visited { 
    padding: 5px 12px; 
    display: block; 
    text-decoration: none; 
    color: #ffffff; 
    text-shadow: 0 -1px 1px #586835; 
    border-right: 1px solid #839b4e; 
} 

div.IntroduceYourself nav a:hover { 
    color: #586835; 
    text-shadow: 0 1px 1px #bdcd9c; 
} 

div.IntroduceYourself nav li { 
    float: left; 
    border-right: 1px solid #b2c58b; 
} 

div.IntroduceYourself nav ul li.category{ 
    float: left; 
    vertical-align: top; 
} 

div.IntroduceYourself nav ul li { 
    float: right; 
    vertical-align: top; 
} 




div.Stories nav, 
div.Stories nav ul, 
div.Stories nav li, 
div.Stories nav a { 
    list-style: none; 
    margin: 4px 4px 4px 4px; 
    padding: 2px 2px 2px 2px; 
    border: 2px 2px 2px 2px; 
    font-size: 12px; 
    font-family: Helvetica; 
    line-height: 1; 

} 

div.Stories nav ul { 
    zoom: 1; 
    background: #a7bc7a url(images/pattern.png) top left repeat; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    border: 1px solid #839b4e; 
    -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3); 
    -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3); 
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3); 
    width: 578px; 
    margin: 0 auto; 
    padding: 0; 
} 

div.Stories nav ul:before { 
    content: ''; 
    display: block; 
} 

div.Stories nav ul:after { 
    content: ''; 
    display: table; 
    clear: both; 
} 

div.Stories nav a, 
div.Stories nav a:link, 
div.Stories nav a:visited { 
    padding: 5px 12px; 
    display: block; 
    text-decoration: none; 
    color: #ffffff; 
    text-shadow: 0 -1px 1px #586835; 
    border-right: 1px solid #839b4e; 
} 

div.Stories nav a:hover { 
    color: #586835; 
    text-shadow: 0 1px 1px #bdcd9c; 
} 

div.Stories nav li { 
    float: left; 
    border-right: 1px solid #b2c58b; 
} 

div.Stories nav ul li.category{ 
    float: left; 
    vertical-align: top; 
} 

div.Stories nav ul li { 
    float: right; 
    vertical-align: top; 
}

Благодаря

источник

2014-12-06 tryingtolearn

Html? или попробуйте добавить к скрипту –

В вашем CSS есть проблема: 'div.IntroduceYourself nav li div.IntroduceYourself nav a {' Похоже, что это два селектора, и в этом случае должна быть запятая между ними. – GolezTrol

Это HTML да. Ах, я исправил это, но проблема сохраняется. Я попробую загрузить его на скрипке – tryingtolearn

Удалить эти две строки:

.mainHead nav { 
    display: table-cell; 
    float: left; 
}

(Лично, хотя, я бы реструктурировать все это, так как это бит беспорядка.)

источник

2014-12-06 12:34:14

Styling Navbars

ответ

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