My HTML page with CSS customization works well when previewed in a local computer using a browser but when I FTP it to my domain, CSS suddenly stops working. Gradient in the background, fonts and padding all get lost.
P.S. I have checked the link to my CSS in the HTML file and it rightly shows to be ./CSS/style.css
Please help!
include your css file properly <link href="../CSS/style.css" rel="stylesheet" type="text/css" /> not ./CSS/style.css provided your CSS folder is one level outside the html file to which you are including the same
Firstly, check if the link itself is working - eg. Any styling is working at all.
If not, search for tutorials on how to link a css file into a html document - See link below
http://www.w3schools.com/css/css_howto.asp
If the link is working, but those styles are not.
A. Selectors are wrong and elements are not being targeted properly
B. Elements styling is being overwritten somewhere else in the site. This site has a simple and easy to understand description of hierarchy in CSS and what gets applied over top of other styling
http://www.nzwhost.com/article/understanding-css-hierarchy
Ultimately, this is all speculation. I hope it solves your problem however without a look at the code itself, it could simply be a typo.
Related
I'm making a site with Tumblr. The code iframe.hidden{display:none} shows on the top left when I look at the site from my phone. I can't find iframe.hidden{display:none} anywhere in my code. Is it because of how Tumblr renders code or possibly on their end?
Below is an image of what I'm talking about.
(https://i.stack.imgur.com/HX9ek.png)
So I went ahead and pulled up your website in a mobile device simulator over at http://testobject.com/ which you can do as well for free. I then opened up the dev tools for the browser and saw directly under the body tag for you webpage is the following line
figure{margin:0}.tmblr-iframe{position:absolute}.tmblr-iframe.hide{display:none}
I am not a big tumblr user, almost don't use it at all but my guess based on looking in the head section is wherever you paste in custom css this line of css is not typed correctly, which is causing it not to be picked up as css and instead displayed as plain text. I would start by looking there, hope this helps.
I see that your web page is not coded correctly. When I opened, https://raffalaw.tumblr.com/.
See below just under body tag :
You have put different <link>, styling in <body> tag. It's not recommended to put styling and <link> tags in <body> tags. See : What's the difference if I put css file inside <head> or <body>?.
Obviously, its breaking somewhere in your actual code. I would appreciate if you can show snippets of your actual code.
The answer was that there was a meta tag in the head not closed. I added the bracket at the end and the mysterious code disappeared.
https://trentonerker.tumblr.com/post/155377765774/how-to-fix
I have an index.html file which includes a whole bunch of css and js files. I have MaterializeCSS included as well as a css file called style.css. For some reason if I have them both included at the same time, when I create a page and use something from materialize (the tabs for instance) they don't look the way they should. Everything is initialized correctly and there are no errors anywhere, the font on the tabs is just not the one that should be there. When I tried not including style.css the tabs looked the way they should.
The problem is that I can't not include style.css because without it, the entire website looks messed up. I tried including them in a different order but that didn't fix it.
Here is style.css.
EDIT: I just tried commenting out all the font-family elements in style.css and everything seems to be working. I could just leave it this way however I don't think this is a very elegant solution.
my guess is that your styles.css is overriding some of the css in Materialize.css and vice versa. You could check using the Dom explorer and see what is being overwritten. Chrome is very good for this as it crosses out the over written css shown in the picture linked below.
Once you find out what is being overwritten you could then write your own styles overwriting it again to make it look how you want.
Hope it helped :)
overwritten styles in chrome
(like how override cms' css file like using classes under bootstrap instead of main.css)
..
I having a problem with my website which i made by developing only front end using HTML& CSS. (website is in .HTML).
I decided to use the website under a CMS so that it can be more secured and efficient and i chose fuelCMS1.3.1 under CI.
But i faced a problem when pasting my code into the CMS, my website itself has a css file called 'main.css'..while the fuelCMS itself uses its own 'main.css'!
when it came to pasting code of a dropdown menu from bootstrap, my website under CMS, dropdown menu is not working!
I went to inspect element to see my .HTML website, and it shows that its making FULL use of bootstrap.min.css & few main.css.
but in CMS, when checking inspect elemtn, i found that HALF of the dropdown menu css is using 'main.css' instead of boot strap!
how is possible that 'main.css' in fuel cms is being used instead of my bootstrap link?
i mean, i understand that 'main.css' in fuelCMS is having same classes as in bootstrap, so it is overriding them..how do i solve this and force fuel cms to use classes from my bootstrap link ONLY?
im also facing the same problem with 'body', becuase when i check the inspect element for the 'body' in css, in my HTML website its only used once, But when i check inspect element is FuelCMS, its being surprisingly being used more frequently.
body tag is used in several css files
(as if fuel cms has its own css identification and classes for 'body' instead of making use of my own 'body' tag for local HTML files..same goes for the main.css, fuelcms is identifying my site css tags using its own css files rather than my ones (its overriding them)..not to mention missing classes from my own css files being ignored)
its like my css are clashing with css of the cms, where the cms is overriding my ones.
hope i was able to explain well.
im quite new with front end developing, so I'm still managing and learning trying to track the problem and solve it.
Any suggestions? Thanks in advance.
The main.css is placed under assets folder.
Just remove the main.css and use yours instead.
Or you can use custom.css to override the main.css.
Just include the custom.css in your layout.
I have some problem with css files, to be more detailed i have linked 2 css stiles in one html file one is style.scc and bootstrap.css I am using bootstrap social button and that's why i need bootstrap. but this movement has changed almost everything in my site...
so is there a way to call bootstrap.css file in single div and in aver divs to have original css file?
PS css Scoped property don't works from me!
No, it is not possible, if you only using bootstrap for social button - just copy styles from bootstrap.css to your stylesheet (style.css).
Scoped CSS works only in Firefox for now.
Never mynde i founde the solution from "here"
you mast set the mos important css file the last and the least important first
:-)
Bootstrap already has a feature in their site to help you doing custom builds, check it using the following link: Customize.
Also, you can always get the source code and working with it by yourself.
For more information, check the following link: Compiling CSS and JavaScript.
I recently found out about twitter bootstrap and I have been diving deep into the most recent version, Bootstrap 3. On the website, there is an example for an "Off Canvas" template (here: http://getbootstrap.com/examples/offcanvas/ ) which I have been modifying. But there are several things in the example that do not make sense to me.
In the "Off Canvas" template example, there are div elements that reference classes such as "row-offcanvas", "row-offcanvas-right", and "sidebar-offcanvas". I cannot find these in the bootstrap.css, and neither do I see these in the Chrome DevTools. I also do not see any effect when I remove these classes. Do these classes have any purpose? Or was it a mistake in the example to include those seemingly non-existent classes?
As #mgttlinger mentioned the css is defined at offcanvas.css See http://getbootstrap.com/examples/offcanvas/offcanvas.css
If want to a walk through of how it works see http://www.kendoui.com/blogs/teamblog/posts/13-11-05/creating-a-rwd-off-canvas-layout-with-bootstrap-3.aspx. It uses http://getbootstrap.com/examples/offcanvas/ as the starting point and explains the css used to create off canvas.
http://bradfrost.github.io/this-is-responsive/patterns.html#off-canvas is an excellent resource for more background on off canvas and most other responsive design patterns.
If you look at the page source closely you will find that in the header there is
<!-- Custom styles for this template -->
<link href="offcanvas.css" rel="stylesheet">
These classes are defined in there. And at least for me it does make a clearly visible difference if I remove this.
i did experience the same dunno what i did wrong but js didnt seems to work i just remove all codes and link back all js and css not working. So i try other js on my other folders it work and copy them on my empty offcanvas page it works. Then put back all templates code and it works fine now i guess its my machine some components stop responding maybe just try restart.