The Element is not resizing and browser is not re-calculating the position of the Element even though all the widths and heights are mentioned in percentages only. This code basically renders a Squared DIV with Two elements one with Centered and another at right top corner of the SQuare.
<html>
<head>
<style>
.board {
font-size: 8em;
}
.cellContainerOuter {
width: 100%;
padding-bottom: 100%;
position: relative;
background-color: yellow;
border: 1px solid black;
}
.cellContainer {
width: 100%;
padding-bottom: 100%;
position: absolute;
display: table;
}
.cellContainerInner {
padding-bottom: 50%;
padding-top: 50%;
padding-left: 50%;
padding-right: 50%;
position: relative;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.text {
border: 0px dotted white;
position: absolute;
bottom: 20%;
top: 20%;
left: 20%;
right: 20%;
overflow: hidden;
text-overflow: clip;
display: block;
}
.weight {
position: absolute;
right: 0px;
top: 0px;
margin: 2px;
border: 1px solid white;
}
</style>
</head>
<body>
<div class="board">
<div id="cell3_C_1" class="cellContainerOuter" title="ఇ">
<div id="cell2_C_1" class="cellContainer" title="ఇ">
<div id="cell_C_1" class="cellContainerInner" title="ఇ">
<span id="weight_C_1" class="weight" title="6">6</span>
<span id="text_C_1" class="text" title="ఇ">ఇ</span>
</div>
</div>
</div>
</div>
</body>
</html>
Any help to resolve this issue is highly appreciated.
CodePen: https://codepen.io/mdileep/full/MGrNgw/
Refactored your CSS.
Let me know if this is the behaviour you are expecting.
OR with responsive you mean to change your height of 6 as well?
body {
margin: 0;
}
.cellContainer {
position: relative;
background: yellow;
width: calc(100vw - 20px);
height: calc(100vh - 20px);
margin: 10px;
}
.cellContainerInner {
border: 1px solid;
height: 100%;
display: flex;
}
.weight {
font-size: 8em;
position: absolute;
right: 0px;
top: 0px;
border: 1px solid;
}
.text {
flex: 1;
font-size: 8em;
/* border:2px solid; */
align-self: center;
text-align: center;
}
<div class="board">
<div id="cell3_C_1" class="cellContainerOuter" title="ఇ">
<div id="cell2_C_1" class="cellContainer" title="ఇ">
<div id="cell_C_1" class="cellContainerInner" title="ఇ">
<span id="weight_C_1" class="weight" title="6">6</span>
<span id="text_C_1" class="text" title="ఇ">ఇ</span>
</div>
</div>
</div>
</div>
Related
I have a webpage like this:
Its code can be found here in JSFiddle
<div class="arrow">
<div class="line"></div>
<div class="triangle"></div>
</div>
<div id="warmup_container">
<p id="warmup_title">這是中文</p>
<div id="warmup_mark"></div>
<p id="warmup_text">some text </p>
</div>
:root {
--arrow-body-length: 500px;
--arrow-tip-length: 30px;
}
.arrow {
position: absolute;
top: 42%;
width: var(--arrow-body-length) + var(--arrow-tip-length);
}
.line {
margin-top: 11px;
width: var(--arrow-body-length);
background: green;
height: 9px;
float: left;
}
.triangle {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: var(--arrow-tip-length) solid green;
float: right;
}
#warmup_container {
height: 200px;
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
top: 8%;
}
#warmup_title {
text-align: center;
margin-top: 0px;
writing-mode: vertical-rl;
}
#warmup_mark {
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
margin-top: 10px;
margin-bottom: -10px;
}
#warmup_text {
text-align: center;
width: 200px;
}
My problem is that when I add more characters into warmup_title, the red circle would not stay on the green line.
How can I change my code so that the red circle always stays on the green line no matter how many characters I type in warmup_title element?
The red circle might also not stay on the green line when I change the size of the window of my browser.
Try this:
:root {
--arrow-body-length: 500px;
--arrow-tip-length: 30px;
}
.arrow {
display: inline-flex;
position: absolute;
bottom: 40%;
width: var(--arrow-body-length) + var(--arrow-tip-length);
}
.line {
margin-top: 11px;
width: var(--arrow-body-length);
background: green;
height: 9px;
float: left;
}
.triangle {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: var(--arrow-tip-length) solid green;
float: right;
}
#warmup_container {
height: 200px;
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
top: 8%;
}
#warmup_title {
text-align: center;
margin-top: 0px;
writing-mode: vertical-rl;
}
#warmup_mark {
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
margin-top: 10px;
margin-bottom: -10px;
z-index: 10;
}
#warmup_text {
text-align: center;
width: 200px;
}
<div id="warmup_container">
<p id="warmup_title">這是中文abc</p>
<div id="warmup_mark"></div>
<p id="warmup_text">some text </p>
<div class="arrow">
<div class="line"></div>
<div class="triangle"></div>
</div>
</div>
Your idea of fixing the green line is right, but it shouldn't use the top property, since the text can be extend, so it will break the visual. Instead make it bottom to anchor it at the end; also remove the height: 200px, add an outer div with position: relative to contain the absolute one.
About the breaking arrow when changing window size, i think make it width: 100% with a max-width to contain the width of it done better job than fixing it right away, so it can responsive with the screen size.
:root {
--arrow-body-length: calc(100% - 30px);
--arrow-tip-length: 30px;
}
.container {
position: relative;
}
.arrow {
position: absolute;
bottom: 35px;
width: var(--arrow-body-length) + var(--arrow-tip-length);
width: 100%;
max-width: 500px;
}
.line {
margin-top: 11px;
width: var(--arrow-body-length);
background: green;
height: 9px;
float: left;
}
.triangle {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: var(--arrow-tip-length) solid green;
float: right;
}
#warmup_container {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
#warmup_title {
text-align: center;
margin-top: 0px;
writing-mode: vertical-rl;
}
#warmup_mark {
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
margin-top: 10px;
margin-bottom: -10px;
}
#warmup_text {
text-align: center;
width: 200px;
}
<div class="container">
<div class="arrow">
<div class="line"></div>
<div class="triangle"></div>
</div>
<div id="warmup_container">
<p id="warmup_title">這是中文abc def</p>
<div id="warmup_mark"></div>
<p id="warmup_text">some text </p>
</div>
</div>
I am creating a Simon Says game that uses the flashing of colors as a memory game.
I want to overlay 4 circles on each of the four corners of a background square (the square will be transparent in the final version).
I have attached an image LINK TO IMAGE of what I would like it to look like and I've included the HTML and CSS.
.html {
color: grey;
}
#green {
width: 150px;
height: 150px;
border-radius: 75px;
background-color: green;
border-color: black;
/*position: relative;*/
/*float: left;*/
}
#red {
width: 150px;
height: 150px;
border-radius: 75px;
background-color: red;
border-color: black;
}
#yellow {
width: 150px;
height: 150px;
border-radius: 75px;
background-color: gold;
border-color: black;
}
#blue {
width: 150px;
height: 150px;
border-radius: 75px;
background-color: blue;
border-color: black;
}
#square {
width: 400px;
height: 400px;
background-color: purple;
position: relative;
text-align: center;
display: flex;
}
#display {
width: 400px;
height: 400px;
border-radius: 200px;
background-color: black;
position: relative;
text-align: center;
display: flex;
}
#controls {
margin: auto;
position: relative;
text-align: center;
}
#Highscore {
position: relative;
width: 30px;
height: 20px;
border-radius: 5px;
background-color: lightgrey;
text-align: center;
display: inline-block;
}
#Currentscore {
position: relative;
width: 30px;
height: 20px;
border-radius: 5px;
background-color: lightgrey;
text-align: center;
display: inline-block;
}
#startButton {
position: relative;
width: 60px;
height: 20px;
border-radius: 5px;
background-color: lightgrey;
text-align: center;
display: inline-block;
}
#powerLight {
background-color: red;
width: 8px;
height: 8px;
border-radius: 50%;
margin: 5px auto;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simon Memory Game</title>
</head>
<body>
<div class="game">
<div id="green"></div>
<div id="red"></div>
<div id="yellow"></div>
<div id="blue"></div>
<div id="square">
<div id="display">
<div id="controls">
<div id="Highscore">00</div>
<button class="button" id="startButton">START</button>
<div id="Currentscore">00</div>
<div id="powerLight"></div>
</div>
</div>
</div>
</div>
</body>
</html>
As has been suggested, you can use absolute positioning in order to achieve what you want.
I have moved the circle divs into the #square div, as to my understanding we want to position the circles within that div.
Then you can use left, right, top and bottom to position them, as I have done in the example below.
.html {
color: grey;
}
.game {
position: relative;
}
#green {
width: 150px;
height: 150px;
border-radius: 75px;
background-color: green;
border-color: black;
position: absolute;
left: 0;
top: 0;
}
#red {
width: 150px;
height: 150px;
border-radius: 75px;
background-color: red;
border-color: black;
position: absolute;
right: 0;
top: 0;
}
#yellow {
width: 150px;
height: 150px;
border-radius: 75px;
background-color: gold;
border-color: black;
position: absolute;
left: 0;
bottom: 0;
}
#blue {
width: 150px;
height: 150px;
border-radius: 75px;
background-color: blue;
border-color: black;
position: absolute;
right: 0;
bottom: 0;
}
#square {
width: 400px;
height: 400px;
background-color: purple;
position: relative;
text-align: center;
display: flex;
}
#display {
width: 400px;
height: 400px;
border-radius: 200px;
background-color: black;
position: relative;
text-align: center;
display: flex;
}
#controls {
margin: auto;
position: relative;
text-align: center;
}
#Highscore {
position: center;
width: 30px;
height: 20px;
border-radius: 5px;
background-color: lightgrey;
text-align: center;
display: inline-block;
}
#Currentscore {
position: center;
width: 30px;
height: 20px;
border-radius: 5px;
background-color: lightgrey;
text-align: center;
display: inline-block;
}
#startButton {
position: relative;
width: 60px;
height: 20px;
border-radius: 5px;
background-color: lightgrey;
text-align: center;
display: inline-block;
}
#powerLight {
background-color: red;
width: 8px;
height: 8px;
border-radius: 50%;
margin: 5px auto;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simon Memory Game</title>
<link rel="stylesheet" href="assignment-02.css">
</head>
<body>
<div class="game">
<div id="square">
<div id="display">
<div id="controls">
<div id="Highscore">00</div>
<button class="button" id="startButton">START</button>
<div id="Currentscore">00</div>
<div id="powerLight"></div>
</div>
</div>
<div id="green"></div>
<div id="red"></div>
<div id="yellow"></div>
<div id="blue"></div>
</div>
</div>
<script src="assignment-02.js"></script>
</body>
</html>
I want glyphicon-remove to be placed at the right end of input text box, here's my code-
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
position: relative;
background-color: rgba(0,0,0,0.9);
height: 100vh;
}
.content{
text-align: center;
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
.fill_text{
width: 20%;
height: 42px;
background-color: #DDD;
border-radius: 20px;
font-size: 20px;
padding: 10px;
border: 5px solid #E35F14;
margin: 10px auto;
outline: 0;
position: relative;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="content">
<input type="text" class="fill_text">
<span class="glyphicon glyphicon-remove"></span>
</input>
</div>
I am setting the position of input text box as relative and I have tried by giving the position of the remove icon as absolute, but that's not working. Could you tell me why that's not working?
No elements are allowed inside <input> elements.
add this CSS
.glyphicon-remove{
position: absolute;
top: 50%;
right: 30px;
z-index:10;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
position: relative;
background-color: rgba(0,0,0,0.9);
height: 100vh;
}
.content{
text-align: center;
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
.fill_text{
width: 20%;
height: 42px;
background-color: #DDD;
border-radius: 20px;
font-size: 20px;
padding: 10px;
border: 5px solid #E35F14;
margin: 10px auto;
outline: 0;
position: relative;
}
.glyphicon-remove{
position: absolute;
top: 50%;
right: 30px;
z-index:10;
cursor:pointer;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="content">
<input type="text" class="fill_text"/>
<span class="glyphicon glyphicon-remove"></span>
</div>
Bear with me on this... little hard to explain. So what I'm attempting to do is have a block of text remove the background of a div directly behind it. The image linked below was done is Illustrator and now I'm trying to find a solution within HTML & CSS.
Illustrator screenshot of what I'm trying to accomplish
.grid-item {
position: relative;
width: 300px;
height: 200px;
padding: 5px;
}
.grid-container {
position: relative;
width: 100%;
height: 100%;
background-color: #eee;
}
.grid-container img {
position: absolute;
}
.grid-item-overlay {
position: absolute;
top: 5px;
left: 5px;
bottom: 5px;
right: 5px;
background-color: rgba(0,0,0,0.5);
}
span {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
font-weight: 700;
font-family: sans-serif;
font-size: 40px;
text-align: center;
color: #fff;
}
<div class="grid-item">
<div class="grid-container">
<img src="https://unsplash.it/300/200/?random">
<div class="grid-item-overlay">
<span>Text Here</span>
</div>
</div>
</div>
The objective is to have the span text create a transparent mask of the grid-item-overlay background.
I'm open to any suggestions! :)
You could try working with mix-blend-mode,
mix-blend-mode : The mix-blend-mode CSS property describes how an
element's content should blend with the content of the element's
direct parent and the element's background.
.grid-item {
position: relative;
width: 300px;
height: 200px;
padding: 5px;
}
.grid-container {
position: relative;
width: 100%;
height: 100%;
background-color: #eee;
}
.grid-container img {
position: absolute;
}
.grid-item-overlay {
position: absolute;
top: 5px;
left: 5px;
bottom: 5px;
right: 5px;
background-color: rgba(0,0,0,0.5);
}
span {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
font-weight: 700;
font-family: sans-serif;
font-size: 40px;
text-align: center;
color:rgba(255,255,255,1);
mix-blend-mode: overlay;
}
<div class="grid-item">
<div class="grid-container">
<img src="https://unsplash.it/300/200/?random">
<div class="grid-item-overlay">
<span>Text Here</span>
</div>
</div>
</div>
<div class="grid-item">
<div class="grid-container">
<img src="https://unsplash.it/300/200/?random">
<div class="grid-item-overlay">
<span class="text">Text Here</span>
</div>
</div>
</div>
Add this css to your css File
.text{
color: rgba(255, 255, 255, 0.1);
}
.grid-item-overlay:before{
position: absolute;
content:" ";
top:0;
left:0;
width:100%;
height:100%;
display: block;
z-index:0;
background-color:rgba(255,0,0,0.5);
}
I have created a slideshow and to the right of it there are divs, they will be enlarged when you hover over them and when you take your cursor off the div it will shrink. But, the aside (the divs parent) is in the correct place where it should be, it's the divs that aren't filling the top of the aside element. How can I get the divs to fill the aside element and not break anything else?
.thing {
height: 120px;
width: 250px;
z-index: 10;
position: relative;
border: 5px solid brown;
}
.thing:hover {
position: absolute;
height: 100%;
top: 0;
left: 0;
z-index: 11;
}
.report {
text-align: left;
vertical-align: top;
display: table;
width: 100%;
}
.aside {
display: table-cell;
padding-top: 5px;
width: 250px;
border-radius: 10px;
border: 2px solid black;
overflow: hidden;
position: relative;
height: 385px;
}
.container {
position: relative;
width: 750px;
height: 400px;
border-radius: 5px;
border: 1px solid black;
overflow: hidden;
}
<div class="report">
<div id="imgGallary" class="container">
<img src="images/companies.png" alt="" width="750" height="400" />
<img src="gallery" alt="" width="750" height="400" />
</div>
<aside class="aside">
<div id="c1"></div>
<div class="thing" style="background-color: blue;">
<h1>Find Us!</h1>
</div>
<div class="thing" style="background-color: orange;"></div>
<div class="thing" style="background-color: pink"></div>
</aside>
</div>
Your CSS layout is confusing display: table and display: relative. They aren't compatible like you have them. The preferred way to layout your .container and the aside would be to use floats. I revised your example to float those two containers next to each other (roughly at a 80/20 split for the width). This has the added bonus of making your layout responsive.
Working codepen:
http://codepen.io/staypuftman/pen/vKoPmw
.thing {
height: 120px;
width: 250px;
position: relative;
border: 5px solid brown;
}
.thing:hover {
position: absolute;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
.report {
text-align: left;
vertical-align: top;
display: table;
width: 100%;
}
.aside {
padding-top: 5px;
width: 18%;
border-radius: 10px;
border: 1% solid black;
overflow: hidden;
float: left;
position: relative;
height: 385px;
}
.container {
float: left;
width: 80%;
height: 400px;
border-radius: 5px;
border: 1px solid black;
overflow: hidden;
}