The forums have permanently moved to forum.kirupa.com. This forum will be kept around in read-only mode for archival purposes. To learn how to continue using your existing account on the new forums, check out this thread.


Page 1 of 2 12 LastLast
Results 1 to 15 of 25

Thread: Quick CSS Question

  1. #1

    Quick CSS Question

    This is a really easy question (I think) but I'm just blanking out on how to do it. I'm making a layout in CSS, what I want is something like this in part of the layout:

    Image Image Image
    Text Text Text

    I want the text to be centered under each image, but I don't want to use tables. Is there an easy way to do this in CSS? (and it has to be able to support an indeterminate amount of images/text)

    Thanks

  2. #2
    Yep.

    Have your images placed wherever you want them, then directly underneath that have this in the html:

    <div id="text">
    This is the text that will be centered under the images.
    </div>

    And then add this to your css file:

    .text
    {
    background-color: #FFF;
    text-align: center
    }

    --

    I think thats what you want..?

  3. #3
    The problem is that that centers them on the whole page, I only want the text centered under the image.

  4. #4
    Sorry, I made a mistake, this will fix that. Add this to the css:

    .text
    {
    width: 100px;
    height: 200px;
    background-color: #FFF;
    text-align: center
    }

    --

  5. #5
    Thanks, that poses another problem though. When I add more images, that won't expand, it will put them on new lines rather than having them go across the page.

    Edit: Maybe it would be helpful to show it: scriptscribbler.com/nes/page3.htm

    See at the bottom where I have two images, I want those to have the text centered under them (like it is) but be on the same line. I tried doing float: left; and it worked, but then the next <div> came up to the right side of it which I don't want.
    Last edited by Yeldarb; February 19th, 2006 at 05:51 PM.

  6. #6
    Hmm, I will have a wild shot.

    Make a div that stretches 100% page width, where you want the two images and text to be.

    Then make this in your css:

    .image1
    {
    position: absolute;
    left: 100px;
    text-align: center;
    width: 100px;
    height: 100px
    }

    .image2
    {
    position: absolute;
    left: 130px;
    text-align: center;
    width: 100px;
    height: 100px
    }

    --

    The, inside your 100% width div, add two divs to make use of the CSS. Should look something like this:

    <div width="100%" height="30%">
    <div id="image1">
    Text for image 1.
    </div>
    <div id="image2">
    Text for image two.
    </div>
    </div>

    --

    I know it's very messy code, and I have no idea if it will work, but give it a shot.

    And there was an article on how to neaten your divs but the sites down now.

  7. #7
    I don't want a seperate entry in my CSS for each image. There should be a way to do this without doing that shouldn't there? I mean, what if I wanted 100 images, would I have to have 100 CSS classes?

  8. #8
    You could just use 1 class, but then it may go onto the next line. The reason I used two classes was because the postioning of each one is different.

  9. #9
    Look at this:
    http://nokrev.com/dump/kirupa/brad-floats.html

    Is that what you wanted?


    K-Emmys-06: Best Footer; and K-Emmys-06: Most Active Member

  10. #10
    No, hang on I'll do an image of what I want.

    Edit: Image Attached
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	ex.gif 
Views:	44 
Size:	2.3 KB 
ID:	33732  

  11. #11

    Just put the image in the div and give it the class you want to. If the div is the same size as the image specified in the CSS then the text will go underneath it and center.

    So...

    Code:
    .imageAndText {
           position: absolute;
           width: 200 //or whatever width your images will be
           text-align: center;
           font-family: Verdana; //or whatever
    }
    If any of this doesn't work just repost and I'll fix it.

  12. #12
    Um… that's exactly what mine looks like. I'm confused. I just did additional styling…


    K-Emmys-06: Best Footer; and K-Emmys-06: Most Active Member

  13. #13
    Yeldarb, you can use the caption-side property, but it is so not good to use it. That's because IE doesnt support the feature. I would suggest you to use tables and divs. That way you can achieve your final image easily.

  14. #14
    Nokrev - I see yours as

    Image
    Text
    Image
    Text
    Image
    Text

    FrankieB - problem with that is that another Div right next to it drops down to the next line instead of being side-by-side

  15. #15
    Alright Yeldarb, Im going to give you this main solution and you can personalize it to your taste. Here is what you can do for your stuff. What you need is just 3 divs for one content. And keep repeating them for next contents. Remember to flaot the main container to left. Here is the main code:
    Code:
    <style>
    .main{ float:left; }
    
    <div class="main">    //main container
       <div>      //image container
          <img>
       </div>
       <div>      //caption container
          Your caption (align it to center or left or however you want it to be)
       </div>
    </div>
    
    <div class="main">    //main container
       <div>      //image container
          <img>
       </div>
       <div>      //caption container
          Your caption (align it to center or left or however you want it to be)
       </div>
    </div>
    As you follow this, your div's will be close to each other. Set the indents etc and suit it to your style. Hope it helps.

Page 1 of 2 12 LastLast

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
  •  

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012