Div not floating left_问答_开发者_运维开发者技术经验分享

Can't seem to get this div to move to the left. Using wordpress. I tried a lot of things but am at a loss. Here is the css for the div:

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

Here is the 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" />
&l开发者_JAVA技巧t;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>

Here is the stylesheet:

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

Just want the #portfolio li img div to move to the left a bit. any help would be greatly appreciated.

position: absolute and float: left do not go together!

Since the element is positioned absolutely, the float won't apply to it. Either remove the position: absolute; and let it float left, or keep the position: absolute; and remove the float: left;. If you decide to position it absolutely, specify how far it is from left or right to move it horizontally, e.g.:

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

In light of Davey's comment, add the following style:

#portfolio {
  position: relative;
}

The reason it was shooting it waaaaay to the left was because it was likely being positioned absolutely relative to the browser. Setting a container to be positioned relatively makes absolutely positioned children elements position themselves relative to the parent. For more information (and a better description), check out this wiki page.

You should use either absolute positioning or float it:

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

Please note that absolute positioning will take your image out of the document flow completely, so other content can be below / above it.

Div not floating left

精彩评论

关注公众号

热门标签

图文推荐

Div not floating left

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：