I tried almost everything to get rid of the top margin I used the normalized.css reset, universal selector reset, HTML and body reset margin to 0.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>index</title>
<link href='https://fonts.googleapis.com/css?family=Orbitron|Lato:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="normalize.css">
<!--[if IE]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<div class="content-area">
<div class="text-logo">
<h1>Peacon<span>TT</span></h1>
</div>
</div>
</header>
</body>
</html>
CSS:
html {
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 70px;
background-color: #586f7c;
}
.content-area {
width: 1000px;
margin: 0 auto;
}
.text-logo {
font-family: "orbitron", Arial, Helvetica, sans-serif;
font-weight: 100;
color: #ffffff;
}
You can set the margin property of your h1 element to 0 to accomplish your goal:
h1 {
margin: 0;
}
Related
As you can see in the CSS below, I have the height set to "50vh" which is causing the hover selector to be triggered underneath and over the text rather than just on the text. I have tried to lower the height but it moves the text upwards. Is there a way to stop it from triggering unless the cursor is over the actual text while still keeping the text lowered?
body {
background-color: #efefef;
overflow: hidden;
}
.logo h1 {
align-items: center;
color: #262626;
display: flex;
font-family: 'Lato', sans-serif;
font-size: 72px;
font-weight: 700;
height: 50vh;
justify-content: center;
max-width: 100px;
margin: auto;
}
.logo h1:hover {
color: #FFFFFF
}
<!DOCTYPE html>
<html>
<head>
<title>
Bindex. | Home
</title>
<link rel="icon" type="image/x-icon" href="favicon.png">
<link rel="stylesheet" href="index.css">
<meta charset="UTF-8">
<body>
<div class="logo">
<h1>
B.
</h1>
</div>
</body>
</html>
Give this a try. You should set the flex properties on the parent div only, and not the h1. This way, you can manipulate the height of the h1 and the width in which the :hover is activated.
body {
background-color: #efefef;
overflow: hidden;
}
.logo {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
h1 {
color: #262626;
font-family: 'Lato', sans-serif;
font-size: 72px;
font-weight: 700;
height: fit-content;
width: fit-content;
}
.logo h1:hover {
color: #FFFFFF
}
<!DOCTYPE html>
<html>
<head>
<title>
Bindex. | Home
</title>
<link rel="icon" type="image/x-icon" href="favicon.png">
<link rel="stylesheet" href="index.css">
<meta charset="UTF-8">
</head>
<body>
<div class="logo">
<h1>
B.
</h1>
</div>
</body>
</html>
I am writing an HTML Document. I am trying to make no space between a p and a div. There were no error messages included.
I have already tried:
adding 0px margin, padding to the p element and div element
making no whitespace between them in the code
Code:
#IO-out {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.pn {
margin: 0px;
padding: 0px;
}
.t {
color: white;
background-color: black;
font-family: "Roboto Mono", monospace, "wingdings";
}
.t.normal {
color: white;
background-color: black;
}
html
<head>
<title>
ivyghostkit
</title>
<link rel="stylesheet" href="common.css" type="text/css">
</head>
<body class="t normal">
<div id="container">
<div id="IO-out" class="t normal">
<!-- p elements with class "pn" are added here using javascript -->
</div>
<p id="VoidKeyboard"></p>
</div>
<script src="g.core.js"></script>
</body>
</html>
For clarification, the problem is that noticeable space is inbetween #VoidKeyboard and all p elements in #IO-out.
Add this in your css file
p{
margin: 0;
padding: 0;
}
And add some text in your markup..
Here is the full code
<!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>
<style>
#IO-out {
width: 100%;
height: 100%;
/** make void keyboard work **/
margin: 0px;
padding: 0px;
}
p{
margin: 0;
padding: ;
}
.pn {
margin: 0px;
padding: 0px;
}
.t {
color: white;
background-color: black;
font-family: "Roboto Mono", monospace, "wingdings"; /** ;) **/
}
.t.normal {
color: white;
background-color: black;
}
</style>
</head>
<body class="t normal">
<div id="container">
<div id="IO-out" class="t normal">
p elements with class "pn" are added here using javascript
</div>
<p id="VoidKeyboard">Remove Spacing</p>
</div>
</body>
</html>
I have an image and I put some text next to it by making the text span but I can't seem to change the font size. I tried changing it from a number of different places inside css with no luck.
body {
border: 0;
font-size: 16px;
font-family: serif, sans-serif;
}
.logo {
position: static;
height: 90px;
}
img {
font-size: 16;
vertical-align: top;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Audi</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<img class="logo" src="https://cdn.freelogovectors.net/wp-content/uploads/2016/12/audi-logo.png" alt="logo">
<hr>
<img style="height: 400px;" src="https://www.autozone-mag.com/uploads/1666-audi-rs-6-avant-2019.jpg" alt="RS6">
<span>this is some text</span>
</body>
</html>
Have you tried:
span {
font-size: 30px;
}
span {
font-size: 30px;
}
body {
border: 0;
font-size: 16px;
font-family: serif, sans-serif;
}
.logo {
position: static;
height: 90px;
}
img {
font-size: 16;
vertical-align: top;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Audi</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<img class="logo" src="https://cdn.freelogovectors.net/wp-content/uploads/2016/12/audi-logo.png" alt="logo">
<hr>
<img style="height: 400px;" src="https://www.autozone-mag.com/uploads/1666-audi-rs-6-avant-2019.jpg" alt="RS6">
<span>this is some text</span>
</body>
</html>
Or perhaps add a class:
.text-beside-car-image {
font-size: 30px;
}
.text-beside-car-image {
font-size: 30px;
}
body {
border: 0;
font-size: 16px;
font-family: serif, sans-serif;
}
.logo {
position: static;
height: 90px;
}
img {
font-size: 16;
vertical-align: top;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Audi</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<img class="logo" src="https://cdn.freelogovectors.net/wp-content/uploads/2016/12/audi-logo.png" alt="logo">
<hr>
<img style="height: 400px;" src="https://www.autozone-mag.com/uploads/1666-audi-rs-6-avant-2019.jpg" alt="RS6">
<span class="text-beside-car-image">this is some text</span>
</body>
</html>
You are targeting the img HTML tag, not the span HTML tag.
Your CSS rule (below) does not apply to the text because the rule targets img but the text is in a span tag.
img {
font-size: 16;
/* ... */
}
Furthermore, font-size: 16 is missing a unit type, such as px, pt, em, rem, etc. (see CSS Units).
Finally, please let me know if a detailed example would help you.
You need to set font-size in the element span, not in the element img. Because the element img doesn't support font-size attribute. Thus, you can set
span {
font-size: 16px;
}
Also, when you put unit in the CSS, you need to put Absolute Units (px, pt etc...) or Relative Units (em, rem etc...). Not only the number like that, because it's not interpreted from browser.
img {
font-size: 16;
}
e.g. font-size: 16px;
Finally, you don't see any different if you set font-size: 16px; because the browser default font size is 16px. To see a difference you need to put font size > 16px or font size < 16px.
body {
border: 0;
font-size: 16px;
font-family: serif, sans-serif;
}
.logo {
position: static;
height: 90px;
}
img {
vertical-align: top;
}
span {
font-size: 22px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Audi</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<img class="logo" src="https://cdn.freelogovectors.net/wp-content/uploads/2016/12/audi-logo.png" alt="logo">
<hr>
<img style="height: 400px;" src="https://www.autozone-mag.com/uploads/1666-audi-rs-6-avant-2019.jpg" alt="RS6">
<span>this is some text</span>
</body>
</html>
I developed a site for a project with a few videos etc. The web browser based version is fine but mobile is zoomed in and needs pinched and zoomed out to get it correct. Whats the method to get that correct on load? I'm guessing some #media query.
I have this in my head
<meta content='width=device-width, initial-scale=1, maximum-scale=1' <!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport' />
<title>ReBreak News</title>
<link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='/global.css'>
<link rel='stylesheet' href='/build/bundle.css'>
<link rel="stylesheet" href="/bootstrap.min.css"></script>
<link rel="stylesheet" href="/fontawesome/css/fontawesome.min.css"></script>
<script src="jquery.js"></script>
<script src="fontawesome.js"></script>
<script defer src='/build/bundle.js'></script>
<script src="bootstrap.js"></script>
</head>
and my global.css
:root {
--gradient: linear-gradient(90deg, #ff0000 0%, #ff0000 100%);
--light: #fff;
--grey: #f8f9fa;
}
html,
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
scroll-behavior: smooth;
}
.main-bgcolor {
background-image: var(--gradient);
}
.main-bgcolor2 {
background-color: #ffffff;
}
.light-color {
color: var(--light) !important;
}
.grey-bgcolor {
background: var(--grey);
}
.company_brand {
font-size: x-large;
font-family: cursive;
}
.section {
padding: 50px 0;
}
.section-body {
padding: 20px 0;
}
.h1{
color: blueviolet;
}
Thanks
I am building a simple webpage. The text is displaying correctly but the icon is not displaying. The icon is from ionicons framework.
I checked ionicons.min.css path and icon name in this css file
My html file:
<!--DOCHtml5-->
<html lang="en">
<head>
<meta charset="utf-8">
<link href="style.css" type="text/css" rel="stylesheet">
<title>webpage</title>
<link href="https://fonts.googleapis.com/css?family=Euphoria+Script" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montez" rel="stylesheet">
<link href="icons/ionicons.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class = "name">
Name
<ul class = "social-icons">
<li><i class="ion-arrow-right-a"></i></li>
</ul>
</div>
</body>
</html>
My css file:
*{
margin:0;
padding:0;
font-family: 'Euphoria Script', cursive;
font-size: 100px;
}
body{
height:100vh;
margin: 0;
padding: 0;
background-color: #ef6758;
}
.name{
position:absolute;
top:35%;
left:31%;
font-family: 'Montez', cursive;
color: #4be214;
}
.social-icons li{
list-style: none;
}
Icon should be visible
Go through it. it will work for you, because there is font-family files not found in your css
*{
margin:0;
padding:0;
font-family: 'Euphoria Script', cursive;
font-size: 100px;
}
body{
height:100vh;
margin: 0;
padding: 0;
background-color: #ef6758;
}
.name{
position:absolute;
top:35%;
left:31%;
font-family: 'Montez', cursive;
color: #4be214;
}
.social-icons li{
list-style: none;
}
<!--DOCHtml5-->
<html lang="en">
<head>
<meta charset="utf-8">
<link href="style.css" type="text/css" rel="stylesheet">
<title>webpage</title>
<link href="https://fonts.googleapis.com/css?family=Euphoria+Script" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montez" rel="stylesheet">
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class = "name">
Name
<ul class = "social-icons">
<li><i class="ion-arrow-right-a"></i></li>
</ul>
</div>
</body>
</html>