Я не знаю, как объяснить это, но, возможно, в этом случае картина рассказывает историю вместо меня:Размещение логотипа внутри нескольких областей; заголовок, тело, содержание
Вскоре, если вы не можете увидеть его. Я пытаюсь разместить логотип внутри нескольких областей (заголовок, тело, содержимое), как глобальное изображение.
Возможно ли это с помощью CSS, JavaScript, HTML, PHP?
И если да, то какие-либо руководства или советы?
Вы можете разместить свой логотип внутри раздела nav (в данном случае). Логотип должен быть абсолютно расположенным, так что он не испортит выравнивание другого элемента, и ваша позиция навигации должна быть относительно позиционирована, поэтому логотип размещается относительно контейнера nav (даже если это абсолютная!). Вы не указали никаких HTML/измерений, поэтому нам остается только догадываться, но вот как это будет выглядеть, выбирая произвольные размеры.
.nav {
position: relative;
height: 100px;
}
/* .logo is a child of .nav */
.logo {
position: absolute;
top: -50px;
height: 200px;
width: 200px;
left: 0;
}
Посмотрите:
body {
color: #fff;
text-align: center;
}
.header {
height: 100px;
background: red;
}
.nav {
position: relative;
height: 70px;
background: blue;
}
.logo {
position: absolute;
width: 200px;
height: 200px;
left: 0;
top: -50px;
}
.body {
height: 250px;
background: purple;
}
.footer {
height: 100px;
background: lightblue;
}<div class="header"> Header </div>
<div class="nav">
<img src="http://www.udavinci.com/wp-content/uploads/2014/09/stackoverflow.png" class="logo"/>
Nav
</div>
<div class="body"> Body </div>
<div class="footer"> My Feet </div>В качестве альтернативы, вы можете также разместить свой логотип за пределами всего, но внутри body тега, а просто использовать position: absolute, и настроить его положение (top, left и т. д.) в соответствии с размерами соответствующих элементов.
Вы можете поместить свой логотип в header и положение с:
.your-logo-class {
position: relative;
top: 100px; // Adjust this value
}
Хм, логотип является в основном <img> тег, вы можете разместить их, где бы вы хотели, просто дать все те <img> теги класса и стиль его, как вы хотите.
Вы можете сделать это следующим образом:
body { margin: 0; padding: 0; background-color: black;}
#top { background-color: red; width: 100%; height: 100px; }
#nav { background-color: blue; width: 100%; height: 50px; }
#content { background-color: green; width: 400px; height: 500px; margin: 0 auto;}
#footer { background-color: purple; width: 100%; height: 50px; }<body>
<div id="top">
</div>
<div id="nav">
<img src="images/logo.png" style="padding: 10px;">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</body>Или вы могли бы добавить position: absolute; к img style="", а затем играть с маржинальным/дополнением.