Example:
This is my simple HTML document:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<section id="left"> Put an image anywhere in this box.</section>
<section id="right"> </section>
<img id="tree" src="file:///home/john/Desktop/javascripts%20basics /ashtree.jpg">
</body>
<footer>
<script src="john.js"></script>
<link href="john.css" text="text/css" rel="stylesheets.css">
</footer>
</html>
This is my simple CSS document:
#left {
float: left;
width: 250px;
height: 250px;
margin: 5px;
border: 3px solid blue;
}
#right {
float: left;
width: 250px;
height: 250px;
margin: 5px;
border: 3px solid green;
}
The HTML loads in my firefox web-browser, but the css does not.I downloaded chromium as well and it doest work either. Ive checked many examples and I think I got it right. The question is...where do I look next to solve this problem. I have no clue where to start as I am not very educated with computers.
You weren't kidding around. You really are getting your ass kicked by stupid stuff.
It looks like you haven't linked in you stylesheet properly You need to link it in your <head> section - it won't work in the footer. Even if you moved what you have in your footer to your <head> it is malformed.
Take a look at this example:
<head>
<link rel="stylesheet" type="text/css" href="john.css">
</head>
Related
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>erjan_vue</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<div id="erjan_vue_1">
<h1>events tutorial</h1>
<div id="canvas" v-on:mousemove="updateXY">{{x}}, {{y}}</div>
</div>
<script src = "main.js"></script>
</body>
</html>
But it's only visible when I change it in inspect chrome mode. I can change its bg color and see it:
Actual styles.css not working:
#canvas{
padding:200px 20px;
border: 5px solid red;
height: 200px;
border-color: red;
background-color: red;
width: 500px;
text-align: center;
}
taken from the tutorial here
The tutorial I m following was written a year ago(april 2017) and has no actual app.vue file which should have 3 things:
<template>
<script>
<styles>
Now this "styles" is where css stuff should go to.
I followed the advice of Sazzad Hosan from the comments above and just added a very ugly inline style:
<div style="padding:200px 20px;
border: 5px solid red;
height: 200px;
border-color: red;
background-color: red;
width: 500px;
text-align: center;" id="canvas" v-on:mousemove="updateXY">{{x}}, {{y}}</div>
</div>
And it worked, like Sazzad said - "inline styles" take precedence over others.
As per the question, I am attempting to figure out where "​​" is coming from in my CSS. I use FlashDevelop, and up until now, it has worked fine. I have a min file I'm uploading to the site, and ​​ appears at the end of it, sometimes in the middle before the last little rule. Has anyone else encountered this kind of problem before? My CSS is mostly just class rules, rather basic defining columns. I am using Bootstrap and Font Awesome alongside it, but this just started happening today.
This is my code pre-minify:
html, body {
height: 100%;
background-color: #e6eded;
}
.box {
height: auto;
overflow: hidden;
}
.right {
width: 240px;
float: right;
background: #aafed6;
}
.header {
height: 55px;
background-color: #818181;
}
.left {
float: none; /* not needed, just for clarification */
background: #e8f6fe;
/* the next props are meant to keep this block independent from the other floated one */
width: auto;
overflow: hidden;
}
After FlashDevelop produces the minified file and uploads it, I get this:
html,body{height:100%;background-color:#e6eded;}
.box{height:auto;overflow:hidden;}
.right{width:240px;float:right;background:#aafed6;}
.header{height:55px;background-color:#818181;}
.left{float:none;background:#e8f6fe;width:auto;overflow:hidden;}
​​
This is the remainder of the template I'm working on as requested.
<!DOCTYPE html>
<html lang="en">
<!-- BEGIN HEAD -->
<head>
<meta charset="UTF-8" />
<title>Teonnyn.com</title>
<meta content="" name="description" />
<meta content="" name="author" />
<?PHP echo $this->Html->css("bootstrap.min"); ?>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<?PHP echo $this->Html->css("main.min"); ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</head>
<body>
<div class="box">
<div class="header">
</div>
<div class="right">
Test
</div>
<div class="left">
</div>
</div>
</body>
</html>
#Tomalak provided the correct answer. While I had to hunt for the symbol, opening a plain text editor displayed the actual code and allowed me to delete it correctly.
I'm trying to get the Google Map div fixed so it becomes always visible, but somehow the style property "position:fixed" is not working. The code is the following:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="layout" content="main" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
Some script
</script>
</head>
<body onload="initialize()">
<div class="nav">
First div
</div>
<div id="artistList">
Second div
</div>
<div id="map_canvas" style="position: fixed; right: 0px; top: 0px; width: 100%; height: 100%">
Map div
</div>
</body>
</html>
Any help? Thanks very much
This will solve it:
<div id="fixed" style="position:fixed; top:0">
<div id="map_canvas" style="width:100%; height:100%">
[map content goes here]
</div>
</div>
You should clean up your code a little to make things more visible. At first you should move the css style settings from your map_canvas into your css section in the html head. What remains is a clean <div id="map_canvas"></div>. Now let's head to your CSS section in the html head. Try it like this:
<style type="text/css">
html {}
body {margin: 0px; padding: 10px }
#map_canvas {
position: fixed;
right: 0;
top: 0;
width: 90%;
height: 90%;
border:1px solid #f00;
margin:10px;
}
</style>
I removed the height:100%; from html and body. I reduced to sizes of the canvas from 100% to 90% and gave it a red border and a margin of 10px to make things more clear. The div is set in the upper right corner now and is fixed. I tested it on FF, Chrome, Safari and IE.
But now one little question... Does it make sense to make the canvas 100% wide and high?! The map_canvas would hide everything else in your html...?
Najeeb's solution did not work for me.
Changing the map elements css (from position:absolute to position:fixed) after the "tilesloaded" map event seemed to work.
I wanted the footer on a mobile site I was working on to stick to the bottom of the page. I found the CSS Sticky Footer example by Ryan Fait and implemented it. On every browser I could conceivably test, I found the footer to stick nicely to the bottom.
And, then it happened. The clients complained about the footer throwing itself all over the place. On painfully requesting details, I found out that the problem occurred on only one model of BlackBerry mobile devices: the 8250 model. I pulled out a Windows VM, downloaded and installed the BlackBerry 8250 simulator, and sure enough, I saw the problem.
For a page the height of two BlackBerry screens, the footer sticks to the middle of the first screen, on top of everything else. The footer does not move as you scroll, and if you scroll down to the lower half of the page, the footer is not visible. It stays fixed to the middle of the top screen.
I will post the HTML and CSS to the end of this question. If I could get any pointers or clues as to why this is happening on the 8250 BlackBerry model, and not least, how it could be fixed, I would be very very grateful.
Thank you!
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;"/>
<style type="text/css">
* { margin: 0; padding: 0; }
html { height: 100%; }
body { height: 100%; }
.page {
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.push {
height: 4em;
}
#footer {
clear: both;
position: relative;
z-index: 10;
height: 4em;
margin-top: -4em;
text-align: center;
}
</style>
</head>
<body>
<div class="page">
<!-- lots of other DIVs here for actual content -->
<div class="push"></div>
</div>
<div id="footer">
<!-- footer content over here -->
</div>
</body>
</html>
I found this jQuery Sticky Footer hack. I am not too sure of whether this is going to be something people would suggest I should go with. I've not tested it yet, though.
Update: This is a small update to say that I toyed with the jQuery Sticky Footer hack linked right above. It didn't work for the BlackBerry device mentioned, either.
After trying a couple of different things, I stumbled into the CSSStickyFooter solution. I implemented it and found it to work well on the Black Berry device in question, along with the rest of everything I have tested it on. I am going to paste the HTML and CSS code below:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;"/>
<title>Another CSS Sticky Footer that works on Black Berry</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
.page {
width: 100%;
min-height: 100%;
}
.push {
padding-bottom: 4em;
overflow: auto;
}
#footer {
position: relative;
margin-top: -4em;
height: 4em;
clear: both;
background-color: red;
}
</style>
</head>
<body>
<div class="page">
<div id="content">
<p>Some body content will come here</p>
<p>And over here as well.</p>
</div>
<div class="push"></div>
</div>
<div id="footer">
<p>This is the footer block.</p>
</div>
</body>
</html>
even after many lines i've written in css and html, the css-behaviour still manages to surprise me - in a bad way.
I was putting together a sample site for a friend to show him how he could build his layout,
but Firefox 3.0.5 and IE8 create margins between my #header, #content, and #footer-divs out of nowhere. If i switch in IE7 Mode, the margins disappear.
CSS:
html, body {
background-color: #fff;
margin: 0;
padding: 0;
width: 100%;
}
#page {
background-image: url('bg_gradiant.png');
background-repeat: repeat-y;
width: 950px; /* 770px + 2 * 90px; */
margin: 0 auto;
padding-left: 90px;
}
#header {
width: 770px;
margin: 0;
padding: 0;
}
#header #row1 {
background-color: #9ab3ba;
height: 50px;
}
#header #row2 {
background-color: #517279;
height: 50px;
}
#content {
width: 770px;
background-color: #d7e9ed;
}
#footer {
background-color: #5eb6cc;
width: 770px;
height: 150px;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="./style.css" />
<title>Test</title>
</head>
<body>
<div id="page">
<div id="header">
<div id="row1"></div>
<div id="row2"></div>
</div>
<div id="content">
<p style="height: 600px">Beware of the Content</p>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
You can view this page here: https://codepen.io/lx-s/pen/eRrOpL
Browsing through the IE Developer Tools and Firebug showed me that they were no default-margin values set for these div's, but as one can see, they are there.
Hope you can give me a hint how to get rid of them - it's seriously driving me crazy.
Thanks in advance!
Add the following to your stylesheet:
* {
margin: 0;
}
It's not the DIV but the P tag that has the margin set by default. I tested setting it to 0 and the space disappeared.
The margins are on the p tag in the #content div
Hope this helps you a little
You need to use a reset css. You should do this on every Web page/site you develop. A good reset CSS will remove many of the default settings and make cross-browser look and feel much less painless.
There are several of these around such as Eric Meyer's or the Yahoo UI Reset CSS.
When I've seen this before, I've added a padding-bottom:1px to the bottom of the containing DIV so that I can keep the margins on the Paragraphs
Hope that helps