Не может получить мою навигационную панель рядом с моего логотипом

-6

Codes Не может получить мою навигационную панель рядом с моего логотипом

body{ 
 
    margin: 0; 
 
} 
 

 
.logo { 
 
    text-indent: -999999px; 
 
    background: url('logo3.png'); 
 
    width: 216px; 
 
    height: 219px; 
 
} 
 

 
.header{ 
 
    width: 100%; 
 
    height: auto; 
 
    background-color: #eef3f5; 
 
    padding-top: 24px; 
 
} 
 
.headerContent { 
 
    width: 1024px; 
 
    height: auto; 
 
    margin: 0 auto; 
 
} 
 
.headercontent a img{ 
 
    width: 659px; 
 
    height: 144px; 
 
    margin: 0px auto; 
 
    display: block; 
 
} 
 
.nav { 
 
    height: 40px; 
 
    background: #0000ff; 
 
    margin-top: 20px; 
 
    float: right; 
 
} 
 
.nav ul{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.nav ul li{ 
 
    list-style: none; 
 
} 
 
.nav ul li a{ 
 
    text-decoration: none; 
 
    float: left; 
 
    display: block; 
 
    padding: 10px 20px; 
 
    color: black; 
 
} 
 
.nav ul li a:hover{ 
 
    color: white; 
 
} 
 
.headerbreak { 
 
    width: 100%; 
 
    height: 0; 
 
    border-bottom: 2px solid #ff0000; 
 
}


 
<title> Grenada Down Syndrome Association</title> 
 
    
 
    
 
    
 
<body> 
 
    <div class="header"> 
 
    <div class="headerContent"> 
 
     <a href="#"> 
 
      <img src="logo3.png" alt="Grenada Down Syndrome Association"/> 
 
     </a> 
 
     
 
    <div class="nav"> 
 
     <ul> 
 
      <li><a href="home.html">Home</a></li> 
 
      <li><a href="aboutus.html">About Us</a></li> 
 
      <li><a href="events.html">Events</a></li> 
 
      <li><a href="contact.html">Contact Us</a></li> 
 
      </ul> 
 
     
 
      </div> 
 
     </div> 
 
     <div class="headerbreak"> </div> 
 
    </div> 
 
</body> 
 
</html>

мне действительно нужна помощь с этими парнями

источник

2016-02-12 Samira Mc Queen

Вы должны сделать много изменений в CSS.

Сначала вы даете длинную ширину .headerContent уменьшите его или удалите, сделайте рядом с логотипом.

Затем используйте display:inline-block.

Дают следующие CSS:

.headerContent > a { 
    display: inline-block; 
    vertical-align: top; 
} 


.nav { 
    background: #0000ff none repeat scroll 0 0; 
    display: inline-block; 
    height: 40px; 
    vertical-align: top; 
} 

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

Working Fiddle

источник

2016-02-12 03:04:21 ketan

Вы ответить на вопросы, которые не были заданы, Кетан? Отвечая на такие вопросы низкого качества, вы поощряете других, как это, следовательно, снижая качество SO. Миссия SO заключается в том, чтобы сделать Интернет лучше, но не предоставляя бесплатные услуги 'web-design' или' fix-my-code'. Вы должны отговаривать такие вопросы, а не поощрять их. –

Это вопрос. «* Кажется, я не вижу свою навигационную панель рядом с моим логотипом» * – ketan

Я знаю, поэтому я дам им шанс научиться публиковать сообщения. Поскольку это его/ее первый пост. – ketan

Не может получить мою навигационную панель рядом с моего логотипом

ответ

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