This is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trial </title>
<link rel="stylesheet" type="text/css" href="trial.css">
</head>
<body>
<div class="container1">
<p>
Hello
</p>
</div>
<img src="D:\Trial Website\Grow Image.jpg" alt="image">
</body>
</html>
Image file location seems to be working in HTML in image tag, but it is not working in css where I use the same file location.
This is my CSS code:
h1 {
color: green;
}
.container1 {
background-image: url(D:\Trial Website\Grow Image.jpg);
text-align: center;
}
You must put URL that is web accessible, not path.
So if your webroot is under Trial Website, then do
<img src="/Grow Image.jpg" alt="image"/>
background: url("/Grow Image.jpg") ;
Place the resource path within quotes and the path should follow web standards, i.e, use forward slashes while defining a path.
Change this:
background-image: url(D:\Trial Website\Grow Image.jpg);
To:
background-image: url("/Trial Website/Grow Image.jpg");
This shall fix the issue.
Related
I have a css class .menu-bar.
<style>
.menu-bar { width: 100%; text-align: center; }
</style>
If I place the class in external stylesheet, it won't load ( has no effect in html file ).
If I place the class in local stylesheet (in head tag), it only works if the class is also defined in the external stylesheet. I know this, because I removed the class from external stylesheet and the local class did nothing. My observations have been, this is being caused by text-align. What is going on?
My implementing code:
<div class="menu-bar">
<div> Content </div>
</div>
My intention is to place my css code in external stylesheets. In this scenario, I am having to duplicate this code which seems to demean the point of having external stylesheets. Any thoughts would helpful.
I personally Use VS code as far I can see your problem is that you are not able to link your external stylesheet (CSS file) If You use vs code you can use this.
Maybe some problem in the live server or anything if the code doesn't work the problem maybe something else.
Correct me if I am wrong!
MY CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="menu-bar">
<div>
<p>Content *Text align - center Text horizontally*. </p>
</div>
</div>
</div>
</body>
</html>
CSS CODE (External Sheet)
.menu-bar{
width: 100%;
height: 100%;
text-align: center;
background-color: aqua;
}
Click me to view result
The external CSS code did not run because you did not import it in your HTML.
Add this to the start of your HTML:
<link rel="stylesheet" href="PATH_TO_CSS.css">
I have a view page (View.cshtml) and a stylesheet (Style.css).
The stylesheet is located in a folder called "Stylesheet", and the view page is located in Views/Home/View.cshtml. I am trying to link the stylesheet to the view page by this code:
<link rel="stylesheet" type="text/css" href="~/Stylesheet/Style.css">
When I run the project, it showed the contents of the view page but the styling was not implemented. May I know what I am doing wrong?
UPDATE:
View.cshtml
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="~/Stylesheet/Style.css" />
<title>Test Page</title>
</head>
<body>
<div id="topHeader">
<br />
<div id="credentialsBox">
<div id="texts">
<div id="word1">Username:</div>
<div id="word2">Password:</div>
</div>
</div>
</div>
</body>
Style.css
#font-face {
font-family: 'proximanova';
src: url('../fonts/proximanova-light-webfont (2)_0.ttf') format('truetype');
}
/*CSS Styling Properties*/
body {
font-family: proximanova;
margin: 0;
background-color: #007381;
}
#topHeader{
margin-top: 15%;
height: 450px;
background-color: #d6d6d6;
}
#credentialsBox {
border-radius: 3%;
width: 20%;
margin: auto;
margin-top: -5%;
background-color: #ffffff;
}
#texts {
padding: 14%;
text-align: center;
}
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
#RenderSection("css", false)
</head>
<body>
#RenderBody()
</body>
</html>
Sorry if the CSS styling is a bit messy, I am trying my best to learn here :D
You can also use #Url.Content instead for absolute path of css file.
<link href="~/Stylesheet/Style.css" rel="stylesheet" type="text/css" />
or
<link href="#Url.Content("~/Stylesheet/Style.css")" rel="stylesheet" type="text/css" />
If you that is your own custom CSS file then make sure that you add that file to BundleConfig.cs file in App_Start folder. Which will look something like this..
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/Style.css));
And in your head section try to replace
<head>
#RenderSection("css", false)
</head>
with
<head>
#Styles.Render("~/Content/css")
</head>
and see it will make any difference, and we will go from there.
I have solved the error. I placed my stylesheet inside "wwwroot/css" and it worked.
I'm using grunticon to add svg's.
Everything working but I'm struggling to style the svg's with css.
I simple want to chnage the fill color of the svg.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!--jQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!--css-->
<style type="text/css">
.icon-heart{
background: red;
}
.icon-heart{
fill: red;
}
</style>
<title>Title of the document</title>
<script>
/* grunticon Stylesheet Loader | https://github.com/filamentgroup/grunticon | (c) 2012 Scott Jehl, Filament Group, Inc. | MIT license. */
window.grunticon=function(e){if(e&&3===e.length){var t=window,n=!(!t.document.createElementNS||!t.document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect||!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")||window.opera&&-1===navigator.userAgent.indexOf("Chrome")),o=function(o){var r=t.document.createElement("link"),a=t.document.getElementsByTagName("script")[0];r.rel="stylesheet",r.href=e[o&&n?0:o?1:2],a.parentNode.insertBefore(r,a)},r=new t.Image;r.onerror=function(){o(!1)},r.onload=function(){o(1===r.width&&1===r.height)},r.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="}};
grunticon(["images/output/icons.data.svg.css", "images/output/icons.data.png.css", "images/output/icons.fallback.css"]);
</script>
<noscript><link href="icons.fallback.css" rel="stylesheet"></noscript>
</head>
<body>
<div class="icon-heart-1" style="height: 50px; width: 50px;"></div>
<div class="icon-heart" style="height: 50px; width: 50px;"></div>
</body>
</html>
You need to ensure that the svg's you are using do not have the fill="{color}" or style="fill:{color}" hardcoded in them as these will override any css style you apply.
I think you will have to do this by manually updating the svg unless there is a grunt way to do it.
To change the style attributes via css, you need to embed the svg into the dom. Grunticon (above v2.0) offers a easy way to do this.
You need to enable the enhanceSVG option in your gruntfile and then you can use the data-grunticon-embed attribute on your div to embed it.
Look at their documentation for more information
https://github.com/filamentgroup/grunticon#version-20-is-out---heres-whats-new
I'm trying to show a background image on an Android phonegap app based on jQuerymobile.
This is the HTML
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquerymobile.css" />
<link rel="stylesheet" href="css/index.css" />
<script src="js/jquery.js"></script>
<script src="js/jquerymobile.js"></script>
</head>
<body>
<div data-role="page" id="Main" class="main-page">
<ul data-role="listview" data-filter-reveal="true" data-filter="true"
data-filter-placeholder="Insert the city here..." data-inset="true">
<li>Limone Piemonte</li>
<li>Artesina</li>
<li>Tonale</li>
</ul>
</div>
<!-- /page -->
</body>
</html>
This is the CSS (index.css)
.main-page {
background: transparent url(img/alpettalownologo.jpg) no-repeat center center;
background-size: cover;
}
But I see no image in background. What am I missing?
I'm guessing your url(img/alpettalownologo.jpg) is not correct as this would mean it's in a sub directory of your CSS files.
The location of the background image needs to be in relation to that particular CSS file, so maybe url(../img/alpettalownologo.jpg) as a guess would work, depending on your file structure.
I can not get a simple CSS to apply to my jsp page. The page displays, but just black on white (no underline). The TOMCAT localhost_access_log shows the GET of the CSS is successful (200).
using Tomcat with directories:
web-apps/myapp
--jsp -- cat_list.jsp
--css -- main.css
--WEB-INF
main.css:
h3 {
background-color: blue;
text-decoration: underline;
}
cat_list.jsp:
<!DOCTYPE HTML>
<html>
<head>
<title>Category List</title>
<LINK rel="stylesheet" type="text/css" href="css/main.css" media="screen">
</head>
<body>
<h3> Test Text </h3>
</body>
</html>
What am I missing?