Div не плавающий левый

Не может показаться, что этот div перемещается влево. Использование wordpress. Я много пробовал, но я в недоумении. Вот CSS для DIV:Div не плавающий левый

#portfolio li img { 
    position: absolute; 
    float: left; 
    margin: 34px 50px 0 0; 
    width: 942px; 
}

Вот это header.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- 
Design by Davey Whitney 
[email protected] 
--> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" /> 



<link rel="stylesheet" type="text/css" href="wp-content/themes/zenlite/layout.css" media="screen" /> 
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/print.css" media="print" /> 
<link rel="stylesheet" type="text/css" href="wp-content/themes/zenlite/color.css" /> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.kwicks-1.5.1.js"></script> 
<script type="text/javascript" src="js/jquery.innerfade.js"></script> 
<script type="text/javascript" src="js/custom.js"></script> 





<title> 
Wildfire 
</title> 


<script type="text/javascript" src="http://wfithaca.com/js/jquery.lavalamp.js"></script> 
<script type="text/javascript" src="http://wfithaca.com/js/jquery.easing.1.1.js"></script> 
<script type="text/javascript" src="http://wfithaca.com/js/jquery.cycle.all.min.js"></script> 


<script type="text/javascript"> 
    function my_kwicks(){ 
    $('.kwicks').kwicks({ 
     duration: 300, 
     max: 200, 
     spacing: 0 
    }); 
} 

$(document).ready(function(){ 
    my_kwicks(); 
}); 


</script> 

<script type="text/javascript"> 
     $(document).ready(
       function(){ 


        $('ul#portfolio').innerfade({ 
         speed: 1000, 
         timeout: 5000, 
         type: 'sequence', 

        }); 



      }); 
    </script> 

</script> 

    <script type="text/javascript"> 
$(document).ready(function(){ 
     $('li.headlink').hover(
      function() { $('ul', this).css('display', 'block'); }, 
      function() { $('ul', this).css('display', 'none'); }); 
    }); 

    </script> 




</head> 

<body> 



<div id="wrapper"> 



    <div id="header"> 


       <ul id="portfolio">     

        <li> 

         <img src="http://wfithaca.com/images/banner1.png" /> 

        </li> 
        <li> 
         <img src="http://wfithaca.com/images/banner1.png" /> 
        </li>     
        <li> 
         <img src="http://wfithaca.com/images/banner1.png" /> 
        </li>     


       </ul> 






    </div> 


<div id="navigation"> 
    <div id="kwickbar"> 

    <ul class="kwicks"> 
    <li id="kwick1"><a href="#">Home</a></li> 
    <li id="kwick2"><a href="#">Menu</a></li> 
    <li id="kwick3"><a href="#">Events</a></li> 
    <li id="kwick4"><a href="#">Friends</a></li> 
    <li id="kwick5"><a href="#">Contact</a></li> 

</ul> 


    </div> 
</div>

Вот это таблица стилей:

html,body { 

    font-family:Tahoma, Verdana,Arial, Helvetica, sans-serif; 
    font-size:100%; 
    padding:0; 
    color:#fff; 
    border-style:none; 



    } 
a { 

    text-decoration:none; 
} 
a:hover,a:active,a:focus { 
    text-decoration:none; 
} 
ul li { 
    list-style-type:none; 


} 
ul.dbem_events_list a:link {color: #A32725; text-decoration: underline; } 
ul.dbem_events_list a:visited {color: #A32725; text-decoration: underline; } 
ul.dbem_events_list a:hover {color: #ffffff; text-decoration: none; } 
ul.dbem_events_list{text-decoration:none; list-style-type:none;} 

ul li ul li { 
    list-style-type:none; 
} 
ul li ul li ul li { 
    list-style-type: none; 
} 
q:before, q:after { 
    content:""; 
} 
#wrapper { 
    width:986px; 
    margin: 0 auto; 
} 

#header { 

    background-image:url('images/headframe.png'); 
    width:986px; 
    height:271px; 
} 

#kwickbar { 
    padding: 25px 0 0 25px; 
} 

#navigation { 
    width:984px; 
    height: 100px; 
    background-color: #000000; 
    text-decoration:none; 
    margin-left:1px; 
} 

.update-post { 
    float:left; 
    width:100px; 
} 
#content { 
    float:left; 
    height:100%; 
    width:984px; 
    background-color: #000000; 
    text-decoration:none; 
    margin-left:1px; 
} 

#postcontent{ 
height:100%; 
width:100%; 
} 

#content .post { 
    float:left; 
    width:90px; 
} 
#content .page,#content .attachment,.postcontent { 
    color:#fff; 
    width:720px; 
    margin-top:15px; 
    margin-left:30px; 
    float:left; 
    text-decoration:none; 
} 
.photo { 
    width: 250px; 
    height:700px; 
    background-color:#000000; 
    margin:0 0 0 880px; 
} 
.slideshow { height: 232px; width: 232px; margin:0 0 0 880px; } 
.slideshow img { border: 5px solid #000; } 

.post-title { 
    margin:0; 
    padding:0; 
} 
.post-title a { 
    text-decoration:none; 
} 
.post-title a:hover,.post-title a:active,.post-title a:focus { 
    text-decoration:underline; 
} 
#content .meta li,#content .prevnext li,#content .gallery li { 
    list-style-image:none; 
    list-style:none; 
} 
.meta { 
    margin:5px 0 0; 
    padding:0; 
    font-size:.85em; 
} 
.meta ul,.meta li { 
    margin:0; 
    padding:0; 
} 
.meta ul { 
    display:inline; 
} 
.meta li li { 
    display:inline; 
    padding-right:.3em; 
} 
.postfoot { 
    clear:both; 
    margin-bottom:20px; 
    padding-bottom:10px; 
    line-height:1.2em; 
} 
.author .posts-by { 
    padding-top:10px; 
} 
#footer { 
    clear:both; 
    margin:0; 
    padding:0 0 5px; 
    text-align:center; 
    font-size:.8em; 
    border: 0; 
    width:960px; 
} 
#footer ul { 
    clear:both; 
    margin:0; 
    padding:0; 
} 
#footer li { 
    display:inline; 
    margin:0; 
    padding:0 5px; 
} 
#footer li.rss { 
    position:relative; 
    top:3px; 
} 


.copyright { 
    padding:50px 0 0 0; 
    font-family:verdana; 
    color:#ffffff; 
    text-align:left; 
    width:800px; 
    font-size:0.8em; 
} 

.copyright a 
{ 
text-decoration:none; 
color:#7E0000; 
font-weight:600; 
} 

.copyright a:hover 
{ 
color:#C0D341; 
} 



. 



.postcontent p { 
    text-decoration:none; 
    border:0; 
    border-style:none; 
    } 

    .postcontent p a:hover { 
     color:#fff; 

    } 





.kwicks { 
    list-style-type: none; 
    list-style-position:outside; 
    position: relative; 
    margin: 0; 
    padding: 0; 
} 

.kwicks li{ 
    display: block; 
    overflow: hidden; 
    padding: 0; 
    cursor: pointer; 
    float: left; 
    width: 125px; 
    height: 40px; 
    margin-right: 0px; 
    background-image:url('http://wfithaca.com/images/kwicks.jpg'); 
    background-repeat:no-repeat; 
} 

.kwicks a{ 
    display:block; 
    height:40px; 
    text-indent:-9999px; 
    outline:none; 
} 

#kwick1 { 
    background-position:0px 0px; 
} 
#kwick2 { 
    background-position:-200px 0px; 
} 
#kwick3 { 
    background-position:-400px 0px; 
} 
#kwick4 { 
    background-position:-600px 0px; 
} 
#kwick5 { 
    background-position:-800px 0px; 
} 

#kwick1.active, #kwick1:hover { 
    background-position: 0 bottom; 
} 
#kwick2.active, #kwick2:hover{ 
    background-position: -200px bottom; 
} 
#kwick3.active, #kwick3:hover { 
    background-position: -400px bottom; 
} 
#kwick4.active, #kwick4:hover { 
    background-position: -600px bottom; 
} 
#kwick5.active, #kwick5:hover { 
    background-position: -800px bottom; 
} 

#portfolio li img { 
    position: absolute; 
    float: left; 
    margin: 34px 50px 0 0; 
    width: 942px; 
}

Просто хочу #portfolio литий Img дел до немного переместитесь влево. любая помощь будет принята с благодарностью.

источник

2010-05-10 Davey

Вы перемещаете IMG или div? Я не понимаю. – AlexanderMP

Поскольку элемент расположен абсолютно, поплавок не будет применяться к нему. Либо удалите position: absolute; и дайте ему поплавать влево, либо сохраните position: absolute; и удалите float: left;. Если вы решили поместить его абсолютно, определить, как далеко это от left или right, чтобы переместить его по горизонтали, например:

#portfolio li img { 
    position: absolute; 
    left: 15px; /* increase the leftmost point 15 px */ 
    margin: 34px 50px 0 0; 
    width: 942px; 
}

В свете комментария Дэйви, добавьте следующий стиль:

#portfolio { 
    position: relative; 
}

Причина, по которой он снимал waaaaay слева, состоял в том, что он, скорее всего, позиционировался абсолютно относительно браузера. Установка контейнера, который будет располагаться относительно, создает абсолютно позиционированные дочерние элементы, которые позиционируют себя относительно родителя. Для получения дополнительной информации (и лучшего описания), проверьте this wiki page.

источник

2010-05-10 21:35:52

, так что у меня оно есть вот так: #портфолио li img { \t позиция: абсолютная; \t Право: 1px; \t margin: 34px 0 0 0; \t ширина: 942px; } , и он стреляет в него wayyyyyy влево. – Davey

Вот, что закончилось, работая ха-ха, я дефф, чтобы получить свои навыки и проверить эту страницу вики. Спасибо за помощь! Ура! #портфолио { позиция: относительная; } #портфолио li img { позиция: относительная; Слева: -18px; margin: 34px 50px 0 0; ширина: 942px; } – Davey

position: absolute и float: left не ходите вместе!

источник

2010-05-10 21:32:06 Kasturi

«позиция: абсолютная» будет в основном сводить на нет все, что вы используете для 'float' ... – animuson

масло и вода ... :) – Kasturi

Вы должны использовать либо абсолютное позиционирование или поплавок его:

#portfolio li img { 
    position: absolute; 
    left: 0; 
    margin: 34px 50px 0 0; 
    width: 942px; 
}

или

#portfolio li img { 
    float: left; 
    margin: 34px 50px 0 0; 
    width: 942px; 
}

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

источник

2010-05-10 21:36:32 jeroen

Div не плавающий левый

ответ

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