Div не плавающий влево - PullRequest
Новая
       6

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

0 голосов
/ 11 мая 2010

Не могу заставить этот div двигаться влево. Использование WordPress. Я много чего перепробовал, но растерялся. Вот CSS для 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
davey@daveywhitney.com
-->

<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 li img div немного переместился влево. любая помощь будет принята с благодарностью.

Ответы [ 3 ]

6 голосов
/ 11 мая 2010

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

2 голосов
/ 11 мая 2010

Поскольку элемент позиционируется абсолютно, float не будет применяться к нему. Либо удалите 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;
}

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

0 голосов
/ 11 мая 2010

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

#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;
}

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...