gpt4 book ai didi

jquery - Coinslida jQuery - CSS 问题

转载 作者:行者123 更新时间:2023-11-28 19:02:27 25 4
gpt4 key购买 nike

我正在使用 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 &amp; presenters</li>
</ul>
</li>
<li class="gold">coffee table books
<ul class="white">
<li>graphistudio wedding albums &amp; story books</li>
</ul>
</li>
<li class="gold">video / film production
<ul class="white">
<li>weddings, pr, corporate, commercial &amp; training</li>
</ul>
</li>
<li class="gold">audio production
<ul class="white">
<li>music &amp; voice over</li>
</ul>
</li>
<li class="gold">graphic design
<ul class="white">
<li>pr posters &amp; 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com