www.webdeveloper.com
Results 1 to 6 of 6

Thread: Do I use div style, or div class, if I put image in css

Hybrid View

  1. #1
    Join Date
    Apr 2012
    Posts
    110

    Do I use div style, or div class, if I put image in css

    Hi, I get confused with the div style and div class. cause I have put in css:
    #image1 { background-image:url('Desktop/tn_ENTERBUTTON1');
    background-repeat:repeat-x;
    background-position:center
    width:125px;
    height:60px;
    }

    Then in html under <body> it is <div class="image1"><a href="../../../../..Desktop/ENTERBUTTON1.jpg' width="125" height="60" alt=" title=" border="0"/></a></div>

    The image is just a tiny enter button. the editor put it in in html,. But I then took the width and height amount out, and put the css on top, to see if it would come into the page with my handcode, as I dont like the editor just putting it in with html code. the href="../../..> that the editor put in, so ive just left that.

    Thanks spufi, I havent forgotten about you, just want to get the image in by hand code, without the editor.

  2. #2
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,208
    CSS:

    Code:
    #image1 { 
    width:125px;
    height:60px;
    background: url('Desktop/tn_ENTERBUTTON1') repeat-x center scroll;
    }
    For this to work online, you can not have a path referring back to your desktop. If you plan to use the image as a link, then you don't need to set it as a background of the div.

    CSS:

    Code:
    img { 
    width:125px;
    height:60px;
    border: 0;
    }
    Image Link (You can change the "p" tags to div tags and style as needed.):

    Code:
    <p><a href="link path" title="Mouseover Description"><img src="Path to image" alt="Text Description"></a></p>
    Last edited by Major Payne; 05-05-2012 at 02:41 AM.

  3. #3
    Join Date
    Apr 2012
    Posts
    110

    Can I also put p class instead of div class.

    Hi, Goodness, thanks for all that in Major Payne, I think you were also on techguy.org.
    Another difficulty Im having to understand, is could I put <p class=> in the html part for that #image { } that is in the css.
    I get confused, cause I dont know if a tiny enter button is classified as a p class or a div class.

    What path do I name the image in then, if it shouldnt be desktop, must I try put that image first in a folder with my other images, eg: in webtheme.jpg folder.
    I think I tried it, but had technical difficulties, cause after saving the enter graphic button in the graphics program, then when I tried to open it, it just goes open in windows gallery, I think it is the media gallery or something where you can fix the image, but you cant transfer it to the editor, only to the simple paint program in windows.

  4. #4
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,208
    1) You can add a class to the "p" tag if you wish along with using an id for the image tag. A class may be used more than once per page. An id is to be used only once per page, but may be used on another page if needed.

    2) A button, "<button type="button">Click Me!</button>" can be style with a class or id, but, if it is the only button tag on the page, just use the name button in the CSS. Whether you use a "p" tag or a div to wrap the button tag may depend on the doctype you are using. Should help with CSS:

    CSS Tutorials:

    Twenty Advanced CSS Tutorials: http://designfestival.com/twenty-top...&utm_term=More
    Advanced CSS: http://www.yourhtmlsource.com/styles...vancedcss.html
    http://www.handycss.com/
    http://www.w3.org/Style/Examples/011/firstcss
    http://www.csstutorial.net/

    Dynamic Drive CSS Library: http://www.dynamicdrive.com/style/
    http://www.echoecho.com/css.htm
    http://htmldog.com/guides/cssbeginner/
    http://www.davesite.com/webstation/css/
    http://www.htmlcodetutorial.com/char...msupp_193.html

    3) If you are making these web pages for use online, you should set up a projects folder and make it reflect the online directory you are going to use for your site. All images could go in one folder. Paths should be relative unless you need a full URL path. Doing this will allow you to test your pages locally just as if it was online. Firefox has a Link Checker add-on along with some good web developer tools.

    4) Why not dump Paint and get a nicer, free program?:

    FREE software (No Animation):

    http://www.getpaint.net/ (#1!! Very user friendly)
    GIMPshop is available for many different operating systems, including Mac OS X, Windows 98+, Linux, and Solaris: http://gimpshop.com/
    http://www.zoner.com/
    Free VCW VicMan’s Photo Editor: http://www.makeuseof.com/tag/5-free-...ves-photoshop/
    Free Web Photo Album: http://www.vicman.net/installed.php?...um&Version=1.2

    I like GetPaint.net, but the free Zoner is very good.

  5. #5
    Join Date
    Apr 2012
    Posts
    110

    Hi yes, Im still learning Gimp very slowly as the code is more important at present

    Hi, thanks very much for that info, I must write it all down in another book here. Yes, I have Gimp, just havent had time to learn it properly, just experementing on it, when I want to add a graphic photo or button in the editor webpage. I think I must concentrate more on the code now, cause I see now, that I can get graphics online which would be alot quicker, if I know where to look. I can concentrate on getting better at gimp later I think.

    I would like to know if it is possible to blend colors in text with css or html, for example, make a heading and instead of it being boring one colored text, if its possible to have a heading with multi colors blending into each other.
    Cause that I still have to learn in Gimp. I just know how to grab a quick logo, that they give you in 5 seconds if you just put the size and name of the logo in etc or put a one colored text design in using the font.

  6. #6
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,208
    You might be able to blend text colors with CSS 3 rules. Haven't experimented much with CSS 3 trying to do that as I use a graphics editor to make heading with color blends/effects. There are some free online rainbow text generators online, but they generate HTML code using the font tags. If you change them to the span tags, you'll be current. Take a look at these:

    http://www.vex.net/~x/xfade/advanced.html
    http://patorjk.com/text-color-fader/
    http://www.myrainbowtext.com/
    http://www.ibdguy.com/rainbow/
    http://rainbow.arch.scriptmania.com/...nbow_text.html
    http://www.draac.com/rainbow.html
    http://www.tektek.org/color/

    Might check out:

    Speed Up with CSS3 Gradients

    GIMP Tutorials:

    How to Make an Animated GIF Image with GIMP: http://www.makeuseof.com/tag/how-to-...age-with-gimp/
    GIMP tutorial directory: http://www.pxleyes.com/tutorials/gimp/ext/
    25 GIMP Video Tutorials to Help Get You Started: http://sixrevisions.com/graphics-des...deo_tutorials/
    Using GAP: http://www.gimp.org/tutorials/Using_GAP/

    GIMP/Saving: http://en.wikibooks.org/wiki/GIMP/Saving
    GIMP Plug-in Registry: http://registry.gimp.org/
    How to install gimp gap on windows: http://registry.gimp.org/node/3500
    Change Language: http://docs.gimp.org/en/gimp-fire-up...nning-language
    Fonts in GIMP 2.x: http://www.gimp.org/unix/fonts.html

    Adding Fonts: http://docs.gimp.org/en/gimp-using-fonts.html
    Gimp Brushes Photoshop Brushes - http://gimp-tutorials.net/taxonomy/term/21
    Download free GIMP brushes (1400 brushes): http://www.techzilo.com/gimp-brushes/
    Free Photoshop brushes(Photoshop brushes work in GIMP 2.4 and above): http://www.techzilo.com/photoshop-brushes/
    How to install brushes, gradients and plugins in GIMP: http://www.techzilo.com/install-plug...ients-in-gimp/

    Chapter 6. Getting Images out of GIMP: http://docs.gimp.org/en/gimp-images-out.html
    Blending Photos with GIMP Tutorials:

    http://emptyeasel.com/2008/08/29/how...ntage-in-gimp/
    http://community.livejournal.com/45c...ons/11660.html
    http://www.youtube.com/results?searc...rch_type=&aq=f

    Re-size Pictures and Use Opacity Tool in GIMP (Videos):

    http://www.youtube.com/watch?v=d3YzPdOV4IU
    http://www.youtube.com/watch?v=aTsPV...eature=related
    http://www.youtube.com/watch?v=Zh-0Uo1azBc
    http://www.youtube.com/watch?v=yhtExoblTk4

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles