Log in

View Full Version : 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:



#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*/
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:


<!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.