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;
}
or
#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.
加载中,请稍侯......
精彩评论