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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Feb 2008
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Photo Gallery Problems (CSS) ~ Solved

    So, I have a gallery here:
    http://f15pilotx.x10hosting.com/gallery/index.html

    CSS: http://f15pilotx.x10hosting.com/gallery/gallery.css

    Two Problems:

    One, how do I get those images vertically centered in their divs? I thought vertical-align: middle would do it, but I suppose I did the selector part wrong..I've tried two different things that you can see, but more on my own...

    Two, why isn't the border going around the entire .ra3 div, but instead just the top?
    Last edited by F15pilotX; 02-24-2008 at 06:26 PM.

  • #2
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    hi,

    you have some invalid markup:

    http://validator.w3.org/check?verbos...y%2Findex.html

    try to fix them first.

    best regards

  • #3
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    change this for the border

    Code:
    div.ra3 {
      border: 1px solid red;
    height:750px;
    }
    set a height for the class!!

    as for the the vertical alignment

    put it in a paragraph like so

    Code:
     <div><p><a href="ra3/screenshots/screen1.jpg"><img src="ra3/screenshots/thumbnails/thumb_screen1.jpg"></p></a></div>
    everything should work

    good luck

  • #4
    New Coder
    Join Date
    Feb 2008
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by oesxyl View Post
    hi,

    you have some invalid markup:

    http://validator.w3.org/check?verbos...y%2Findex.html

    try to fix them first.

    best regards
    fixed, and wow, do I feel like a dumbass

    Also, it still won't center..
    Last edited by F15pilotX; 02-22-2008 at 11:30 PM.

  • #5
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Code:
    div.ra3 {
      overflow: auto;
    }
    solve the border,

    PS: errors are smarter then as,

    best regards

  • #6
    New Coder
    Join Date
    Feb 2008
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    not really seeing what you're talking about...I added it in if that's what you mean..

    edit - ok, I see what it's doing...never heard of the property before though...
    Last edited by F15pilotX; 02-22-2008 at 11:58 PM.

  • #7
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    put also:

    Code:
    div.container {
      width: 746px;
    }
    do you need both div.container and div.ra3 ?
    If you don't add some code after div.ra3, are redundant.

    Edit:
    adjust the width to be: the (160 + 2*8 + 2*1 + 2*4) * 5 + 2*1
    - width of the image
    - margin
    - border
    - padding
    for each image
    - border for container

    I talk about point two, border around the photos.



    best regards
    Last edited by oesxyl; 02-23-2008 at 12:06 AM.

  • #8
    New Coder
    Join Date
    Feb 2008
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm going to have another section like ra3 (called tiberium) after it; however, now I don't see the border for container....


    Edit: Nevermind, it looks great now...now I just need the images vertically centered
    Last edited by F15pilotX; 02-23-2008 at 12:07 AM.

  • #9
    New Coder
    Join Date
    Feb 2008
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'll be back in a bit (dinner)...however, I have this bookmarked and will read it right after that

  • #10
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by F15pilotX View Post
    I'll be back in a bit (dinner)...however, I have this bookmarked and will read it right after that
    let's try replace the content of gallery.css with this:

    Code:
    * {
      margin: 0;
      padding: 0;
    }
    
    .container {
      border: 3px solid black;
      margin: 10px;
      padding: 5px;
      width: 915px;
    }
    .ra3 {
      border: 2px solid red;
      padding: 5px
      margin-left: auto;
      margin-right: auto;
      overflow: auto;
    }
    .ra3 div {
      float: left;
      border: 1px solid red;
      margin: 8px;
      height: 200px;
    }
    center the image in divs is still not fixed, I'll try to see what I can do.

    best regards

  • #11
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Code:
    .container {
      border: 3px solid black;
      margin: 10px;
      padding: 5px;
      width: 915px;
    }
    the red width, must be multiple of 183px, the width of one image, you have no other choice.

    best regards

  • #12
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    is an error in css file:

    Code:
    .ra3 {
      border: 2px solid red;
      padding: 5px;
      margin-left: auto;
      margin-right: auto;
      overflow: auto;
    }
    http://jigsaw.w3.org/css-validator/v...y%2Findex.html

    best regards

  • #13
    New Coder
    Join Date
    Feb 2008
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, I fixed all that...now I just need to vertical align the thumbnails

  • #14
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Read this: http://phrogz.net/CSS/vertical-align/index.html

    BTW there is a lot of unnecessary code in your page. No need for the paragraphs. Also that very top align is messing up the display in IE6. Remove it.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    oesxyl (02-23-2008)

  • #15
    New Coder
    Join Date
    Feb 2008
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    #3 Set position:absolute and top:50&#37; on the child container to move the top down to the middle of the parent.
    My problem with this is that I can't have all the child containers at top: 50%....do I just need to make row containers and do it there?


    edit - and which 'very top align'?
    Last edited by F15pilotX; 02-23-2008 at 08:52 PM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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