Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 11
  1. #1
    Senior Member Holokai's Avatar
    Join Date
    Sep 2004
    Location
    Honolulu, HI
    Posts
    127
    Member #
    7707
    I think I realized something today that I've not read anywhere, at least, not that I noticed. I've been trying to use a single CSS tag to not only arrange items on a page, but to encapsulate them as well. That is to say, I've been trying to control WHERE the items appear as well as HOW they appear.

    For example, trying to create an image gallery out of CSS and PHP, my first thought was to create a 150x 150 box to contain my image within a nice colored border and to position it. This was flawed thinking. I actually needed one CSS tag to position, one more to contain the image and make it look pretty.

    What I've come to conclude is that seperate tags need to be used for positioning and containing items... I hope I explained myself clearly, this "revelation" of sorts has made the last few days much easier on me.

    Lemme know if I'm making any mistakes here, but I figured some other new people might benefit from this.

    - C
    -----------------------------------------------
    I know just enough to be dangerous to myself and others around me... I'm more of a CSS kamikaze than a CSS ninja...

  2.  

  3. #2
    Senior Member Eddy Bones's Avatar
    Join Date
    Jan 2004
    Location
    Washington, USA
    Posts
    1,054
    Member #
    4651
    Could you possibly give us a sample page with what you mean? Because off the top of my head I do not think you need to use two tags to do this. Then again, perhaps I just misunderstand...

  4. #3
    Senior Member Holokai's Avatar
    Join Date
    Sep 2004
    Location
    Honolulu, HI
    Posts
    127
    Member #
    7707
    well, you can look here if you promise to ignore the obvious problems

    what I have going on there is a content div that contains everything you see. Inside that div, I have 3 spacer divs, each floating and set to 33% width. inside those, I have the borders around my thumb nail.

    originally, I tried to have the content div, with the border divs controlling the position within the content div. This didn't work, as the borders were longer than the picture was, or they weren't positioned as you (kinda) see them now.

    If I have time later I'll make up a "demo" page to show you what I mean.

    - Chris
    -----------------------------------------------
    I know just enough to be dangerous to myself and others around me... I'm more of a CSS kamikaze than a CSS ninja...

  5. #4
    Senior Member Eddy Bones's Avatar
    Join Date
    Jan 2004
    Location
    Washington, USA
    Posts
    1,054
    Member #
    4651
    I see how that works now. If you didn't want the exact 3 columns at 33% each there would possibly be an easier way. It wouldn't be as perfect though. What I'm talking about is the way I set up the graphics page on my site (link below in my sig if you'd like to see it). It doesn't use any specific column positioning (such as your 33% stuff) so the floating divs will fall where they will, but it looks nice...

    But to the point of the thread. Yes, sometimes it takes more than one or two tags to get the desired result. That knowledge might indeed benefit some people. I guess don't try to make everything work with a super-tag is a good rule.

  6. #5
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    Nope, you're mistaken. This is all the HTML you'll need:

    Code:
    <div class="picture first"><img src="picture.jpg" /></div>
    <div class="picture"><img src="picture.jpg" /></div>
    <div class="picture"><img src="picture.jpg" /></div>
    <div class="picture first"><img src="picture.jpg" /></div>
    <div class="picture"><img src="picture.jpg" /></div>
    <div class="picture"><img src="picture.jpg" /></div>
    Maybe read up on selectors... or if I have some extra time tonight I'll throw up an example page. BTW, the extra class of first is merely an optional class.
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site

  7. #6
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    Simple Gallery Example
    There ya are
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site

  8. #7
    Senior Member Holokai's Avatar
    Join Date
    Sep 2004
    Location
    Honolulu, HI
    Posts
    127
    Member #
    7707
    Eddy, nice looking gallery there, I like how you set that up.

    Brak, that is pretty sweet. but will that work for images of varying widths? for example, I'm having problems with 600x800 pictures vs. 800x600 pictures.

    So in your CSS, you'd need to take out the width: 150px; , which causes some issues. how would you go about adressing that?

    Thanks for the responses

    - Chris
    -----------------------------------------------
    I know just enough to be dangerous to myself and others around me... I'm more of a CSS kamikaze than a CSS ninja...

  9. #8
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    The width could easily be set to a % (although less than 33%, NEVER create elements that take up 100%).
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site

  10. #9
    Senior Member Holokai's Avatar
    Join Date
    Sep 2004
    Location
    Honolulu, HI
    Posts
    127
    Member #
    7707
    ok, two things - the % still doesn't account for different image sizes, does it? second, why shouldn't you use all 100%? Thanks

    - C
    -----------------------------------------------
    I know just enough to be dangerous to myself and others around me... I'm more of a CSS kamikaze than a CSS ninja...

  11. #10
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    100% won't work in IE, it meausres 100 > 100.

    You're right about differnet image sizes, although just removing the width will fix that problem. Won't center them correctly, as that'd be a bit more work. But from the looks of it, looks like he's got constant image sizes.
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:44 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com