SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Vertically Align

    hey guys.. long time lurker first time poster


    http://barbarapurdydesign.com/site/

    I purchased this gallery code from CodeCanyon and I'm trying to figure out how to center it vertically on the page. Keeping in mind I need to keep the footer where it is (static to the bottom of the page)

    So I want it centered vertically. Because right now on different screen resolutions it looks a bit funky.. especially on more vertically sized resolutions.

    Any help? thanks!!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi, Welcome to Sitepoint

    You can only (easily) centre the element vertically as long as it is always the same height.

    Assuming your content is 500px high then you would need to do this:

    Code:
    html,body{
        height:100%;
        margin:0;
        padding:0
    }
    #hoz{
        height:50%;
        margin-top:-299px;
        float:left;
        width:100%;
    }
    #wrap {
        margin:0 auto;
        height:500px;
        clear:both;
    }
    
    Then add this html:

    Code:
    <body>
    <div id="hoz"></div>
    <div id="wrap">
    The technique works by putting a 50% high float above the content and then dragging the float back upwards bu half the content height. This ensures that the content is vertically centred and unlike other methods does not disappear off the top of the screen. (I added some extra margin to take into account the footer height.)

  3. #3
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you for your response!

    unfortunately it killed my main image and still didnt work.. the site has been updated with your added code..

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    You made some typos in my code

    Here is the whole working page.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>BARBARA PURDY DESIGN || www.barbarapurdydesign.com</title>
    <meta name="description" content="Barbara Purdy Design is a interior designer who has worked with various clients and has appeared on HGTV's Home to Stay" />
    <meta name="keywords" content="barbara curdy design, barabara purdy design, BPD, interior design, interior designers toronto, toronto ontario canada, canada, hgtv, hgtv canada, home to stay, peter fallico, olivia bootie, tv designers, toronto designers, gta designers, gta interior designer, gta, toronto, mississauga, north york, oakville, etobicoke, forest hill" />
    <link href="style.css" rel="stylesheet" type="text/css" media="screen"/>
    <style type="text/css">
    @font-face {
     font-family: 'BellGothicStdLight';
     src: url('http://barbarapurdydesign.com/site/fonts/bellgothicstd-light-webfont.eot');
     src: local('&#226;˜&#186;'), url('http://barbarapurdydesign.com/site/fonts/bellgothicstd-light-webfont.woff') format('woff'), url('http://barbarapurdydesign.com/site/fonts/bellgothicstd-light-webfont.ttf') format('truetype'), url('http://barbarapurdydesign.com/site/fonts/bellgothicstd-light-webfont.svg#webfontFLqzS0IN') format('svg');
     font-weight: normal;
     font-style: normal;
    }
     @font-face {
     font-family: 'BellGothicStdBold';
     src: url('http://barbarapurdydesign.com/site/fonts/bellgothicstd-bold-webfont.eot');
     src: local('&#226;˜&#186;'), url('http://barbarapurdydesign.com/site/fonts/bellgothicstd-bold-webfont.woff') format('woff'), url('http://barbarapurdydesign.com/site/fonts/bellgothicstd-bold-webfont.ttf') format('truetype'), url('http://barbarapurdydesign.com/site/fonts/bellgothicstd-bold-webfont.svg#webfontStN6OXL0') format('svg');
     font-weight: normal;
     font-style: normal;
    }
    .BellGothicStd-Light {
        font-weight: normal;
        font-style: normal;
        line-height:normal;
        font-family: 'BellGothicStdLight', sans-serif;
        font-size-adjust: 0.48;
    }
    .BellGothicStd-Bold {
        font-weight: normal;
        font-style: normal;
        line-height:normal;
        font-family: 'BellGothicStdBold', sans-serif;
        font-size-adjust: 0.52;
    }
    * {
        padding :0;
        margin:0;
    }
    #description {margin-top: 50px;}
    pre {font-size: 8pt;}
    html,body{
        height:100&#37;;
        margin:0;
        padding:0
    }
    body {
        background: #303030;
        font-family: Arial;
    }
    #hoz{
        height:50%;
        margin-top:-299px;
        float:left;
        width:100%;
    }
    #wrap {
        margin:0 auto;
        height:500px;
        clear:both;
        overflow: hidden;
        width: 800px;
    }
    
    a {
        color: #C2B281;
        text-decoration: none;
    }
    a:hover {
        color: #C2B281;
        text-decoration: underline;
    }
    img {
        border: 0;
    }
    .itunesfeature {
        width: 1000px;
        height: 500px;
        position: relative;
        display: none;
        overflow: hidden;
        font-family:  Verdana, Tahoma, "Lucida Sans";
        font-size: 9pt;
        font-weight: normal;
    }
    .itunesfeature #transparentGlass {
        width: 1000px;
        height: 500px;
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 1000;
        cursor: pointer;
    }
    .itunesfeature img {
        width: auto;
        height: 1000px;
    }
    .itunesfeature #billboardone, .itunesfeature #billboardtwo {
        position: absolute;
        top: 0px;
        left: 0px;
        height: 1000px;
        width: 500px;
        z-index: -1;
    }
    .itunesfeature #paneltwo {
        opacity : 0.0;
        z-index: -2;
    }
    .itunesfeature #carrousel {
        margin-left: 510px;
        position: relative;
        padding: 0px;
        z-index: 0;
        list-style: none;
    }
    .itunesfeature #carrousel li {
        width : 200px;
        height: 100px;
        overflow: hidden;
    }
    .itunesfeature .downarrow {
        height: 116px;
        width: 23px;
        cursor: pointer;
        background: url(http://barbarapurdydesign.com/site/images/downarrow.png) no-repeat;
        z-index: 1000;
        position: absolute;
        top: 450px;
        left: 600px;
    }
    .itunesfeature .featuretitle {
        position: absolute;
        bottom: 20px;
        left: 20px;
        color: #FFF;
        padding: 3px 6px;
        z-index: 100;
    }
    .itunesfeature .downarrowIE6 {
        background: url(http://barbarapurdydesign.com/site/images/downarrow.gif);
    }
    .itunesfeature .featuretitleIE6 {
        background: #000;
    }
    .footer {
        margin: auto;
        width: 100%;
        background-color: #1d1d1d;
        height: 85px;
        text-align: center;
        color: #C2B59B;
        font-size:14px;
        font-family:Verdana;
        padding-top: 10px;
        position:fixed;
        left:0px;
        bottom:0px;
    }
    #logo {
        float: left;
        margin-left: 25%;
        width: 311px;
    }
    #menu {
        margin-left: 30px;
        float: left;
    }
    #menu ul {
        list-style: none;
    }
    #menu li {
        padding: 10px;
        display: inline;
    }
    </style>
    <script type="text/javascript" src="http://barbarapurdydesign.com/site/js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="http://barbarapurdydesign.com/site/js/ItunesFeature-min.js"></script>
    <script type="text/javascript">
                $(window).ready(function(){
                    jQuery("#feature").itunesFeature();
                });
            </script>
    <style type="text/css">
    </style>
    </head>
    <body>
    <div id="hoz"></div>
    <div id="wrap">
        <div id="feature" class="itunesfeature">
            <div> <img src="http://barbarapurdydesign.com/site/images/gbay/001_thumb.jpg" alt=""/> <img src="http://barbarapurdydesign.com/site/images/gbay/001.jpg" alt=""/> </div>
            <div> <img src="http://barbarapurdydesign.com/site/images/gbay/002_thumb.jpg" alt=""/> <img src="http://barbarapurdydesign.com/site/images/gbay/002.jpg" alt=""/> </div>
            <div> <img src="http://barbarapurdydesign.com/site/images/gbay/003_thumb.jpg" alt=""/> <img src="http://barbarapurdydesign.com/site/images/gbay/003.jpg" alt=""/> </div>
            <div> <img src="http://barbarapurdydesign.com/site/images/gbay/004_thumb.jpg" alt=""/> <img src="http://barbarapurdydesign.com/site/images/gbay/004.jpg" alt=""/> </div>
            <div> <img src="http://barbarapurdydesign.com/site/images/gbay/005_thumb.jpg" alt=""/> <img src="http://barbarapurdydesign.com/site/images/gbay/005.jpg" alt=""/> </div>
            <div> <img src="http://barbarapurdydesign.com/site/images/gbay/006_thumb.jpg" alt=""/> <img src="http://barbarapurdydesign.com/site/images/gbay/006.jpg" alt=""/> </div>
        </div>
    </div>
    <div class="footer">
        <div id="logo"><a href="index.php" title="Barbara Purdy Design"><img src="http://barbarapurdydesign.com/site/images/bpd_logo.png"></a></div>
        <div id="menu">
            <ul>
                <li class="BellGothicStd-Light samplebox" style="font-size:17px;"><a href="company.php" title="company">company</a></li>
                <li class="BellGothicStd-Light samplebox" style="font-size:17px;"><a href="portfolio.php" title="portfolio">portfolio</a></li>
                <li class="BellGothicStd-Light samplebox" style="font-size:17px;"><a href="press.php" title="press">press</a></li>
                <li class="BellGothicStd-Light samplebox" style="font-size:17px;"><a href="contact.php" title="contact">contact</a></li>
            </ul>
        </div>
    </div>
    </body>
    </html>

    Just copy the whole page and then run it while online as I have made the urls absolute so that you can see it is indeed working. Once you are happy with it then convert the urls back to relative and update your site with the code.

    I can't remember all the typos but there was a missing semi-colan two opening body tags and I amalgamated and re-organised the body rules which I didn't show last time.

    Any problems let me know but its working locally for me

  5. #5
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    of course I made typos.. lol. I really can't stand coding!!

    thank you for your help.. works great

  6. #6
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    another question on this site..

    do you know how to stop the down arrow button from appearing on hover? I just want it to stay on.

    and how to make the scrolling stop.. I want it to manual scroll.

    this was created by someone else (as mentioned) and they're not being very helpful.

    I would assume most of this would have to be done in the JS file?

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by slightbleeding View Post
    do you know how to stop the down arrow button from appearing on hover? I just want it to stay on.
    You could add this to your style sheet:

    img.downarrow {opacity: 0.8 !important;}

    and how to make the scrolling stop.. I want it to manual scroll... I would assume most of this would have to be done in the JS file?
    Yes, but it's a bit hard to understand that minified file—a bit beyond me. Most gallery scripts have an easy way to turn features like that on or off, and they are free. You don't always get what you pay for.

  8. #8
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you

    I looked in the JS file and it's not even formatted like a JS file.. so I wouldn't even know where to play around to get it to do what I wanted it to do..

    but this will work for now.. thank you!

  9. #9
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so I was having issues and changed the way the gallery looks again.. check out the same site above.

    im now using this:
    http://www.dynamicdrive.com/style/cs...image-gallery/


    does anyone know how to make the first image a "default" image? so that there is a larger image present when the site is loaded and is not blank?

    also does the whole thing look centered horizontally to you guys?
    I feel like something is off..

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    You didn't say which page you had added it to?

    Looking at the code it seems you could add an extra class to one of the thumbnails and then set that to display by default.

    e.g.
    Code:
    .thumbnailname span{visibility:visible;top:0;left:230px;z-index;50}
    That's basically the same code as the hover code except that it applies to just one image with that unique classname.

    You would also need to ensure that the first image displayed is smaller than the rest (or the same size) because the other images will need to sit on top and hide it when hovered.

    I have a similar demo here which shows the hover effect on inks but is the same as if they were images.

  11. #11
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry it was for this page:
    http://barbarapurdydesign.com/site/hillhouse.php

    I tried adding the code but it doesn't put it where the rest are...?

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    The class needs to be on the anchor and not the image

    Code:
    <a href="#thumb" class="thumbnail thumbnailstay"><img width="100px" height="100px" border="0" src="images/gbay/006_thumb.jpg"><span><img src="images/gbay/006.jpg"></span></a>

  13. #13
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah sweet. thank you.

    is there a code I should add to the footer for the content to be more centered? I think it's a bit off kilter.

    thank you very much for all your help. i wish I could figure out this stuff on my own but my knowledge is very limited.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    For the footer the easiest solution is to measure the exact width of those two elements and then place them both in a parent div of fixed width and use margin:auto to automatically center them. At present you just have one element at 3&#37; from the left which is just an approximation.

  15. #15
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you!


Bookmarks

Posting Permissions

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