I am trying to make a site, using a background image:
(CSS)
body {
text-align: center;
background-image: url("../img/clouds.jpg");
background-size: 100% 760%;
}
and I also have on the top of the page this:
(HTML)
<div class="pageTitle">
<p>Title of Page basically</p>
</div>
(CSS)
.pageTitle {
font-size: 200%;
}
When I try to make the font-size bigger, the background image grows as well (looks like it's zoomed in, basically).
I suppose this has to do with the usage of percentages, but even when using em notation or px I still get the same result.
How can I make the pageTitle bigger without altering my background image's size?
What seems to make it work is altering the background-size: 100% 760%; to background-size: 100% 250%; (in my case), but still, whenever an element is altered it needs fixing as a whole.
Code Snippet:
var currentQuote = '';
var availableQuotes = [ 'bla','blo','ble','foo','bar'
];
function setRandomQuote() {
currentQuote = availableQuotes[Math.floor(Math.random() * availableQuotes.length)];
$('#quote').html(currentQuote);
$('#tweetQuote').attr('href', 'https://twitter.com/intent/tweet?text=' + currentQuote).attr('target', '_blank');
}
$(function () {
$('#randomQuote').click(function () {
setRandomQuote();
});
});
.w3-tangerine {
font-family: 'Tangerine', serif;
font-size: 200%;
margin-top: 10%;
margin-bottom: 5%;
}
body {
text-align: center;
background-image: url("https://images.pexels.com/photos/850674/pexels-photo-850674.jpeg?cs=srgb&dl=agriculture-animal-photography-animals-850674.jpg&fm=jpg");
background-size: 100% 250%;
}
p {
font-size: 100%;
}
#randomQuote, #tweetQuote {
margin: 3% 1% 3% 1%;
}
#quote {
margin: 2% 2% 2% 2%;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Random Quote Generator</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<noscript>Sorry, your browser does not support JavaScript!</noscript>
</head>
<body>
<div class="w3-tangerine">
<p>Just Another Random Quote Generator</p>
</div>
<div id="quote">
Click on the button to generate a quote!
</div>
<div>
<input id="randomQuote" type="button" class="btn btn-primary" value="Generate a Quote!">
<a id="tweetQuote" class="btn btn-primary" href="#">Tweet this Quote <i class="fa fa-twitter"></i></a>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
without set the height of a body the precent of height of the background is as a height of a contant. so 760% background-height is text-height*7.6. it is why when you change the size of the image the size of the image grow too.. what you can do is set
html, body{
height:100%;
}
and then it wil calculate precent of the whole page size (so in your case you will see only 1/7.6 of the height of the image).
There's an article, which describes the exact problem, that you have.
One of the solutions is to provide the following attribute to body. This will ensure everywhere is covered:
body {
...
background-size: cover;
}
var currentQuote = '';
var availableQuotes = [ 'bla','blo','ble','foo','bar'
];
function setRandomQuote() {
currentQuote = availableQuotes[Math.floor(Math.random() * availableQuotes.length)];
$('#quote').html(currentQuote);
$('#tweetQuote').attr('href', 'https://twitter.com/intent/tweet?text=' + currentQuote).attr('target', '_blank');
}
$(function () {
$('#randomQuote').click(function () {
setRandomQuote();
});
});
.w3-tangerine {
font-family: 'Tangerine', serif;
font-size: 200%;
margin-top: 10%;
margin-bottom: 5%;
}
html, body {
height: 100%;
}
body {
text-align: center;
background-image: url("https://images.pexels.com/photos/850674/pexels-photo-850674.jpeg?cs=srgb&dl=agriculture-animal-photography-animals-850674.jpg&fm=jpg");
background-size: cover;
}
p {
font-size: 100%;
}
#randomQuote, #tweetQuote {
margin: 3% 1% 3% 1%;
}
#quote {
margin: 2% 2% 2% 2%;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Random Quote Generator</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<noscript>Sorry, your browser does not support JavaScript!</noscript>
</head>
<body>
<div class="w3-tangerine">
<p>Just Another Random Quote Generator</p>
</div>
<div id="quote">
Click on the button to generate a quote!
</div>
<div>
<input id="randomQuote" type="button" class="btn btn-primary" value="Generate a Quote!">
<a id="tweetQuote" class="btn btn-primary" href="#">Tweet this Quote <i class="fa fa-twitter"></i></a>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
Related
I am using wordpress and I have a Iframe with a leaflet map inside it. But on the left there is a lot of white space. And I want that the leaflet map will cover the full widht. So this is the code of the iframe:
<!DOCTYPE html>
<html>
<html lang="en-us">
<head>
<title>GeoVerdeling</title>
<meta charset="UTF-8">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="description" content="Show geometric distribution">
<meta name="author" content="Victor Bom">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src=
"https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src=
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"/>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
<style>
#peMap {height:1000px;
width: 100%;
background: rgba(76, 175, 80, 0.0);
border:5px double #000000}
div { margin-left:auto;
margin-right:auto;}
.center { margin-left: auto; margin-right: auto; }
</style>
<script>
$(function()
{
var dlist=[
["aa en hunze",53.0104848,6.7495285,1320.00,7],
];
var maxBounds=[
[50.800,3.259], //Southwest
[53.565,7.335]]; //Northeast
var peMapOptios={'maxBounds':maxBounds, 'zoomSnap':0, 'zoomDelta': 0.5,
'wheelPxPerZoomLevel':120, 'minZoom':7.5, 'maxZoom':11};
var circleOptions={color:'red', fillColor:'#f03', fillOpacity:0.5};
var peMap=L.map('peMap',peMapOptios).setView([52.2,5.3],7.7);
L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png',
{attribution:'© OpenStreetMap'}).addTo(peMap);
L.control.scale().addTo(peMap);
var i;
for ( i=0;i<(dlist.length);i++ )
{ circle=L.circle([dlist[i][1],dlist[i][2]],dlist[i][3],circleOptions).addTo(peMap);
circle.bindPopup(dlist[i][0]+":"+String(dlist[i][4]));
};
});
</script>
</head>
<body>
<h3 style="text-align:center">Deelnemers per: 2022-05-27 </h3>
<div id="peMap"></div>
<br>
<p> Geregistreerde deelnemers: 3984, Bekende gemeenten: 331, Deelnemers toegekend aan gemeenten: 3161</p>
</body>
</html>
and this is how it looks like now:
So you see on the left there is a lot of space. And of course on a mobile phone it has to be rendering also correct.
So what I have to change?
Thank you
if I do it like this:
<style>
html, body
{
margin: 0px; padding: 0px
}
#peMap {height:1000px;
width: 100%;
background: rgba(76, 175, 80, 0.0);
div { margin-left:auto;
margin-right:auto;}
.center { margin-left: auto; margin-right: auto; }
</style>
<script>
still on the left a lot of white space. Even on mobile
There isn't anything wrong with the code you've written. This just has to do with the interesting world of web development, where most browsers have a default stylesheet attached to web pages.
In your case, it has to do with the <body></body> element having a default margin: 8px. You'll simply need to override this with body { margin: 0px; }.
Here's some fun reading and discussion about this.
I want to create contents in the image, and stop the draggable window to appear below. Z-index dosen't work. It destroys the font (probably) and breaks the title. Any other methods that don't cause problems? I will appreciate the help if you solve this.
If you wanna know the project is, It's a windows-98/95 like thing. I will change the project's name soon.
And please note: The font only works on the website. (https://oli.neocities.org/windows97/)
Code: https://jsfiddle.net/9p28gLvb/
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://oli.neocities.org/style.css" rel="stylesheet" type="text/css" media="all">
<script>
$( function() {
$('#window').draggable({containment:"#Image"});
} );
</script>
<style>
img {
contain: content;
}
#window {
background-color: #B9BABD;
height: 162px;
width: 404px;
font-family: 'Normal';
}
.windowtitle {
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
width: 404px;
height: 20px;
font-size: 16px;
color: white;
font-family: 'Normal';
}
.windowbody {
}
button {
display: block;
background-color: #B9BABD;
border-color: black;
font-family: 'Normal';
}
#font-face {
font-family: 'Normal';
src: url('https://oli.neocities.org/windows97/fonts/normal.ttf') format('truetype');
}
</style>
</head>
<body>
<img src="https://oli.neocities.org/windows97/images/background.png" id="Image" style="background-size: cover; width:100%;height:100%;">
<div id="window">
<div class="windowtitle">
<b>System</b>
</div>
<div class="windowbody">
<center>
<div style="clear: left;">
<p style="float: left;"><img src="/windows97/images/bubble_i.png" height="48" width="48"></p>
<p>Zoom to 67% for the best experience.</p>
</div>
</center>
<center>
<button>OK</button>
</center>
</div>
</div>
</img>
</body>
</html>```
fixed it
i made an container..
(edit: i'm currently working on the project, will get code later.)
I have a jumbotron bootstrap width that covers the whole page. I want to implement a style where it doesn't covers the whole page. Is there any attribute I can apply that I can adjust the width?
/* style -- this is the stylesheet */
.jumbotron {
font-size: 17px;
cursor: pointer;
width: 5px;
}
.mycustom-jumbotron {
border:10px solid #003366;
width: 300px;
margin: 0 auto
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="jumbotron mycustom-jumbotron text-center">
<h1>Bootstrap</h1>
<p>Bootstrap Web Design</p>
</div>
.jumbotron-test {
font-size: 17px;
cursor: pointer;
width: 50%;
text-align:Center;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="jumbotron jumbotron-test">
<h1>Jumbotron</h1>
<p>Testing Jumbo tron</p>
</div>
I currently have an issue with my page, where the contents of the page are not filling 100% of the screen. (Laravel 4.2)
See Image
My code is as follows
master.blade.php
HTML/Javscript code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Timetable</title>
<link rel="icon" href="/images/calander.ico">
<script src="/scripts/jquery-3.1.1.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="/scripts/main.js" type="text/javascript"></script>
<script src="/scripts/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="/styles/default.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container script" style="display:none">
#include('layouts.banner')
#include('layouts.navigation')
<div class="content">
dasda
#include('layouts.messages')
#yield('content')
</div>
</div>
</body>
#yield('modal')
#yield('javascript')
<script type="text/javascript" id="cookiebanner" src="http://cookiebanner.eu/js/cookiebanner.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.script').attr('style', 'block');
});
</script>
</html>
CSS Code:
html {
overflow-x:hidden;
height:100%;
}
.navigation {
width:150px;
}
.container {
width:100%;
height:100%;
}
.content {
background-color:#000000;
top:-100px;
width:100%;
height:100%;
}
body {
background: #F0EDED;
}
I cannot figure out what the issue is. If anybody has any suggestions that would be appreciated
Try deleting default margins and paddings by adding this to css:
*{
maring:0;
padding:0;
}
And also for calculating width use vw units:
width:100vw;
Try to change the css for body tag in this way:
body {
margin: 0;
padding: 0;
background: #F0EDED;
height: 100%;
}
you cant use
html {
overflow-x:hidden;
height:100%;
}
use:
astrick (*) insted of html
html {
height: 100%;
}
body {
min-height: 100%;
}
I am trying to add a custom font in CSS but it does not work.
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Shout!</title>
<meta name="author" content="Jordan Baron">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div>
<img src=images/logo.png alt="logo" height="54" wdth="133" class="logo">
<hr class="divider">
<h1 id="wis">Shout!</h1>
</div>
<script src="scripts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
</body>
</html>
My CSS:
#font-face {
font-family: SanFran;
src: url(SF-UI-Display-Thin.otf);
}
div {
text-align: center;
}
.divider {
margin: 0;
padding: 5px;
}
.logo {
margin: 0;
padding: 5px;
}
.wis {
font-family: SanFran;
}
I am using Bootstrap 3 on Mac OS X. I am using Chrome.
The font changes when I don't use Bootstrap but when I do use Bootstrap the font doesn't change
It won't change because you're using an ID on your <h1> but you're trying to target a class of .wis instead of an ID of #wis.
Try changing
.wis {
font-family: SanFran;
}
to
#wis {
font-family: SanFran;
}