CSS codes fix

**active-worker** · 03-18-2013, 10:42 AM

I couldn’t implement some css codes in my html page. Can anybody help me? Here I don't want slide show. Just still image. Here is the code:

Code:

#container{
	width: 960px;
	margin: 0 auto;
}

/* SLIDES */
#slides{
	position: relative;
	margin-top: 40px;
}
.slides_container{
	height: 315px;
}
.slide-right{
	position: absolute;
	top: 0;
	left: 385px;
}
 
.slide-heading{
	background: url(images/slide-heading.png) no-repeat;
	width: 494px;
	height: 68px;
	color: #fff;
	font-size: 24px;
	padding-top: 20px;
	padding-left: 80px;
	margin-top: 35px;
	margin-bottom: 30px;
}
.slide-right .info{
	width: 395px;
	margin-bottom: 20px;
	margin-left: 155px;
}
.slide-right .readmore{
	margin-left: 155px;
}
.readmore{
	font-style: italic;
	text-decoration: none;
	color: #509743;
	padding-left: 15px;
	background: url(images/more.png) no-repeat 0 50%;
}
.readmore:hover{
	color: #c8c8c8;
	
}
.pagination{
	position: absolute;
	bottom: 25px;
	left: 25px;
	z-index: 99;
}

ul.pagination li{
	float: left;
	margin-right: 10px;
	background: url(images/pagination.png) no-repeat;
	background-position: top;
	width: 14px;
	height: 15px;
}
ul.pagination li.current{
	background-position: bottom;
}
ul.pagination li a{
	display: block;
	text-indent: -999999px;
}

a.next{
	position: absolute;
	right: 25px;
	bottom: 30px;
	display: block;
	width: 7px;
	height: 13px;
	background: transparent url(images/prev-next.png) no-repeat;
	background-position: top right;
	text-indent: -9999px;
}
a.prev{
	position: absolute;
	right: 50px;
	bottom: 30px;
	display: block;
	width: 7px;
	height: 13px;
	background: transparent url(images/prev-next.png) no-repeat;
	background-position: top left;
	text-indent: -9999px;
}
a.next:hover{
	background-position: bottom right;
}
a.prev:hover{
	background-position: bottom left;
}
/* END SLIDES*/

Click image for larger version.

Name: web.jpg
Views: 352
Size: 8.6 KB
ID: 4984

**ajfmrf** · 03-18-2013, 04:59 PM

Please post a link to the page on your site that contains the problematic script so we can check it out.

The image is small and when you post the page make sure you explain what "still image" you are talking about

**FrickenTrevor** · 04-01-2013, 12:32 PM

It sounds like you are trying to only insert the image with CSS. In that case:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS image placement</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css" media="screen">
    #headline1 {
       background-image: url(images/newsletter_headline1.gif)  no-repeat;
      }
    #headline2 {
        background-image: url(images/newsletter_headline2.gif) no-repeat;
      }
</style>
</head>
<body>
     <div id="headline1">Some text … </div>
     <div id="headline2">Some more text .. </div>
</body>
</html>

images/newsletter_headline1.gif is the image you want to place, and the div #headline1 is the container for the image.