I have been having this problem for a couple of weeks now. I have this code
div{
margin: 0;
padding: 0;
border: 5px outset black;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<p>testing</p>
</div>
</body>
</html>
and it is doing this:
I have looked at tutorials, searched on Stack Overflow, and even when I run it in the code snippet, it works. What am I doing wrong!?!?
Edit: I also wanted to add this image to show you that it works perfectly fine in the code snippet.
Try opening it with a different browser.
Related
I've been having troubles with masking a svg onto my html file. I would like to take the svg and basically recolour it, and thats it. I feel like I'm missing something obvious, so don't hesitate to call me dumb lol. Here's some code I wrote, if someone could point me in the right direction, it would be greatly appreciated <3
HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="mask"></div>
</body>
</html>
CSS File
.mask{
width: 100px;
height: 100px;
background-color: red;
-webkit-mask-image: url(testing.svg);
mask-image: url(testing.svg);
}
I'm developing a website and I'm struggling with the nav bar and my main issue is that the html responsive code is not working with me i don't know why can someone guide me?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
this is my responsive html code I only write it in html page I should write another responsive code in css?
Then you start your yiur html filelike this:
<!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>
<div class="container">
</div>
</body>
</html>
meta viewport is important but you need to add #media with breakpoint that you need in your css file, for exemple like this:
.container{
width: 90%
background: red;
height: 100px;
}
#media screen and (min-width: 800px) {
.container {
width: 80%;
background: green;
height: 200px;
}
}
Here you will find more informations.
I'm relatively new to Front End development, and have been trying to improve my core CSS skills.
I've come across a quirk between Edge (Chromium) and Chrome which does not make much sense to me.
I've attached two images of the same example index.html page opened in both Edge and Chrome.
You can see that in Chrome the text fits fine, but in Edge the text is cut in half! Does Edge do something different with the top margins?
Here is my attached HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./assets/css/style.css" type="text/css">
<title>Hello World</title>
</head>
<body>
<header>Hello, World!</header>
</body>
</html>
And the css:
html, body {
margin: 0;
padding: 0;
}
body {
background-color: #FFFFFF;
width: 100vw;
}
header {
background-color: rgb(115, 165, 216);
}
header {
width: 100vw;
height: 60px;
}
Thanks for your help! :)
Why is the highlight on "ort" instead of "fort"?
This seems to be the case when there are two f's. When I replace f with other letters, such as d, it displays normally. So maybe this is a bug in chrome?
chrome version is chrome83.
add: It seems to be related to the font.
body {
font-size: 30px;
}
.highlight-font {
color: green;
}
<div>
<span>ef</span><span class="highlight-font">fort</span>
</div>
I think it's Chromium based browsers bug (I see same bug, Opera 69). It works well on Firefox etc.
You can use some invisible character if you need some hotfix right now.
I've used and it works well.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font-size: 30px;
}
.highlight-font {
color: green;
}
</style>
<body>
<div>
<span>ef</span><span class="highlight-font">fort</span>
</div>
</body>
</html>
Here's what I did:
.bodyimage {
background-image: url('px_by_Gre3g.png');
background-repeat: repeat;
}
However, if I try to put any element such as p, h1, h2, h3 etc. it doesn't show at all.
here is my code:
<!DOCTYPE HTML>
<html>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="bootstrap-responsive.css">
<meta charset="UTF-8">
<head>
<title>Dave's Website</title>
</head>
<body class="bodyimage">
<p><b>test</b></p>
</body>
It's nothing much, just a simple website. I'm not sure why it won't show at all. Can someone help?
Your link and meta is out of the head, which isn't valid. Try like this:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="bootstrap-responsive.css">
<meta charset="UTF-8">
<title>Dave's Website</title>
</head>
<body class="bodyimage">
<p><b>test</b></p>
</body>
</html>
Use validator to check your markup.
JSBin with a different background-image.
Is your image transparent or partial transparent which caused the text not visible?
Try to change the font color to white or to black, and work from there.
Refer the following site for more information on images and font.
http://www.w3.org/wiki/CSS_background_images
To add body background in Twitter Boostrap I add background: url(../img/bg.png) repeat 0 0; to
body {
margin:0;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:14px;
line-height:20px;
color:#333;
background-color:#fff;
background: url(../img/bg.png) repeat 0 0;
}