CSS мои элементы не плавающие правильно

Так, по какой-то причине, в Dreamweaver выглядит отлично reference CSS мои элементы не плавающие правильно

Но на моем сайте это не плавающие их должным образом в любом браузере, я попытались FireFox, Chrome и IE8:

my site

Ссылка на мой сайт, если вы заботитесь: http://addisonbwilson.com/Portfolio/SUBPAGES/Photography.php

HTML:

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Addison Wilson: Photography</title> 
<link rel="stylesheet" type="text/css" href="../CODE/pcss.css"> 
</head> 

<body> 

    <?php include ("../INCLUDES/navbarsubpages.php"); ?> 

    <div id="imagewrapper"> 
     <div id="imagecontainer"> 
      <img src="../IMAGES/addyftw-picture-0001-preview-320w.jpg"> 
     </div> <!--imagecontainer--> 

     <div id="imagecontainer"> 
      <img src="../IMAGES/addyftw-picture-0002-preview-320w.jpg"> 
     </div> <!--imagecontainer--> 

     <div id="imagecontainer"> 
      <img src="../IMAGES/addyftw-picture-0003-preview-320w.jpg"> 
     </div> <!--imagecontainer--> 
    </div><!--wrapper--> 

    <div id="imagewrapper"> 
     <div id="imagecontainer"> 
      <img src="../IMAGES/addyftw-picture-0004-preview-320w.jpg"> 
     </div> <!--imagecontainer--> 

     <div id="imagecontainer"> 
      <img src="../IMAGES/addyftw-picture-0005-preview-320w.jpg"> 
     </div> <!--imagecontainer--> 

     <div id="imagecontainer"> 
      <img src="../IMAGES/addyftw-picture-0006-preview-320w.jpg"> 
     </div> <!--imagecontainer--> 

    </div><!--wrapper--> 

    <div id="imagewrapper"> 
     <div id="imagecontainer"> 
      <img src="../IMAGES/addyftw-picture-0007-preview-320w.jpg"> 
     </div> <!--imagecontainer--> 

     <div id="imagecontainer"> 
      <img src="../IMAGES/addyftw-picture-0008-preview-320w.jpg"> 
     </div> <!--imagecontainer--> 

     <div id="imagecontainer"> 

     </div> <!--imagecontainer--> 

    </div><!--wrapper--> 

</body> 
</html>

Мой CSS:

@charset "UTF-8"; 
/* CSS Document */ 

/*The body is responsiable for the background image, the rest of the site is divided between the sub wrapper and the includes */ 
/*bground tile is from http://subtlepatterns.com/white-brushed/ created by Andre Schouten, crediting him here as per the usage agreement */ 
body {margin-top: 0px; background-image:url(../Portfolio/IMAGES/[email protected]);} 
/* navbar is a php include*/ 

#wrapper{width:980px; height:auto;} 
#imagewrapper{width:auto; height:auto;} 
#subwrapper{width: 980px; height: auto;} 

#imagefull{width: auto; height: auto; background-color:#FFF; margin:3px 3px 3px 3px;} 
#imagecontainer{width: 320px; height: 213px; background-color:#FFF; margin:3px 3px 3px 3px; float:left;} 
#textcontainer{width: 320px; height: 320px; background-color:#FFF; margin:3px 3px 3px 3px; float:right;} 

/* navbar and its many variations are for the navbar include*/ 
#navbarwrapper{positon: absolute; width:980px; height: 120px; z-index:30; background-color:#FFF;} 
#navbar{width:980px; height:120px; background-repeat:repeat-x; z-index:31;} 
#navbarlogo{width:210px; height:120px; float:left; z-index:32;} 
#navbarcontent{width:770px; height:120px; padding-top:75px; float:left; font-family:Verdana, Geneva, sans-serif; background-repeat:repeat-x; z-index:32;} 

/*Unordered lists which are used to handle drop down nav bar*/ 
#nav{ 
     list-style:none; 
     font-family:Helvetica, Arial, sans-serif; 
     margin-bottom:10px; 
     float: right; 
     width:100%; 
     position:relative; 
    } 
#nav li{float:left; margin-right:10px; width: 120px; position:relative;} 
#nav a{display:block; padding:5px; color:#000; text-decoration:none;} 
#nav a:hover{color:#fff; background:#000; text-decoration:none;} 
/* drop down */ 
#nav ul{ 
    background:#fff; 
    background:rbga(255,255,255,0); 
    list-style:none; 
    position:absolute; 
    left:-9999px ;} 
#nav ul li{ padding-top:1px; float:none; list-style:none;} 
#nav ul a{white-space:nowrap;} 
#nav li:hover ul{left:0;} 
#nav li:hover a{background:#ccc; text-decoration:underline;} 
#nav li:hover ul a{text-decoration:none;} 
#nav li:hover ul li a:hover{background:#000;} 

/* general tag overides*/ 
h1{font-size:large} 
h2{font-size:larger} 
h3{font-size:medium} 
img {border:none} 
ul{ padding: 0; margin: 0;} 
li{padding: 0;} 



/*link modification*/ 
a:link{ text-decoration: none; color:#FFF; font-family: Helvetica, Arial, sans-serif} 
a:visited{text-decoration: none;color:#FFF; font-family: Helvetica, Arial, sans-serif} 
a:active{text-decoration: none;color:#FFF; font-family: Helvetica, Arial, sans-serif} 
a:hover{text-decoration: none; color:#FFF; font-family: Helvetica, Arial, sans-serif}

источник

2014-02-01 Addison Wilson

Итак, вы хотите, чтобы они плавали слева друг к другу? –

Вы не должны использовать один и тот же идентификатор в нескольких элементах. Вместо этого используйте класс. – Koralarts

Вам просто нужно добавить float: left; к #imagecontainer стилей. Его нет в онлайн-версии.

источник

2014-02-01 03:45:26

Я буквально просто загрузил его, почему у него не было этого тега, обновленного с ним ... –

Хорошо, удалил версию на веб-сервере и загрузил ее снова, теперь она работает XD. Я чувствую себя глупо ... –

просто плавать влево? почему бы не 31% ширины и сделать ее отзывчивой? –

Для каждого изображения float:left;

Это плавает каждый контейнер, который содержит каждое изображение. Используйте это для того, что у вас есть прямо сейчас.

#imagecontainer 
{ 
    float:left; 
}

Вы также можете сделать то же самое со встроенными стилями. Но CSS чище.

Кроме того, не используйте несколько элементов с одинаковым идентификатором. Используйте классы. Кроме того, есть ли причина, по которой вы используете контейнеры для каждого изображения? Вы можете иметь один контейнер с большим количеством изображений и использовать

.container img 
{ 
    float:left; 
}

Кроме того, имейте в виду, что img {float:left;} будет плавать ВСЕ изображения на вашей странице.

источник

2014-02-01 03:46:18

Изменить это:

#imagecontainer{width: 320px; height: 213px; background-color:#FFF; margin:3px 3px 3px 3px; float:left;}

к:

.imagecontainer{width: 320px; height: 213px; background-color:#FFF; margin:3px 3px 3px 3px; float:left;}

и заменить каждый <div id="imagecontainer" с <div class="imagecontainer"

источник

2014-02-01 03:47:43 Deryck

Попробуйте

#imagecontainer{ 
    display:inline; 
    margin: 0px 

}

источник

2014-02-01 03:47:46

#imagecontainer { 
    background-color: #FFFFFF; 
    float: left; 
    margin: 3px 1%; 
    width: 31%; 
}

и это

img { 
    border: medium none; 
    height: auto; 
    width: 100%; 
}

проверить это, совершенный, как вы хотели. Отзывчивый тоже;)

источник

2014-02-01 03:48:19

CSS мои элементы не плавающие правильно

ответ

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