Помогите с CSS плавать на div - PullRequest
Новая
       3

Помогите с CSS плавать на div

0 голосов
/ 12 августа 2011

В этом я хочу, чтобы div #intro плавал ниже div #navtop.

В данный момент он находится справа внизу. 

   <style> 

  #wrapper {
   width:850px;
   height:auto;
   margin:auto;
   font-family:Arial, Helvetica, sans-serif;
   }

  #header {
   height:100px;
   width:850px;
   margin:0;
   margin-top:25px;
   background:url(img/header.png) no-repeat #000 ;
   border:2px #000 solid;
   }

  #navtop {
   width:auto;
   height:45px;
   float:left;
   background:#000;
   padding-right:8px;
   }

  #navtop a {
   width:500px;
   margin:0px;
   margin-left:8px;
   padding-left:4px;
   padding-right:4px;
   color:#FFF;
   padding-bottom:0px;
   text-decoration:none;
   }

  #logo {
   height:40px; 
   width:40px;
   margin-left:4px;
   }

  #navtop a:link {
   background:#666;
   }

  #navtop a:hover {
   color:#999;
   }

  #intro {
   width:auto;
   height:auto;
   float:left;
   background:#666;
   margin-top:70px;
   padding:4px;
   border:2px #000 solid;
   }

  #about {
   width:500px;;
   height:auto;
   float:right;
   background:#666666;
   margin-top:25px;
   padding:5px;
   border:2px #000 solid;
   }

  h2 {
   font-family:Arial, Helvetica, sans-serif;
   color:#FFF;
   margin:0px;
   padding:0px;
   }

  body {
   background:#999;
   }

 </style>

  </head>

 <body>
 <div id="wrapper">
<div id="header"></div>

<div id="navtop"><img id="logo" src="img/logo.jpg" alt="logo" width="40" height="40" />
<a href="link.php">Home</a>
<a href="link.php">About</a>
<a href="link.php">tour</a>
<a href="link.php">photos</a>
<a href="link.php">contact</a>
</div>
<div id="intro">
   <img src="img/djpic.jpg" width="300" height="450" alt="pic" /></div>
   <div id="about"> <h2>DJ TECHIE LUNCHBOX</h2> 
  <p>DJ Techie Lunchboxis the current dj who knows what an audience thinks , her upside down skiiny fettish style sjing will
  leave any with a head without for for chips and shandy . chocolate malnurishment bring a        chip bang mismosh to her long term goals
 .</p>
 .
 </div>


 </div>
</body>

Ответы [ 4 ]

1 голос
/ 12 августа 2011

Это потому, что у вас float: left; на #intro.

Попробуйте это: 

 #intro {
width:auto;
height:auto;
clear:left;
float:left;
background:#666;
margin-top:70px;
padding:4px;
border:2px #000 solid;
 }
 #about {
width:500px;;
height:auto;
float:left;
background:#666666;
margin-top:25px;
padding:5px;
border:2px #000 solid;

}

отредактировано, чтобы сделать #about div плавающим рядом с #intro div.

0 голосов
/ 12 августа 2011

Я не уверен на 100%, что понимаю, что вы пытаетесь достичь, но я попробую сделать это

Вы можете настроить таргетинг на #navtop с помощью правила 

#navtop{clear: right;}

или просто удалите float: слева от # intro

любой из них будет перемещать #intro под nav

однако, если вы хотите, чтобы вступление было рядом с чем-то, вам придется использовать clear: right на navtop

0 голосов
/ 12 августа 2011

не используйте float:left на #navtop.Он хочет поставить #navtop и #intro divs рядом друг с другом

0 голосов
/ 12 августа 2011

Если вы все еще хотите, чтобы это всплыло слева от любого другого поля (я полагаю, вы это делаете), попробуйте добавить clear: left в CSS-код #intro.Это приведет к тому, что поле будет разбито ниже любого элемента, заставляющего его двигаться вправо и начать новую строку. 

 #intro {
 width:auto;
 height:auto;
 float:left;
 background:#666;
 margin-top:70px;
 padding:4px;
 border:2px #000 solid;
 clear:left;
 }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...