Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Floating sidebar, unclickable text-input & non-working links

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • August 30, 2009 at 4:17 pm #25939
    Historical Forums User
    Participant

    I thought I was soon going to be finished with my first wordpress theme, when I realized that the sidebar was not working as I thought I tould it should. I don’t really know why, but I use Opera all the time to see what happens to the blog when I’m writing in Coda. So after adding some few div with links to twitter and facebook in the sidebar, the posts below the sidebar, would not fill out the white area below the sidebar. I posted a similar question about exactly that problem some days ago: http://css-tricks.com/forums/viewtopic.php?f=2&t=4154.
    But when I remove these divs, it seems like everything is as it should be. But I can’t find whats the problem in those two divs.
    So I checked in Firefox and Safari to see what was going on there. It seems like Firefox is living in another world, cause the text input before the search button are unclickable (same in Safari, but as I remembered it worked fine in IE8).
    And only a few links are clickable and hovering as they should be (the last four tags and a the "Follow me" is only clickable in a very small area, just at the top of the text itself).
    Here’s the complete chaos: http://lepton.freehostia.com/index/blog

    But when I edit the index.php file to import the sidebar just before the footer is imported (after the post-loop/page-content), instead of right after the header is imported, then everything in the sidebar seems fine in every browser (although the page-layout gets messed up). An example of that can be seen here http://tinmannsvik.com/twitter#sidebar.
    (The sidebar links and the search-text-input also works fine when I remove the float:right; property from the sidebar-div, but yet again: messed up page-layout)

    How do I fix so that all the links works, so that I can write in the search-field and so that the posts fill out the area below the sidebar, without messing the layout up?

    Oh, and one last thing; I know that I may made the twitter and facebook links in a messy way, but it seems like the icons are pushed further down in firefox (not safari, nor opera) than they should be.

    Thanks to anyone who can figure out of this mess :D

    sidebar.php:

    Code:

    style.css:

    Code:
    /*
    Theme Name: IngridTinmannsvik
    Theme URI: Tinmannsvik.com
    Description: Designed and written for Ingrid Tinmannsvik exclusively
    Version: 0.9
    Author: SilverMilk

    Colorpalette
    Text: #4a4a4a
    Blue: #61a7e7
    Background: #f7f7f7
    Footertext: #d1d1d1
    */

    @import “style/css/reset.css”;
    @import “style/css/typography.css”;
    @import “style/css/layout.css”;

    /* UTILITY */
    body { background-color: #f7f7f7; color: #4a4a4a; font-family: “Century Gothic”, “Verdana” “Arial” “Times New Roman”; font-size: 13px; }

    .button { margin-top: 4px; background: #ffffff; border: 1px solid #d1d1d1; font-family: “Century Gothic”, “Verdana” “Arial” “Times New Roman”; font-size: 8px; color: #4a4a4a; text-transform: uppercase; padding: 4px 5px 4px 5px; text-align: center; cursor: pointer; display: inline; }

    .button:hover { margin-top: 4px; background: #ffffff; border: 1px solid #d1d1d1; font-family: “Century Gothic”, “Verdana” “Arial” “Times New Roman”; font-size: 8px; color: #61a7e7; text-transform: uppercase; padding: 4px 5px 4px 5px; text-align: center; font-style: italic; cursor: pointer; display: inline; }

    .sifr li { list-style: none; }

    a { color: #61a7e7; text-decoration: none; }
    a:hover { color: #61a7e7; text-decoration: underline; }
    h2 { color: #4a4a4a; font-size: 20px; font-weight: normal; margin-bottom: 10px; }
    h3 { color: #4a4a4a; font-size: 20px; font-weight: normal; }
    h4 { color: #4a4a4a; font-size: 16px; font-weight: normal; }

    /* STRUCTURE */
    #page-wrap { width: 773px; margin: auto; }

    /* HEADER */
    #header { width: 773px; height: 143px; background-image: url(gfx/header.png); background-repeat: no-repeat; clear: both; }
    #header a { display: block; width: 100%; height:100%; text-decoration: none; }

    #home { width: 174px; height: 76px; background-image: url(gfx/home.png); clear: both; float: left; }
    #homex { width: 126px; height: 9px; background-color: #ffffff; position: absolute; top: 191px; left: 41px; }
    #home a { display: block; width: 100%; height: 100%; text-decoration: none; }

    #blog { width: 141px; height: 76px; background-image: url(gfx/blog.png); float: left; }
    #blogx { width: 126px; height: 9px; background-color: #ffffff; position: absolute; top: 191px; left: 182px; }
    #blog a { display: block; width: 100%; height: 100%; text-decoration: none; }

    #photos { width: 141px; height: 76px; background-image: url(gfx/photos.png); float: left; }
    #photosx { width: 126px; height: 9px; background-color: #ffffff; position: absolute; top: 191px; left: 323px; }
    #photos a { display: block; width: 100%; height:100%; text-decoration:none; }

    #twitter { width: 141px; height: 76px; background-image: url(gfx/twitter.png); float: left; }
    #twitterx { width: 126px; height: 9px; background-color: #ffffff; position: absolute; top: 191px; left: 464px; }
    #twitter a { display: block; width: 100%; height: 100%; text-decoration:none; }

    #more { width: 173px; height: 76px; background-image: url(gfx/more.png); float: left; }
    #morex { width: 126px; height: 9px; background-color: #ffffff; position: absolute; top: 191px; left: 605px; }
    #more a { display: block; width: 100%; height: 100%; text-decoration: none; }

    /* CONTENT */
    #background { width: 773px; background-image: url(gfx/background.png); background-repeat: repeat-y; float: left; }
    #text-wrap { width: 620px; margin: auto; margin-top: 10px; }
    /* Text-wrap width 430px – margin-left: 74px */
    /* Text-wrap width 620px – margin: auto; */

    /* POSTS */
    .post { margin-bottom: 30px; }
    .datebox { clear: left; margin-bottom: -3px; }

    .day { float: left; font-size: 27px; color: #4a4a4a; }
    .month { float: left; font-size: 27px; color: #6a6a6a; }

    .titlebox { clear: left; }
    .post-title { float: left; margin-bottom: 0px; margin-right: 10px; }
    div.post-title a { font-size: 17px; color: #4a4a4a; font-weight: normal; }
    div.post-title a:hover { font-size: 17px; color: #4a4a4a; font-weight: normal; }

    .bubblenumber { width: 17px; height: 20px; background-image: url(gfx/bubble.png); background-repeat: no-repeat; font-size: 9px; text-align: center; padding-top: 3px; float: left; }
    div.bubblenumber a { color: white; }
    div.bubblenumber a:hover { color: white; font-weight: bold; }
    .bubblenumberpassword { display: none; }

    .content { max-width: 620px; clear: left; overflow: auto; }
    .contentpassword { max-width: 620px; clear: left; overflow: hidden; }

    .full-date { clear: left; font-size: 11px; color: #6a6a6a; margin-top: 5px; }
    .post-tags { clear: left; font-size: 11px; color: #6a6a6a; }
    #post-info { font-size: 11px; color: #6a6a6a; margin-top: 20px; }

    /* COMMENTS */
    .comments { margin-bottom: 20px; margin-top: 20px; }

    .bubble-tail { width: 30px; height: 18px; background-image: url(‘gfx/comment-bubble.png’); background-repeat: no-repeat; margin-left: 15px; margin-top: -15px; margin-bottom: -1px; }
    .comment-author { width: 430px; margin-left: 50px; font-size: 14px; text-transform: uppercase; margin-bottom: -11px; }
    .comment-time { font-size: 11px; color: #6a6a6a; text-align: right; margin-right: 15px; }

    .top { height: 15px; background-color: #61a7e7; }
    .top-left { width: 15px; height: 15px; background-image: url(‘gfx/top-left.png’); float: left; }
    .top-right { width: 15px; height: 15px; background-image: url(‘gfx/top-right.png’); float: right; }

    .comment-content { background-color: #61a7e7; color: #ffffff; padding-left: 15px; padding-right: 15px; overflow: auto; }
    div.comment-content a { color: #ffffff; }

    .bottom { height: 15px; background-color: #61a7e7; }
    .bottom-left { width: 15px; height: 15px; background-image: url(‘gfx/bottom-left.png’); float: left; }
    .bottom-right { width: 15px; height: 15px; background-image: url(‘gfx/bottom-right.png’); float: right; }

    #comment-form { width: 620px; padding: 5px; }
    .reply-forms { padding: 5px; }

    /* SIDEBAR */
    #sidebar { width: 150px; float: right; border-left: solid #d1d1d1 1px; padding-left: 15px; padding-bottom: 15px; margin-left: 15px; margin-bottom: 15px; }
    div#sidebar a { color: #61a7e7; font-weight: normal; }
    div#sidebar a:hover { color: #61a7e7; font-weight: bold; text-decoration: underline; }

    #searchform { clear: right; padding-bottom: 10px; margin-bottom: 5px; border-bottom: solid #f3f3f3 1px; }
    #form { width: 90px; }

    #tweet { color: #61a7e7; }

    #recent-posts { color: #61a7e7; clear: right; padding-bottom: 5px; margin-bottom: 5px; border-bottom: solid #f3f3f3 1px; }
    #tag-cloud { color: #61a7e7; clear: right; padding-bottom: 5px; margin-bottom: 5px; border-bottom: solid #f3f3f3 1px; }

    #followme { padding-top: 5px; padding-bottom: 10px; margin-bottom: 5px; border-bottom: solid #f3f3f3 1px; }
    div#followme a { color: #4a4a4a; font-size: 20px; }
    div#followme a:hover { color: #4a4a4a; font-size: 20px; font-weight: normal; text-decoration: underline; }
    #bird { width: 30px; height: 30px; background-image: url(‘gfx/followme.png’); float: right; margin-right: 10px; }

    #facebook { color: #61a7e7; clear: right; padding-bottom: 5px; margin-bottom: 5px; border-bottom: solid #f3f3f3 1px; }
    div#facebook a { color: #4a4a4a; font-size: 20px; }
    div#facebook a:hover { color: #4a4a4a; font-size: 20px; font-weight: normal; text-decoration: underline; }
    #facebook-icon { width: 20px; height: 20px; background-image: url(‘gfx/facebook.png’); float: right; margin-right: 13px; }

    /* 404 */
    #lost-header { font-size: 60px; text-align: center; color: #d1d1d1; margin-top: 5px; }
    #lost-title { font-size: 16px; text-align: center; color: #d1d1d1; margin-top: -10px; }
    #lost-text { font-size: 13px; text-align: center; color: #bababa; margin-top: 10px; margin-bottom: 20px; }
    #lost-search { text-align: center; }

    /* FOOTER */
    #footer { width: 773px; height: 121px; background-image: url(gfx/footer.png); margin: auto; clear: both; }
    #copyright { color: #d1d1d1; font-size: 9px; text-align: right; float: right; margin-top: 10px; margin-right: 37px; }

    August 31, 2009 at 3:11 pm #63039
    Historical Forums User
    Participant

    I just changed the z-index as you said, and now it works the way it should. Many thanks;)

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.