SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    727
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    A background image not displaying.

    This is a bit odd. it is of course displaying on my sandbox.
    only partially displaying in firefox and in chrome

    this is the css
    Code:
    #wrap {
    margin: 0px auto;
    background-image: url('coreImg/aeronautical02WebSizedXpr.png');
    background-repeat: no-repeat;
    background-position: top right;
    }
    another background image, the orange transparent texture displays just fine.

    the code is the same.

    both images are uploaded to the appropriate folder
    the site is www.thebigmeow.us

    Any advice is appreciated.
    Thank you

  2. #2
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    727
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    never mind...now it shows up...

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,513
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)

    Unrelated

    I noticed the horizontal scroll bar.

    Since block objects normally take up the full width of their container, I looked for a container with a {width:100%} assignment plus horizontal padding or margin. It was a good guess .

    The <header> tag and each of the 3 nested rows have been assigned a width of 100% via class="row-fluid".

    <div id="topLogo" class="row-fluid"> has {margin-left:110px} added to position the logo away from the left edge.

    If you delete the class="row-fluid" from div#topLogo, the scroll bar will go away.

    Hope this is helpful.

  4. #4
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    727
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Howdy RonPat!
    Absolutely will try and see what haps.
    Kinda brings up a second question that has been in my mind about boostrap though.
    As it is supposed to be run on a grid system. What would be the bkm in case of paddings or margin throwing things off.
    And also let's say I wanted to position an element. (on top of the slider for example)
    I was going to create a div, place it at the bottom, below the container and then position it with relative /absolute settings. But how would that affect it when resizing the browser?
    D

  5. #5
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    727
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    ok...didn't do it. but it was good to learn.

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,513
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Sherpa, you're a fast moving target

    #topLogo is working fine because the class .row-fluid (and thus, width:100%) has been deleted.

    Things have changed since I posted that message, but the lesson (same as Ralph's) is sound.

    Just an FYI: If you are having any difficulty trouble-shooting, it MAY be because some properties exist in the bootstrap.min.css file AND in your local style.css. That can be confusing.

    .row-fluid seems to do two things:
    (1) apply a width:100%
    (2) apply a clearfix

    The clearfix you probably need if inner boxes are floated, but the width:100% is causing you some grief because any padding or margins added to those containers makes the effective width wider than 100% and triggers the horizontal scroll bars. Remember, block devices (divs, etc) occupy the full width of the page by default, so in most cases, forcing width:100% is unnecessary.

    You seem to have applied .row-fluid in a bunch of places. I speculate that most of them are probably unnecessary. Declaring a div to be "row-fluid" doesn't make it more fluid, so I'm a little puzzled by what appears to be the inordinate use of "row-fluid". Doesn't bootstrap allow you to apply clearfix without width:100%?

    Take a look at the items that I've marked in red. If they are deleted or commented out, the horizontal scroll bar is no longer triggered.

    <div id="content" class="row-fluid">
    style.css (line 146)
    Code:
    #content {
        background-image: url("coreImg/xprtBgroundOrange.png");
        border: 2px solid #D4D4D4;
        border-radius: 10px 10px 10px 10px;
        min-height: 600px;
    }
    <div id="wrap" class="container-fluid">
    bootstrap.min.css (line112),
    style.css (line 80)
    Code:
    .container-fluid {
        padding-left: 20px;
        padding-right: 20px;
    }
    I don't speak bootstrap grid, so test try these suggestions with an open mind. They worked for me when I tested them in Firefox.

  7. #7
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    727
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi RonPat!
    I usually try to follow up on advice in a timely manner :-)
    You are most likely right about the superfluous extra "row-fluids" I have done a couple of series of tutorials and they were not very clear on that. So some of this is learn as you.
    Will try what you advised, thank you
    D

  8. #8
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    727
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    oh yeah...I think one of the tutorials advs two css. one w/your code that would not get updated or written over and the regular on in the css folder.

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,513
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by pdxSherpa View Post
    oh yeah...I think one of the tutorials advs two css. one w/your code that would not get updated or written over and the regular on in the css folder.
    Yes, "core" plus "local/customized" css files are pretty much the norm, but there should be no need to duplicate any of the code in the "core" css file(s) into your customized file. Because css files and their properties cascade, duplicated styles can cause annoying debugging headaches.

    Let us know how you're progressing.

  10. #10
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    727
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    slowly but better thank you to your advice. I did get the display to go from edge to edge of browser and thanks to this bit of code

    Code:
    			<?php query_posts("post_per_page=2"); the_post(); ?>
    			<?php the_date(); ?>
    			<?php the_post_thumbnail(); ?>
    			<h4><?php the_title(); ?></h4>
    			<?php the_excerpt(); ?>
    			<a href="<?php the_permalink(); ?>" class="btn btn-mini">read more</a>
    			<?php wp_reset_query(); ?>
    my thumbnails are showing as well.
    will have to post on the wp forum to understand just how a couple of those lines work. but hey...progress if not perfection :-)
    Thank you RonPat!


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
  •