I'm working on styling my web page on a separate CSS file. I have created a link on my HTML file to apply the styling effects to my web page but it doesn't show any effect.
I tried the most basic styles to see if there was an effect to my webpage but nothing happened. I tried writing the codes with Microsoft Visual Studio, and then Notepad++ but still, no effect occurred. I also tried opening my web page using the latest version of Mozilla Firefox, Internet explorer and Microsoft Edge to see any effect but nothing happened.
I tried styling my h1 element using the codes I'll show on the next field
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="Stylesheet" href="../css/staret.css" type="text.css">
</head>
<body>
<h1> Football lives </h1>
</body>
</html>
on my staret.css file, here's what I wrote:
h1 {
color: Red;
}
I expected to see "Football lives" in red color but the actual output was the default color black.
No need to install CSS plugin. There is a little error in your code while linking CSS with HTML.
It should be, type = "text/css" in place of "text.css"
No. CSS3 is included. No need to think about it as an 'addon' or separate thing.
Your issues are with however you are authoring the file. Try putting it in a jsFiddle. : )
.box {
width: 20px;
height: 20px;
background: #ff0066;
padding: 1rem;
transform: rotate(20deg); /* CSS3 */
}
<section class='example'>
<div class='box'>hi</div>
</section>
Related
I am a reasonably competent c# programmer, just starting to mess around with HTML and CSS etc.
I was playing around on Neocities, trying to set up a background image for my text and, well, absolutely nothing is showing despite my best efforts.
The html amd images are in the same directory (I know, I'll fix that later!).
Can anybody take a look at this code and point me in the right direction?
Best regards,
--Rev
EDIT: Good grief, thanks for all the notes & edits. Have added a sample of the html for the page below. It's quite a large page and I'm not completely comfortable with uploading the content here as it relates to a project I want to recruit artists for - I don't want to make the entirety of the page available just yet. Instead, I've grabbed some samples of typical paragraphs, etc.
Most of the comments within the text come from the Neocities boilerplate, which I haven't yet deleted.
Thanks for taking the time to look at this newbies work.
/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
HTML content. To learn how to do something, just try searching Google for questions like
"how to change link color." */
a:link {
color: #cc0000;
}
a:visited {
color: #999999;
}
a:hover {
color: #ff3300;
}
body {
background-color: #323238;
color: #648381;
font-family: Verdana;
word-wrap: break-word;
width: 640px;
*/
}
.hero-image {
/* background-image: url(powerNode45Degrees01001RS.png); /* The image used */
background-image: url("emotionalComp01.png");
/* background-color: #323238; /* Used if the image is unavailable */
/* height: 1024px; /* You must set a specified height */
/* background-position: center center; /* Center the image */
/* background-repeat: no-repeat; /* Do not repeat the image */
/* background-size: cover; /* Resize the background image to cover the entire container */
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Project Factotum Concept Artist Recruitment</title>
<!-- The style.css file allows you to change the look of your web pages.
If you include the next line in all your web pages, they will all share the same look.
This makes it easier to make new pages for your site. -->
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<!--<img src="powerNode45Degrees01001RS.png" />-->
<body>
<img src="superSuperSuperSuperEarly3DSketch01.png" alt="A VERY early 3D concept" title="A VERY early 3D concept" />
<h1>Generic Heading</h1>
<p>I am an experienced game developer (C#/Unity/Blender/Photoshop/Krita) with multiple completed mobile projects for clients (can provide information on a number of them, am under NDA for others).</p>
<p>While I’m a decent modeller, I don’t have the genius for design that this project demands - hence recruiting a 2D concept artist!</p>
<h2 id="ARTISTREQUIREMENTS">ARTIST REQUIREMENTS</h2>
<ul>
<li>2D concept artist, potentially a generalist. 3D concepts are cool, but not essential.</li>
<li>Artist should be able to collaborate using Skype / Discord / Gmail / Google Docs.</li>
<li>Candidate must demonstrate a firm grasp of colour theory, composition, anatomy, working visual hierarchies, developing clear unique silhouettes.</li>
<li>Ideally, artist will be willing to do rough paint-overs of environment screenshots to show designs in-situ.
<li>Should be able to follow this naming convention</li>
</ul>
</body>
</html>
Your HTML has no mention of the hero-image class. That's the main problem. I added a surrounding div with a class of hero-image, and used a placeholder 'hero' image (wiki superman logo) to demonstrate the solution. The file path includes the domain name, folder, name of file. This may be shortened on your own hosting (to exclude the domain name, and begin with a backslash) but as you are just beginning, I recommend you use the full path
Also ensure the following:
-that the file is not corrupt
-that the filename is correctly spelled
Hope this helps
a:link {
color: #cc0000;
}
a:visited {
color: #999999;
}
a:hover {
color: #ff3300;
}
body {
background-color: #323238;
color: #648381;
font-family: Verdana;
word-wrap: break-word;
width: 640px;
*/
}
.hero-image {
/* background-image: url(powerNode45Degrees01001RS.png); /* The image used */
background-image: url("https://upload.wikimedia.org/wikipedia/en/thumb/e/ea/Superman_shield.svg/1200px-Superman_shield.svg.png");
/* background-color: #323238; /* Used if the image is unavailable */
/* height: 1024px; /* You must set a specified height */
/* background-position: center center; /* Center the image */
/* background-repeat: no-repeat; /* Do not repeat the image */
background-size: contain; /* Resize the background image to cover the entire container */
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Project Factotum Concept Artist Recruitment</title>
<!-- The style.css file allows you to change the look of your web pages.
If you include the next line in all your web pages, they will all share the same look.
This makes it easier to make new pages for your site. -->
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<!--<img src="powerNode45Degrees01001RS.png" />-->
<body>
<div class="hero-image">
<img src="superSuperSuperSuperEarly3DSketch01.png" alt="A VERY early 3D concept" title="A VERY early 3D concept" />
<h1>Generic Heading</h1>
<p>I am an experienced game developer (C#/Unity/Blender/Photoshop/Krita) with multiple completed mobile projects for clients (can provide information on a number of them, am under NDA for others).</p>
<p>While I’m a decent modeller, I don’t have the genius for design that this project demands - hence recruiting a 2D concept artist!</p>
<h2 id="ARTISTREQUIREMENTS">ARTIST REQUIREMENTS</h2>
<ul>
<li>2D concept artist, potentially a generalist. 3D concepts are cool, but not essential.</li>
<li>Artist should be able to collaborate using Skype / Discord / Gmail / Google Docs.</li>
<li>Candidate must demonstrate a firm grasp of colour theory, composition, anatomy, working visual hierarchies, developing clear unique silhouettes.</li>
<li>Ideally, artist will be willing to do rough paint-overs of environment screenshots to show designs in-situ.
<li>Should be able to follow this naming convention</li>
</ul>
</div>
</body>
</html>
You have created a class rule in css to display an image as a background of and element :
.hero-image {
/* background-image: url(powerNode45Degrees01001RS.png); /* The image used */
background-image: url("emotionalComp01.png");
/* background-color: #323238; /* Used if the image is unavailable */
/* height: 1024px; /* You must set a specified height */
/* background-position: center center; /* Center the image */
/* background-repeat: no-repeat; /* Do not repeat the image */
/* background-size: cover; /* Resize the background image to cover the entire container */
}
Then you need to tell on which element or elements you need to apply this css rule with class attribute as class="hero-image". Here you can apply it to <p> and <ul> elements like :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Project Factotum Concept Artist Recruitment</title>
<!-- The style.css file allows you to change the look of your web pages.
If you include the next line in all your web pages, they will all share the same look.
This makes it easier to make new pages for your site. -->
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<!--<img src="powerNode45Degrees01001RS.png" />-->
<body>
<img src="superSuperSuperSuperEarly3DSketch01.png" alt="A VERY early 3D concept" title="A VERY early 3D concept" />
<h1>Generic Heading</h1>
<p class="hero-image">I am an experienced game developer (C#/Unity/Blender/Photoshop/Krita) with multiple completed mobile projects for clients (can provide information on a number of them, am under NDA for others).</p>
<p>While I’m a decent modeller, I don’t have the genius for design that this project demands - hence recruiting a 2D concept artist!</p>
<h2 id="ARTISTREQUIREMENTS">ARTIST REQUIREMENTS</h2>
<ul class="hero-image">
<li>2D concept artist, potentially a generalist. 3D concepts are cool, but not essential.</li>
<li>Artist should be able to collaborate using Skype / Discord / Gmail / Google Docs.</li>
<li>Candidate must demonstrate a firm grasp of colour theory, composition, anatomy, working visual hierarchies, developing clear unique silhouettes.</li>
<li>Ideally, artist will be willing to do rough paint-overs of environment screenshots to show designs in-situ.</li>
<li>Should be able to follow this naming convention</li>
</ul>
</body>
</html>
And the background image shoud display in both the paragraph and the UL list.
The CSS looks fine, there might be an issue in HTML. Did you add id="hero-image" in your div or class="hero-image" because if you added an ID the CSS should be like this:
#hero-image {
background-image: url("emotionalComp01.png");
}
And if you added CLASS it should be like this:
.hero-image {
background-image: url("emotionalComp01.png");
}
But if that is not the problem, you will need to post the html here.
.header{
z-index:3;
position:fixed;
width:100%;
height:10%;
top:0px;
background-color: white;
}
.header .header-bg {
background-color: rgba(248,221,225,0.7);
display:table;
margin:auto;
height:30px;
width:30%;
}
.header .title-center{
text-decoration: underline;
position:absolute;
margin:0;
left:50%;
top:60%;
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
</head>
<body>
<link rel="stylesheet" href="css/index.css">
<div class="header">
<div class="header-bg"> </div>
<div class="title-center">header</div>
</div>
</body>
</html>
When I developed a web page, I tested it using Chrome. After finishing, I tested it with firefox/IE/Edge, and found the font-size are much smaller than it used to be in Chrome. When I checked the debug tool on Firefox, it seemed that the size of the same div is not the same for firefox and chrome. Actually, the difference is great.
More wierd, when I click into a modal in chrome, and refresh the window, the path changed to index.html#, then, the layout and div size is almost the same as the other browsers.
Anyone has idea why this happened? and How to deal with it? Thanks in advance!!
The following is part of my code for header.
You should add any default font-family in your css after that you can see same fonts on all browser
and add reset css from http://html5doctor.com/html-5-reset-stylesheet/ in header section!
a) Each browser will have their own default font size predefined.
1) For chrome : Setting > Show Advanced setting > Web Content > Font size
2) For Firefox : Tools > Options > Content > Fonts & Color
Whenever the CSS doesn't have font size mentioned in their styles, browser will use their predefined default font size. Better define font-size in your CSS.
b) index.html# issue
Whenever you click on any clickable elements usually anchor hyperlink, browser tries to navigate to that page or section where the href="" if pointing. When a hyperlink doesn't have href="" we'll get "#" as a dummy pointer. Example
Test link or Test link
Refer : https://developer.mozilla.org/en/docs/Web/HTML/Element/a
Each web browser has different defaults for font so you want to reset you CSS before adding your custom style.
Have a read of http://cssreset.com/what-is-a-css-reset/
The problem may be initial values of some elements that differ through browers. The easiest and most reliable way to solve it would be using something like Normalize.css.
I am trying to make a really simple CSS hover. It works fine in IE, Edge, Chrome and Firefox, but doesn't work for Safari (9.1) on Mac.
Have searched the internet and Stack Overflow for a fix, but no joy.
Found this simple example on codepen. That works on safari.
BUT: If i take that code, put it into a plain html document and serve it from Azure, it does not work on hover. You have to click on/off the element for the bit that should show on hover to appear. Oddly, if I use the web inspector and toggle the hover state, it works. Example code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
#thumbnail {
display: block;
width: 150px;
height: 150px;
}
#thumbnail:hover + #title {
display: block;
}
#title {
display: none;
color: #ffffff;
background-color: #000000;
text-align: center;
width: 130px;
padding: 10px;
}
</style>
</head>
<body>
<a id="thumbnail" href="#"><img src="http://dummyimage.com/150x150/0066ff/fff"></a>
<div id="title">filename.jpg 1</div>
</body>
</html>
I then created a plnkr to see if something extra was going on in codepen. The plunk also works in Safari on Mac.
What do I need to do to get it working in a standard page please?
I have tested your codepen example and even created a HTML file with the contents above and tested it again in Safari 9.1.1 - all working absolutely fine.
You may find the issue is Safari caching your content from Azure, can you clear the web browser cache and retry the issue?
Perhaps there's a cache on Azure that needs clearing also?
http://jsfiddle.net/36ykrp9x/5/
HTML
<div class="container">
<button>O</button><button>O</button>
</div>
CSS
.container {
width: 100%;
background-color: rgb(120, 200, 200);
text-align: center;
}
button {
border: 0;
width: 3rem;
height: 3rem;
opacity: 0.8;
background-color: gray;
}
This above code best captures the visual bug I am interested in solving. I should note that this does not appear to affect Firefox or Safari's latest versions. I am currently on Chrome 39. If you are on a retina display and a recent version of Chrome and do not already see the thin line between the elements, try resizing the window a bit. A thin line between the buttons will flicker in and out of presence.
For my purposes, there is at least one element above the button group in the hierarchy with 100% width, and the buttons must be horizontally centered within it. The buttons themselves must have opacity between 0 and 1. They can be divs, or any other element for that matter - but I have indeed tried others and found the problem remains.
Unfortunately, centering the button group within a fixed-width element doesn't appear to solve this issue for me, as the fixed-width button group must ultimately also be centered somehow which appears to resurrect the issue. Nudging with margins can lead to overlapping which is more obvious with elements that have such opacity - which is really no better than having the gap in the first place.
It is worth noting that indeed using background-color: rgba(r,g,b,a) addresses the problem for most intents and purposes, but I am very interested in resolving this without it if only to see that it's possible.
I am not particularly interested in solutions that involve JavaScript. Am I out of luck?
Based on the information you provided, and my own experience with Google Chrome, I'm led to the suggestion that this is a browser bug in Chrome, considering it only occurs in Chrome on a Retina screen, and other browsers such as Safari and Firefox do not exhibit the problem. Your HTML and CSS looks perfect so I don't see issues here.
You can verify that this is a browser rendering issue by also checking this in a latest version of Opera (on your Retina display), as Opera now uses the same Blink rendering engine as Chrome (which is forked from Webkit). If Opera exhibits the same issue then its a Engine issue which should be logged as a bug.
Unless someone else figures out a way around it, I am normally inclined to leave browser rendering bugs like this alone where possible so that you're not hacking code in your site, and when the bug is fixed, you don't have to do anything to your site.
The problem is with jsfiddle.net. I have the same 1 pixel space in Chrome 40 on retina. Try this: http://dabblet.com/gist/c0068a79fc0268482ee1
or the following code, loaded directly:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.container {
width: 100%;
background-color: rgb(120, 200, 200);
text-align: center;
}
button {
border: 0;
width: 3rem;
height: 3rem;
opacity: 0.8;
background-color: gray;
}
</style>
</head>
<body>
<div class="container">
<button>O</button><button>O</button>
</div>
</body>
</html>
I've applied a css stylesheet to my view and it is not rendering when I view it. What's the problem here:
Edit: Works in Firefox 17, does not work in IE10 (something to do with my compatibility view? Not sure how to fix)
Master:
#using System.Web.Optimization
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>User_Master</title>
#Styles.Render("~/Content/Styles.css")
</head>
<body>
<header>
<p>header</p>
</header>
<nav>
#Html.Partial("~/Views/Shared/User_Nav.cshtml")
</nav>
<section>
#RenderBody()
</section>
</body>
</html>
Styles.css
header {
border-color: #0094ff;
border-bottom-right-radius:10px;
border-top:hidden;
border-left:hidden;
border-bottom:solid;
border-right:solid;
box-shadow:2px 2px;
}
Home
#{
ViewBag.Title = "Home";
Layout = "~/Views/Shared/User_Master.cshtml";
}
<h2>Home</h2>
There seem to be two parts to the problem.
CSS
One part of the problem is related to invalid CSS. For example, border-top is the shorthand declaration for a combination of style, width and colour:
border-top: [width style colour]
With this in mind, I would change your CSS as follows:
header
{
border: 2px solid #0094ff; /* width style colour */
border-bottom-right-radius: 10px;
border-top-style: hidden;
border-left-style: hidden;
box-shadow: 2px 2px 0px #000; /* x-offset y-offset blur colour */
}
IE / Compatibility Mode
If IE is coming through in compatibility mode, you're probably rendering using the IE8 (or older) engine. Unfortunately these do not understand HTML5, so things like the <header /> elements and border-radius and box-shadow CSS declarations are ignored. There are a couple of things you can try to fix this:
Add <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1" /> to your <head /> element. This will tell IE that you want to use the latest rendering engine. See this page for more information on this.
Include a JavaScript library like HTML5Shiv (which is also included in the excellent Modernizr library as well). This allows older versions of Internet Explorer to at least recognise HTML5 elements like <header />. Be aware that it won't add CSS3 support though; things like border-radius will not work, but at least you'll get normal borders.