This is a very weird error, but when you load up my page, it can scroll without any intention of it doing so. You can't see the scroll bars, but it just can. I have had issues with this in the past.
html{background-color: rgb(255, 255, 240); max-width: 100%; max-height: 100%; height: 100%; width: 100%;}
body{margin: 0px;}
div#head{display: block; width: 100%; height: 53px; background-color: rgb(0, 0, 0); border-radius: 0px;}
div#head > div#icon_logo{display: inline-block; width: 60px; height: 60px; background-image: url("../../Type/Media/Logo_Icon.jpg"); background-size: contain; background-position: center; background-repeat: no-repeat;}
<!DOCTYPE HTML>
<HTML LANG="EN-US">
<head>
<meta charset="UTF-8" />
<meta name="description" content="A website for Ty Q." />
<title>TyPrograms</title>
<link rel="stylesheet" href="Type/Stylesheet/stylesheet_HOME.css" type="text/css" />
<link rel="icon" href="Type/Media/Favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="Type/Media/Favicon.ico" type="image/x-icon" />
</head>
<body>
<div id="head"><div id="icon_logo"></div></div>
</body>
<script type="text/javascript" src="CDN/Type/Script/minified/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="CDN/Type/Script/minified/waypoint-1.6.2.min.js"></script>
<script type="text/javascript" src="CDN/Type/Script/minified/angular-1.5.5.min.js"></script>
<script type="text/javascript" src="Type/Script/javascript_HOME.js"></script>
</HTML>
I honestly don't know what I'm doing wrong, maybe it's the 100% in the width property of the header, I don't know.
I set up a fiddle with your code and see nothing wrong.
However, if you dont want your page to scroll you can set overflow:hidden; in your css
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 make a dynamically scaling title that grows/shrinks depending on the width of the screen. I also want to make it so that it doesn't apply a word wrap and split the title into 2 or more lines. I am using an SVG trick to make this work.
Consider the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>StackOverflowExample</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
<script src="https://code.iconify.design/1/1.0.6/iconify.min.js"></script>
</head>
<style>
text {
font-family: 'Muli';
font-weight: 600;
fill: white;
}
svg {
width: 100%;
}
a {
color: white;
}
body {
background-image: linear-gradient(180deg, rgba(35, 50, 64, 0.91) 61.95%, rgba(0, 0, 0, 0.51) 94.56%),
/* height: 100vh; */
width: 100vw;
background-color: black;
background-position: center;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
font-family: 'Muli';
color: #ffffff;
min-height: 100vh;
display: flex;
align-items: center;
}
</style>
<body class="text-center">
<div class="container">
<div class="row">
<div class="col-12">
<svg viewBox="0 0 167 20">
<text x="0" y="15">This is a Test Of This T</text>
</svg>
</div>
</div>
</div>
</body>
</html>
I got this to work perfectly in Chrome, but then I was surprised that on ios, the last letter would be cut off. Please see screenshot:
IOS:
Chrome:
Any ideas on how to make this look correct on both OSes/Browsers? It is supposed to say "This is a test of This T". If you can't see, Chrome correctly resizes this no matter what screen resolution I put this on (smaller or bigger than ios). On ios, it always cuts it off.
I can get this on 1 browser or the other if I change the viewbox parameters, but I can't find any setting that would work for both.
Got it working... for future reference in case anyone else runs into this...
Adding textLength="167px" where 167 is the same as your viewbox size fixed the issue. Apparently, ios and MacOS was rendering spacing between the two systems differently causing the issue. Defining a textLength forced it to render more uniformly eliminating the issue.
<!DOCTYPE html>
<html lang="en">
<head>
<title>StackOverflowExample</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
<script src="https://code.iconify.design/1/1.0.6/iconify.min.js"></script>
</head>
<style>
text {
font-family: 'Muli';
font-weight: 600;
fill: white;
}
svg {
width: 100%;
}
a {
color: white;
}
body {
background-image: linear-gradient(180deg, rgba(35, 50, 64, 0.91) 61.95%, rgba(0, 0, 0, 0.51) 94.56%),
/* height: 100vh; */
width: 100vw;
background-color: black;
background-position: center;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
font-family: 'Muli';
color: #ffffff;
min-height: 100vh;
display: flex;
align-items: center;
}
</style>
<body class="text-center">
<div class="container">
<div class="row">
<div class="col-12">
<svg viewBox="0 0 167 20">
<text x="0" y="15" textLength="167px">This is a Test Of This T</text>
</svg>
</div>
</div>
</div>
</body>
</html>
I'm trying to create a hero image for a website, and I'm receiving a random white bar the bottom of my website.
This is the HTML
* {
margin: 0;
padding: 0;
box-sizing: padding-box;
}
img {
width: 100%;
overflow: hidden;
}
body {
margin: 0px 0px;
}
<img src='https://static.pexels.com/photos/158607/cairn-fog-mystical-background-158607.jpeg' />
img element is by default display:inline-block; vertical-align:baseline;
That baseline alignment is what you see.
So either display:block; or vertical-align:top;:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel='stylesheet' type="text/css" href="styles.css"/>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
<img style="display:block" src='https://static.pexels.com/photos/158607/cairn-fog-mystical-background-158607.jpeg'/>
</body>
</html
Another option - to set your image to background:
body {
background: no-repeat url(https://static.pexels.com/photos/158607/cairn-fog-mystical-background-158607.jpeg);
background-size:cover;
}
<body>test</body>
I am teaching myself css and html and I created a stylesheet and broke it up into different elements (background image, cursors, etc). I am referencing the entire css file in the main html file but when I run the application I get a blank screen. What am I missing? Here is my code. First, the stylesheet
html, body
{
overflow: auto;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#background
{
background-image: url("../Assets/Graphics/background.jpg");
background-color: #cccccc;
background-size: 100% 100%;
background-repeat: no-repeat;
opacity: 0.5;
}
#mycursor
{
cursor: url(../Assets/Graphics/cursor.cur), auto;
}
And now the html file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Destiny Saga</title>
<link rel="stylesheet" type="text/css" href="Style/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="Assets/Graphics/title.ico" />
</head>
<body>
</body>
</html>
Here is what you probably meant:
html, body {
overflow: auto;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#background {<--It is Bad to name an ID background... you probably want to just do div here...-->
background-image: url("../Assets/Graphics/background.jpg");
background-color: #cccccc;
background-size: 100% 100%;
background-repeat: no-repeat;
opacity: 0.5;
}
#mycursor { <---you could just add cursor to the above so that it will be like that in the above div-->
cursor: url(../Assets/Graphics/cursor.cur), auto;
}
And now the html file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello World</title>
<link rel="stylesheet" type="text/css" href="Style/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="./Assets/Graphics/title.ico" />
</head>
<body>
<div id="background">
<h1> Hello World</h1>
<div id="mycursor">
</div>
</div>
<script type="text/javascript" src="./Javascript/Main.js"></script>
</body>
</html>
Things that are certainly wrong:
The img element is missing a src attribute
The #mycursor selector matches an element with id="mycursor" and you have id="#mycursor"
The #background ruleset doesn't match any element
You might have other issues (such as incorrect URLs).
In short, there is nothing in your HTML that should create a visible effect, and none of the styles that apply to it will change that.
Change:
<img id="#mycursor">
to:
<img id="mycursor">
In css you use # for ids, but in html you dont have to write the #
The HTML div for the navigation bar design in CSS will not work.
CSS
/* CSS Document */
*{
margin: 0px;
padding: 0px;
}
.clear {
clear:both;
height:0px;
}
body {
background:url(../images/bg.jpg) no-repeat scroll center top #13120d;
margin: 0;
padding: 0;
font-family: Tahoma;
font-size: 13px;
}
#header_menu_bg {
background: url('../images/navigation.png') no-repeat center top;
height: 198px;
width: 737px;
}
This is just a short example.
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="robots" content="index, follow"/>
<meta name="keywords" content="bla"/>
<meta name="description" content="bla"/>
<title>WEBSITE</title>
<link rel="stylesheet" type="text/css" href="styles/main.css"/>
<link rel="shortcut icon" href="favicon.png"/>
</head>
<body>
<div id="header_menu_bg">
Any help will be much appreciated!
Make sure the URL to your image is correct.
Place the URL in between ' or " tags (url("../images/navigation.png"))
Add a width to your div, f.e. width: 200px;
EDIT: When looking at your full HTML, you also need to close your <body> and <html> tags.
Your full code will look like this:
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="robots" content="index, follow"/>
<meta name="keywords" content="bla"/>
<meta name="description" content="bla"/>
<title>WEBSITE</title>
<link rel="stylesheet" type="text/css" href="styles/main.css"/>
<link rel="shortcut icon" href="favicon.png"/>
</head>
<body>
<div id="header_menu_bg"></div>
</body>
</html>
CSS:
*{
margin: 0px;
padding: 0px;
}
.clear {
clear:both;
height:0px;
}
body {
background-color: #13120d;
margin: 0;
padding: 0;
font-family: Tahoma;
font-size: 13px;
}
#header_menu_bg {
background: url('http://placehold.it/737x198') no-repeat center top;
height: 198px;
width: 737px;
}
DEMO: JSBin (JSFiddle doesn't seem to work at the moment)
You need to assign it a width attribute.
#header_menu_bg {
background: url(../images/navigation.png) no-repeat center top;
height: 280px;
width: 200px; }
EDIT
Check in the console log, to see if there are issues with the browser finding your image. Perhaps you have the wrong path.
EDIT 2
Close your <body> and <div> tags.
Assuming you have referenced the css file correctly and no error in your html coding structure I suggest clearing your browser cache.
background: url(../images/navigation.png) no-repeat center top;
you need "" or '' like this:
background: url('../images/navigation.png') no-repeat center top;
probably this helps you
The following css works and puts an image in the DIV. Fiddle is not working at the moment and I can't put a link for it now.
#header_menu_bg
{
background-image: url('fnordware.com/superpng/pngtest16rgba.png');
height: 32px;
width: 32px;
}
You either have a wrong url or something else is wrong if this css doesn't work for you.
Try this :
Download the sample image from Here and save it as bg.jpg.
Create a new folder and put the 2 below files & a image in same folder.
HTML (index.html)
<!DOCTYPE html>
<head>
<title>WEBSITE</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<div id="header_menu_bg">
</body>
</html>
CSS (main.css)
body
{
background-color: #13120d;
margin: 0;
padding: 0;
font-family: Tahoma;
font-size: 13px;
}
#header_menu_bg
{
background: url('bg.jpg') no-repeat center top;
width: 280px;
height: 500px;
}
RESULT: