CSS divs float in eachother

-2

Я хочу исправить свой код, но, похоже, я не сработал. Я надеюсь, что кто-нибудь может мне помочь, так как я хочу это исправить!CSS divs float in eachother

Я хочу, чтобы логотип находился в правом верхнем углу, а меню вверху слева. Также, когда вы прокручиваете ее, она не может двигаться так же, как сейчас!

body { 
 
    background: url(background.jpg); 
 
    margin: 0px; 
 
    font-family: "Trebuchet MS", Helvetica, sans-serif; 
 
    font-size: 1.5em; 
 
    width: 100%; 
 
} 
 
.box { 
 
    border-style: solid; 
 
    margin-bottom: 200px 
 
} 
 
#logo img{ 
 
    width:140px; 
 
    height: auto; 
 
    float: right; 
 
    position: absolute; 
 
    right: 0; 
 
    margin-top: 5px; 
 
    margin-right: 5px; 
 
} 
 
#menu { 
 
    margin-top: 5px; 
 
    margin-left: 5px; 
 
    left: 0; 
 
    position: fixed; 
 
    border-radius: 5px; 
 
    border-style: inset; 
 
    border-color: #DCA970; 
 
    box-shadow: 7px 7px 7px; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
li { 
 
    margin: 10px; 
 
} 
 
.hello { 
 
    margin-top: 1000px; 
 
}

<html> 
 
    <head> 
 
    <link rel="stylesheet" type="text/css" href="styles.css"> 
 
    <title>Monster Dung</title> 
 
    </head> 
 
    <body> 
 
    <div class="box"> 
 
     <div id="logo"> 
 
     <img src="logo.png"> 
 
     <div id="menu"> 
 
      <ul> 
 
      <li>Home</li> 
 
      <li>Shop</li> 
 
      <li>Contact</li> 
 
      <li>Forum</li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="content"> 
 
     <p> Hey there<p> 
 
    </div> 
 
    </body> 
 
</html>

источник

2016-02-10 Tristanz

Итак, вы хотите все прокручивать при прокрутке страницы быть? Если это так, избавитесь от позиции: фиксированная и используемая позиция: абсолютная. – HaukurHaf

ли вы хотите фиксированный заголовок, как это?

body { 
 
    background: url(background.jpg); 
 
    margin: 0px; 
 
    font-family: "Trebuchet MS", Helvetica, sans-serif; 
 
    font-size: 1.5em; 
 
    width: 100%; 
 
} 
 
.box { 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    box-sizing: border-box; 
 
    width: 100%; 
 
    border-style: solid; 
 
    background-color: #fff; 
 
} 
 
#logo img{ 
 
    position: absolute; 
 
    right: 5px; 
 
    top: 5px; 
 
    width:140px; 
 
    height: auto; 
 
} 
 
#menu { 
 
    margin-top: 5px; 
 
    margin-left: 5px; 
 
    border-radius: 5px; 
 
    border-style: inset; 
 
    border-color: #DCA970; 
 
    box-shadow: 7px 7px 7px; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
li { 
 
    margin: 10px; 
 
} 
 
.hello { 
 
    margin-top: 1000px; 
 
} 
 
.content { 
 
    height: 1000px; 
 
    margin-top: 200px; 
 
    background: pink; 
 
}

<html> 
 
    <head> 
 
    <link rel="stylesheet" type="text/css" href="styles.css"> 
 
    <title>Monster Dung</title> 
 
    </head> 
 
    <body> 
 
    <div class="box"> 
 
     <div id="logo"> 
 
     <img src="logo.png"> 
 
     <div id="menu"> 
 
      <ul> 
 
      <li>Home</li> 
 
      <li>Shop</li> 
 
      <li>Contact</li> 
 
      <li>Forum</li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="content"> 
 
     <p> Hey there<p> 
 
    </div> 
 
    </body> 
 
</html>

источник

2016-02-10 08:51:46 jiae

Является ли это то, что вы want.I написал код для you.I думаю, что это поможет you.just заменить изображение.

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
</head> 
 

 

 

 
    
 
<style type="text/css"> 
 
body{ 
 
    \t margin: 0; 
 
    \t padding: 0; 
 
    \t width: 100%; 
 
    \t height: 800px; 
 
} 
 
div.main{ 
 
    \t position: fixed; 
 
} 
 

 
div.navigation{ 
 
    \t border:1px solid black; 
 
    \t box-shadow: 1px 2px 1px black; 
 
    \t height: auto; 
 
    \t width: 100px; 
 
    \t 
 
    \t position: absolute; 
 
    \t white-space: nowrap; 
 
} 
 
    
 
div.navigation ul li{ 
 
    \t list-style-type: none; 
 
    \t margin-left: -25px; 
 
} 
 
div.navigation ul li a{ 
 
    \t text-decoration: none; 
 
    \t font-size: 25px; 
 

 
} 
 

 
div.logoimage{ 
 
    \t width: 100px; 
 
    \t height: 100px; 
 
    \t box-shadow: 1px 2px 1px orange; 
 
    \t position: fixed; 
 
    \t right: 10px; 
 

 

 

 
} 
 

 
div.logoimage img{ 
 
    \t width: 100%; 
 
    \t height: 100%; 
 

 
} 
 

 
</style> 
 

 

 
<body> 
 

 
<div class="main"> 
 
    <div class="navigation"> 
 
    \t <ul> 
 
    \t \t <li><a href="">Home</a></li> 
 
    \t \t <li><a href="">Shop</a></li> 
 
    \t \t <li><a href="">Contact</a></li> 
 
    \t \t <li><a href="">Forum</a></li> 
 
    \t </ul> 
 
    </div> \t 
 
    <div class="logoimage"> 
 
    \t <img src="yourlogo.png"/> 
 
    </div> 
 
</div> 
 
    
 

 
</body> 
 
</html>

источник

2016-02-10 09:00:15

CSS divs float in eachother

ответ

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