I am trying to set background property in my file but the image is not loading
html code:
<html>
<head>
<link rel="stylesheet" type="text/css" href=".\css\recipe.css">
</head>
<body>
<div class="container">
<div class="div1">
<div class="div1a"></div>
<div class="div1b"></div>
</div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</div>
</body>
</html>
css code:
.div1b{
border-style:solid;
height:28em;
width:71em;
background: url('C:\Users\Lakha\Documents\My Web Sites\Food
website\img\banner.jpg');
}
I tried the following steps:
--> Checked the image is in the correct folder.
--> Tried using double quotes instead of single quotes
If the image is on your site, wich seems the case, you have to provide a relative url for it, not an absolute one, because your hard drive isn't accessible from internet (thank's god...). The url is formatted with / characters to separate folders, and no \ like in Windows.
So the url will be something like this:
url(img/banner.jpg)
assuming that the "Food website" folder is the root of your site and the css is directly in it.
You have to check your css file path in href="correct css file path".
<link rel="stylesheet" type="text/css" href="../css/recipe.css">
you may got it wrong.
Don't use an absolute path. Try using a location relative to the location of the css file. like this:
background: url('..\img\banner.jpg');
you can insert an image into your web folder
.div1b{
border-style:solid;
height:28em;
width:71em;
background: url('../img/banner.jpg');
}
Related
I've been trying to figure out why my ejs isn't including my css.
I've set up my header.ejs etc; but it isn't loading the css.
Please note that the header.ejs is indeed being included inside my index.ejs.
The only problem is that the stylesheets aren't being loaded.
I do realize that you need to tell ejs what you want to be loaded which I did. The directory is definitely correct. I used readdir to check whether the directory was outputting the contents of the folder which it did.
I'm wondering is it because it isn't under a static folder like public/css if that is the case how would I be able to change that?
server.js
app.use(express.static(__dirname + '/client/vanity/public/assets/css'));
header.ejs
<link rel="stylesheet" href="/../assets/css/normalize.css/">
<link rel="stylesheet" href="/../assets/css/skeleton.css/">
index.ejs
<% include views/header %>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="container">
<div class="row">
<div class="one-half column" style="margin-top: 25%">
<h4>Basic Page</h4>
<p>basic template</a>.</p>
</div>
</div>
</div>
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>
If you were to serve your static files as such:
app.use(express.static(__dirname + '/client/vanity/public/assets/css'));
then, when the files are referenced, the path starts with /client/vanity/public/assets/css.
This means that you would reference a css file as the following (suggesting your css files are in the /css folder):
<link rel="stylesheet" href="/normalize.css">
Full path: /client/vanity/public/assets/css + /normalize.css.
dears,
i've followed these steps :
1) Download Bootstrap from http://getbootstrap.com/
2)Create a dynamic web project in eclipse.
3)Make sure that this dynamic web project could be run on the server.
4)Under WebContent folder, create a bootstrap folder.
5)Import files such as following from downloaded Bootstrap
resources into the newly created folder, “bootstrap” in step 3. css
folder consisting of bootstrap.min.css js consisting of
bootstrap.min.js img consisting of images Create an index.jsp and put
following within tag
But my html doesn't seem to see the css, i even wrote this line as a test but nothing appears
<div class="alert alert-info">
<strong>Info!</strong> Indicates a neutral informative change or action.
</div>
this is the whole index.html page:
<!DOCTYPE html>
<html>
<head>
<link href=”bootstrap/bootstrap.min.css” rel=”stylesheet” type=”text/css” />
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div class="alert alert-info">
<strong>Info!</strong> Indicates a neutral informative change or action.
</div>
</body>
</html>
Try to change your css link declaration to
<link href="bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css" />
It has symbols with unsupported encoding.
I've been experiencing some problems trying to create columns for Rails using bootstrap. I installed bootstrap with "Integrating Rails and Bootstrap, Part 1 - the Installation". This is what I have so far:
<html>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
</head>
<body>
<div id="main-container" class="container">
<div class="row">
<div id="A_Name_Title" class="col-md-6" style="background-color: LightSteelBlue">
<p>Test</p>
</div>
<div id="A_Time_Spent" class="col-md-6" style="background-color: LightSteelBlue" >
<p>Test2</p>
</div>
</div>
</div>
</body>
</html>
In the code, I am trying to create two columns stacked horizontally so I can use them as titles for the following rows. However, when I run the code I get:
I tried "Columns in bootstrap 3.0 only stacking vertically" but I still could not get it to work.
I am using Rails 5.0.1 with Bootstrap 3.3.7 and Ruby 2.2.6.
Edit - 02-16-17 - 5:00 PM
Moved the header into the correct place. Tried changing the "href="bootstrap.css" to "href="stylesheets/bootstrap.css" but RubyMine complained about that. Ignoring the complaint, the result was still the same. Followed the tutorial that #Fabrizio linked to and I still could not get it to work. With #Fabrizio's code, by replacing my link code with
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
I do get the result I want but from what I understand, if that website goes down, I lose access to the bootstrap.css
This is what I have for my "application.css.sass" file:
#import "bootstrap-sprockets"
#import "bootstrap"
Edit - 02/18/17
Turns out I was having issues with coffee script and by adding "gem 'coffee-script-source', '1.8.0'" and then running bundle install, I was able to import bootstrap through the use of the sass gem and the application.html.erb file. Thank you for all the help.
I am not sure that you can load css files with Ruby on Rails without following the Asset Pipeline, basically you will have an application.css file inside app/assets/stylesheets, the html file should have this manifest file in the head tag with the following syntax
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => "reload" %>instead of
<link rel="stylesheet" type="text/css" href="path to your css file" />
The manifest file application.css will include link to all the css files with the following syntax:
#import "bootstrap-sprockets";
#import "bootstrap";
Additionally with Rails you can include Bootstrap with a gem, it is called bootstrap-sass and you can follow the instructions at https://github.com/twbs/bootstrap-sass
Just include the gem as by the instructions in your Gemfile, run bundle install and then include it in your application.css..
Hear your can read about the asset pipeline.
http://guides.rubyonrails.org/asset_pipeline.html
I included your css in my text editor and this is the result I get, two vertical columns, for me a red and blue column. I think this is the result you would like to reach with a col-md-6?
This is the code I used:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="main.css" rel="stylesheet" />
</head>
<body>
<div id="main-container" class="container">
<div class="row">
<div id="A_Name_Title" class="col-md-6" style="background-color: LightSteelBlue">
<p>Test</p>
</div>
<div id="A_Time_Spent" class="col-md-6" style="background-color: red" >
<p>Test2</p>
</div>
</div>
</div>
</body>
</html>
Everything seem good, if nothing works out, try creating new file
custom.scss in app/assets/stylesheets
and move the contents from application.css to custom.scss.
Also check the css selectors you used don't override any styles.
Suppose I have two html files footer.html and main.html. The footer contains a reference to the top of a page as follows:
<!-- footer.html -->
<!doctype html>
<html lang="en">
<head></head>
<body>
<footer>
<small>To top</small>
</footer>
</body>
</html>
The main.html file embeds the footer by using the <object> tag (see note 1) as shown below. There can be several files similar to main.html. Because of this <a href="page#header"> may not be used.
<!-- main.html -->
<!doctype html>
<html lang="en">
<head></head>
<body>
<div id="header">...</div>
<div id="content"> Long content ... </div>
<object id="footer" type="text/html" data="footer.html"></object>
</body>
</html>
Question: Is it possible to refer to the anchor from the footer to main without using javascript, php etc?
Note 1: The <object> tag can be used to embed another html, although without a relation:
You can also use the <object> tag to embed another webpage into your HTML document.
from http://www.w3schools.com/tags/tag_object.asp
The same can be done using <iframe> or <embed> instead of <object>, but the issue remains.
Is it possible to refer to the anchor from the footer to main without using javascript, php etc?
No, it isn't.
If you use a relative URL, then it will be relative to the document that the link appears in (i.e. the footer).
If you use an absolute URL, then you have to specify which document you want to link to the top of (and since multiple documents will embed the footer, you can't do that).
You've ruled out generating the URL programatically with JavaScript.
Thanks to all for the comments and answers. Indeed, this approach seems not to work due to a missing relation between html files. In other words, footer.html cannot refer to the inside of main.html. Instead, I modified the structure, so that the main includes the footer directly and the content is embedded by using an <iframe> as follows:
<!-- main.html -->
<!doctype html>
<html lang="en">
<head></head>
<body>
<div id="header">...</div>
<iframe id="content" name="contentframe" src="content.html"></iframe>
<footer id="footer">
<small>To top</small>
</footer>
</body>
</html>
This solves the issue and works without JS, PHP or the like independently of the page loaded into the <iframe>. That is, it simply jumps to top keeping the contents of the loaded page. Eventually, there is one main and multiple long content pages which are loaded into this main. Tested with FF and IE.
net mvc4 project.
I try to display Image with help of img tag, like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div id="header">
<h1>
Select mail service:
</h1>
<img src="C:\Users\MvcContactsImporter\Graphics\YahooLogo.jpg"/>
</div>
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
</html>
But in FireFox browser I get this:
and if I change browser to Internet Explorer I get this:
The extention, name and the path of the files are correct.
Any idea what may cause to the problem and how to solve it?
Thank you in advance.
If Graphics is the folder in your project directory then give relative path to #Url.Content() and it will handle it itself.
give url this way:
<img src="#Url.Content("~/Graphics/YahooLogo.jpg")"/>
You cannot use absolute image file path. Put it inside web root folder and use relative path instead.
UPD: have a look here for examples http://www.dotnetperls.com/mappath
If you reference a file then you should add 'file://' to your image url.
Give it a try