CSS codes fix

HTML & CSS
1

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*/
2

You’ll need to provide the HTML for us to help with this. CSS code on its own has no meaning. Preferably post a link. If you post code, make sure it’s a full working example.

3

Thank you for your suggestion. Here is the link: http://www.1stwebdesigner.com/wordpress/psd-to-html-tutorial-code-photoshop/

I like to build a similar project. But problem is I couldn’t implement “Step 5: Working on Slider Section” including JavaScript code.

Please help me. For your kind information, I know html, css and Photoshop except JavaScript.

No more, I am waiting for your kind response.

4

OL, you said earlier that—

It’s easy to embed an image on a page. Can we see your own code?

5

I like to say that this is my first web design project. So, here I am embarrassed that where and how I write the code so that an image embed a specific area on a page. Could you have any advice?

6

Sure. Basically, this is how you place an image on a web page:

<img src="[COLOR="#FF0000"]images/my-image.jpg[/COLOR]" [COLOR="#FF8C00"]alt="Picture of a dog"[/COLOR] [COLOR="#0000FF"]width="200" height="100"[/COLOR]>

The bit in red is really important. It tells the browser where your image is, and what it’s called. “images/my-image.jpg” is just an example. The “images” bit means that the there is a folder called “images” in the same folder as the page that the image appears on. “my-image” is the name you have given to the image. The “,jpg” bit is the file extension, but it might be “.gif” or “.png” instead, so check your own image to see.

The bit in orange is good to include. It is a description of what’s in the image for anyone who can’t see it (like a blind person).

The blue bit is optional. It’s just the width and height of the image in pixels.

Does that make sense?

7

Thanks for sharing this helpful info. I have fixed it! :slight_smile:

Now I am working with the other part of this project.

I Hope you will help again. Thanks in advance!

8

Of course. :slight_smile:

9

Here “web” works properly in body. But “vector” not works properly. Please help me.

Here is the code:

html code:

<div id=“web”>
<img src=“images/web.png” />
<h3>Web <span class=“green1”><b>Design</b></span></h3>
<p>অনেক সময় ব্যক্তিগত গুরুত্বপূর্ণ ফাইল যাতে অন্য কারও হাতে না পড়ে, সে জন্য সফটওয়্যারের মাধ্যমে এটি লক করার দরকার পড়ে। বিনা মূল্যে এমন সফটওয়্যার পাওয়া যায় না, সিরিয়াল কী বা অন্য উপায়ে নিবন্ধন করতে হয়।</p>
<p><a href=“#” class=“readmore”>read more</a></p>
</div>
</div>

<!-- END WEB –>

<div id=“vector”>
<img src=“images/vector.png” />
<h3>Vector <span class=“green1”><b>Design</b></span></h3>
<p>অনেক সময় ব্যক্তিগত গুরুত্বপূর্ণ ফাইল যাতে অন্য কারও হাতে না পড়ে, সে জন্য সফটওয়্যারের মাধ্যমে এটি লক করার দরকার পড়ে। বিনা মূল্যে এমন সফটওয়্যার পাওয়া যায় না, সিরিয়াল কী বা অন্য উপায়ে নিবন্ধন করতে হয়।</p>
<p><a href=“#” class=“readmore”>read more</a></p>
</div>

CSS code:

#web{
position:relative;
top:-25px;
float:left;
width:450px;
padding-left:30px;
}
#web p{
width: 260px;
margin-bottom: 20px;
color: #000;
}
#web img{
float:right;
margin-right:50px;
}

#vector{
position:relative;
top:-25px;
float:right;
width:450px;
padding-right:30px;

}

#vector p{
width: 260px;
margin-bottom: 20px;
color: #000;
}
#vector img{
float:right;
margin-right:50px;
}

No more, I am waiting for your kind response.

10

We need to see the whole page to understand what’s happening. ‘Not working’ is not much to go on.

11

Please see the attached file “practical_project01”. You find all codes there. For you kind information, if I want to large or small this page “Vector Design” goes out of the actual body of the page. Hope it helps. Thanks.