This question already has answers here:
Why aren't my absolutely/fixed-positioned elements located where I expect?
(3 answers)
Closed 3 years ago.
I'm having some issues with a blank space (or bar) on the top of my website.
I have tried playing with different values of padding and position as some other posts suggests but nothing seems to work.
h1 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
position: relative;
top: 150px;
left: 300px;
z-index: 2;
position: absolute;
color: white;
margin: 0;
}
h2 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
position: relative;
top: 230px;
left: 300px;
z-index: 2;
color: white;
font-weight: 100;
font-style: italic;
}
img {
z-index: 1;
position: absolute;
padding-top: 0;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hayao Miyazaki Tribute Page</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="miyazaki.css">
</head>
<div id="main" class="image">
<h1>Hayao Miyazaki</h1>
<h2> “They say that the best blaze burns brightest when circumstances are at their worst.”</h2>
<img alt="Miyazaki Black and White" src="https://wallpaperaccess.com/full/244942.jpg">
</div>
<body>
<script src="" async defer></script>
</body>
</html>
Since you have givenposition: absolute to the img, you should specify the position of the image.
h1 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
position: relative;
top: 150px;
left: 300px;
z-index: 2;
position: absolute;
color: white;
margin: 0;
}
h2 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
position: relative;
top: 230px;
left: 300px;
z-index: 2;
color: white;
font-weight: 100;
font-style: italic;
}
img {
z-index: 1;
position: absolute;
padding-top: 0;
top: 0; /* added position */
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hayao Miyazaki Tribute Page</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="miyazaki.css">
</head>
<div id="main" class="image">
<h1>Hayao Miyazaki</h1>
<h2> “They say that the best blaze burns brightest when circumstances are at their worst.”</h2>
<img alt="Miyazaki Black and White" src="https://wallpaperaccess.com/full/244942.jpg">
</div>
<body>
<script src="" async defer></script>
</body>
</html>
You should add margin 0 to body class
css
body{
background: #fff;
margin: 0;
}
Just add top:0; to img tag.
h1 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
position: relative;
top: 150px;
left: 300px;
z-index: 2;
position: absolute;
color: white;
margin: 0;
}
h2 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
position: relative;
top: 230px;
left: 300px;
z-index: 2;
color: white;
font-weight: 100;
font-style: italic;
}
img {
z-index: 1;
position: absolute;
padding-top: 0;
top: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hayao Miyazaki Tribute Page</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="miyazaki.css">
</head>
<div id="main" class="image">
<h1>Hayao Miyazaki</h1>
<h2> “They say that the best blaze burns brightest when circumstances are at their worst.”</h2>
<img alt="Miyazaki Black and White" src="https://wallpaperaccess.com/full/244942.jpg">
</div>
<body>
<script src="" async defer></script>
</body>
</html>
Avoid using position:absolute;. Absolutely positioned elements have no awareness of what's happening around them. When a page changes size, the elements don't move in relation to each other but rather in relation to their container and the values you've set for top, left etc.
To know more:https://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/
In your case just put that image as background to the division and place the text h1,h2 inside the division and add padding(if required) to the h1,h2 to align them.
Related
I Want to make it so the 100 appears in the top right corner of my div, I have it aligned to the right but it still appears on the bottom. Is there an easy way for me to fix it in CSS? I want it to look like the The character select cards in destiny 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>D2</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../styles/styles.css">
</head>
<body>
<div class="titan">
<h2>Titan</h2>
<h3>Exo Male</h3>
<h1>100</h1>
</div>
<script src="../js/index.js" async defer></script>
</body>
</html>
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#300');
body{
background-image: url(../assets/bg.PNG);
background-repeat: no-repeat;
background-size: cover;
}
.titan{
background-image: url('../assets/titan.PNG');
width: 474px;
height: 96px;
}
h1{
color: #31ccf3;
font-family: 'Roboto', sans-serif;
padding-left: 5rem;
float: right;
}
h2{
color: white;
font-family: 'Roboto', sans-serif;
padding-left: 5rem;
}
h3{
color: #c9c9c9;
font-family: 'Roboto', sans-serif;
padding-left: 5rem;
font-size: 1em;
}
The code is not clean (from a CSS perspective), however I would suggest doing display:flex;, justify-content:space-between; and align-items:center; on titan div, then add the first 2 heading in a div.
Further improvements I would do is to get rid of padding from Headings. This is bad practice. You should have the heading in a div that is positioned the way that you want and not apply directly padding on Headings unless if you are 100% sure that all the headings will follow this pattern globally.
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#300');
body {
background-image: url(../assets/bg.PNG);
background-repeat: no-repeat;
background-size: cover;
}
.titan {
background-image: url('../assets/titan.PNG');
width: 474px;
height: 96px;
display: flex;
justify-content:space-between;
align-items: center;
}
h1 {
color: #31ccf3;
font-family: 'Roboto', sans-serif;
padding-left: 5rem;
float: right;
}
h2 {
color: white;
font-family: 'Roboto', sans-serif;
padding-left: 5rem;
}
h3 {
color: #c9c9c9;
font-family: 'Roboto', sans-serif;
padding-left: 5rem;
font-size: 1em;
}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>D2</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../styles/styles.css">
</head>
<body>
<div class="titan">
<div>
<h2>Titan</h2>
<h3>Exo Male</h3>
</div>
<h1>100</h1>
</div>
<script src="../js/index.js" async defer></script>
</body>
</html>
Try
.titan {
position: relative
}
.titan h1 {
position: absolute;
top: 0px;
left: 0px
}
If i understand correctly the solution is very simple; for h1 element
position: fixed;
top: 0;
right:0;
Still having problems with having white parts and background not covering all the background, it's one of the most simple stuff and I can't manage to figure it out, I've been testing out different codes and videos all over the internet and can't get it to work.
The webpage is just an index with 3 buttons, maths, physics and chemistry (each web aren't done yet), 3 font awesome icons and 3 black images with 0.5 opacity all along with a background that ISN'T on the internet because I edited it out in my desk.
The code is on the html:
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/18f289db08.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Last-Modified" content="0">
<meta http-equiv="Cache-Control" content="no-cache, mustrevalidate">
<meta http-equiv="Pragma" content="no-cache">
</html>
<meta name="author" content="Iván Camacho"/>
<meta charset="UTF-8" content="Iván Camacho"/>
<meta name="author" content="Iván Camacho"/>
<meta name="author" content="Iván Camacho"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<style>
body {
background-repeat: no-repeat;
background-size: contain;
background-attachment:local;
background-image: url("2022-03-08\ \(3\).png");
}
</style>
</head>
<body>
<div class="Negro3">
<img src="Fondo_Negro - copia.jpg" width="270" height="310">
</div>
<div class="Negro2">
<img src="Fondo_Negro - copia (2).jpg" width="270" height="310">
</div>
<div class="Negro1">
<img src="Fondo_Negro.jpg" width="270" height="310">
</div>
<div class="superscript">
<i class="fa fa-superscript" style="font-size:60px;color:white;"></i>
</div>
<div class="calculator">
<i class="fa fa-calculator" style="font-size:60px;color:white;"></i>
</div>
<div class="flask">
<i class="fa fa-flask" style="font-size:60px;color:white;"></i>
</div>
<div class="Sciencestudio">
<h1> Science studio </h1>
</div>
<p> google link <img src="https://www.google.com/search?q=imagen&rlz=1C1CAFB_enES711ES711&source=lnms&tbm=isch&sa=X&ved=2ahUKEwiBudns5aT2AhVDrxoKHVc9DR8Q_AUoAXoECAIQAw&biw=1242&bih=568&dpr=1.1#imgrc=GEeCSbujNt4WcM"/> cuerpo </p>
<div class="Matemáticas"> <p2> MATEMÁTICAS </p2> </div>
<div class="FÍSICA"> <p2> FÍSICA </p2> </div>
<div class="QUÍMICA"> <p2> QUÍMICA </p2> </div>
</body>
</html>
And the CSS code is:
.Negro1{
position:relative;
bottom: 70px;
left: 1550px;
opacity: 0.5;
}
.Negro2{
position:relative;
top: 245px;
left: 1225px;
opacity: 0.5;
}
.Negro3{
position:relative;
top: 560px;
left: 900px;
opacity: 0.5;
}
.Sciencestudio{
position:relative;
left:60%;
bottom:790px;
font-size: 50px;
color: azure;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.superscript{
position:relative;
left:169%;
bottom:300px;
scale: 3;
color:aliceblue;
}
.calculator{
position:relative;
left:126.5%;
bottom:350px;
scale: 2.5;
}
.flask{
position:relative;
left:161%;
bottom:405px;
scale: 2.5;
}
.Matemáticas{
position:relative;
left:75.5%;
bottom:630px;
scale: 1.5;
color: aliceblue;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.FÍSICA{
position:relative;
left:95%;
bottom:650px;
scale: 1.5;
color: aliceblue;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.QUÍMICA{
position:relative;
left:112%;
bottom:670px;
scale: 1.5;
color: aliceblue;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
I'm trying to build my own website.I am new to html/css and I've been dealing with this problem for a while now . Whenever i try to create clickable text , it doesn't work. i want it to be clickable to open up another html file , but it's not working at all , any advice ?
Ok so it seems that the tabs work and lead to another html file only when css isn't linked to the main html i dont know why its like that .
.Home {
position: relative;
font-family: 'open sans', sans-serif;
color: black;
top: -140px;
padding-left: 800px;
font-size: 15px;
text-decoration: none;
}
.Projects {
position: relative;
font-family: 'open sans', sans-serif;
color: black;
top: -160px;
padding-left: 900px;
font-size: 15px;
text-decoration: none;
}
.About {
position: relative;
font-family: 'open sans', sans-serif;
color: black;
top: -180px;
padding-left: 1025px;
font-size: 15px;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="Home_css.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="Home"> <b>HOME</b></div>
<div class="Projects"><b>PROJECTS</b></div>
<div class="About"><b>ABOUT</b></div>
</body>
</html>
What i expected was for the tabs to be clickable and lead to another html file , but none of them are responding could it be that i did something wrong in the css ?
Because of top:-140px & negative values we cannot see div elements
Also set padding values to low so no need to scroll page
<!DOCTYPE html>
<html lang="en">
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="Home_css.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="Home"> <b>HOME</b></div>
<div class="Projects"><b>PROJECTS</b></div>
<div class="About"><b>ABOUT</b></div>
</body>
</html>
.Home a, .Home a:link {
position: relative;
font-family: 'open sans', sans-serif;
color: black;
font-size: 15px;
text-decoration: none;
}
.Projects a, .Projects a:link {
position: relative;
font-family: 'open sans', sans-serif;
color: black;
font-size: 15px;
text-decoration: none;
}
.About a, .About a:link {
position: relative;
font-family: 'open sans', sans-serif;
color: black;
font-size: 15px;
text-decoration: none;
}
Please check the link
Check here
Most likely you have another element above the links. Right-click on a faulty link, and select "Inspect element". This will open the development toolbar of your browser, with the element you right-clicked selected.
The selected element will either be the anchor, or it will be another element. If it's not the anchor, it means it's the element sitting above the anchor which prevents your click from going through.
I am trying to place padding for an input placeholder in FireFox and so far having no luck. I have tried using padding, text-indent and none work in FireFox for me. I have my code below. Any help is much appreciated.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<html>
<body>
<div id='contact_form'>
<input type='text' name='subject' placeholder='Subject' id='Subject' class='contactForm_keys' title='Subject' />
</div>
</body>
</html>
CSS:
#Subject{
margin-left: 43px;
margin-bottom: -8px;
width: 605px;
height: 40px;
}
#Subject:focus, #Subject:hover{
border: 1px solid black;
background: white;
}
/*input placeholder styling*/
input::-webkit-input-placeholder{font-size:14px; font-family: Arial, Helvetica, Sans-serif; color:#c46457; padding-left: 15px;}
input:-moz-placeholder{font-size:14px; font-family: Arial, Helvetica, Sans-serif; color:#c46457; line-height: normal; padding: 0 10px 0 29px;}
input::-moz-placeholder{font-size:14px; font-family: Arial, Helvetica, Sans-serif; color:#c46457; line-height: normal; padding: 0 10px 0 29px;}
#contact_frm input:-ms-input-placeholder{font-size:14px; font-family: Arial, Helvetica, Sans-serif; color:#c46457; padding-left: 15px;}
I'm testing basic layout:
<html>
<head>
<link type="text/css" rel="stylesheet" href="./../public/css/main.css">
</head>
<body>
</body>
</html>
And there is style of body element
background-color: rgb(255, 0, 0);
color: rgb(51, 51, 51);
display: block;
font-family: 'Segoe UI', Ubuntu, Roboto, 'Helvetica Neue', 'Open Sans', Arial, sans-serif;
font-size: 14px;
height: 1091px;
line-height: 20px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-height: 100%;
min-width: 1024px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
width: 1024px;
The thing is that I was sure that body width will be scaled and fitted to the phone size. But when I tested on iPhone 3GS horizontal scrollbar appeared. Why width is not scaled?
Add the below to your head:
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport' />
Add the following meta tag to the head of your document:
<meta name="viewport" content="width=device-width, initial-scale=1" />
It's because you are defining :
min-width: 1024px;
width: 1024px;
You should remove both, and define the meta :
<meta name="viewport" content="width=device-width">