I have the following simple page:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div#card
{
border: 1px solid black;
width: 65mm;
height: 65mm;
}
div#circle
{
width: 20mm;
height: 20mm;
-webkit-border-radius: 10em;
border: 1px solid black;
margin-top: 5mm;
}
</style>
</head>
<body>
<div id="card"></div>
<div id="circle"></div>
</body>
</html>
When printing the page, I expect it to output a 65mm square, but it is 70mm and the circle is also a bit bigger than 20mm. How to ensure an exact printing size?
Thanks.
To make our web page print-friendly, we need to use separate css for print like:
<link rel="stylesheet" type="text/css" href="print.css" media="print">
The above css will be applicable for only at the time of printing web pages.
Please refer the following links for more details:
http://webdesign.about.com/cs/css/a/aa042103a.htm
http://www.killersites.com/articles/newsletterArchive/Newsletter_Nov3_2003.htm
http://envisionic.com/webtips/user_experience/printer_friendly.php
Related
i wanted to ask why my picture is not getting inside the first container when i set it as background image.
did i made the path wrong?
this is so far the code i have
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<div class="first-image">
<h1>Delije</h1>
</div>
</body>
</html>
.first-image {
background-image: url(./images\pattern.jpeg);
border: 2px solid red;
}
The image url needs to be a string:
background-image: url('./images/pattern.jpeg');
The CSS should be like this:
.first-image {
background-image: url(images/pattern.jpeg);
border: 2px solid red;
}
The forward slash is the correct form of the addressing.
Your path is incorrect
url(./images\pattern.jpeg)
You have one / and then \
The path is incorrect, your code should be this instead.
.first-image {
background-image: url('images/pattern.jpeg');
border: 2px solid red;
}
<!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.
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>
Hi well I basically want to move down my logo div which is inside my topBar div however when ever I use padding or margin it moves the whole top bar down or the logo just repeats its self (and yes I have tried background-repeat: no-repeat)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<body lang="en">
<div class="alert">Do you want advertsing space? Contact us: <b>advertising#chattrd.com</b></div>
<div class="topBar">
<div id="logo">
<p>chattrd</p>
</div>
</div>
</body>
</html>
body {
background: #F7F7F7;
font-family:Tahoma, Geneva, sans-serif;
margin: 0;
padding: 0;
}
.alert {
font-size: 10px;
color: #FFF;
background: #1f1f1f;
height: 14px;
padding-left: 10px;
font-family: Arial;
}
.topBar {
background: #0C3;
height: 40px;
}
#logo {
background-image:url(../images/logo.png);
height: 26px;
width: 121px;
overflow: hidden;
display: block;
text-indent:-999px;
}
The reason it is behaving this way is that you are using the image as a background. If you want to carry on with this approach, the easiest way to be able to move it vertically is to place another div before the #logo-div like so:
<body lang="en">
<div class="alert">Do you want advertsing space? Contact us: <b>advertising#chattrd.com</b></div>
<div class="topBar">
<div id="spaceDiv"></div>
<div id="logo"></div>
</div>
</body>
The height of the spaceDiv can be used to move the #logo-div using the following CSS:
#spaceDiv{
height:6px;
}
I am just learning less.I have my html file like this
<!DOCTYPE HTML>
<html lang="en-IN">
<head>
<meta charset="UTF-8">
<title>.::LESS::.</title>
<link rel="stylesheet" type=text/css"" href="style.less" />
<script type="text/javascript" src="less.js"></script>
</head>
<body>
<div class="box1">This is box1</div>
<div class="box2">This is box2</div>
<div class="box3">This is box3</div>
</body>
</html>
and my style.less file is like this
#blue : #00c;
#light-blue: #blue + #333;
#deep-blue: #blue - #333;
.box1 {
background-color: #blue;
}
.box2 {
background-color: #light-blue;
}
.box3 {
background-color: #deep-blue;
}
But after all this when I am going to check the html page from the browser it is not showing anything.If I am changing the values of background-color to any color values then the background color can be seen over there.Can some one tell me where is the wrong part?Any help and suggestions will be welcome.Thanks in advance.
You are missing an # for light blue. Is this how it is supposed to look like?
Your code compiles correctly to
.box1 {
background-color: #00c;
}
.box2 {
background-color: #3333ff;
}
.box3 {
background-color: #000099;
}
However, the following line you wrote:
<link rel="stylesheet" type=text/css"" href="style.less" />
should be:
<link rel="stylesheet/less" type="text/css" href="style.less" />
Try this and check again if it works.