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;
Related
I want the main section of the page to be horizontally centered and to have varying top and bottom margins. I can center the section with margin-left: auto; margin-right: auto; but I can't set the top and bottom margin. The main section is using .main-content class. Please have a look.
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
background-color: rgb(14, 18, 43);
}
header {
margin-top: 2em;
margin-bottom: 2em;
}
h1 {
text-align: center;
color: rgb(228, 228, 228);
font-family: 'Courier New', Courier, monospace;
}
.main-content {
display: block;
width: 600px;
background-color: antiquewhite;
margin-left: auto;
margin-right: auto;
margin-top: 500;
}
<!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>Krazuescode.com</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<h1>UINASHIoAMS.COM</h1>
</header>
<section class="main-content">
Related searches
<div>Software to Manage Remote Employees</div>
<div>Mobile Device Management for Ios</div>
<div>Mobile Device Management for Ipads</div>
</section>
<footer>
<span>Copyright © 2022</span><span>|</span>
Privacy Policy
</footer>
</body>
</html>
You forget add a px to 500
.main-content {
display: block;
width:600px;
background-color: antiquewhite;
margin: 500px auto;
}
More info you can find here: https://developer.mozilla.org/en-US/docs/Web/CSS/margin
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>
Hi im a begginer web developer and im making a practice.I want to change my span's label color when i hover to "container" ( btw i also want to change my border's properties as you can see in my code (container :hover))
I hope I explained myself well
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap');
/* font-family: 'Open Sans', sans-serif;*/
body{
background-color: #14213d;
margin: 0;
}
.container li{
list-style: none;
}
.container{
border: 2px solid #fca311;
width: 400px;
height: 100px;
position: relative;
left: 720px;
top: 400px;
}
#mainm{
font-family: 'Open Sans', sans-serif;
color: #e63946;
font-size: 25px;
padding-left: 5px;
padding-top: 15px;
}
.container:hover{
transition: 2s;
border-radius: 15px;
border-color: #43aa8b;
background-color: #43aa8b;
}
#mainm:hover{
color: white;
}
<!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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<ul>
<li id="mainm">Site Hazırlanma Aşamasında</li>
</ul>
</div>
</body>
</html>
Move the container styles to #mainm and add the color: white; to :hover.
Make note of the other styles I changed to clean it up a bit. I added text-align: center; to the id and removed the height. Instead of a fixed height just use padding.
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap');
/* font-family: 'Open Sans', sans-serif;*/
body {
background-color: #14213d;
margin: 0;
}
.container li {
list-style: none;
}
.container {
width: 100%;
height: 100%;
}
li#mainm {
border: 2px solid #fca311;
width: 400px;
padding: 30px 0px;
position: relative;
left: 720px;
top: 400px;
}
#mainm {
font-family: 'Open Sans', sans-serif;
color: #e63946;
font-size: 25px;
text-align: center;
}
#mainm:hover {
transition: 2s;
border-radius: 15px;
border-color: #43aa8b;
color: white;
background-color: #43aa8b;
}
<!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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<ul>
<li id="mainm">Site Hazırlanma Aşamasında</li>
</ul>
</div>
</body>
</html>
:root {
--colorsame: #1e90ff;
}
.container{
border: 2px solid var(--colorsame);
width: 400px;
height: 100px;
position: relative;
left: 720px;
top: 400px;
}
#mainm{
font-family: 'Open Sans', sans-serif;
color: var(--colorsame);
font-size: 25px;
padding-left: 5px;
padding-top: 15px;
}
When I try to increase font size of placeholder in input tag, my button next to input tag doesnt align properly. I tried to remove outline and border but that dont work. When I decrease font size button goes up, when increase font size it goes down.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Rubik', sans-serif;
}
.header{
background: linear-gradient(90deg, #443e98 30%, #6086f3);
height: 300px;
position: relative;
}
.header h1{
text-align: center;
color: #ffff;
font-size: 40px;
font-weight: 500;
margin-bottom: 50px;
}
.search-bar{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.search-bar input{
width: 300px;
height: 50px;
font-size: 20px;
}
.search-bar button{
width: 50px;
height: 50px;
}
<!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">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght#400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>IP Tracker</title>
</head>
<body>
<div class="header">
<h1>IP Address Tracker</h1>
<div class="search-bar">
<input type="text" placeholder="Search for any IP address or domain">
<button>›</button>
</div>
</div>
<div class="ip-bar"></div>
<div class="map-section"></div>
</body>
</html>
Thank for all your help.
If I'm understanding correctly you just want them to appear as a consistent row and stop acting as inline-block elements do by default and wrapping? If so you can utilize as shown below.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Rubik', sans-serif;
}
.header{
background: linear-gradient(90deg, #443e98 30%, #6086f3);
height: 300px;
position: relative;
}
.header h1{
text-align: center;
color: #ffff;
font-size: 40px;
font-weight: 500;
margin-bottom: 50px;
}
.search-bar{
position: absolute;
left: 50%;
transform: translateX(-50%);
/* Added CSS Below */
display: flex;
flex-direction: row;
}
.search-bar input{
width: 300px;
height: 50px;
font-size: 20px;
}
.search-bar button{
width: 50px;
height: 50px;
}
<!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">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght#400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>IP Tracker</title>
</head>
<body>
<div class="header">
<h1>IP Address Tracker</h1>
<div class="search-bar">
<input type="text" placeholder="Search for any IP address or domain">
<button>›</button>
</div>
</div>
<div class="ip-bar"></div>
<div class="map-section"></div>
</body>
</html>
Try using the following CSS:
.search-bar{
display: flex;
align-items: center;
justify-content: center;
}
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">