У меня есть сайт, который отлично работает, выглядит хорошо и т.д. Проблема в том, что я не лучший с позиционированием, поплавком и т.д. Вместо того, чтобы элементы просто выстраивались под друг друга, мне приходится вручную устанавливать все более большие поля для каждого дополнительного абзаца Я добавить.
Мой navbar состоит из ul внутри фиксированного div. Улица не плавающая, но "ли" есть. Мне нужен способ позиционировать этот и другие элементы таким образом, чтобы все было ниже навигационной панели. Я пробовал использовать clear: both; но безрезультатно. Я знаю, что мое позиционирование повсюду, я действительно не понимаю, как/если позиционирование и поплавок наследуются.
Вот ссылка на сайт.
HTML:
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500,400italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" type="text/css" href="webfonts/stylesheet.css">
<title>
Artwork
</title>
</head>
<body>
<div class="navbar">
<img src="images/navbar/title.png" class="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="art.html">Art</a></li>
<li><a href="about.html">About Me</a></li>
</ul>
</div>
<h1 id="header">Welcome to my Website!</h1>
<p>
The purpose of this website is to showcase my artwork, and, in a way, my HTML skills. Click on
one of the links up top, and you can see some of my <b>artwork</b> or maybe learn <b>about me</b>!
</p>
</body>
</html>
CSS:
html{
height: 100vh;
width: 100vw;
margin: 0px;
}
body{
height: 100vh;
width: 100vw;
margin: 0px;
background-color: #009900;
}
div.navbar{
height: 50px;
width: 100vw;
position: fixed;
background-image:url('images/navbar/navbar.png');
background-repeat:repeat-x;
}
#header{
position: relative;
float: left;
margin: 40px 0px 0px 5px;
font-family: 'League Gothic', sans-serif;
}
p {
position: absolute;
margin: 100px 0px 0px 5px;
font-family: 'Ubuntu', sans-serif;
}
img.navbar{
float: left;
}
ul{
list-style-type: none;
margin: 4px 0px 0px 0px;
padding: 0;
overflow: hidden;
}
a:link,a:visited
{
display: block;
width: 120px;
font-weight: 500;
font-family: 'Ubuntu', sans-serif;
color: #FFFFFF;
text-align: center;
padding: 4px;
margin: 0px;
text-decoration: none;
}
li{
float: left;
{
да вместо того, чтобы давать маржу вручную для всего, почему бы вам не использовать маржу для всей обертки, содержимое, которое следует за фиксированной навигационной панелью, проверяет эту скрипку
.nav-bar{
height:50px;
overflow:hidden;
background-color:#000;
width:100%;
position:fixed;
top:0px;
left:0px;
}
.content{
margin-top:75px;
}
и html
<div class="nav-bar">
<h1>
topbar
</h1>
<ul>
<li>one</li>
<li>tow</li>
<li>three</li>
</ul>
</div>
<div class="content">
<h2>content</h2>
<p>hi hello ouyasd asdasda dasdasd</p>
<p>hi hello ouyasd asdasda dasdasd</p>
<p>hi hello ouyasd asdasda dasdasd</p>
<p>hi hello ouyasd asdasda dasdasd</p>
</div>