I have a fairly simple HTML file that i'm running on a local server, as it's soon to be turned into a php file. When I run it from the server however, the CSS doesn't display on the page. Opening the index.html file in a web browser shows it just fine.
HTML File:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="description" content="Content goes here"/>
</head>
<body>
<div class="header">
<div class="logo">
<img src="images/logo.png"/>
</div>
<div class="navigation">
<ul>
<li>
<a href="mailto:support#link.com">
<img src="images/email.png"/>
</a>
</li>
<li>
<a href="http://Twitter.com/link">
<img src="images/twitter.png"/>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
CSS file:
.header {
width: 700px;
margin: 0 auto;
margin-top: 25px;
margin-bottom: 25px;
height: 61px;
}
.logo {
float: left;
margin-top: 10px;
}
.navigation {
float: right;
}
.navigation li {
width:60px;
height:60px;
float:left;
margin-left:14px;
border-radius:30px;
}
.navigation li a {
width:60px;
height:60px;
float:left;
background-color:#576f85;
border-radius:30px;
}
.navigation li a img {
padding-left:14px;
padding-top:14px;
padding-right:14px;
padding-bottom:14px;
}
Press ctrl + shift + del, and remove all cache from your browser :) I have to that once in a while to get css working wi
Include the css file like this:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
I would assume you had included the CSS within the HTML originally, viewed it within your browser (locally) then moved it to a separate .css file and forgotten to include the link as per hitchdiddy's answer above.
Now when you view it on your local server it can't find the CSS but the older page has been cached by your browser for the local page which is why you still see your styling when viewing it directly.
Related
I am having a strange issue with HTML/CSS.
When I'm editing the files locally and checking my progress, everything works fine. However, when I send the files to the server and attempt to load the page there, some CSS rules are missing completely. The Firefox Inspector says "no css rules". The files themselves are identical, and they use relative links so the fact that the files are in a different location shouldn't affect anything.
The bizarre thing is that some of the CSS rules are working, but others aren't. Below is one of the elements that isn't working. Locally, the colours, floating etc. all work.
Here's one element that isn't working, alongside the HTML-file's head in case the problem is there:
<!DOCTYPE html>
<html lang="fi">
<head>
<meta charset="UTF-8" />
<link href="./tyyli.css" rel="StyleSheet" type="text/css" media="all"/>
<title>ITKP1011</title>
</head>
<body>
<div class="navigation">
<ul class="navlist">
<li>maecenas
<ul class="navlist">
<li>porta</li>
</ul>
</li>
<li>faucibus
<ul class="navlist">
<li>gravida</li>
<li>proin</li>
<li>aliquam</li>
</ul>
</li>
<li>nunc
<ul class="navlist">
<li>dapibus</li>
<li>sodales</li>
<li>cras</li>
</ul>
</li>
</ul>
</div>
And here's the CSS-file:
body {
font-family: Helvetica, sans-serif;
}
.flex-container {
display: flex;
background-color: #73fcc3;
}
.flex-container > div {
background-color: #73fcc3;
padding: 7px;
margin: 0px;
}
.navigation {
float: right;
background-color: #73fcc3;
border: 5px solid #55f7b3;
padding-right: 100px;
margin: 5px;
margin-top: 20px;
}
.navlist {
padding-left: 1.2em;
}
The answer lied in the cache. I didn't realize it had to be reloaded. I did it by pressing Shift + F5, and everything works again.
I have an issue and i really dont know how to solve it because of my lack of knowledge( i am a begginer) . Well let me explain you. I am building a blogspot, so i have a header and a footer files which I want to get loaded in every .html files in the project. In order to achieve that I used a script which I found in stack overflow.
The script works fine but I have some minor issues with it. But before continue, let me paste my index.html and header.html and my css files to understand better. This is my index.html file which includes the script.
<!doctype html>
<html lang="en">
<head>
<title>The Spooky Side</title>
<meta charset="utf-8">
<meta name="description" content="Front Page">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="articles-box.css">
<link rel="stylesheet" href="``header-footer-style.css">
<link href="https://fonts.googleapis.com/css?
family=Anton|Dosis|Montserrat|Nosifer&display=swap" rel="stylesheet">
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<script>
$(function(){
$("#header-id").load("header.html");
$("#footer-id").load("footer.html");
});
</script>
</head>
<body>
<div class="header-cl" id="header-id"></div>
<div class="footer-cl" id="footer-id"></div>
</body>
</html>
This is the header.html file
<!doctype html>
<html lang="en">
<head>
<title>The Spooky Side</title>
<meta charset="utf-8">
<meta name="description" content="Header Page">
<link href="https://fonts.googleapis.com/css?
family=Anton|Dosis|Montserrat|Nosifer&display=swap" rel="stylesheet">
<link rel="stylesheet" href="header-footer-style.css">
</head>
<body>
<div class="header-cl" id="header-id">
<a class="header-company-name" href="">The Spooky Side</a>
<a class="header-content" id="about1" href="">About</a>
<a class="header-content" href="../blog/blog.html">Blog</a>
<a class="header-content" href="">Contact</a>
</div>
</body>
And finally this is my css file.
/*H E A D E R */
.header-cl{
display:flex;
grid-column:1/-1;
background-color: white;
}
.header-company-name{
font-family: 'Nosifer', cursive;
color:black;
font-size: 2em;
padding-top:17px;
padding-left:30px;
text-decoration:none;
transition-duration: 1.2s;
}
.header-content{
font-family: 'Dosis', sans-serif;
color:black;
font-size: 1.6em;
text-decoration:none;
padding: 20px;
transition-duration: 0.7s;
/*^^^space between buttons^^^*/
}
/*F O O T E R */
.footer-cl {width : 100%;grid-column:1/-1;background-color:
black;color:white;
}
.footer-company-name {
display:flex;
justify-content: center;
align-items: center;
font-family: 'Dosis', sans-serif;
font-size: 1.4em;
padding-top:20px
}
.footer-content{
display: flex;
justify-content: center;
align-items: center;
margin:0px;
}
.footer-anchors{
font-family: 'Dosis', sans-serif;
color:white;
font-size: 1em;
text-decoration:none;
}
/*HOVERS DAMN*/
.header-content:hover{
color: #FF0000;
}
.footer-anchors:hover {
color: #510000;
}
.header-company-name:hover{
color:#FF0000;
}
/*I D S */
#about1{
margin-left: auto;
}
/*space between blog's name and other options */
And now which is the issue. I am going to post three screenshot. When I run the header.html I got this result which is the right one,(I dont post the footer.html because is the same with the header)which is looks like this.
header.html
But when I run the index.html in the Atom it looks like this.
index.html run in Atom
And finally when I run my code in google chrome it looks like this[Index HTML run in google chrome3
As you can see this is my problem. In google the header and the footer are not displayed,and i really dont know why. But in the atom the index.html displays the header but without the correct form, and finally in the header.html when I run it its correct. Anyone have idea why this happening or how can I fix that?
how folder looks
It looks like you need to load a fragment (just the contents of #header-id from header.html into #header-id on index.html)
Try this:
$("#header-id").load("header.html #header-id");
https://api.jquery.com/load/#loading-page-fragments
I created following web page along with a css file in which I am trying to put a pic with two lines in the header section, but the text lines come out from the header file. Thanks in advance.
#header {
background-color: lightblue;
height: 150px;
}
#header h1, h2 {
text-align: center;
}
<html>
<head>
<title>Perfect Page</title>
<link href="css/tsgeneral.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id ="header">
<img src="pics/ts1.jpg" height="150" width="150" alt="tsIncanda">
<h1>Tss Fans Page</h1>
<h2>Welcome Fans</h2>
</div>
</body>
</html>
Use float on the image.
#header img {
float: left;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="generator" content="HTML-Kit Tools HTML Tidy plugin">
<link href="layout.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<div class="square" font=10px>
<p></p>
</div>
<div id="wrapper">
<img class="A" src="download.jpg" alt="Solar Panels"/>
<img class="B" src= "wind.jpg" alt="Windmills" />
<img class="C" src= "biomass.jpg" alt="Biomass" />
<img class="D" src= "renewable.jpg" alt="Renewable Energy" />
</div>
<hr>
<div id = "bottom">
<p>Contact:*********#gmail.com</p>
</div>
</body>
</html>
Here is my css
<style type="text/css">
p {
color:#f5f5dc;
font-size:50px;
text-align: center;
margin-top: 20px;
}
body{
background-color:#fffacd;
font-size:100%;
min-width:800px;
}
.square{
height: 100px;
width: 100%;
position:relative;
left:-20px;
border: 2px solid black;
border-radius: 5px;
background-color:#0066cc;
font-size:1.0em;
}
#wrapper{
width:100%;
margin-top: 40px;
margin-bottom: 40px;
}
.A, .B, .C, .D{
width:300px;
height:200px;
float:left;
border:1px solid black;
margin-right:10px;
margin-bottom:40px;
}
.D{
width:270px;
}
#bottom p{
color:black;
font-size:15px;
}
</style>
This is my code how can i minimize it without it squishing together?
i have tried making containers.
I have tried everything.
I added my css. When I say minimize, I mean when you make the page smaller. Everything gets squished together and the pictures go on top of each other and it looks horrible. It's fine when you maximize it.
You can use responsive CSS from bootstrap and can use its class when formatting.
http://getbootstrap.com/2.3.2/
for example.
<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
A wild guess, set a min-width to the body.
INLINE
<body style="min-width: 800px;">
OR IN YOUR STYLESHEET
body {
min-width: 800px;
}
Change the 800px to the required minimum width you want. Then when the browser resizes to a width smaller than that number, the scrollbars will appear.
Please refer the fiddle and update it,
I have updated small errors, with one closing div missing,
and that with strict DTD in the heading, is the main reason for ruin the formatting..
you may use transitional/loose DTD if still learning,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
I am sure this will do, but still if problem persist, please update fiddle and post back the new link, with all codes.
Thank you for updating code of CSS, now after looking at your CSS, I can say the problem was float and I have updated my fiddel for the same, that works fine with Google Chrome Browser, please let me know if any problem persist, with specification.
Your problem is yours tag are not responsive in your views.
The easiest way is
Download bootstrap css and link in your html.
<!DOCTYPE html>
<html>
<head>
<style>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="bootstrap_responsive.css">
</style>
</head>
<body>
<p>hello world.</p>
</body>
</html>
and check
http://getbootstrap.com/2.3.2/scaffolding.html#fluidGridSystem for futher details.
If you dont want to use bootstrap
there is purecss for second choice
http://purecss.io/
In light of the answers to the original question I had, I have amended my code. I was hoping if someone could tell me if this is a better approach in comparison. My original post and code is below.
UPDATED CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content= "" />
<title>Example</title>
<base href="" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#wrapper {
}
#header {
background-image: url('images/bg-inner-page.gif');
height: 200px;
}
#logo {
float: left;
margin-top: 50px;
margin-left: 100px;
}
#topnav {
float: right;
margin-top: 50px;
margin-right: 1250px;
}
#topnav ul {
word-spacing: 10px;
}
#topnav ul li {
list-style-type: none;
display: inline;
}
#content {
background-color: orange;
}
#footer {
background-color: blue;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
logo
</div>
<div id="topnav">
<ul>
<li>home</li>
<li>about</li>
<li>browse</li>
<li>faq</li>
<li>contact</li>
</ul>
</div>
</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
</body>
</html>
ORIGINAL POST
I am new to the world of coding as well as CSS. I am attempting to line up CSS elements however unaware how I can place some sort of lines to get the exact line-height, position, etc. I attempted to use FireBug however to no avail. Is there some of tool I can use that possible places a grid over the canvas?
EDIT
Here is a sample of the code I am working with.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content= "" />
<title>Example</title>
<base href="" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#wrapper {
}
#header {
background-image: url('images/bg-inner-page.gif');
height: 200px;
}
#logo {
width: 20px;
position: relative;
top: 50px;
left: 100px;
}
#topnav {
width: 500px;
position: relative;
top: 14px;
left: 150px;
}
#topnav ul {
word-spacing: 10px;
}
#topnav ul li {
list-style-type: none;
display: inline;
word-spacing: 10px;
}
#content {
background-color: orange;
}
#footer {
background-color: blue;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
logo
</div>
<div id="topnav">
<ul>
<li>home</li>
<li>about</li>
<li>browse</li>
<li>faq</li>
<li>contact</li>
</ul>
</div>
</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
</body>
</html>
It is generally inadvisable to do pixel-by-pixel layout in webpages. You can never tell with which browser, which resolution on which platform and with which fonts installed your future customer will view the page.
Use HTML and CSS to specify a logical layout of the document. Tell the rendering machine, which parts have enphasis, which are less important and so on and let the renderer decide how to represent it the best way on the target display and UI-theme.
If you start worrying about pixel-exact line heights, your page most probebly will look swell on one browser, in one resolution on one platform and in the rest of the world like turd.
Move from physical mark-up to logical mark-up.
The Web Developer Extension for firefox ( http://chrispederick.com/work/web-developer/ ) has a grid function.
Alternatively, in html/css, you can create an overlaying, full-screen div with a grid background to give you the visual, but its not the best solution since you'd also have to make it the highest z-index element, or make all other elements have a background of transparent, which could screw with your design.
Highly suggest just using the plug in, you don't want to mix in html/css just as a developer tool too much.
<subjective>Whilst I agree with the sentiment of "don't do pixel-level design", sometime the requirements of the project demand it. Using a reset css like YUI-reset is one of the better ways to have most browser renderings consistent, but also requires you have stye declarations for all the elements from the ground up. </subjective>
I agree with Hyperboreus above, trying to make the site exactly the same in all browsers is a recipe for a headache.
But, I've often used xscope (http://iconfactory.com/software/xscope) to overlay guidelines and grids on my mac to line things up. It's not free, but it's well worth the $25.
Edit: Just saw your code. If you're just trying to get the logo and nav on the same line, try something like this:
<title>Example</title>
<base href="" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#header {
background-image: url('images/bg-inner-page.gif');
height: 200px;
}
#logo {
width: 20px;
float: left;
margin-top: 50px;
margin-left: 100px;
}
#topnav {
width: 500px;
margin-left: 150px;
margin-top: 14px;
}
#topnav ul {
word-spacing: 10px;
}
#topnav ul li {
list-style-type: none;
display: inline;
word-spacing: 10px;
}
#content {
background-color: orange;
}
#footer {
background-color: blue;
}
</style>
<div id="wrapper">
<div id="header">
<div id="logo">
logo
</div>
<div id="topnav">
<ul>
<li>home</li>
<li>about</li>
<li>browse</li>
<li>faq</li>
<li>contact</li>
</ul>
</div>
</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
You can see it here: http://jsfiddle.net/BRKrx/