I wrote new CSS for my page here and it wouldn't update. So cleared my cache on Google Chrome by going to chrome:settings/clearBrowsingData, ya know the normal stuff and it still wouldn't update. So I went on my iPad just to see if it was a fluke on my computer's half but it wasn't updated on there either. So I came here. Any suggestions? Here is my styles.css and index.html:
STYLES:
* {
margin: 0;
padding: 0;
}
html {
font-size: 10px;
scroll-behavior: smooth;
font-family: "Nunito", sans-serif;
}
a {
text-decoration: none;
}
.title {
text-align: center;
padding-top: 20rem;
}
.title h1 {
font-size: 3.5rem;
text-align: center;
}
.title h3 {
font-size: 2rem;
padding-bottom: 2rem;
}
.title a {
text-transform: uppercase;
color: #fff;
background: #333;
padding: 1rem 2.5rem;
border-radius: 8px;
font-size: 1.3rem;
transition: color 650ms, background 650ms;
}
.title a:hover {
color: #555;
background: #eee;
}
#media only screen and (min-width: 768px) {
.title {
padding-top: 30rem;
}
.title h1 {
font-size: 8rem;
}
.title h3 {
font-size: 4.5rem;
}
.title a {
font-size: 2.5rem;
padding: 1.5rem 3rem;
}
}
#media only screen and (min-width: 1000px) {
.title {
padding-top: 25rem;
}
.title h1 {
font-size: 5rem;
}
.title h3 {
font-size: 3.5rem;
}
.title a {
font-size: 1.3rem;
padding: 1rem 2.5rem;
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<link href="styles.css" rel="stylesheet" type="text/css">
<title>Error 404</title>
<link rel="icon" href="logo.png">
</head>
<body>
<div class="title">
<h1>Not Found</h1>
<h3>This page either does not exist or<br> you don't have permission to view it. <br>(Error: 404)</h3>
Back to Home
</div>
</body>
</html>
You can call the different version of the same css file like this:
<link href="styles.css?v=1" rel="stylesheet" type="text/css">
Because you have given the name as styles.css without a starting /, the file will be downloaded from the same directory as the html file. And there is no styles.css in your 404 folder. So change style.css to /styles.css and it will work.
I have issue with background for element article. I use :nth-child(n), but they do not work correctly at my localhost. When I same code place to jsfiddle all is ok.
Code at my local is following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:: Nove pokusy s Yablkem ::</title>
<link rel="stylesheet" href="/ath/css/normalize.css">
<link rel="stylesheet" href="/css/yablko.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<article>Jsem ve středě?</article>
<article>Všichni co se moc ptají se nic nedozví...</article>
<article>Marmelada</article>
<article>Sýrové kuličky || Menu</article>
</body>
</html>
CSS (yablko.css)
html, body {
height: 100%;
}
body {
padding: 1em;
margin: 0;
background: orange;
font-size: 20px;
display: flex;
align-items: center;
justify-content: baseline;
justify-content: center;
flex-direction: row;
}
article {
padding: 1.2em;
background: #336dd1;
border-radius: .8em;
margin: 5px;
}
article:nth-child(1) { background: #888; }
article:nth-child(2) { background: #ccd; }
article:nth-child(3) { background: #333; font-size: 10px; }
article:nth-child(4) { background: #aaa; font-size: 30px; }
Image from local (bad result):
Image from jsfiddle (ok result):
Can I ask for help? Thanks
I am refining a responsive navigation menu, and would like to have the menu icon clicked to have the drop down menu instead of the hover effect. I am using a Google jquery so I am not sure if that is all ready scripted in the script src or not, and would I have to create the drop down menu manually in jquery or just an easy CSS or html5 fix. Thanks for any feedback.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dan Meier Website</title>
<meta name="description" content="Responsive Header Nav">
<meta name="author" content="Treehouse">
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
<link rel="stylesheet" href="layoutnew.css">
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</header>
CSS
header {
background: #404040;
width: 100%;
height: 76px;
position: fixed;
top: 0;
left: 0;
border-bottom: 4px solid #4C9CF1;
z-index: 100;
}
#logo{
margin: 20px;
float: left;
width: 200px;
height: 40px;
background: img src="images/menuicon.png" no-repeat center;
display: block;
}
nav {
float: right;
padding: 20px;
}
#nav ul.sub-nav {
display: none;
}
#nav ul.visible {
display: block;
}
ul {
list-style: none;
}
li {
display: inline-block;
float: left;
padding: 10px
}
/*MEDIA QUERY*/
#media only screen and (max-width : 640px) {
header {
position: absolute;
}
#menu-icon {
display:inline-block;
}
nav ul, nav:active ul {
display: none;
position: absolute;
padding: 20px;
background: #fff;
border: 5px solid #444;
right: 20px;
top: 60px;
width: 50%;
border-radius: 4px 0 4px 4px;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
Use CSS to style and hide your menu and do the following:
Load jQuery (I can't see that in your code)
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
And you can do something like this (to show and hide the menu on click)
$('#menu-icon').click( function(){
$('nav ul').toggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
Where "menu" is the variable value of your menu. you can declare it like.....
$(function() {
var menu = $('ul li');
});
hope it will help you..... :D
Rj
I'm making a wordpress template from scratch.
I've eliminated many of the files and kept in just the header.php, footer.php, index.php, and style.css to rule out many of my potential problems.
I've played with the code, looked up questions, googled for my solution, but I'm not sure why my style isn't being recognized when i go to my site
the following are my 4 files:
style.css
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
/* MAIN STYLE */
html {
font-size: 20px;
}
body {
}
#bodywrapper {
background: gray;
font-family: arial, sans-serif;
font-size: 5em;
}
header {
height:20em;
background: #000;
color: #fff;
margin: 0 auto;
}
#nav {
}
#nav ul {
list-style-type: none;
}
#nav ul li {
display: inline-block;
padding: 1em;
}
#nav ul li a{
padding: 1em;
text-align: center;
text-decoration:none;
}
#nav ul li a div{
height: 5em;
width: auto;
padding: 1em;
background-color: black;
}
#sandwichwrapper {
margin: 2em;
border: 1em solid black;
}
#sidebar {
float: right;
width: 15em;
margin: 2em;
border: 1em solid green;
}
#main {
float: right;
width: 15em;
margin: 2em;
border: 1em solid blue;
}
#comments{
clear: both;
margin: 2em;
border: 1em solid yellow;
}
#comment-form{
}
footer {
clear: both;
margin: 0 auto;
padding: 1em;
background: #000;
color: #fff;
}
/* BUNDLED STYLES */
header, footer{
width:100%;
margin:0 auto;
padding: 5em;
overflow:auto;
}
nav #sandwich {
width: 50em;
}
/* TEXT RULES */
h1 {
size: 10em;
color: green;
}
h2 {
size: 8em;
}
h3 {
size: 6em;
}
h4 {
size: 4em;
}
h5 {
size: 2em;
}
header.php
<!doctype html>
<html>
<head>
<title>The Logic Spot</title>
<link type="text/css" rel="stylesheet" href="style.css" />
<meta charset="utf-8" />
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
header("Content-type: text/css");
</head>
<body>
<div id="bodywrapper">
<header>
<h1><?php bloginfo('name')?></h1>
</header>
<div id="nav">
<?php wp_nav_menu();?>
</div>
<div id="sandwichwrapper">
index.php
<?php get_header()?>
<!--div#bodywrapper contained in header.php-->
<!--div#sandwich contained in header.php-->
<?php get_sidebar()?>
<div id="main">
<?php while(have_posts()): the_post()?>
<h2><?php the_title()?></h2>
<p>By <?php echo get_the_author_link();?></p>
<?php the_content(__('Continue Reading'))?>
<?php endwhile?>
</div>
<!--div#sandwich contained in footer.php-->
<!--div#bodywrapper contained in header.php-->
<?php get_footer()?>
footer.php
</div> <!-- close div#sandwichwrapper-->
<footer>
<?=date('Y')?> Copyright
</footer>
</div> <!-- close div#bodywrapper-->
</body>
</html>
Add this line in the <head> tag
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
Hey you need to specify absolute path to the stylesheets, for example
<link type="text/css" rel="stylesheet" href="http://www.yourwebsite.com/wp-content/themes/yourtheme/style.css" />
Also as Matt stated, you can use functions like get_stylesheet_directory_url() or get_stylesheet_uri() to make your path more dynamic.
i have a very annoying problem. i have made a design of my site using CSS and it seems to work perfectly in Google Chrome and IE but the CSS designing is not all working in Firefox. what Could be the problem , i tried lots of things its still not working.
As new users are not allowed to post the image. i m unable to explain with the screen shot.
My code in Index.php
<!Doctype html>
<html lang="en">
<title>Online Voting RTC</title>
<head>
<link type="text/css" rel="stylesheet" href="css\style.css">
<script type="text/javascript" src="js\create_text_box.js">
</script>
</head>
<body>
<div id="wapper">
<!-- Define Header -->
<?php include("header.php"); ?>
<!-- End Header -->
<!-- Main content area -->
<?php include("maincontent.php");?>
<!-- End of Main content area -->
<!-- Left Sidebar -->
<?php include("sidebar.php");?>
<!-- End Left Sidebar -->
<!-- Footer -->
<?php include("footer.php");?>
<!-- End of Footer -->
</div>
</body>
</html>
This is the Css portion
body {
background: #ffffff;
margin: 0;
padding: 0;
}
#wrapper {
width: 100%;
height: 100px;
margin: 0;
padding: 0;
border: 0;
float: left;
background: #dddddd;
}
#header {
width: 100%;
height: 100px;
margin: 0;
padding: 0;
border: 0;
float: left;
background: #403cf7;
}
.logo {
float:left;
position:relative;
left:20px;
top:20px;
}
.pagetitle {
float:left;
position:relative;
left:550px;
top:20px;
}
.usermenu {
float:right;
position:relative;
right:20px;
top:20px;
}
#sidebar {
width: 20%;
height: 600px;
margin: 0;
padding: 0;
border: 0;
float: left;
background: #ffff99;
text-align: center;
}
#maincontent {
width: 80%;
height: 600px;
margin: 0;
padding: 0;
border: 0;
float: right;
background: #95dff8;
}
#footer {
width: 100%;
height: 70px;
margin: 0;
padding: 0;
border: 0;
float: left;
background: #272727;
}
/*-----------------------------------------CSS for navigation Menu------------------------*/
#navMenu{
color:#d4d3d3;
font-family:Geneva;
float:left;
}
#navMenu ul li a{
text-decoration:none;
color:#989694;
}
#navMenu ul li a:hover{
color:#f46322;
}
#navMenu ul{
padding:0;
margin:0;
margin-left:25px;
list-style:none;
position:relative;
left:20px;
top:20px;
}
/*----------------------------------------------------------------------------------------*/
i would be very grateful if someone can help me out in this case. Actually i was checking for browser compatibility, and i came across this problem.
Thanks in advance :D
The character “\” (backslash) is not allowed in a URL; change it to “/” (normal slash). Some browsers implicitly convert the incorrect “\” to “/”.
try to remove the type="text/css".
Your code should be look like this:
<link rel="stylesheet" href="css/style.css">
You need to close your link tag
<link type="text/css" rel="stylesheet" href="css/style.css" />
If your css folder is off the route dir of your site you would be better using
<link type="text/css" rel="stylesheet" href="/css/style.css" />
as this will still work if you move your page to a different folder.
You also need to move your title tag within the HEAD element to make the HTML valid.
I had this problem too. Once I removed the z-index of -1 from the container class. the links started working again.