i'm trying to recreate this image in pure html and css, or add a little javascript if nessascary:
and here's what i have so far:
i'm trying to move that small orange box near the center up to match the blue line, but she won't budge
.middletop {
position: absolute;
background-color: #fe9800;
width: 26px;
height: 16px;
left: 471px;
}
and here's the entire code:
layout.html
<html>
<head>
<title>LCARS</title>
<link rel="stylesheet" href="static/style.css"/>
</head>
<body>
<div class="topleft">
</div>
<div class="topleft2">
</div>
<div class="middletop">
</div>
<div class="bottomleft">
</div>
<div class="bottomleft2">
</div>
<div class="bottomleft3">
</div>
<div class="bottomleft4">
</div>
<div class="content">
</div>
<div class="content2">
</div>
</body>
<footer>
</footer>
</html>
style.css
body {
background-color: black;
}
.topleft {
background-color: #c498c4;
width: 126px;
height: 90px;
}
.topleft2 {
margin-top: 5px;
background-color: #9b98fe;
width: 463px;
height: 112px;
border-radius: 0 0 0 70px;
}
.bottomleft {
margin-top: 7px;
background-color: #cc6061;
width: 463px;
height: 91px;
border-radius: 70px 0 0 0;
}
.bottomleft2 {
margin-top: 5px;
background-color: #cc6061;
width: 126px;
height: 137px;
}
.bottomleft3 {
margin-top: 5px;
background-color: #fe9800;
width: 126px;
height: 38px;
}
.bottomleft4 {
margin-top: 5px;
background-color: #ffa873;
width: 126px;
height: 180px;
}
.middletop {
position: absolute;
background-color: #fe9800;
width: 26px;
height: 16px;
left: 471px;
}
.content {
background-color: /*#6D6A6A*/black;
position: absolute;
left: 127px;
top: 239px;
border-radius: 35px;
width: 900px;
height: 700px;
}
.content2 {
background-color: black;
position: absolute;
left: 127px;
top: -2;
border-radius: 0 0 0 35px;
width: 900px;
height: 200px;
}
While I advise having a look into using absolute positioning extensively, if you're already doing it and you're happy with it, you just have to set top and you should be good to go:
.middletop {
position: absolute;
background-color: #fe9800;
width: 26px;
height: 16px;
left: 476px;
top:199px /* <-- this is what I added */
}
Here is a demo.
Try using
position: absolute;
top: /*the amount of px from the top to your wanted location*/;
left: /*the amount of px from the left to your wanted location*/;
z-index:1000; /*<= this is to be above all other elements*/
Use the css top:100px;. And to see it use: z-index:100;
Related
I'm trying to put a circle on the corner of a frame like the picture but only the part of the circle that's inside of the frame can be seen. The part that i marked with x is invisible.
How it looks:
How I want it to look:
My code:
.circle{
height: 150px;
width: 150px;
border-radius: 50%;
background: black;
line-height: 0;
position: absolute;
right:-20px; top:-2px;
z-index: 2;
}
.circle:after {
content: "";
display: block;
padding-bottom: 100%;
position: relative;
}
.circle-txt {
/* (E1) CENTER TEXT IN CIRCLE */
position: absolute;
bottom: 50%;
width: 100%;
text-align: center;
/* (E2) THE FONT - NOT REALLY IMPORTANT */
font-family: "font";
font-size:inherit;
}
:root{
--pic:"M510.295 108.139C571.169 177.774 609.697 279.36 589.662 365.38C570.398 451.399 492.572 521.854 409.352 555.443C326.132 589.031 236.748 586.574 162.775 548.889C88.8013 511.204 30.2391 438.292 8.66355 353.91C-12.1414 268.71 4.81077 171.22 56.438 104.043C107.295 36.8656 193.597 0 278.358 0C363.89 0.819237 448.651 38.5041 510.295 108.139Z"
}
.frame{
padding-right: 1px;
height: 579px;
width: 595px;
clip-path: path(var(--pic));
margin-left: 8%;
margin-bottom: 5%;
position: relative;
z-index: 1;
}
img{
height: 579px;
width: 595px;
}
<div class="frame">
<img src="1.png">
<div class="circle">
<div class="circle-txt">فریلنسینگ چیست؟</div>
</div>
</div>
I would appreciate if anyone can tell me what is that I'm doing wrong.
Check out my solution.
.circle {
height: 150px;
width: 150px;
border-radius: 50%;
background: black;
line-height: 0;
position: absolute;
right: 30px;
top: 38px;
z-index: 2;
}
.wrapp {
height: 579px;
width: 595px;
margin-left: 8%;
margin-bottom: 5%;
position: relative;
}
.frame {
clip-path: path(var(--pic));
}
img {
height: 579px;
width: 595px;
background: red;
}
.circle:after {
content: "";
display: block;
padding-bottom: 100%;
position: relative;
}
.circle-txt {
/* (E1) CENTER TEXT IN CIRCLE */
position: absolute;
bottom: 50%;
width: 100%;
text-align: center;
color:#fff;
/* (E2) THE FONT - NOT REALLY IMPORTANT */
font-family: "font";
font-size:inherit;
}
:root{
--pic:"M510.295 108.139C571.169 177.774 609.697 279.36 589.662 365.38C570.398 451.399 492.572 521.854 409.352 555.443C326.132 589.031 236.748 586.574 162.775 548.889C88.8013 511.204 30.2391 438.292 8.66355 353.91C-12.1414 268.71 4.81077 171.22 56.438 104.043C107.295 36.8656 193.597 0 278.358 0C363.89 0.819237 448.651 38.5041 510.295 108.139Z"
}
<div class="wrapp">
<div class="circle">
<div class="circle-txt">فریلنسینگ چیست؟</div>
</div>
<div class="frame">
<img src="1.png" />
</div>
</div>
From your description and images shared, it seems you maybe using border-radius around the entire set of elements, which is cutting off the smaller top right hand side circle.
Here is a solution you can use.
HTML:
<div class="circle-wrapper">
<div class="big-circle"></div>
<div class="little-circle"></div>
<div class="circle-wrapper">
CSS:
.circle-wrapper { position: relative; width: 24px; height: 24px; }
.big-circle { width: 24px; height: 24px; background: red; border-radius: 24px; }
.little-circle { position: absolute; width: 12px; height: 12px; background: blue; border-radius: 12px; top: -6px; right: -6px; }
Use border-radius to allow overflowing content to be seen, clip-path cuts it out ;) (or use it on img itself if that's good enough)
possible example.
.circle{
height: 150px;
width: 150px;
border-radius: 50%;
background: black;
line-height: 0;
position: absolute;
right:-20px; top:-2px;
z-index: 2;
}
.circle:after {
content: "";
display: block;
padding-bottom: 100%;
position: relative;
}
.circle-txt {
/* (E1) CENTER TEXT IN CIRCLE */
position: absolute;
bottom: 50%;
width: 100%;
text-align: center;
/* (E2) THE FONT - NOT REALLY IMPORTANT */
font-family: "font";
font-size:inherit;
color:hotpink;
}
:root{
--pic:"M510.295 108.139C571.169 177.774 609.697 279.36 589.662 365.38C570.398 451.399 492.572 521.854 409.352 555.443C326.132 589.031 236.748 586.574 162.775 548.889C88.8013 511.204 30.2391 438.292 8.66355 353.91C-12.1414 268.71 4.81077 171.22 56.438 104.043C107.295 36.8656 193.597 0 278.358 0C363.89 0.819237 448.651 38.5041 510.295 108.139Z"
}
.frame{
padding-right: 1px;
height: 579px;
width: 595px;
/*clip-path: path(var(--pic));*/
margin-left: 8%;
margin-bottom: 5%;
position: relative;
z-index: 1;
border-radius:50%;
border:solid;
}
img{
height: 579px;
width: 595px;
border-radius:50%;
background:hotpink;
}
<div class="frame">
<img src="1.png">
<div class="circle">
<div class="circle-txt"> فریلنسینگ چیست؟ </div>
</div>
</div>
Consider the following jsfiddle:
https://jsfiddle.net/0fwhmhLe/
html markup:
<div class="city-losangeles-bg">
<div class="user-container user-container-losangeles">
<div class="user-pic user-pic-losangeles"></div>
<div class="user-name-container">
<p class="user-name">User Name</p>
<div class="user-name-mask"></div>
</div>
<hr class="underline">
<div class="ellipse-container">
<div class="ellipse ellipse-losangeles-1"></div>
<div class="ellipse ellipse-losangeles-2 ellipse-with-left-margin"></div>
<div class="ellipse ellipse-losangeles-3 ellipse-with-left-margin"></div>
</div>
</div>
<p class="user-text user-text-losangeles">Some text that needs to be below the user-container div, based on the position and height of user-container</p>
</div>
css:
.city-losangeles-bg
{
width: 100%;
height: 1230px;
top: 0px;
background-color: orange;
position: relative;
}
.user-container
{
position: relative;
width: 206px;
height: 192px;
background-color: green;
}
.user-container-losangeles
{
left: 41%;
top: 25px;
}
.user-pic
{
position: relative;
width: 73px;
height: 73px;
left: -36.5px;
margin-left: 50%;
border-radius: 50%;
border: none;
}
.user-pic-losangeles
{
background-color: red;
}
.user-name-mask
{
position: relative;
width: inherit;
height: inherit;
top: 0;
}
.user-name
{
position: relative;
font-family: Ariel;
font-size: 28px;
text-align: center;
width: 100%;
/*top: -6px;*/ /*so text hides properly under color bar reveal animation */
}
.underline
{
position: absolute;
width: 178px;
top: 138px;
left: 14px;
margin-top: 0;
margin-bottom: 0;
}
.ellipse-container
{
position: absolute;
width: 126px;
height: 30px;
top: 162px;
left: 40px;
}
.ellipse
{
position: relative;
width: 30px;
height: 30px;
float: left;
border-radius: 50%;
border: none;
}
.ellipse-with-left-margin
{
margin-left: 18px;
}
.ellipse-losangeles-1
{
background-color: #4574b4;
}
.ellipse-losangeles-2
{
background-color: #71c8ca;
}
.ellipse-losangeles-3
{
background-color: #e6dddd;
}
.user-text
{
position: relative;
margin-top: 0; /* 100 */
font-family: Ariel;
font-size: 26px;
text-align: center;
line-height: 50px;
color: #848484;
}
.user-text-losangeles
{
margin-left: 29%;
width: 50%;
}
I can't figure out how to make the paragraph tag user-text user-text-losangeles always be below the div user-container user-container-losangeles. I thought they should automatically stack and if I changed user-container-losangeles's top property that user-text-losangeles would get bumped down as well.
Someone tell me what obvious mistake I am making please!!
You can use padding-top: 25px; on the container (.city-losangeles-bg) instead of the top:25px; of .user-container-losangeles
https://jsfiddle.net/y8pocwsn/1/
The reason: With position:relative and a topsetting an element is simply moved down from its original position, but the subsequent elements are NOT moved. The space reserved for the element is still the space it would occupy with top: 0 , which is the same as if that element would have position: static
Within my header, I am trying to place pending-button-notification over theimages-cart image. For some reason, the pending-button-notification div is showing on the left side of the header div.
Does anyone see why this isn't placing correctly?
This is the problematic code:
<div id="pending-order-button">
<a href="pendingOrders.html"><img src="images/cart.png" class="header-buttons" alt="Car">
<div id="pending-button-notification"></div>
</a>
</div>
header {
width: 100%;
max-width: 100%;
height: 100px;
position: relative;
border-bottom: 1px solid #E5E5E5;
}
#header-wrap {
width: 90%;
height: 100%;
margin: auto 5%;
}
#header-logo {
width: 200px;
height: auto;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.header-buttons {
width: 30px;
height: auto;
float: right;
margin: 30px 40px 0 50px;
cursor: pointer;
}
.header-buttons:first-child {
margin-right: 0;
}
#pending-order-button {
position: relative;
}
#pending-button-notification {
border-radius: 15px;
background: #09afdf;
height: 25px;
width: 25px;
position: absolute;
color: #FFF;
font-size: 1.3rem;
top: 5px;
left: 5px;
text-align: center;
}
<header>
<div id="header-wrap">
Logo
<img src="images/menu.png" class="header-buttons" alt="Pending Orders">
<div id="pending-order-button">
<a href="pendingOrders.html"><img src="images/cart.png" class="header-buttons" alt="Car">
<div id="pending-button-notification"></div>
</a>
</div>
</div>
</header>
It's your float:right on .header-buttons which is causing the problem.
I suggest that you remove that and float the #pending-order-button div instead so that it and all it's content is moved to the right.
#pending-order-button {
position: relative;
float:right;
}
I spent a hour to find the problem but I still can't find it.
When I zoom in and out in my browser, some elements are moving and some get bigger. For me, the element that is moving, is in his meant position at 67% zoom.
#structure {
background-color: blue;
height: 640px;
width: 1136px;
}
/* Starting the left side menu */
#select {
background-image: url('http://image.prntscr.com/image/876c2fde408443e0969559dfb4130848.png');
height: 640px;
width: 100px;
border-right: 4px solid rgba(69, 39, 28, 0.9);
float: left;
}
.menu {
height: 40px;
width: 40px;
margin-left: 30px;
margin-bottom: 34px;
}
.menu img {
height: 100%;
width: 100%;
}
#menu1 img, #menu7 img {
height: 120%;
width: 100%;
}
#menu1 {
height: 120px;
width: 40px;
margin-bottom: 50px;
margin-left: 37px;
margin-bottom: 30px;
}
#menu1 img {
margin-top: 7px;
height: 95px;
width: 28px;
}
#menu7 {
height: 40px;
width: 40px;
margin-top: 85px;
margin-left: 30px;
margin-bottom: 25px;
}
/* Closing the left side menu */
/* Starting slideshow Images */
#slideImg img {
position: relative;
height: 640px;
width: 683px;
float: left;
}
/* Closing slideshow Images */
/* Starting the quests side */
#quests {
background-image: url('http://image.prntscr.com/image/46c0de9e96474d5686b175d7cc343516.png');
height: 640px;
width: 350px;
float: left;
}
#seasonLevel {
height: 62px;
width: 62px;
z-index: 60px;
float: left;
position: relative;
top: 8px;
left: 10px;
}
#seasonLevel div {
position: relative;
top: 4px;
border: 3px solid white;
border-radius: 50%;
height: 60px;
width: 60px;
}
#seasonLevel div div {
border: 1px solid white;
border-radius: 50%;
height: 50px;
width: 50px;
margin: auto;
}
#seasonLevel div div p {
text-align: center;
font-family: sans-serif;
font-size: 30px;
color: rgba(255, 255, 255, 0.8);
position: relative;
bottom: 22px;
}
#seasonDesc {
width: 220px;
height: 65px;
position: relative;
left: 23px;
top: 12px;
float: left;
font-family: sans-serif;
}
#seasonDesc p:first-child {
font-size: 32px;
font-weight: bold;
position: relative;
bottom: 30px;
color: white;
font-weight: 600;
}
#seasonDesc p:last-child {
font-size: 23px;
font-weight: 600;
position: absolute;
top: 25px;
color: #DEDEDE;
opacity: 0.7;
}
#sunCont {
background-color: rgba(0, 0, 0, 0.3);
z-index: 50px;
height: 47px;
width: 314px;
position: relative;
right: 8px;
top: 33px;
z-index: 30px;
float: right;
}
.sun {
background-color: black;
opacity: 0.4;
width: 28px;
height: 28px;
border-radius: 50%;
margin-left: 0.01px;
margin-top: 9px;
display: inline-block;
position: relative;
left: 5px;
border: 1px solid white;
}
.rs {
height: 145px;
width: 331px;
position: relative;
background-image: url('http://image.prntscr.com/image/6741b6981a9543ac89e23b22521b631b.png');
display: inline-block;
background-size: 100%;
margin-bottom: 14px;
border: 0.2px solid black;
box-shadow: 0px 2px 0px black;
float: right;
}
/* Closing the quest side */
<!DOCTYPE html>
<html>
<head>
<title>VainGlory</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='style.css' rel = 'stylesheet' type = 'text/css'>
</head>
<body>
<div id = 'structure'>
<!--LS-->
<div id = 'select'>
<div id = 'menu1'> <img src = 'http://image.prntscr.com/image/ddc0c251ac4d4ca6970047e49f575ff4.png'> </div>
<div class = 'menu'> <img src = 'http://image.prntscr.com/image/421e8f797e5e4af5abd56e2c84c48884.png'> </div>
<div class = 'menu'> <img src = 'http://image.prntscr.com/image/4cb6887febbd4bc7a6f8242688165a9c.png'> </div>
<div class = 'menu'> <img src = 'http://image.prntscr.com/image/64bf74940f2449de99f8eedd0115dc55.png'> </div>
<div class = 'menu'> <img src = 'http://image.prntscr.com/image/10dd330b566d4b1d9cedc7793c67460b.png'> </div>
<div class = 'menu'> <img src = 'http://image.prntscr.com/image/2f4fdfd4a3964536a84689e5316c04e8.png'> </div>
<div id = 'menu7'> <img src = 'http://image.prntscr.com/image/ac57c5f7b73f44b8aa92c58a2289cff8.png'> </div>
</div>
<!--MID-->
<div id = 'slideImg'>
<div> <img src = 'http://image.prntscr.com/image/1025277995cb442a950a05fe3b168614.jpg'> </div>
</div>
<!--RS-->
<div id = 'quests'>
<div class="rs">
<div id="seasonLevel">
<div>
<div>
<p>10<p>
</div>
</div>
</div>
<div id = 'seasonDesc'>
<p>Autumn 2016</p>
<p>Remaining: <span id='time'></span></p>
</div>
<div id="sunCont">
<div class="sun">
</div>
<div class="sun">
</div>
<div class="sun">
</div>
<div class="sun">
</div>
<div class="sun">
</div>
<div class="sun">
</div>
<div class="sun">
</div>
<div class="sun">
</div>
<div class="sun">
</div>
</div>
</div>
<div class="rs">
</div>
<div class="rs">
</div>
<div class="rs">
</div>
</div>
<!--CLOSE-->
</div>
<script src="javas.js"></script>
</body>
</html>
From a quick look, it looks as though the problem is coming from the border being rendered incorrectly. As far as I know, there's not really a way for a browser to display half a pixel (ex: 0.2px in the rs class),
.rs {
height: 145px;
width: 331px;
position: relative;
background-image: url('http://image.prntscr.com/image/6741b6981a9543ac89e23b22521b631b.png');
display: inline-block;
background-size: 100%;
margin-bottom: 14px;
**border: 0.2px solid black;** <-- This here
}
You'll notice that if you add
* {
box-sizing: border-box;
}
(For testing purposes, what this is doing is making sure that every element in your document displays the border within the element itself rather than bumping out the width of the boxes.)
EDIT: If you add this box-sizing style to both the .rs class and the #select id, if should solve the problem. Both of these have borders defined which are bumping your width larger than you initially accounted for.
The problem fixes itself and just shows some blue on the right side. (which makes sense since we changed the width of the interior objects)
I think that the reason it is displaying correctly in the 67% zoom is because the 0.5 pixel is being rendered as roughly 1px. The math is a little complicated for me to figure out right away, but if you really want to know - I can look into that!
My suggestion would be to make sure that any of your borders are either whole numbers or by setting your box-sizing on your elements to work as "border-box" rather than the default which adds width to your elements.
.rs {
height: 145px;
width: 331px;
position: relative;
display: inline-block;
background-size: 100%;
margin-bottom: 14px;
border: 0.2px solid black;
}
This code will do its job!
I am familiar with HTML/CSS but am not advanced by any means.
I am having difficulty styling my form element.
I want to add padding around my form however whenever I do this is only pads the top and the left
The other issue is that when I re-size the window really small the form tag seems to protrude out of the
I would like to know what the proper way to do this is.
Also, if you could look over my simple code and let me know if there is a better/more standard way to do what I am trying to do here.
* {
box-sizing: border-box;
font-size: 15px;
margin: 0;
}
body {
padding: 5%;
}
section {
height: 100%;
float: left;
position: relative;
}
div {} .left-section {
width: 25%;
}
.right-section {
width: 75%;
}
.body-left {
background-color: #000000;
height: 93%;
}
.body-right {
background-color: #DCDCDC;
height: 86%;
}
.header {
background-color: #808080;
height: 7%;
}
.footer {
background-color: #808080;
height: 7%;
width: 100%;
position: absolute;
padding: 5px;
}
form {
position: absolute;
height: 100%;
width: 100%;
display: block;
}
input {
background-color: #808080;
border-style: solid;
border-width: small;
border-color: #555555;
border-radius: 5px;
position: absolute;
padding: 10px;
left: 0;
height: 80%;
width: 90%;
top: 50%;
transform: translateY(-50%);
}
button {
background-color: #808080;
border-style: solid;
border-width: small;
border-color: #555555;
border-radius: 5px;
height: 80%;
width: 10%;
position: absolute;
color: #555555;
top: 50%;
right: 0;
transform: translateY(-50%);
}
<html>
<head>
<title>whisper</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section id="left" class="left-section">
<div id="header_left" class="header">
</div>
<div id="body_left" class="body-left">
<ol id="users"></ol>
</div>
</section>
<section id="right" class="right-section">
<div id="header_right" class="header">
</div>
<div id="body_right" class="body-right">
<ol id="messages"></ol>
</div>
<div id="footer" class="footer">
<form id="form_id" action="#">
<input id="user_input" />
<button id="btn_id">send</button>
</form>
</div>
</section>
</body>
</html>
P.S. I have checkout this page but I couldn't find a sufficient answer.
I do not know if this helps but I switched the padding of 5 pixels from the footer class to the form styling.
.footer {
background-color: #808080;
height: 7%;
width: 100%;
position: absolute;
}
form {
position: absolute;
height: 100%;
width: 100%;
display: block;
padding: 5px;
}