作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 jQuerys Coinslida 库。
可以顺利加载。但是我在将它放置在正确的位置时遇到了一些麻烦。
下面列出了我的 HTML/CSS。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Picturebook Studio Ltd.</title>
<!--[if IE]>
<style type="text/css" media="screen">
body {behavior: url(includes/csshover.htc);}
</style>
<![endif]-->
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/coin-slider-styles.css" type="text/css" />
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/Kozuka_Gothic_Pro_OpenType_400-Kozuka_Gothic_Pro_OpenType_700.font.js" type="text/javascript"></script>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/coin-slider.min.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('li');
Cufon.replace('h1');
Cufon.replace('p');
Cufon.replace('ol li');
</script>
</head>
<body>
<?php include('includes/header.php'); ?>
<div id="logo">
<img src="images/logo.png" alt="The Picturebook Studio Ltd" />
</div>
<div id="content">
<h1>Welcome to the picturebook studio limited</h1>
<h1>We are an innovative company based in Northern England</h1>
<p class="whiteParagraph"><b>We employ a team of in house professionals which include:</b></p>
<ol>
<li>photographers</li>
<li>videographers</li>
<li>sound engineers</li>
<li>graphic designers</li>
<li>web designers</li>
</ol>
<p class="whiteParagraph">We provide the following 'unique' services :</p>
<ol>
<li class="gold">photography
<ul class="white">
<li>working exclusively with models, actors & presenters</li>
</ul>
</li>
<li class="gold">coffee table books
<ul class="white">
<li>graphistudio wedding albums & story books</li>
</ul>
</li>
<li class="gold">video / film production
<ul class="white">
<li>weddings, pr, corporate, commercial & training</li>
</ul>
</li>
<li class="gold">audio production
<ul class="white">
<li>music & voice over</li>
</ul>
</li>
<li class="gold">graphic design
<ul class="white">
<li>pr posters & business stationery</li>
</ul>
</li>
<li class="gold">web design</li>
</ol>
</div>
<div id="gallery">
<div id='coin-slider'>
<a href="img01_url" target="_blank">
<img src='images/easy.jpg' >
<span>Description for img01</span> </a>
<a href="imgN_url">
<img src='images/hassleho.jpg' >
<span>Description for imgN</span></a>
</div>
</div>
<script>
$(document).ready(function() {
$('#coin-slider').coinslider();
});
</script>
</body>
</html>
CSS ....
/* Gallery */
#gallery {
background: transparent;
position: relative;
top: 265px;
left: 88px;
/*width: 555px;*/
/*height: 550px; */
}
/*
Coin Slider jQuery plugin CSS styles
http://workshop.rs/projects/coin-slider
*/
.coin-slider { overflow: hidden; zoom: 1; }
.coin-slider a{ text-decoration: none; outline: none; border: none; }
.cs-buttons { font-size: 0px; padding: 10px; float: left; }
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }
.cs-title { width: 545px; padding: 10px; background-color: #000000; color: #FFFFFF; }
.cs-prev,
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }
当我加载页面时,coinslida 图库会加载到页面的最右侧……如果需要的话。谁能指出正确的方向来解决这个问题?
完整的工作示例位于:http://www.stuartblackett.com/picturebook
谢谢
最佳答案
是的,一个完整的工作示例会有所帮助。
编辑
您确定不想要 position:absolute
吗?然后它适合您的框架。
如果使用相对位置,则必须考虑元素在正常流中出现的位置(没有定位)。在这种情况下,它出现在最右边。
关于jquery - Coinslida jQuery - CSS 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5146191/
我正在使用 jQuerys Coinslida 库。 可以顺利加载。但是我在将它放置在正确的位置时遇到了一些麻烦。 下面列出了我的 HTML/CSS。 The Picturebook
我是一名优秀的程序员,十分优秀!