Div sol kayan değil

3 Cevap php

Sola taşımak için bu div almak gibi olamaz. Wordpress kullanma. Ben bir çok şey denedim ama bir kayıp am. İşte div css:

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

İşte header.php olduğunu:

<!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>

İşte biçimtabakaları:

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

Sadece # portföy li img div sol biraz taşımak istiyoruz. herhangi bir yardım büyük mutluluk duyacağız.

3 Cevap

Eleman kesinlikle yerleştirilmiş olduğundan, şamandıra bunun için geçerli değildir. Kaldırmak position: absolute; ve sola yüzen izin veya position: absolute; tutmak ve float: left; kaldırın. Bunu kesinlikle konumlandırmak için karar verirseniz, bu left veya right, yatay örneğin taşımak ne kadar uzak olduğunu belirtin:

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

Davey'in yorumun ışığında, aşağıdaki stil eklemek:

#portfolio {
  position: relative;
}

Büyük olasılıkla tarayıcı kesinlikle göreceli konumlandırılmış ediliyordu çünkü sola çooook onu çekiyordum neden oldu. Yerleştirilmiş bir konteyner ayarlama nispeten kesinlikle yerleştirilmiş çocuklar elemanları ebeveyn göre kendilerini konumlandırmak yapar. Daha fazla bilgi (ve daha iyi bir açıklama) için, check out this wiki page.

position: absolute ve float: left birlikte gitme!

Ya kullanan mutlak konumlandırma veya float olmalıdır:

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

veya

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

Mutlak konumlandırma tamamen akış belgenin dışarı görüntü alacak, böylece diğer içerik üstünde / altında olabilir unutmayın.

etiketler