My website is displaying an undesired white border for all my components, even when using default configs:
Main.kt
fun main() {
renderComposable("root") {
Div({ style { height(300.px); backgroundColor(blue) } }) { }
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
</head>
<body>
<div id="root"></div>
<script src="MyApp.js"></script>
</body>
</html>
renders
Can you notice the white border around the blue background?
Why does this happen? How to remove this white border?
This happens due to the default margin for the body tag being 8px.
This means that the default body component is rendered with an 8px margin, which is what you're seeing as a "white border".
To remove it, you simply have to adjust your body tag style. This can be done at your index.html file, where you declare your body:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
</head>
<body style="margin: 0">
<div id="root"></div>
<script src="MyApp.js"></script>
</body>
</html>
Related
I'm making as simple game as a webpage with HTML/CSS/JS (no framework). I decided to try out muicss for styling. I added an appbar to the page, but there is still a white gap above it.
Here's an example:
<html lang="en">
<head>
<title>MUI CSS Appbar Example</title>
<link
href="https://cdn.muicss.com/mui-0.10.3/css/mui.min.css" rel="stylesheet"
type="text/css"
/>
<script src="https://cdn.muicss.com/mui-0.10.3/js/mui.min.js"></script>
</head>
<body>
<div class="mui-appbar">
<h1>Appbar</h1>
</div>
</body>
</html>
What I get
How do I get rid of the white stripe at the top? Examples from their docs don't have that. What am I missing
Add custom CSS style...
<html lang="en">
<head>
<title>MUI CSS Appbar Example</title>
<style>
h1 {
margin-top: 0px!important;
}
</style>
<link href="https://cdn.muicss.com/mui-0.10.3/css/mui.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.muicss.com/mui-0.10.3/js/mui.min.js"></script>
</head>
<body>
<div class="mui-appbar">
<h1>Appbar</h1>
</div>
</body>
</html>
Immediately after posting this, I found that muicss declares a style
h1, h2, h3 {
margin-top: 20px;
margin-bottom: 10px;
}
So the whitestripe is caused by the margin-top on the h1 element.
I'm displaying an HTML overlay on a 1920x1080 stream.
Im trying to create a simple HTML page that has a centered image that shows on top but whenever i display it it's somewhere on the bottom right side.
This is my code, I rather not use CSS if that's an option
What am i missing?
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<center>
<img src="https://s10.gifyu.com/images/once-30-sec-5-min-99.gif" alt="Computer man" style="width:400px;height:100px;padding-bottom: 350;padding-right: 200px">
</center>
<script>
</script>
</body>
</html>
I don't think you can create a fixed resolution only using HTML
but you can put styles in the HTML image tag with maximum height and with instead of linking it to a CSS page
<!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">
<title>Document</title>
</head>
<body>
<img href="address of image" style="width=100%; height:100%">
</body>
</html>
I'm trying to set black for one line. There are more web links on the line. But the link is still blue. Thanks for the help.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Titulek stránky</title>
</head>
<body>
<h2 style="color:black;">YouTube Google</h2>
</body>
</html>
Because there is a default style from <a> tag, which it hides the set style from <h2>. There are 2 ways (not only 2) to resolve the problem.
Way 1: by adding a <style> tag and put your styles inside it.
<html>
<head>
<meta charset="utf-8">
<title>Titulek stránky</title>
<style>
a {
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<h2>YouTube Google</h2>
</body>
</html>
Way 2 (not recommended because it looks not really tidy): add styles to each <a> tag.
<html>
<head>
<meta charset="utf-8">
<title>Titulek stránky</title>
</head>
<body>
<h2>
YouTube
Google
</h2>
</body>
</html>
Hope helped.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
When dragging the div below you see a translucent picture of the div while dragging in all browsers<p>
except in Firefox version 60.0.2 (64-Bit)<p>
Why ?
<div style='border:1px solid black;display:inline-block' draggable='true'>Click inside me and drag</div>
</body>
</html>
What has to be done to get that translucent picture also in Firefox
while dragging.
Following code solves the issue:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script>
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
</script>
When dragging the div below you see a translucent picture of the div while dragging in all browsers
<p>
except in Firefox version 60.0.2 (64-Bit)
<p>
Why ?
<div style='border:1px solid black;display:inline-block' draggable='true' ondragstart="drag(event)">Click inside me and drag</div>
</body>
</html>
I have the following html code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello</title>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link href="bower_components/polymer/polymer.html" rel="import">
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
</head>
<body>
<paper-toolbar>
<div class="title">Hello</div>
</paper-toolbar>
</body>
</html>
And the page has a white gap between toolbar and the margin.
How do I solve this?
Your problem is caused by an inherent margin: 8px on the <body> tag. To fix this, you simply need to specify a margin yourself in CSS:
body {
margin: 0;
}
Hope this helps!