I run my html on localhost
this is what i got when i put my css file on css folder
href="css/well.css"
well.css in css folder
and this is what i got when i put well.css on the same directory as index.php
href="well.css"
well.css on the same directory as index.php
this is well.css and im using bootstrap for this site
#well{
color:white;
}
#topping{
background-color: black;
color:white;
}
.active{
background-color: white;
}
#rite{
background-image:url("../1.jpg");
opacity: 0.9;
background-repeat: fixed;
}
#submit{
width:100px;
margin-left:90%;
background-color:white;
}
#sing{
background-color: white;
color:#323280;
}
.panel-default > .panel-heading{
background-color: #bd1919;
color:white;
}
.panel-default > .panel-footer {
background-color: black;
color:white;
}
my question is directory of the css file can change the appearance of the site?
why the panel heading has a different color even though it has the same css?
My question is, can directory of the css file can change the
appearance of the site?
Yes it can.
For example, when you use a relative path, as in background-image:url("../1.jpg");, the browser will look for the image in a folder one level above then folder of the CSS file.
So if your folder structure looks like this
root/www/css/well.css
root/www/1.jpg
and you move the CSS like this
root/www/well.css
root/www/1.jpg
the browser will not find the image as it is no longer one level above the CSS folder
Related
I'm working on a CSS file and I'd like it to interact with anothet CSS file.
How? Let's say I have A.css and B.css. In A.css I want to do the "overflow: hidden" referred to B.css and all the elements that it controls.
Is anything like that impossible?
Like:
#import "field.css"
.sky .field {
overflow:hidden;
}
So basically this what I actually have:
.sky {
width: 90%;
height: 100%;
background: blue;
opacity: 0.7;
position: absolute;
z-index: 1;
}
.field {
width: 100%;
height: 20px;
background: green;
position: fixed;
top: 90%;
z-index: 2;
}
.field > p {
width: 100%;
height: 40px;
background: black;
}
Now I want that "p", which is a sub-tag of .field to not show outside of the bounds of .sky.
How do I do that?
No need to import one CSS file into the other simply link to both CSS files in your HTML. For example if you had the following two files
File A:
.sky .field {
overflow:hidden;
}
File B:
.sky {
color: black;
}
Sky would inherit both properties of overflow hidden and color black. If the rules contradict each other for example file A says sky color is blue and file B says black then the CSS rule sheet which is linked last will take presidence.
Edit: Generally it isn't good practise to do this for organization purpose. If Sky is a single objection consider putting all CSS references to it in a single file.
Load both the CSS files into your page. You can actually have multiple files which define style rules on same element. So lets say you have two file
File 1
.sky{
background-color: Red;
}
And File 2
.sky.field {
overflow:hidden;
}
And lets say the page has a element with class div and field.
<div class='sky field'></div>
Now this will have both the combined CSS rules.
Also make sure you get yourself familiar with CSS Priorities, If 2 files have the different CSS rule on the same element then what happens??
Example
//File 1
.sky{
background-color: Red;
}
//File 2
.sky.field {
background-color: Blue;
}
Now the file that is placed last in the HTML DOM will have more priority over other rules. Note that its NOT the last file loaded but the last file in the DOM hirarchythat gets the priority.
My css file is in: media folder.
my images are in: media/msg folder.
This is the setting of the css file:
.info {
color: #00529B;
border-color: #789FCC;
background-color: #CDEAF7;
background-image: url('/msg/info.png');
}
.success {
color: #264409;
border-color: #C6D880;
background-color: #E6EFC2;
background-image:url('/msg/success.png');
}
.warning {
color: #514721;
border-color: #FFD324;
background-color: #FFF6BF;
background-image: url('/msg/warning.png');
}
.error {
color: #8A1F11;
border-color: #FBC2C4;
background-color: #FBE3E4;
background-image: url('/msg/error.png');
The images are not loading.
When I do "inspect element" from browser it tells me "could not load the image".
as far as I know it should take the relative path of my css file and add the path to the image... but it doesn't work.
What do I do?
The problem is because you are starting your paths with /...
'/msg/error.png' => base_url/msg/error.png
'msg/error.png' => css_url/msg/error.png
So just removing the / will work.
Your CSS will be evaluated based on the file that imports it.
To avoid any issues, always give paths to images and other files based on the document root:
/media/msg/warning.png
First while I was styling the css I realized I didn't create a folder for it, so I decided to create a folder for css. Which I named screen.css but right after creating the css folder my images stopped showing. I have check the spelling and the tag but nothing seems to help. I did change link tag from screen.css to css/screen.css
Everything was working fine until I created a folder for the css so I'm guessing the problem might lay there.
An example of the html
body
{
background: url(images/wallpaper.png);
background-repeat: repeat-y;
margin: 0;
background-color: #e4c17f;
font-family: 'Nova Square',helvetica, sans-serif;
}
#banner
{
width: 900px;
background-color: #a65900;
margin: 0 auto;
height: 150px;
background: url(images/banner.jpg);
}
#footer
{
width: auto;
background-color: #a65900;
height: auto;
background: url(images/name.jpg);
}
You created the folder CSS therefore probably need to reference the images from your CSS relatively to the images folder...
A relative path is the path to a file from the current directory.
-- images
---- wallpaper.png
-- css
---- screen.css
body {
background: #e4c17f url(../images/wallpaper.png) repeat-y;
}
Try this :
The Browser will start looking for the image from the folder where you have kept your css
background: url(../images/wallpaper.png);
It worked! :D
I changed the tag to:
background: #e4c17f url(../images/wallpaper.png);
Sorry if this question seems trivial, this is the 1st time I've used an svg file, and was unable to resolve the issue with existing Q and A on stack.
I have a logo which is an svg file. I want to make the logo 'clickable' and work as a link to the home page. I initially did this with a jpeg and all worked as expected, but once I switched to an svg the logo does not display (however I verify if I click in that general area the link works). Does anyone have any recommendation on what I need to change so the image displays?
I'm beginning to think this may have to with Azure (while the svg opens locally it does not open through the project, while other image files do.
SVG file was created using inkscape and renders correctly on a browser when opened as a standalone.
JavaScript loads header onto each page:
//Header for Main pages, with Logo
function getHeader()
{
var header='<ul id="hlogob">'+
'<li>Home</li>'+
'</ul>'+
'<h1 > Big Hat</h1>'
document.getElementById("header").innerHTML=header;
}
CSS Styles the header, and link with a background image (want it to be my svg)
/*Header styling and Logo*/
.header
{
background-color:#FAFAEB;
text-align:center;
font-family: Algerian;
color: #37342a;
height:100px;
padding-bottom:10px;
/*border-bottom:5px inset #DCDCDC;*/
margin:0px;
line-height:20%
}
ul#hlogob li
{
display: inline;
list-style: none;
}
ul#hlogob li a
{
color: #999;
text-decoration: none;
}
a.hlogo
{
display: inline-block;
background: url("../Images/bighat4.svg") no-repeat;
background-position: center;
background-size: 100px 70px;
width: 100px;
height: 70px;
text-indent: -9999px;
text-align: center;
margin: 0;
}
a.hlogo:hover
{
border: none;
}
Header is loaded by js onto each page
<header class="header" id="header">
<!--Loaded by Script-->
</header>
<script type="text/javascript">
getHeader();
</script>
The issue as it turns out is not with the code, but with the default settings on azure which do not have mime type for svg. See Use SVG in Windows Azure Websites
This is a login form that I am creating and it already has an image (some logo). I would like to add some background image for the same page to make it beautiful. Unfortunately my CSS does not help me to do it. What should I do to add a background image to my web page when there is already an image
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Login
</title>
<link rel="stylesheet" type="text/css" href="css/Login.css">
</head>
<body >
<header >
<h1>Loan Management System </h1>
</header>
<!--This is the image -->
<img src="Images/logo_large.jpg" height="200px" width="200px" title="Logo" class="logo">
<form>
<label>Username</label>
<input type="text" name="username"/>
<label>Password</label>
<input type="password" name="password"/>
<button type="submit" name="login">Login</button>
</form>
</body>
</html>
CSS
header
{
position:absolute;
font-size:13px;
color:#000040;
text-shadow:5px 5px 5px #CCCCD9;
margin-top:80px;
margin-left:280px;
}
body
{
position:relative;
font-family:Georgia,serif;
background-color:#A52A2A;
background-image:url(Images/login2.jpg);
}
.logo
{
position:absolute;
display:block;
padding:5px;
}
form
{
position:absolute;
width:300px;
height:300px;
border:5px solid #194775;
border-radius:20px;
margin-top:161px;
margin-left:362px;
box-shadow:2px 2px 2px #194775;
}
label,input
{
display:block;
margin-top:25px;
margin-left:55px;
}
label
{
font-weight:700;
}
input
{
width:200px;
height:2em;
border:2px solid #036;
border-radius:10px;
}
input:hover
{
border-radius:10px;
border-color:#FF8A00;
}
input:focus
{
background-color:#DBDBFF;
}
button
{
display:block;
margin-top:25px;
margin-left:55px;
width:90px;
height:40px;
color:#FFF;
border:2px solid #000;
border-radius:10px;
background-color:#243D91;
}
button:hover
{
background-color:#0FCCF0;
border-color:#003D91;
}
I'm posting this as an "answer" because it's simply too long for a comment. As I mentioned in my comments, css paths to urls are parsed relative to the directory where the css is stored rather than the directory of the page that includes it. As an example:
You have a website with a root and 2 subfolders, CSS and Images. Your directory structure might look like:
mypage.html
myotherpage.html
CSS\styles.css
CSS\layout.css
Images\login.jpg
Images\login2.jpg
If mypage.html has a reference link to styles.css, then any url images that are included from styles.css will need to be referenced from the CSS directory.
background-image: url(Images/login2.jpg);
/* This fails because there is no CSS\Images directory */
background-image: url(../Images/login2.jpg);
/* This works because that is the natural path to the Images directory from CSS */
To avoid this confusion, I prefer to use absolute paths in my css whenever possible, but this becomes understandably difficult when you have a potential to cross domain or protocol boundaries. If you have multiple domains pointing to the same site folder, then you'll have a style reference from myfirstsite.com to mysecondsite.com and this may be inappropriate (particularly if branding is an issue). You may also have an https part of the site that would then have a reference to a non-https version of the site which would create ssl errors/alerts.
Well, the obvious suspect would be that you check the path to the image.. If thats alright then you might want to have a look at the z-index property of CSS. It deals with the way images are ordered in vertical space..You can read about it here ..In your case the body background would be at the back(z-index:0) and then the logo at the front(z-index:1) .
I think as mentioned on the comments. You should check your path to see if it renders.
Check out my Fiddle
body{
position:relative;
font-family:Georgia,serif;
/* I have used background-color property and it gets applied, but I really do not want it*/
background-color:brown;
/* Here is my background image.But it is not applied in the page */
background-image:url("https://mozorg.cdn.mozilla.net/media/img/firefox/os/bg/1400/birthday.jpg");
}