In the attached image below, I want to recreate the "1" circle to the left of the profile box. I'm currently trying to use CSS positioning to get it like the image above, but whenever I shrink my computer screen, the circle doesn't move with the profile box. I'm not quite sure how to fix it. I've attached my code below the image.
body{
width: 100%;
}
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
width: 80%;
margin: auto;
height: 100%;
}
.Ranking{
position: absolute;
left: 20px;
top: 10%;
transform: translateY(-50%);
background: #000;
color: #fff;
height: 52px;
width: 52px;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
opacity: 1;
padding-top: 4px;
transition: background-color .25s linear .5s;
font-family: "Decima";
font-size: 30px;
line-height: 30px;
color: #f0f0f0;
font-weight: 300;
}
.Description{
flex:1;
background-color: blue;
grid-column: 2/5;
}
<!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="styles.css">
</head>
<body>
<div class="wrapper">
<div class="Ranking"></div>
<div class="Name">One</div>
<div class="Summary">Summary: <br>He really hits, with a LF fit</div>
<div class="Level">Highest Level: A+ <br> Age: 21</div>
<div class="Body">Height: 6'1" <br> Weight: 215 lbs</div>
<div class="Profile"><img src="images/Dustin Harris.jfif"> </div>
<div class="Description">Five</div>
</div>
</body>
</html>
There is a CSS element called #media which will come helpful to you
#media screen (min-width: 800px) {
.container {
/* position and any property of the element according the small screen viewport*/
}
}
800px is the screen size under which the screen become reactive.
You might want to look at two aspects: HTML markup and CSS basics. TL;DR. See this CodePen example I put together for you.
position: absolute; looks for the closest parent that has position value of relative, absolute, or fixed. If there's no parent that has such position value, the element will be positioned absolute against the body. In your example, wrapper (i.e. the immediate parent) doesn't have position defined, thus Ranking will be positioned outside your intended area.
As a matter of fact, you won't likely need absolute positioning here. transform: translateX() indeed is a good starter. Instead of translateY(), you could move it horizontally by translateX().
Again, see this CodePen example I put together for you.
Related
I have a text {L U V B A G} that should appear under the image. I need the html and css for it.
This is how it looks.
enter image description here
{L U V B A G} that should appear under the image.
If you want the text to be on top of your image but at the bottom you can use z-index like the comment says or you can use position absolute on your text.
Code below is adapted from : https://www.w3schools.com/howto/howto_css_image_text.asp
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
font-size: 3rem;
top: 90%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<img src="https://tse3.mm.bing.net/th?id=OIP.qpsTLCVZFHVmKABv5VH7YAHaE8&pid=Api" alt="food" style="width:100%;">
<div class="centered">Best Food 2022</div>
</div>
</body>
</html>
If you don't necessarily want your text on top of the image but rather separated and under your image you can just do two rows and use flexbox.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.flex-container {
display: flex;
flex-direction: column;
text-align: center;
}
</style>
</head>
<body>
<div class="flex-container">
<img src="https://tse3.mm.bing.net/th?id=OIP.qpsTLCVZFHVmKABv5VH7YAHaE8&pid=Api" alt="food" style="width:100%;">
<div>Best Food 2022</div>
</div>
</body>
</html>
Hope that answered your question!
Solution Explained
You'll have one parent div, and inside it, you'll have an image and the text. The text (i.e. <h2>) will have position: absolute with z-index: -1 to make it one layer down the image, and we will need to add position: relative to the parent to stick the <h2> absolute position to this parent.
The top: 15%; right: 50%; transform: translate(50%, -50%); are mainly used to position the absolute <h2> properly, horizontally centered with a little top percentage you can manipulate depending on the image.
Extras like letter-spacing was used to give a proper look & feel like the image you provided.
* {
margin: 0;
padding: 0;
}
.banner {
position: relative;
height: 500px;
text-align: center;
}
.banner h2 {
position: absolute;
top: 15%;
right: 50%;
transform: translate(50%, -50%);
font-size: 10rem;
letter-spacing: 20px;
z-index: -1;
}
.banner img {
height: 100%;
}
<div class="banner">
<h2>LUVBAG</h2>
<img src="https://www.pngall.com/wp-content/uploads/2016/04/Women-Bag-Transparent.png" alt="">
</div>
My goal here is to create an image slideshow. I'm trying to add the left and right arrows on each side, however my right arrow won't fit in the div. I'm kind of a beginner so bear with me, I was following w3 schools on the slideshow tutorial to make sense of things. I don't want to copy literally everything from w3 schools but like i said i'm a beginner and i'm trying to make sense of things. My next goal is to move on to js and try to solve things there myself.
<html>
<head>
<title>Practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="myscript.js"></script>
</head>
<body>
<div class="container">
<div class="regular-img" >
<img id="city" src="NYC.jpg">
</div>
<div class="regular-img" >
<img id="king" src="KING.jpg">
</div>
<a id="prev">❮</a>
<a id="fwd">❯</a>
</div>
</body>
</html>
````
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.container {
background-color: yellow;
height: 65vh;
width: 95vw;
margin: 75px auto;
}
img {
height: 100%;
width: 100%;
object-fit: cover;
}
.regular-img {
display: none;
}
a {
cursor: pointer;
/* color: white;
opacity: 0.7; */
position: absolute;
top: 50%;
font-size: 18px;
user-select: none;
font-weight: bold;
padding: 16px;
margin-top: -22px;
width: auto;
}
#fwd {
right: 0;
}
enter code here
Okay, the fellow developer no need to be afraid just add position: relative to .container and you will be good to go. It is because when you give something a position absolute it will relate to the closest parent element whose position is relative. if none is present it will relate to the HTML element so by adding a relative property to the .container right arrow will relate to its parent container and will stay in the container. Google the difference between position relative and absolute and you will have a better understanding
The solution here is very simple. You have added position: absolute; to the arrows. But you didn't add position: relative; to the parent div.
All you have to do is add this :
.container {
position: relative;
}
I'm currently working on a small little project where i want to use the HTML/CSS checkbox-'hack' to simulate a toggleable image rotation. Problem is, when i add more content to the page and resize it, the images wont stay together at all.
I've tried scaling the images by % and vw/vh without success, as well as scaling the header above the images to make sure they don't 'jump' around when they move.
https://jsfiddle.net/9u3vz5mo/
#cup {
width: 75%;
height: 50vh;
position: relative;
z-index: 1;
}
#mouth {
position: absolute;
width: 7%;
height: 3%;
z-index: 2;
top: 43.5%;
left: 50.5%;
}
<h1>Paragraph Time, please let this work oh lord</h1>
<div class="images">
<img id="cup" src="https://i.imgur.com/SFV05KS.png">
<input type="checkbox" id="checkmouth">
<label for="checkmouth">
<img id="mouth" src="https://i.imgur.com/95acGMs.png">
</label>
</div>
What i hope to achieve is a version where the images scale responsivly to the sites size, and where the rest of the content is shown without having the mouth fly of the designated space on the cup.
Add position: relative to parent element of both images (.images in this case) .
Then adjust position of #mouth
position: absolute elements are positioned relative to first parent element with position: relative
When setting the position to relative, you can add additional positioning attributes (top, bottom, left, right). The relative element is relative to itself. For example, if you set top: 10px the element will move 10px to the top from its normal position.
.images{
position: relative;
}
#cup {
width: 75%;
height: 50vh;
position: relative;
z-index: 1;
}
#mouth {
position: absolute;
width: 7%;
height: 6%;
z-index: 2;
top: 58.5%;
left: 50.5%;
}
#checkmouth {
display: none;
}
input:checked + label > img {
transform: rotateX(180deg);
transition-duration: 0.5s;
}
input:not(:checked) + label > img {
transform: rotateX(0deg);
transition-duration: 0.5s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="./style.css">
<title>Document</title>
</head>
<body>
<h1>Paragraph Time, please let this work oh lord</h1>
<div class="images">
<img id="cup" src="https://i.imgur.com/SFV05KS.png">
<input type="checkbox" id="checkmouth">
<label for="checkmouth">
<img id="mouth" src="https://i.imgur.com/95acGMs.png">
</label>
</div>
</body>
</html>
Always specify 100% width or vw for scaling, and do not set a specified height for images you want to scale correctly. Place them in a div container.
Your problem is setting a specified height .
Here's the codepen if it's easier. I'm also a beginner, just a heads up.
http://codepen.io/anon/pen/yaRpPL
My problem is that every time I hover over this circle, it extends the page size large enough that a scroll bar comes up when the circle reaches max size. I don't know how to explain, I just don't want that to happen...
Also, I can't get the text in the center of that circle to appear directly in the center. I feel like I've tried every CSS property I could think of.
Lastly, any tips on getting that circle to stay in the center for most common screen resolutions would be greatly appreciated. I have the margins set to percentages and it seems to be okay.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Echoes from Firelink</title>
<link href="homepage.css" type="text/css" rel="stylesheet">
<link rel="shortcut icon" href="coiledsword.ico">
</head>
<header>
home |
lite version
</header><!--End header-->
<body>
<div id="background_container">
<div id="content_container">
<p>From Software homepage</p>
</div>
</div>
</body>
</html>
CSS:
/* CSS page for the homepage. */
header {
text-align: center;
font-size: 10px;
}
#content_container {
background-color: black;
text-align:center;
color: white;
height: 200px;
width: 200px;
margin: 20% 45% 20% 45%;
border-radius: 50%;
transition: 2s;
}
#content_container:hover {
transform: scale(1.4);
}
You need to change your margin, Do not use percentage values.
If you need to center your text just the code below to the parent element.
display:flex;
justify-content:center;
align-items:center;
The css code:
header {
text-align: center;
font-size: 10px;
}
#content_container {
display:flex;
justify-content:center;
align-items:center;
background-color: black;
text-align:center;
color: white;
height: 200px;
width: 200px;
border-radius: 50%;
transition: 2s;
}
#content_container:hover {
transform: scale(1.4);
}
I am learning HTML and CSS and wanted to make a simple portfolio mockup page for myself and I am having a problem with the layout which I can't figure out.
![My page layout][1]: http://i.stack.imgur.com/EGsdM.png
The idea is that the boxes on left side of face and right side should be at the same height, but since something in my code is not quite right, they won't be when I apply same margin to a box on right and a box on left. On this picture through different margins I have gotten them pretty much to the right height but on bigger monitors the difference is more visible.
MY HTML code :
<!doctype html>
<html>
<head>
<title>Martin Hirvesaar</title>
<meta charset="UTF-8" />
<meta http-equiv="Content-type" content="text/html; charset=ut f-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" type="text/css" href="reset.css">
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="container">
<img id="name" src="IMG/name.png" alt="Martin-Hirvesaar" />
<img id="face" src="IMG/face.png" alt ="low-poly-face" />
<div class="button" id="bio"><p>bio</p></div>
<div class="button" id="portfolio"><p>portfolio</p></div>
<div class="button" id="blog"><p>blog</p></div>
<div class="button" id="contact"><p>contact me</p></div>
</div>
</body>
</html>
My CSS :
body{
background-color:#80edc3;
width:100%;
height: 100%;
}
a{
text-decoration: none;
color:black;
}
a:hover{
font-size: 1.3em;
}
#container{
width:100%;
height: 1000px;
position: relative;
margin: 0 auto;
}
#face{
height:750px;
width:400px;
margin: 5% auto 0 ;
display: block;
padding-bottom: 10%;
}
#name{
height:12%;
width: 75%;
margin:10% 20% 0 15%;
display: block;
}
.button{
height:20%;
width:35%;
display: block;
}
.button p{
font-family: 'Permanent Marker', cursive;
font-size: 2.5em;
position: relative;
display: block;
padding-top:15%;
padding-left:9%;
color:black;
}
#bio p{
padding-left: 20%;
display: block;
position: relative;
}
#bio{
margin-top: -50%;
margin-left: 20%;
background-color: #87BCEB;
}
#portfolio{
margin-top: 5%;
margin-left: 20%;
background-color: #FFCE8A;
}
#blog p{
float:right;
padding-right: 15%;
}
#blog{
margin-top: -32.5%;
margin-left:50%;
background-color: #FFAE8A;
}
#contact{
margin-top:5%;
margin-left:50%;
background-color: #E77D99;
}
#contact p{
float:right;
padding-right: 4%
}
the webpage is online on : www.martinhirvesaar.com
Because you are using percentages for the margins the boxes will keep shifting depending on the size of the browser window. If you resize the window on your screen you can see how this will change. You'd want to use fixed pixel numbers to hold them in a specific place. (like margin-top: -20px; for example) Your image is a fixed size, while a lot of elements around it are moving around based %. I would redo the code to fix the elements in their positions around the image. You could then use #media query to resize for different screens.
Since you want the head image to "float" above the button blocks, position it absolutely in the middle with:
# face {
position: absolute;
left: 50%;
margin-left: -200px;
}
Then put your button blocks in a container in the natural layout order: bio, blog, portfolio, contact. You can then give them float: left with proper margins to position them correctly relative to one another.
Then use a margin to position the button container on the page where you want it.