Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Sep 2013
    Location
    Philippines
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    HTML to CSS for image?

    Hello All,

    I am new to CSS and do not have a good understanding of how it works. I have started to update my web-pages to the new HTML standards and wanted to use a CSS page for redundant code. I have the following line of code 3 to 5 times on a single page.

    [CODE]<p><img src="images/colorbar.gif" height="5" width="90%" alt="colorbar gif" border="0" /><p />

    Is there a way to place this line into the CSS page and then call it when needed into the web-page?

    I also have several Java scripts that are used for clocks in each page and would like to convert to CSS if at all possible. I have read on these subjects, but have little understanding how to code them in CSS and then call the style into the web-page when needed. I am trying to reduce the size of the web-page code.

    Any help would be greatly appreciated.

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,916
    Thanks
    15
    Thanked 227 Times in 227 Posts
    When several items have the same style you give them a class name, and make a css statement for that class.

    Code:
    <p><img src="images/colorbar.gif"  class="my_images" alt="colorbar gif"  /><p />
     On the style sheet:
    
    .my_images
    {
    width:90%;
    height:5px;
    border:0;
    }
    Because it's a style statement the height is given in pixels, not just a number.

    It's interesting that you can just style a div as a line separator too, to replace an image or an HR.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • Users who have thanked DrDOS for this post:

    rcampsr (09-17-2013)

  • #3
    New to the CF scene
    Join Date
    Sep 2013
    Location
    Philippines
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you DrDos, Your name brings back fond memories when DrDos was still used.

    With the example you gave me would work well, but not reduce my line characters. What I had in mind was one location to change the picture, not to have to go into every page of the site and chance 3 to 5 instances of it. If you have any further ideas they would be greatly appreciated. I wish I had a better understanding of CSS and how it works, but it just hasn't click into my memory yet. LOL

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by rcampsr View Post
    Is there a way to place this line into the CSS page and then call it when needed into the web-page?
    Horizontal rules can be created strictly via CSS.

    Live Demo: https://patrick.dark.name/web.dev/de...of.concerns.2/

    Edit: I guess it would help to link to an actual live demo instead of localhost. Fixed.

    Demo Code:
    Code:
    <!doctype html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>Demo</title>
    		<style>
    			section { text-align: center; }
    			section:not(:last-child)::after { content: ""; display: block; width: 95%; height: 0.15rem; margin: 1rem auto; background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); }
    		</style>
    	</head>
    	<body>
    		<section>
    			<p>This is a filler paragraph.</p>
    		</section>
    		<section>
    			<p>This is a filler paragraph.</p>
    		</section>
    		<section>
    			<p>This is a filler paragraph.</p>
    		</section>
    		<section>
    			<p>This is a filler paragraph.</p>
    		</section>
    		<section>
    			<p>This is a filler paragraph.</p>
    		</section>
    	</body>
    </html>
    Last edited by Arbitrator; 09-17-2013 at 01:46 AM. Reason: See the post.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    rcampsr (09-17-2013)

  • #5
    New to the CF scene
    Join Date
    Sep 2013
    Location
    Philippines
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you for the help Arbitrator, that was what I was looking for. I will look it over and get an idea how it works. If it reduces the code just a little and make it so I can only change one place for all the pages, it is well worth it. This is a learning process for me, nothing like OOP.


  •  

    Posting Permissions

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