Динамическое позиционирование элементов HTML

У меня есть сайт, который отлично работает, выглядит хорошо и т. Д. Проблема в том, что я не лучший с позиционированием, поплавком и т. Д. Вместо того, чтобы элементы просто выстраивались под один под другим, мне приходится вручную устанавливают все более большие поля для каждого дополнительного абзаца, который я добавляю.Динамическое позиционирование элементов HTML

Мой навигатор состоит из ul внутри фиксированного div. Улица не плавающая, но «ли» есть. Мне нужен способ позиционировать этот и другие элементы таким образом, чтобы все было ниже навигационной панели. Я пробовал использовать clear: both; но безрезультатно. Я знаю, что мое позиционирование повсюду, я действительно не понимаю, как/если позиционирование и поплавок наследуются.

Вот ссылка на website.

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; 
{

источник

2013-12-13 WD40

да вместо того, чтобы дать запас вручную все, почему бы вам не использовать поле для целой обертки содержимого, которое следует неподвижному нав-бар check this fiddle

.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>

источник

2013-12-13 08:14:38

Динамическое позиционирование элементов HTML

ответ

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