SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 38 of 38
  1. #26
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi
    actually these divs are for left right bottom and top images for the orange boxes. images are to be expandable in either direction i.e. horizontally and vertically. so repeating images are used. do u know of any other method by which this can be done? besides using so many divs?
    anyways, dont bother about these boxes. i am thinking of changing them already!
    just tell me why the middle text is overlapping the right bar, please?

  2. #27
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    just tell me why the middle text is overlapping the right bar, please?
    Hi mistaya,
    Sorry about not getting back to you sooner, I have been offline all day.

    The problem is the stray .container class div you have nested in the .mainleft div. It is not needed at all and it was picking up the 950px width from your screen.css (Blueprint Framework).

    Code:
    /* grid.css */
    .container {width:950px;margin:0 auto;}
    I snipped out all the Lorem Ipsum text and roundbox divs to show the relative code. Just remove that .container div completely from the .mainleft div.

    You really don't need that #content div either, there are no styles hooked to it in your css. It looks like it was left over from your trial and errors.
    Code:
    <!--Main Starts-->
    <div class="span-24 mainwrap">
    <div class="maininner">
        
        <div class="mainright">
            <snip>Snipped all that Lorem Ipsum</snip>
        </div><!--mainright end-->    
        
        <div class="mainleft">
            <!-- <div class="container"> remove this-->
                
                <div id="content">
    
                <snip>Snipped all that Lorem Ipsum</snip>
    
                </div><!-- content -->
                   
            <!-- </div> --  remove this -->
        </div><!--mainleft end-->
    
    </div><!--maininner Ends-->
    </div><!--mainwrap Ends-->

  3. #28
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Why is all this Sticky Footer code in your main.css?

    You have it commented out which is good, But you should remove it all together and take the height:100% off of the html,body.
    Code:
    html, body {
        height:100%;/* needed to base 100% height on something known*/
    }
    
    /*=== Float Containment and Bug Fixes (Do Not Alter These!) ===*/
    /*body:before {/*Opera min-height 100% Fix (Maleika)*/    
      /*  content:"";    
        height:100%;    
        float:left;    
        width:0;    
        margin-top:-32767px;/*eliminate need for inner non clearing element (Erik.J)*/
    /*}
    
    /*#outer:after,  /* #wrapper:after for IE8 min-height:100% Fix*/
    /*.container:after { /* #content:after for Float Containment*/    
     /*   clear:both;    
        content:"";    
        display:block;    
        height:1%;/*fix IE8 min-height:100% bug (Erik.J)*/    
    /*    font-size:0;
    }
    */
    
    
    /*#outer {
        width:100%;
        min-height:100%;
        margin:-200px auto 0 auto;/*this should be equal to footer height - this drags the outer 200px up through the top of the monitor */
    /*}
    
    /** html #outer{height:100%}/*IE6 min-height*/

  4. #29
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanx for coming back.
    iam lookimg into that class:container and id:content thing. believe me i didnt put it there!
    i think the framework has something to do with it. my local css doesn't even contain any id:content! lol

    container class is only to be called once in the beginning to keep everything at 950px, except the top black coloured bar and the footer which are to be the full width of the screen.

    actually the sticky footer code was also given(or atleast corrected!) to me by you here on sitepoint and i have left comments there for my understanding. why should i remove it? on some pages i have very little text and i want the footer to stay at the bottom. without this code it comes right up. i have tried.

  5. #30
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mistaya123 View Post
    actually the sticky footer code was also given(or atleast corrected!) to me by you here on sitepoint and i have left comments there for my understanding. why should i remove it? on some pages i have very little text and i want the footer to stay at the bottom. without this code it comes right up. i have tried.
    Hi,
    Yes I think I recall going over the sticky footer in a different thread at one time.

    If you have the sticky footer code commented out in the css (as it is now) then there is no way that it can be working on those minimal pages.

    The footer div itself must sit outside of the main containing div in the html as well.
    Edit: Ok, now I see that the footer is sitting outside of the container div.

    The reason I suggested that you remove it was because it was commented out and just adding dead weight to your file size.

  6. #31
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes footer is outside the container div. as well as the top black bar.
    u mean the comments stop the code from taking effect in the web page?

  7. #32
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    bc in such a acse i can remove the comments.
    also could u check the page with a lesser resolution? like 800x600. why does footer and black bar reduced everyhting else remains same?

  8. #33
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    yes footer is outside the container div
    I just made an edit to my last post after I noticed the footer was correct in the html.
    u mean the comments stop the code from taking effect in the web page?
    Yes, when the property & values are nested in the css comments it will disable that rule. If you need to make comments to refer back to or help you understand what a rule does then it should not interfere with the rule.

    Like so -

    Code:
    #wrapper {
    overflow:hidden; /*used for float containment*/
    width:80%;
    }
    See how the comment does not interfere with the actual rule.

  9. #34
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mistaya123 View Post
    why does footer and black bar reduced everyhting else remains same?
    Because you have set them to 100&#37; width which is only the width of the viewport at any given instance.

    You need to set a min-width on both of them equal to the container width.
    Code:
    .blackbar{
        width:100%;
        min-width:950px;
        background:#000;
        height:2.3em;
        border-top:black 200px solid;/*this should be equal to the height of the footer*/
    }
    You had your 200px top border disabled with a comment also, I have corrected it but it is not working because you have not set a 200px negative top margin on your container div to go with the sticky footer code.

    You should re-read through the sticky footer instructions at these links -

    http://www.sitepoint.com/forums/show...66&postcount=3
    http://www.search-this.com/2009/10/0...ticky-subject/


    You might be better off just using a repeating image for your right sidebar BG color.
    That is known as Faux Columns and it will make things much easier for you to follow.

    I need to log out now but I will check back tomorrow to see how you come along with the corrections.

  10. #35
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi
    i was following ur discussions and though it is embarrasing, most of it was greek to me. it took a lot of time just understanding the terminology! but they were good lessons.
    ummm... i have more questions. Btw i'll try to do the right bar with a bg as u said.
    but why is the search bar all broken in ie. it is fine in mozilla. also the logo image seems to be more at top than in mozilla. i want it to be just a little on the black bar which i have done using the negative margins. but they seem to have different distances in ie and mozilla. the same is the case with the nav bar. same negative margins but different display in ie and mozilla.

  11. #36
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi mistaya,

    We apologize for taking your thread off topic.

    As you noticed all of the debates were split off into this thread where it turned into a discussion about sticky footers.

    Jason had set up a nice example of your page using a faux image for the right column. The only thing that was lacking was the sticky footer which is where the thread went off course.

    If you take Jason's code and work it into a sticky footer you should be able to get what you are after. I believe the search bar is working correctly in his link.

    Hang in there and we will try to get it worked into a sticky footer for you.

  12. #37
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    I'll update it when I get up in the morning so it has the sticky footer.

  13. #38
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no problem getting off topic. i m learning many things from it.
    yes. i studied the code of that very good example. i really need to cut down quite a lot.
    its my very first project and certainly full of "issues" . so im trying to change my code as per Jason's example. thanx jason.
    it would be a good thing if u guys could solve this sticky footer issue please bc its the site's requirement.
    Jason ur page works fine n mozilla but in ie7 the social links are not hightlighted at hovering. do u know why? they do in mozilla though.


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
  •