zenphoto forums » Usage Support

stylesheet issue on index page w/ WordPress integration

(10 posts)
  • Started 6 years ago by limedragon
  • Latest reply from acrylian

  1. limedragon

    Apprentice
    Joined: Dec '06
    Posts: 3

    I've managed to get most of my ZenPhoto installation to match my WP theme. There is one issue I've tried to fix, but haven't figured out how yet.

    http://limedragon.com/pix

    On the above page, you can see how the text is too far left and is partially hidden by the left-sidebar. I've tried adjusting the width, margins, and padding with no luck. The text displays just fine on the album and image pages.

    This is the first part of the zen.css I'm using, from the default ZP theme. What might I have missed? Thanks!

    html {
    /* IE */
    overflow-y: scroll;
    /* Moz */
    height: 100%;
    margin-bottom: 0.1em;
    }
    /* Main Layout
    ------------------------------ */
    body {
    /* background: #F5F5F3; */
    margin: 0px;
    padding: 0px 0px 50px;
    }
    #main {
    text-align: left;
    margin: 20px auto;
    width: 470px;
    background: #f7f7f7;
    padding: 20px 30px 70px;
    border-top: 1px solid #E6E6DF;
    border-right: 1px solid #E6E6DF;
    border-bottom: 5px solid #E6E6DF;
    border-left: 1px solid #E6E6DF;
    }

    Posted 6 years ago #

  2. limedragon

    Apprentice
    Joined: Dec '06
    Posts: 3

    Did I post this in the right place? I wasn't sure because stylesheet questions were in various parts of the forums. If you need more information/code, I can post that too. Thank you.

    Posted 6 years ago #

  3. Donkikong

    Member
    Joined: May '06
    Posts: 29

    Cant see any text formatting errors on Firefox 2.0 or IE7.

    On higher resolution (1600x1200) displays your right and left columns are at the edge of the page, when they should be beneath the header, I think. you should put the right and left columns, along with the main content into a containing div and give the containing div the same width as the header/masthead.

    Posted 6 years ago #

  4. darrellm

    Senior
    Joined: Jan '07
    Posts: 84

    I'm having a sort of similar problem - except when I add the get_sidebar in the index.php it breaks up my gallery. If I add the get_sidebar below the get_footer the gallery is showing just fine, except the sidebar goes all the way down. Here's my stylesheet: The site is at http://mlownie.com/gallery

    /*

    Wordpress Integration 1.0

    */

    /* Basics
    ------------------------------ */

    #zenphoto {
    text-align:left;
    margin:20px auto;
    width:100%;
    }

    #zenphoto h2 {
    width:100%;
    text-align:left;
    margin:10px;
    }

    #zenphoto .album img {
    float: left;
    margin:0px 15px 0px 10px;
    }

    #zenphoto #images img { margin:4px;}

    #zenphoto .imagethumb { display:inline;}
    #zenphoto .album { vertical-align:text-top; margin-top:15px;}
    #zenphoto .albumdesc {
    float:left;
    text-align:left;
    vertical-align:text-top;
    padding:0px !important;
    }
    #zenphoto .albumdesc h3{ vertical-align:top; margin:0px; padding:0px;}

    #zenphoto #credit {
    text-align:center;
    }
    #zenphoto a#credit {
    display:block;
    width:900px;
    }

    #zenphoto img { padding:4px; border: solid 1px grey;}

    /* Page Navigation
    ------------------------------ */
    #zenphoto .pagelist { text-align:center; }
    #zenphoto ul.pagelist {
    clear: both;
    padding: 0;
    margin: 20px 0 0 0;
    list-style-type: none;
    }
    #zenphoto ul.pagelist li {
    display: inline;
    }
    #zenphoto ul.pagelist li a, #zenphoto ul.pagelist span.disabledlink {
    padding: 4px;
    }
    #zenphoto ul.pagelist li.current a {
    font-weight: bold;
    text-decoration: none;
    cursor: default;
    color: #5A5A4B;
    }
    #zenphoto ul.pagelist li.prev {
    margin-right: 20px;
    }
    #zenphoto ul.pagelist li.next {
    margin-left: 10px;
    }
    #zenphoto .disabledlink {
    color: #ddd;
    cursor: default;
    }
    #zenphoto .pagenav {
    clear: both;
    }

    Posted 5 years ago #

  5. Zenphoto development team
    trisweb

    Project Manager
    Joined: Sep '05
    Posts: 1,833

    In #zenphoto .album you should have this:

    #zenphoto .album {
    vertical-align:text-top;
    margin-top:15px;
    float: left;
    width: 650px;
    }

    That will work for you since your layout is at a fixed 900px wide. Otherwise you'd want a percentage width, like 65% or so.

    "float" is often used in CSS layouts when you want two elements sitting side-by side.

    There are all sorts of resources to learn about this, just google "css layouts" to see some.

    http://www.maxdesign.com.au/presentation/page_layouts/
    http://www.code-sucks.com/css%20layouts/
    http://layouts.ironmyers.com/
    http://www.tjkdesign.com/articles/one_html_markup_many_css_layouts.asp

    Also, I highly recommend using Firebug for Firefox to get a sense for how your changes influence the layout, and to quickly debug issues ( http://www.getfirebug.com/ )

    Posted 5 years ago #

  6. darrellm

    Senior
    Joined: Jan '07
    Posts: 84

    Thanks Trisweb! That worked just fine. And thanks for the resources - quite an interesting read.

    Posted 5 years ago #

  7. darrellm

    Senior
    Joined: Jan '07
    Posts: 84

    I have one more issue. I've got everything working fine but when I look at the gallery in IE on a PC the whole gallery is all the way down at the bottom. On either Mac or PC in Firefox, it works just fine. I didn't notice it until recently when someone on a PC brought it to my attention.

    Why does IE have to be so difficult? Anyway, how can I correct this so that it's compatible on IE as well? Thanks in advance.

    Link: http://www.mlownie.com/gallery/

    Posted 4 years ago #

  8. Zenphoto development team
    acrylian

    Developer
    Joined: Jul '07
    Posts: 13,350

    I can't really help with it since I am Mac user and don't have any IE, but this is most likely a conflict with the margins and paddings that do not match together. IE does some weird things if there is only a px too much (and it does that by nature...:-))).

    Don't forget to read the Forum rules and usage resources
    Posted 4 years ago #

  9. darrellm

    Senior
    Joined: Jan '07
    Posts: 84

    Anyone know how I can fix the gallery so it's showing properly in IE? Please see post above. Thanks.

    Posted 4 years ago #

  10. Zenphoto development team
    acrylian

    Developer
    Joined: Jul '07
    Posts: 13,350

    Which IE do you use? Check the margins and paddings both values add to the width or height you set to an element. So if you have div that is 20px wide and a margin of 10px around and a padding of 5 the element needs the real space of 50px. Probably you have a surrounding element that is smaller thant the element that holds you albums.

    And the IE 5 that you hopefully are not using anymore has a serious bug: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

    Don't forget to read the Forum rules and usage resources
    Posted 4 years ago #

RSS feed for this topic

Reply

You must log in to post.