I have a rails app with many partials for one view, each partial is a section in the view (one paged website).
I have put all my assets in the correct places etc.
below is a screenshot of how the actual page should look (outside of rails) (header, then section one which you can see, and there are sections below etc).
However this is how it is showing when done in rails
No images are shown for some reason, nor any content.
When I do not include the style sheet, all the content (writing) shows fine. When I include the stylesheet, everything disappears, its all white. However there are content there because I am able to scroll up/down.
Below is a screenshot of the structure of my files
I basically have all my images inside the image folder, but there are subfolders inside the image folders.
so:
assets (folder)
images (folder)
section_1 (folder)
image.png (file)
in my css, because my css files are inside the stylesheets folder, I call my urls as follows:
background-image:url("../images/section_1/image.png");
As for my views, it is basically one view which renders out each section (partial).
Try background-image:url("section_1/image.png");
This works in my rails project. However, I'm using compass, so it might be different.
I know what the problem is. But I still have one more problem.
The solution.
When calling an image from anywhere, even if you have a sub directory like I have, you simply call the url as follows:
background-image:url("assets/header/header_bg.png")
So you basically leave out the images folder for some reason.
The problem I still have is a routing issue.
In my assets folder I have a folder named fonts.
Inside this folder I have a number of folders, with different fonts in each folder (.eof,.ttf.svg) the usual font files.
When I type in the exact url of where these files are stored I get a routing error.
I also have a file called fonts.css in my stylesheet folder.
In the url if i put localhost:3000/assets/fonts which is the folder of the fonts I get a routing error.
Is there anyway in the routes file can I route the application correctly?
Both for the images and for the fonts?
Related
The css, js and image directories are in public directory. In turn, the public directory is inside of views (I don't know if it's a good practice to add public directory inside of views directory).
The css files and the js files(in the public directory) are working but only one of the images (that is, the logo at the navbar section) gets loaded on the browser whenever I start up the server, the remaining images are showing little icons in there respective positions. All the images are in the same directory and I linked all of them in the same manner. Why is it that only one is appearing on the browser?
I don't know if it's a good practice to add the public directory inside of views directory, but when I added both on same path with app.js, all the files in public stopped working. But I know I'm on the wrong track because of the following reasons:
No difference is observed whether
app.use(express.static("public"); is added to app.js``` (that is, the server file) or not. This means that that line of code is not working, still the cssandjs` files work in both cases.
Only one of the images is being displayed on the browser even if all are linked in the same way.
The word public appears in the source of each of the static files, omitting it stops all the static files from working.
App structure:
med,
webapp,
main,
views,
partials
footer.ejs
header.ejs
public
bootstrap
css
js
images
home.ejs
post.ejs
news.ejs
about.ejs
contact.ejs
app.js
package.json
I hope indentation will help here since I'm not allowed to post pics yet.
The images in home.ejs are
img src="../views/public/images/syringe-pill-capsule.jpg,
img src="../views/public/images/dna-1811955_1920.jpg",
img src="../views/public/images/lab-217043_1280.jpg".
the only one that is loading on the browser is the logo at the navbar section,in header.ejs. The link is img src="../public/images/wd.jpg"
The problem is that you are not passing the correct path to express.static. You need to change the root to the actual root, i.e.:
app.use(express.static("./path-to-views/public")
Then, you need to make sure to use the correct paths in your html, which will be as simple as:
src="/images/syringe-pill-capsule.jpg"
EDIT:
The root for express.static you were using is correct, i.e.
app.use(express.static("views")
But you need to adjust the paths in the images src attributes to the following absolute path:
src="/public/images/syringe-pill-capsule.jpg"
I'm trying to upload one project on github but CSS and img wont read.
I have tried to upload it 2 times, and checked that files names is written with small letters and are the same in the name of the file and the same in the html code but it still wont work.
Site was build using bootstrap, it is first time for me using BS so i'm not sure if it is because of that.
I am attaching link to a site and link to my repositorie on github. are you able to see what problem is?
Link to a site:
https://veljko-premovic.github.io/Tindog/
Link to repositorie:
https://github.com/Veljko-Premovic/Tindog
thank you in advance
Veljko
You are serving your images from a folder called images, but there is not such a folder.
The same with CSS, you are serving your styles.css from a “css” folder that is non-existent in your Github repo.
Either create those folders and add the images and CSS in them, or in every “src=“, remove the folder name.
Your paths are wrong, they all point to images/something.png but the images are in the same root folder as index.html so it should just be
<src img="something.png">
same for the css
I'm creating a site based on AdminLTE (v 2.3.0), a open source control panel template that uses bootstrap (v 3.3.5).
When I load my page in Google Chrome (v 48.0.2564.97 m) and use the developer tool (F12) in sources I notice that my content folder has a subfolder called less.
It is like:
Content/
├──less/
| ├──...
| ├──table.less
| └──...
The "..." means other files.
But here's the deal: I don't have any those files in my server and this table.less is generating problem to me.
So I did a test. One by one I remove the js and css files that I had referenced.
I discovered that when I add the bootstrap.css file this folder with all files appears.
Now my questions are:
Why this is happened?
How can I avoid it?
And if I can't how can I make my css file has priority above the less files?
PS:
I asked the 3rd question because normally the last css file to be add has priority when some property is overloaded. But in my case my last file is site.css, this file has definitions for tables, but when I open the page the properties of table.less has priority above my file and this is causing me problems.
You probably have a file called bootstrap.min.css.map or bootstrap.css.map next to the bootstrap css file. It's function is to reference the original source files and line numbers in your browser's developer tool section for each directive coming from your css file. If it were not there, you would always see bootstrap.css line 1 next to each css directive, which would not be very informative, this way you see the actual source structure that generated the css. It's all virtual, the less files are not there.
I have the following folders structure in my MVC site:
-- Content -- Notebook -- css
-- Content -- Notebook -- fonts
Content is directly under the root for the site. In my css folder i have a file which has a relative path
url('../fonts/fontawesome-webfont.woff?v=4.0.3')
My bundle currently looks like:
bundles.Add(new StyleBundle("~/bundles/Content/Notebook/css").Include(
"~/Content/Notebook/css/animate.css",
"~/Content/Notebook/css/font.css",
"~/Content/Notebook/css/font-awesome.min.css",
"~/Content/Notebook/css/app.css"
));
This is rendered using
#Styles.Render("~/bundles/Content/Notebook/css")
this works for the css files, but the font file isn't loading, i see that it is looking for it here http://localhost/MySite/bundles/Content/fonts/fontawesome-webfont.woff?v=4.0.3
I saw that and then tried to change my bundle name to
~/Content/Notebook/css
thinking that would get the relative path to work also, if i remove the "bundles" from the name,
but doing that causes the css files not to load. Why wouldn't the css files load? If I had the word "bundles" back to the name it works again. Also any idea on how to get the fonts to load along with the bundle?
When you do this:
url('../fonts/fontawesome-webfont.woff?v=4.0.3')
you are referring to the fonts via a relative path. If you then put your CSS bundle at /bundles/Content/Notebook/css it will look in bundles/content/fonts since that's combination of your relative path and where the browser see your css-file.
A few possible options (either):
Change your bundle path:
bundles.Add(new StyleBundle("~/Content/Notebook/css") ...
(the reason your css files didn't load when you removed bundles was that you didn't change the name of the stylebundle)
and
#Styles.Render("~/Content/Notebook/css")
Reference your fonts with an absolute path:
url('/Content/notebook/fonts/fontawesome-webfont.woff?v=4.0.3')
The web design company I work for has a development side, and a published side for their client sites. For dev sites, the CSS is stored in a directory such as /software-1.5/templates/099/themes/theme-name/theme.css with PIE.htc stored in the same directory. The index page (and all other pages) are stored in the /software-1.5/ directory. However, once the site is published, the templates/099/... part will change to something else.
When I use behavior: url('PIE.htc') in my theme.css file, IE7 apparently tries to find the HTC file in the base directory, and not the CSS directory. How can I make IE7 look for the PIE.htc file in the same directory as the CSS?
Maybe it does help if you're setting the behavior not within the CSS but within the HTML page in the head section. I don't know of a possibility to make IE use the path of the CSS.