SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Thread: CSS codes fix

  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Location
    Pabna, Bangladesh
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS codes fix

    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 CSS:
    #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*/
    Last edited by cpradio; Mar 18, 2013 at 06:00. Reason: Added code tags

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    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. #3
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Location
    Pabna, Bangladesh
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.
    Thank you for your suggestion. Here is the link: http://www.1stwebdesigner.com/wordpr...ode-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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    OL, you said earlier that—

    Quote Originally Posted by foysalu9 View Post
    I don't want slide show. Just still image.
    It's easy to embed an image on a page. Can we see your own code?

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Location
    Pabna, Bangladesh
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    OL, you said earlier that—



    It's easy to embed an image on a page. Can we see your own code?
    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. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Sure. Basically, this is how you place an image on a web page:

    Code:
    <img src="images/my-image.jpg" alt="Picture of a dog" width="200" height="100">
    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. #7
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Location
    Pabna, Bangladesh
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for sharing this helpful info. I have fixed it!

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

    I Hope you will help again. Thanks in advance!

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by foysalu9 View Post
    I Hope you will help again.
    Of course.

  9. #9
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Location
    Pabna, Bangladesh
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    We need to see the whole page to understand what's happening. 'Not working' is not much to go on.

  11. #11
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Location
    Pabna, Bangladesh
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Attached Files Attached Files


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •