1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Image positioning in CSS (learning)

Discussion in 'CSS' started by tobywuk, Dec 20, 2007.

  1. #1
    I have been using tables for my web designed for a long time and im learning how to do everything in CSS.

    When positioning small design images, such as a small 5px wide image to blend one table into another or into the background, with tables I am used to putting the image its own field in the table for the image... but what about CSS?

    When placing these little style images do i create a whole new Div for that image and with its own defined characteristics in the style sheet? Is there a better way of going about this? Do i link the image in the style sheet or the html page?
     
    tobywuk, Dec 20, 2007 IP
  2. manishk

    manishk Peon

    Messages:
    63
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You don't necessarily need to put these image in a new div. You can also set it as the background-image of any existing on-page element and control the repeating. If you can show an example page with your tables then I can guide your properly.
     
    manishk, Dec 20, 2007 IP
  3. tobywuk

    tobywuk Peon

    Messages:
    37
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    well for example, Click Here is my current personal website made with tables. As you can see the top banner is one big image and under the navigation bar running horizontally there is a light to dark blue fading image fading into the main content part of the website.

    With the banner at the top, would i put this image in its own div?

    With the small fading image, would i create an extra div just for this image or could i do a "background-image position top" and also set the div's background color to the correct blue so that the background image would only be at the top and when this image runs out it goes into the set background color? is it possible to set both a background color and background image in the same element?

    Whilst im here, what is the difference between float and position in CSS? If i want the location of the element to be in the middle would i just not declare its position or which one of these should i use to set it as center?
     
    tobywuk, Dec 20, 2007 IP
  4. Guernica

    Guernica Peon

    Messages:
    268
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Doing a background image is like this for a repeat top:

    background: url(images/bgimage.gif) repeat-x top left;
    Code (markup):
    That will produce the image 'bgimage.gif' repeating horizontally at the top.
     
    Guernica, Dec 20, 2007 IP
  5. buckmajor

    buckmajor Active Member

    Messages:
    574
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    58
    #5
    Someone gave me some expert opinion on using the the correct the elements for its purpose.

    I will example of this soon, just off to work now :D

    CHEERS :)
     
    buckmajor, Dec 20, 2007 IP
  6. manishk

    manishk Peon

    Messages:
    63
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #6
    HTML Snippet:
    
    <div id="header">YOUR HEADER</div>
    <div id="nav">YOUR NAVIGATION</div>
    <div id="main">YOUR CONTENT & THE TOP FADING IMAGE</div>
    
    Code (markup):
    CSS Snippet:
    
    #header{}/*Put header styles in the braces*/
    #nav{}
    #main{background:#21579D url(http://www.wilkinsnet.com/images/fade.gif) repeat-x}
    
    Code (markup):
    Since you just want the image to be restricted to the top portion only and after that you have a solid color, putting a background image and specifying the repeating and the bg color will solve your problem.
     
    manishk, Dec 21, 2007 IP
  7. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #7
    You can if you want... sometimes a banner is part of the content of a site and can actually sit in the html as <img src="..."... etc />

    Yes. Many people in fact do this, esp with fades/gradients. I used it on a site where the top is bright red and the bottom a darker red. The background colour was set to the darker red, and the background image (a few pixels wide, several pixels long enough to fit the gradient, and repeated -x) sits on top.
    Example (from a site that is online):
    
    body {
      background: #c01005 url(achtergrondkleur.png) repeat-x;
    }
    
    Code (markup):
    With "background", you can set colour, image, position, scroll-or-fixed, and the repeat. It's a shortcut to "background-color:", "background-image:", "background-position:"... etc. There are specific rules about repeat and position that you should know when writing these.
    I think eventually someone can write a whole book about floats. There is a sticky thread here
    but basically, "float" was invented so images could sit next to text which would wrap around the image. Since everyone was being pushed away from tables, and since there's nothing really that good out there to replace table positioning, floats became popular for all sorts of things : )

    Position:absolute sets something as if you set co-ords an element to someone's monitor. It sits in place no matter what's going on in the rest of the page... the page doesn't know the abso-po element is there, and the element doesn't know the rest of the page is there. However, it will scroll with the page.
    Position: relative is where something would be anyway, in the document flow, without css. You type a div called "header", close it, then type another div called "menu", the menu is positioned normally below the header simply because that's the order in the document. If you see "position: relative" typed somewhere without new co-ordinates (as the new co-ords would be working from a basis of the original position-- meaning the new position is relative to where it would normally be), then someone is likely triggering IE's Haslayout, and/or setting its position so something inside can be more properly positioned with absolute.
    position: static is the default, when you don't state anything either way.
    position:fixed keeps the element in the same place on the monitor no matter where the rest of the page scrolls. (Absolute positioning WILL still scroll, but still ignores the rest of the page). Microsoft's fine products until IE7 don't understand this unless the fixed thing is a background image on the body.

    Floats:
    Turn elements into blocks... this means, if something was an inline element, it by default becomes a block when floated.
    Are only left and right. If you ever see float:center, it does not exist and I believe just floats left.
    Multiple floats will try to stack along side each other if there's room. So while the element has been set as a block, it behaves like an inline element... NOT making a new line like blocks do.
    To stop further elements from also riding up alongside floats, the floats must be cleared (usually by an element which comes after the floats).
    Their height is irregardless of the size of their containers. When first playing with floats, give their containers a background color, and the float another. You may see stuff you didn't expect.
    IE6 pukes with various bugs with floats. The most common correction for the most common bug (when there's more than one float) is display:inline which sounds pretty stupid since you can't change the float from being a block anyway. That's IE for you.

    You wanted to know how to center stuff. If you ever mean vertically, then life just got harder because tables do it pretty well. It can be done, just a pain in the ass and never perfect.
    If you mean horizontally, then it depends on what the thing is. If it's a block element like a div, you set the width, and use margins to center it (margin: 0 auto; where 0 is the top-and-bottom number and auto is the sides... they will always try to equalize relative to the centered element's container).

    You can absolutely position something in the center with a left co-ord of 50% and then a negative left margin of 50% (because the first number makes the left side of the element in the middle, not the center of the element itself). You can also try this for vertical positioning of absolutely positioned things... top: 50%; maring-top: -50%; etc).

    Most people need to use a combination of floats and other positioning in a page.


    *Edit did you know you've got three doctypes on your page ? : ) Also, when making sites, give it a look either in your regular browser with css and images turned off, or with a text-only browser like Lynx. It gives you an idea how much actual content you have on your page... and also lets you know when you're using images to hold text. Try hiding the real text behind the images so that the page can look the way you want it, but there's actually something to read underneath for those of us surfing without CSS or googlie-bots or whoever.
     
    Stomme poes, Dec 21, 2007 IP