I'm a programmer trying to learn some css and I've already run into a stumbling block.
I have the following HTML:
<div class="container">
<div class="span-24 last">
Header
</div>
<div class="span-4">
Left sidebar
</div>
<div class="span-16">
<div class="span-8">
Box1
</div>
<div class="span-4">
Box2
</div>
<div class="span-4 last">
Box3
</div>
<div class="span-16 last">
Main content
</div>
</div>
<div class="span-4 last">
Right sidebar
</div>
<div class="span-24 last">
Footer
</div>
</div>
In my css I have the following:
body {
background-color:#FFFFFF;
}
div.container {
background:url(/images/bck.jpg);
}
I just want to display an image for the background area for the container div but nothing shows up. If I remove the background section from the css and add background-color:#000000; then I see a black background for the container div.
What am I overlooking?
Most likely you are not specifying the correct path to the image:
background:url(images/bck.jpg);
Make sure that:
You are specifying the correct path
File name of the image is correct
The image file is present in the images folder
Note: As I answered a question today, see how to specify the path with ../.
Most likely the image path is wrong. Remember that the image must be specified relative to the location of your CSS file. Let us say that you have a folder named styles with your CSS files and you have a folder named images with your images. Then you may need to specify:
../images/bck.jpg
in order to access that image.
I find that using Firebug for Firefox, the Web Inspector for Safari, or the Developer tools for MSIE 8 helps me diagnose issues like this. Inspect your div.container element and see what path shows up for your image.
Of course, if you have access to your server logs you could also check those to find what image was requested.
I recently had a problem just like this in where a jpeg image refused to show, but only in MSIE. I had to open up the image in photoshop and use the "Save for Web" again then reupload it. I'm not certain what the glich was, perhaps it was saved in an incompatible jpeg variation or was corrupt in some way, but that worked for me.
Related
I am using a Bootstrap Template, that you can see the live version here - https://02dc74ce3e31e56a52ebcc845dca58e87283aabe.googledrive.com/host/0Bxbofwq0kd4ReUt2YWVOYmt3WVU/
If you view it on a mobile device, you will see how the responsiveness of Bootstrap kicks in.
But when I applied it to my Rails app, the mobile version does not look the same.
Any ideas what may be causing the discrepancy?
You can see the differences especially in both the main 'content' area with the story (notice on my version you see multiple stories in the main view, but on the original you only see 1 story and you can read the content more easily). You can also see it when you press the buttons.
Press the 'blue' button to the right top of the original and you will notice that the sidepanel comes out at the top like it should. But on my version it still comes to the side and everything is small.
What am I missing?
Thanks.
Add this to your application.html.erb:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You have made too many changes while you are implementing the html in your rails view.
Like original header have following content :
<header class="header">
<hgroup class="pull-left">
<h1 class="site-title">
<a href="index.html" title="Von" rel="home">
<i class="fa fa-lemon-o"></i> Von
</a>
</h1>
</hgroup>
<div class="btn btn-primary pull-right" id="togglesidebar">
<i class="fa fa-bars"></i>
</div>
</header>
But in your view instead of <hgroup class="pull-left"> you have <hgroup class="pull-left col-xs-3 col-sm-3 col-md-3 col-lg-3"> and for <div class="btn btn-primary pull-right" id="togglesidebar"> you have <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 masthead-group-3"> also You added two more element in between these two element that destroyed your all header view.
You haven't used middle section from html design it seems you write your own. In your <header class="entry-header"> You created div instead of image tag. So every thing started distorted here. You include header footer section for each main section. But it's not big issue. Try remove div for confirmed and unconfirmed and use image instead. SO you will have proper view. Also remove row class from view that you added so view look more symmetric.
In your about section. When you try to see on mobile view. width of main container <div style="display: inline-block;" class="col-sm-3 sidebar" id="secondary"> is calculated on the basis of it's child element like <div class="about">. As your child element is form and it's having width less than the width displayed on form so remaining section not having proper background color #1c171e. So try increase width of you form control or <h4>Submit Report</h4> like <h4>Submit Report </h4> (kind of hack)under about section You will get proper view for this also.
Judging by your css file, you have loaded similar css multiple times. Consider the fact that, if everything else suggested by the people above has been corrected, the placement of the css files in the application scss file could overwrite your correct code.
I would also check the viewport meta tag as suggested above
If you try calling the CSS and JS being used as individual standalone files, instead of minified, do you still have this issue? Order of these files will matter too. I've seen lots of quirky issues when one JS gets loaded before another, same goes for CSS.
P.S. I would leave this information as a 'Comment' vs. Answer but I don't have enough stack overflow credit yet to do so ;-)
Make sure that if you have using rails g scaffold that you remove the scaffold.css file.
I have a page with two html files. I have exactly the same code for the footer in them. They use exactly the same CSS file but they look different and I still cannot find out why :
The code is here for the footer :
<div class="container_12">
<div class="grid_12"><footer>
<div class="socials">
facebook |
twitter |
google+
</div>
<div class="copy">COSMOSET © 2013 | Privacy Policy <!--{%FOOTER_LINK} -->
</div></footer>
</div>
</div>
Also if you visit the page here: HERE you can see the text-box-areas do not have the same transparent white background. I assume this one is a server issue (plesk). Because when i open the file on my PC (saved on my PC) it looks perfect.
If you go to the second link from the left (of your navigator) you can see that you have the following DOM structure:
The problem is that, on the page your provided in your post, the footer is a sibling of the <header>, <div class="clear"> and <div class="bg1"> elements, as you can see it in the following screenshot:
Your problem will get solved if you move the "container_12" to be a sibling of the elements I mentioned above.
LATER EDIT:
To answer your second question, for the #form textarea CSS selector you've added an extra . after the png extenstion:
I think my last question was misunderstood. I have pasted below, the HTML of the page I am having troubles with, but you can see it here: http://jsfiddle.net/wCZYU/6/
Basically I would like a fixed header (pageHeader) and a colored div that fills the browser window, NOT the entire page background. I then would like a div under this that the user will be required to scroll to see
<header class="pageHeader">
<div class="setWidth">
<div class="navMain">
Home
Work
Blog
Contact
</div>
</div>
</header>
<div class="secFill">i want to be below the navigation</div>
<div class="content">i want to be below secFill</div>
This is the image that I posted earlier that I want it to look like
http://i.stack.imgur.com/jZgMb.png
The navigation must be fixed and compatible in ie7/8.
Thanks alot (again)
If I'm understanding correctly, you just need to define .secFill as height:100%.
.secFill {
height:100%;
background-color:red;
}
http://jsfiddle.net/wCZYU/7/
I'm somewhat perplexed by this.
..
The page im working on is located in
www.gd-gaming.com/wordpress/
However, for the background image to show, instead of putting it in
www.gd-gaming.com/wordpress/images
I've had to put it in
www.gd-gaming.com/images
Now, When I visit an additional page from the one im working on, (www.gd-gaming.com/wordpress/breakout-canidates/)
That background image dissapears. I cant understand why, I use the same code on a vbulletin website and the background displays everywhere. If I firebug it, it tells me the image didnt load, meaning the path is incorrect. I'm not sure where to put it though.
For actual reference..
http://www.gd-gaming.com/wordpress
http://www.gd-gaming.com/wordpress/breakout-canidates/
Code: <div id="background">
<img class="background" src="images/bgmain.jpg">
</div>
use absolute:
<div id="background"> <img class="background" src="/images/bgmain.jpg"> </div>
instead of relative one
one issue I don't quite understand.
I made an online sample, when I'm resizing the window, the SPANs response one by one.
Online sample http://jsfiddle.net/Pva7y/1/
Online Images
However, I copied the same code to my local html, the SPANs response just together.
Local Image.
why different? Thanks
HTML:
<div class="row ">
<div class="span7 blue">
1
</div>
<div class="span2 red">
2
</div>
<div class="span3 green">
3
</div>
</div>
CSS:
.blue{background-color:blue;}
.red{background-color:red;}
.green{background-color:green;}
First thing is that you forgot to use container div. Correct pattern is
<div class="container">
<div class="row">
<div class="span12">
1 2 3
</div>
</div>
</div>
See corrected jsfiddle (1).
Next, if you want your page to be responsive and fit the layout to the size of the viewport you have to also include bootstrap-responsive.css. See jsfiddle (2). In your local HTML you used either both bootstrap.css and bootstrap-responsive.css or prior files merged to one CSS for reducing client-server requests number.
Your <div>s are floated in your Fiddle, but they are not floated in your local html judging from your screenshot. And since bootstrap.css floats the <div> element with a class of span, I am guessing that bootstrap.css is not loaded properly in your local html file.
A way to troubleshoot your issue is to check the Inspector (if you're using Chrome), or Firebug (if you're using Firefox). Look at the computer style of the three <div>s in your fiddle AND your local html, and compare them. They must have been styled differently because they look different on the same browser, so that's the way to start troubleshooting.