Поместите изображение влево на фиксированной панели навигации

У меня есть прозрачная панель навигации, которая исправлена, и я пытаюсь получить изображение или даже текст, выровненный слева. Ниже приведен код html и код css, который я использую:Поместите изображение влево на фиксированной панели навигации

--------------------------------- ---------- html-код -------------------------------------- ----------

<!DOCTYPE html> 
<html lang="en-US"> 
<head> 
    <link rel="stylesheet" href="main.css" type="text/css" /> 
    <title>Home</title> 
</head> 
<body> 
    <div id="navigation"> 
     <b> 
      <a href="#">Home</a> 
      <a href="#">Portfolio</a> 
      <a href="#">Our Apps</a> 
      <a href="#">Support</a> 
      <a href="#">Press</a> 
      <a href="#">About</a> 
     </b> 
    </div> 

    <div id="content"> 
     Content Here! 
    </div> 
</body> 
</html>

--------------------------------- ---------------- Код CSS -------------------------------- ----------

body { 
    padding: 0; /* Gets rid of the automatic padding */ 
    margin: 0; /* on HTML documents */ 
    font-family: Lucida Grande, Helvetica, Arial, sans-serif; 
    font-size: 12px; 
} 

#navigation { 
    position: fixed; 
    text-align: center; 
    top: 0; 
    width: 100%; 
    color: #ffffff; 
    height: 20px; 
    padding-top: 5px; 
    /* Adds shadow to the bottom of the bar */ 
    -webkit-box-shadow: 0px 0px 8px 0px #000000; 
    -moz-box-shadow: 0px 0px 8px 0px #000000; 
    box-shadow: 0px 0px 8px 0px #000000; 
    /* Adds the transparent background */ 
    background-color: rgba(1, 1, 1, 0.8); 
    color: rgba(1, 1, 1, 0.8); 
} 

#navigation a { 
    font-size: 14px; 
    padding-left: 15px; 
    padding-right: 15px; 
    color: white; 
    text-decoration: none; 
} 

#navigation a:hover { 
    color: grey; 
} 

#navigation a:visited { 
    color: white; 
} 
#content { 
    width: 80%; 
    padding-top: 70px; 
    padding-bottom: 30px; 
    margin-left: auto; 
    margin-right: auto; 
}

Благодарим за помощь! -Aaron

источник

2014-09-16 Aaron Vigal

Невозможно четко понимать ваши требования. Вы хотите выровнять любой элемент или установить изображение? Это будет полезно для нас, если вы создадите для него jsfiddle. – Prateek

Вы можете использовать CSS поплавки.

CSS

#navigation div.block-left { 
    float: left; 
} 

#navigation div.block-right { 
    float: right; 
}

HTML

<div id="navigation"> 
    <div class="block-left"> 
    Put stuff here! 
    </div> 
    <div class="block-left"> 
     <b> 
     <a href="#">Home</a> 
     <a href="#">Portfolio</a> 
     <a href="#">Our Apps</a> 
     <a href="#">Support</a> 
     <a href="#">Press</a> 
     <a href="#">About</a> 
     </b> 
    </div>

Поскольку оба блока плывут налево они складывают в порядке слева направо.

Кроме того, вы не должны использовать больше, поскольку afaik его устарел. Возможны лучшие варианты или

источник

2014-09-16 05:00:39

Я думаю, вам нужно будет объяснять дальше, но если я правильно понял, что вы хотите, вы можете попробовать это:

#navigation { 
    background-image: url('path/to/img.gif'); 
}

источник

2014-09-16 04:51:00 nachoalvarez

Это не сработает, у меня уже есть панель навигации с фоном, но все сосредоточено, поэтому я ищу, чтобы избежать этого и выровнять изображение в левой части панели навигации. Если вы хотите увидеть страницу http://aaronvigal.com/hey/index.html –

Поместите изображение влево на фиксированной панели навигации

ответ

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