Проблема в html шаблоне, как сделать так?(описание внутри) - HTML и CSS

Melekhin · 17.02.2012, 17:46

Здравствуйте, друзья. Подскажите как сделать вот так:

Надо вместо 8 сделать 3 картинки, убрать стрелки прокрутки вправо-влево, сохраняя центровку, как есть сейчас

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset="utf-8" />
<title>"Ренессанс-Элит"</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<link rel="stylesheet" media="all" href="style/type/puritan.css" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="style/css/ie7.css" media="all" />
<![endif]-->
<script type="text/javascript" src="style/js/jquery-1.5.min.js"></script>

<script type="text/javascript" src="style/js/jquery.jcarousel.js"></script>

<script type="text/javascript">
jQuery(document).ready(function() {
    // Initialise the first and second carousel by class selector.
	// Note that they use both the same configuration options (none in this case).
	jQuery('.d-carousel .carousel').jcarousel({
        scroll: 1
    });
});
</script>
</head>
<body>


  
 <!-- Begin Wrapper -->
  <div id="wrapper">
  <center><a href="#"><img src="http://rosmex.ru/assets/images/articles/uggs3.gif" alt="" /></a></center> 
  <br/>
  <center><b>С нами ВЫГОДНО создавать РОСКОШЬ</b></center>
  <br/>
    <div class="d-carousel">
      <ul class="carousel">
        <li> <a href="#"><img src="style/images/carousel.jpg" alt="" /></a>
          <h4><a href="#">1 Cras varius, sapien egetory sagittis</a></h4>
          <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. Morbi sit amet odio tincidunt. Maecenas est felis, semper in accumsan. </p>
        </li>
        <li> <a href="#"><img src="style/images/carousel.jpg" alt="" /></a>
          <h4><a href="#">2 Cras varius, sapien egetory sagittis</a></h4>
          <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. Morbi sit amet odio tincidunt. Maecenas est felis, semper in accumsan. </p>
        </li>
        <li> <a href="#"><img src="style/images/carousel.jpg" alt="" /></a>
          <h4><a href="#">3 Cras varius, sapien egetory sagittis</a></h4>
          <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. Morbi sit amet odio tincidunt. Maecenas est felis, semper in accumsan. </p>
        </li>
        <li> <a href="#"><img src="style/images/carousel.jpg" alt="" /></a>
          <h4><a href="#">4 Cras varius, sapien egetory sagittis</a></h4>
          <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. Morbi sit amet odio tincidunt. Maecenas est felis, semper in accumsan. </p>
        </li>
        <li> <a href="#"><img src="style/images/carousel.jpg" alt="" /></a>
          <h4><a href="#">5 Cras varius, sapien egetory sagittis</a></h4>
          <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. Morbi sit amet odio tincidunt. Maecenas est felis, semper in accumsan. </p>
        </li>
        <li> <a href="#"><img src="style/images/carousel.jpg" alt="" /></a>
          <h4><a href="#">6 Cras varius, sapien egetory sagittis</a></h4>
          <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. Morbi sit amet odio tincidunt. Maecenas est felis, semper in accumsan. </p>
        </li>
        <li> <a href="#"><img src="style/images/carousel.jpg" alt="" /></a>
          <h4><a href="#">7 Cras varius, sapien egetory sagittis</a></h4>
          <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. Morbi sit amet odio tincidunt. Maecenas est felis, semper in accumsan. </p>
        </li>
        <li> <a href="#"><img src="style/images/carousel.jpg" alt="" /></a>
          <h4><a href="#">8 Cras varius, sapien egetory sagittis</a></h4>
          <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. Morbi sit amet odio tincidunt. Maecenas est felis, semper in accumsan. </p>
        </li>
      </ul>
    </div>
    <div class="clear"></div>
  </div>
  
  <!-- End Wrapper --> 



</body>
</html>

titan2012 · 17.02.2012, 23:27

а можно на css код взглянуть?

Melekhin · 18.02.2012, 11:30

Пожалуйста:

Код:

/*-----------------------------------------------------------------------------------*/
/*	0.	RESET
/*-----------------------------------------------------------------------------------*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent
}
body 	{
	line-height:1
}
ol, ul {
	list-style:none
}
blockquote, q {
	quotes:none
}
blockquote:before, blockquote:after, q:before, q:after {
	content:'';
	content:none
}
:focus {
	outline:0
}
ins {
	text-decoration:none
}
del {
	text-decoration:line-through
}
table {
	border-collapse:collapse;
	border-spacing:0
}
.clear {
	clear:both;
	display:block;
	overflow:hidden;
	visibility:hidden;
	width:0;
	height:0
}
.clearfix:after {
	clear:both;
	content:' ';
	display:block;
	font-size:0;
	line-height:0;
	visibility:hidden;
	width:0;
	height:0
}
.clearfix {
	display:inline-block
}
* html .clearfix {
	height:1%
}
.clearfix {
	display:block
}


/*-----------------------------------------------------------------------------------*/
/*	1.	FONT-FACE
/*-----------------------------------------------------------------------------------*/

 @font-face {
 font-family: 'Puritan20Italic';
 src: url('style/type/puritan/puritan_italic-webfont.eot?') format('eot'),  url('style/type/puritan/puritan_italic-webfont.woff') format('woff'),  url('style/type/puritan/puritan_italic-webfont.ttf') format('truetype'),  url('style/type/puritan/puritan_italic-webfont.svg#webfontZMWmRIPG') format('svg');
 font-weight: normal;
 font-style: normal;
}
 @font-face {
 font-family: 'Puritan20Normal';
 src: url('style/type/puritan/puritan_regular-webfont.eot?') format('eot'),  url('style/type/puritan/puritan_regular-webfont.woff') format('woff'),  url('style/type/puritan/puritan_regular-webfont.ttf') format('truetype'),  url('style/type/puritan/puritan_regular-webfont.svg#webfontJ25dHiGv') format('svg');
 font-weight: normal;
 font-style: normal;
}

/*-----------------------------------------------------------------------------------*/
/*	2.	GENERAL
/*-----------------------------------------------------------------------------------*/

body {
	font-family:"Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Helvetica, Arial, sans-serif;
	background: #000; #{было так transparent url(style/images/bg.png) repeat} 
	color: #787878;
	font-size: 13px;
	line-height: 18px;
}

a {
	text-decoration: none;
	color: #4b4b4b;
}

a:hover {
	text-decoration: none;
	color: #1c1c1c;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Puritan20Normal';
	font-weight: normal;
	color: #4b4b4b;
	margin-bottom: 10px;
}

h4 {
	font-size: 16px;
	line-height: 20px;
	padding-bottom: 7px;
}
#wrapper {
	width: 960px;
	margin: 100px auto 0;
}

/*-----------------------------------------------------------------------------------*/
/*	3. CAROUSEL
/*-----------------------------------------------------------------------------------*/

#wrapper .d-carousel ul li {
	background: none;
	background-color: #FFF;
	-webkit-box-shadow: 0px 1px 2px 0px #b7b7b7;
	-moz-box-shadow: 0px 1px 2px 0px #b7b7b7;
	box-shadow: 0px 1px 2px 0px #b7b7b7; 
	padding: 15px;
	width: 175px;

}

.jcarousel-direction-rtl {
	direction: rtl;
}

.d-carousel h4 {
	margin: 5px 0 5px 0;
}

.d-carousel .jcarousel-container {
	display: block;
	overflow: hidden;
	margin-bottom: 20px;
}

.d-carousel .jcarousel-item {
	width: 190px;
	height: 290px;
}

.d-carousel .jcarousel-container-horizontal {
	width: 870px;
	height: 325px;
	padding: 0 45px;
}

.d-carousel .jcarousel-item-horizontal {
	margin-left: 3px;
	margin-bottom: 3px;
	margin-top: 3px;
	margin-right: 11px;
}

.d-carousel .jcarousel-next-horizontal {
	position: absolute;
	top: 149px;
	right: 0;
	margin-right: 3px;
	width: 15px;
	height: 28px;
	cursor: pointer;
	background: transparent url(style/images/blog-arrows.jpg) no-repeat top right;
}

.d-carousel .jcarousel-direction-rtl .jcarousel-next-horizontal {
	left: 5px;
	right: auto;
	background-image: url(style/images/blog-arrows.jpg);
}

.d-carousel .jcarousel-next-horizontal:hover {
	background-position: bottom right;
}

.d-carousel .jcarousel-prev-horizontal {
	position: absolute;
	top: 149px;
	left: 0;
	margin-left: 3px;
	width: 15px;
	height: 28px;
	cursor: pointer;
	background: transparent url(style/images/blog-arrows.jpg) no-repeat top left;
}

.d-carousel .jcarousel-direction-rtl .jcarousel-prev-horizontal {
	left: auto;
	right: 5px;
	background-image: url(style/images/blog-arrows.jpg);
}

.d-carousel .jcarousel-prev-horizontal:hover {
	background-position: bottom left;
}

titan2012 · 19.02.2012, 03:06

вот пробовал подключить стили, но правда нету дополнительных тех что у вас есть, может мне архивчик скинете?

Melekhin · 19.02.2012, 07:32

Я уже решил проблему, спасибо за отклик)
Но могу скинуть, если что.

titan2012 · 19.02.2012, 10:57

Цитата:

Сообщение от Melekhin

Я уже решил проблему, спасибо за отклик)
Но могу скинуть, если что.

если не сложно, то скинь, интересно поковырятся что к чему там)
вот мыло 19titan89@rambler.ru

gritsayvit · 22.02.2012, 18:29

Давно его я учил, нужно вспомнить

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Проблема с компьютером (описание внутри)	seragem	Помощь студентам	4	07.06.2011 08:57
Описание внутри	HoBuHKuй	Помощь студентам	1	02.06.2010 14:16
Как грамотно сделать описание к проге?	chandrasecar	Общие вопросы Delphi	1	20.11.2008 22:23
Глюк(описание внутри)	Stellvertreter	Общие вопросы C/C++	6	16.10.2008 19:31

17.02.2012, 23:27	#2
titan2012 Пользователь Регистрация: 07.02.2012 Сообщений: 95	а можно на css код взглянуть?

19.02.2012, 07:32	#5
Melekhin Регистрация: 17.02.2012 Сообщений: 5	Я уже решил проблему, спасибо за отклик) Но могу скинуть, если что.

22.02.2012, 18:29	#7
gritsayvit Новичок Джуниор Регистрация: 20.02.2012 Сообщений: 2	Давно его я учил, нужно вспомнить компании по редукторам