2010-05-10 10 views
0

이 div가 왼쪽으로 이동하지 못하는 것 같습니다. wordpress를 사용하여. 나는 많은 것을 시도했지만 손실이 있습니다. 여기왼쪽 부동 소수점

#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의 사업부를 원하는 여기 사업부의 CSS는 왼쪽으로 조금 움직여 라. 어떤 도움이라도 대단히 감사하겠습니다.

+0

IMG 또는 div를 이동 하시겠습니까? 나는 그것을 얻지 않는다. – AlexanderMP

답변

2

요소가 절대적으로 배치되었으므로 float는 적용되지 않습니다. position: absolute;을 제거하고 왼쪽으로 두거나 position: absolute;으로 유지하고 float: left;을 제거하십시오.

데비의 의견에 비추어
#portfolio li img { 
    position: absolute; 
    left: 15px; /* increase the leftmost point 15 px */ 
    margin: 34px 50px 0 0; 
    width: 942px; 
} 

, 다음과 스타일을 추가 : 당신이 절대적으로 위치를 결정하는 경우, 그것은 수평 이동 등을 left 또는 right에서 얼마나 떨어져 있는지 지정

#portfolio { 
    position: relative; 
} 

그 이유는 그것이 왼쪽에있는 waaaaay를 촬영하는 것이었기 때문입니다. 왜냐하면 그것은 브라우저와 절대적으로 관련이있을 가능성이 높기 때문입니다. 컨테이너를 상대적으로 배치하도록 설정하면 절대 위치에있는 자식 요소가 부모에 상대적으로 배치됩니다. 더 자세한 정보 (더 자세한 설명)는 this wiki page을 확인하십시오.

+0

그래서 나는 이렇게합니다 : #portfolio li img { \t 위치 : 절대; \t 오른쪽 : 1px; \t 여백 : 34px 0 0 0; \t 너비 : 942px; } 그리고 왼쪽으로 지나치게 날아갑니다. – Davey

+1

여기는 하하 일을 끝내고, 나는 기술을 연마하고 위키 페이지를 체크 아웃해야 할 것입니다. 모든 도움에 감사드립니다! 만세! #portfolio { 위치 : 상대적; } #portfolio li img { 위치 : 상대적; 왼쪽 : -18px; 여백 : 34px 50px 0 0; 너비 : 942px; } – Davey

6

position: absolutefloat: left 함께 가지 마세요!

+0

'position : absolute'는 기본적으로'float'에 사용하는 모든 것을 무효화합니다 ... – animuson

+1

기름과 물 ... :) – Kasturi

0

당신은 절대 위치 중 하나를 사용하거나 부동해야합니다

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

그 절대 위치는 문서에서 이미지를 소요됩니다 유의하시기 바랍니다 흐름을 완전히 그래서 다른 내용이 될 수 있습니다 아래/위.