Div non flottant à gauche

Impossible de déplacer cette div vers la gauche. Utilisation de wordpress J'ai essayé beaucoup de choses mais je suis perdue. Voici le code CSS pour la div:Div non flottant à gauche

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

Voici le 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>

Voici la feuille de style:

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

Je veux juste le #portfolio li img div déplace vers la gauche un peu. toute aide serait grandement appréciée.

Source

2010-05-10 Davey

déplacez-vous l'IMG ou le div? Je ne comprends pas. – AlexanderMP

Étant donné que l'élément est positionné de manière absolue, le flotteur ne s'applique pas à celui-ci. Supprimez le position: absolute; et laissez-le flotter à gauche, ou conservez le position: absolute; et supprimez le float: left;. Si vous décidez de le positionner absolument, préciser dans quelle mesure il est de left ou right pour le déplacer horizontalement, par exemple:

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

À la lumière du commentaire de Davey, ajoutez le style suivant:

#portfolio { 
    position: relative; 
}

Le raison pour laquelle il tirait waaaaay à gauche était parce qu'il était probablement positionné absolument par rapport au navigateur. La définition d'un conteneur à positionner de manière relative permet aux éléments enfants positionnés de se positionner par rapport au parent. Pour plus d'informations (et une meilleure description), consultez this wiki page.

Source

2010-05-10 21:35:52

donc je l'ai comme ceci: #portfolio li img { \t position: absolue; \t droite: 1px; \t marge: 34px 0 0 0; \t largeur: 942px; } et il le pousse wayyyyyy vers la gauche. – Davey

Voici ce qui a fini par fonctionner haha, je vais devoir de mes compétences et vérifier cette page wiki. Merci pour votre aide! Hourra! #portfolio { position: relative; } #portfolio li img { position: relative; gauche: -18px; marge: 34px 50px 0 0; largeur: 942px; } – Davey

position: absolute et float: left ne vont pas ensemble!

Source

2010-05-10 21:32:06 Kasturi

La 'position: absolute' annulera fondamentalement tout ce que vous utilisez pour' float' ... – animuson

huile et eau ... :) – Kasturi

Vous devez utiliser soit le positionnement absolu ou flottez il:

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

S'il vous plaît noter que le positionnement absolu prendra votre image hors du flux de documents complètement, de sorte que tout autre contenu peut être ci-dessous/au-dessus.

Source

2010-05-10 21:36:32 jeroen

Div non flottant à gauche

Répondre

Questions connexes