I have seen many answers on this but doesn't seem to work for me. I have code like this which creates two boxes red colored:
.redboxes-horz {
width: 100%;
margin-bottom: 50px;
height: auto;
top: 0;
right: 0;
}
.redbox-horz-lg {
width: 76.05%;
background: rgba(200, 16, 46, 1);
padding: 17px 20px;
top: 0;
right: 0;
left: calc(23.95%);
position: relative;
height: auto !important;
text-align: left !important;
}
.redbox-horz-sm {
position: absolute;
width: 22px;
height: 22px;
background: rgba(200, 16, 46, 1);
position: absolute;
bottom: -22px;
left: calc(23.95% - 22px);
}
.redbox-horz-lg h1 {
color: #fff;
padding: 0;
margin: 0;
font-size: 31px;
font-weight: normal;
line-height: 1.1;
}
<div class="redboxes-horz">
<div class="redbox-horz-sm"></div>
<div class="redbox-horz-lg">
<h1>Structural Discovery Branding Standards Heading</h1>
</div>
</div>
This is how it looks right now
The issue is that I want my heading to be left aligned. For some reason when I make the display as inline-block the whole CSS gets disturbed and stops working.
For .redbox-horz-lg try using align-content: justify; or align-content: left;. If not try align-items.
Use left:0; for the class .redbox-horz-lg in css.
.redbox-horz-lg {
left:0;
}
.redboxes-horz {
width: 100%;
margin-bottom: 50px;
height: auto;
top: 0;
right: 0;
}
.redbox-horz-lg {
width: 76.05%;
background: rgba(200, 16, 46, 1);
padding: 17px 20px;
top: 0;
right: 0;
left:0px;
position: relative;
height: auto !important;
}
.redbox-horz-sm {
position: absolute;
width: 22px;
height: 22px;
background: rgba(200, 16, 46, 1);
position: absolute;
bottom: -22px;
left: calc(23.95% - 22px);
}
.redbox-horz-lg h1 {
color: #fff;
padding: 0;
margin: 0;
font-size: 31px;
font-weight: normal;
line-height: 1.1;
}
<div class="redboxes-horz">
<div class="redbox-horz-sm"></div>
<div class="redbox-horz-lg">
<h1>Structural Discovery Branding Standards Heading</h1>
</div>
</div>
I did some changes, you are expect like this?:
.redboxes-horz {
width: 100%;
margin-bottom: 50px;
border: solid;
background-color: white;
height: 80px;
position: relative;
}
.redbox-horz-lg {
width: 76.05%;
background: rgba(200, 16, 46, 1);
padding: 27px 10px;
position: absolute;
top:0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
}
.redbox-horz-sm {
width: 22px;
height: 22px;
background: rgba(200, 16, 46, 1);
position: absolute;
bottom: -22px;
left: calc(23.95% - 22px);
}
.redbox-horz-lg h1 {
color: #fff;
padding: 0;
margin: 0;
font-size: 1em;
font-weight: normal;
line-height: 1.1;
}
<div class="redboxes-horz">
<div class="redbox-horz-sm"></div>
<div class="redbox-horz-lg">
<h1>Structural Discovery Branding Standards Heading</h1>
</div>
</div>
Related
I'm trying to take a variable and display it on my html page via CSS for a Graphical display in OBS streaming software.
Every time I add the class .wrappers to the span id p1Name (as well as p2Name) the text disappears from the html output in OBS.
What is causing the text to disappear? As otherwise it perfectly is displayed when I don't include the class .wrappers
I've tried modifying overall page settings, the class specifications and moving the object itself but the text just seems to have disappeared.
Edit Changing the opacity within wrappers does not affect the visibility of the object
//Time stuff
let time = document.getElementById("current-time");
setInterval(() => {
let d = new Date();
time.innerHTML = d.toLocaleTimeString(navigator.language, {
hourCycle: 'h23',
hour: '2-digit',
minute: '2-digit'
});
}, 1000);
#font-face {
font-family: "Futura";
src: url('Resources/Fonts/Brandon_bld.otf');
}
* {
margin: 0;
padding: 0;
font-family: "Futura";
box-sizing: border-box;
overflow: hidden;
white-space: nowrap;
}
.graphicBox {
position: absolute;
width: 1800px;
height: 105px;
background: rgb(51, 116, 182);
background: linear-gradient(90deg, rgba(51, 116, 182, 0.75) 0%, rgba(110, 83, 180, 0.75) 70%);
border-radius: 15px;
bottom: 40px;
left: 50px;
filter: drop-shadow(-2px 2px 4px black);
}
.statusBox {
position: absolute;
font-family: "Futura";
font-weight: bold;
padding-top: 8px;
font-size: 40px;
width: 130px;
height: 70px;
background: rgb(231, 231, 231);
border-radius: 15px;
text-align: center;
bottom: 125px;
left: 100px;
filter: drop-shadow(-2px 2px 4px black);
}
.timeDisplay {
width: 140px;
height: 30px;
display: flex;
align-items: left;
justify-content: center;
position: absolute;
font-size: 14px;
color: white;
bottom: 58px;
left: 771px;
}
.timeZone {
width: 60px;
height: 20px;
display: flex;
align-items: left;
justify-content: space-between;
position: absolute;
font-size: 15px;
color: white;
bottom: 40px;
left: 812px;
}
.scoreboardP1 {
position: absolute;
left: 150px;
bottom: 60px;
width: 300px;
}
.scoreboardP2 {
position: absolute;
left: 450px;
bottom: 60px;
width: 300px;
}
.wrappers {
position: absolute;
width: 340px;
height: 100px;
line-height: 54px;
top: 356px;
opacity: 0;
color: black;
}
#p1Wrapper {
bottom: 540x;
left: 300px;
color: white;
}
#p2Wrapper {
width: 300px;
bottom: 20px;
left: 100px;
color: white;
}
.scoreDisplay {
position: absolute;
color: white;
width: 60px;
height: 60px;
align: center;
font-family: "Avant";
}
#p1Format {
top: 30px;
left: 1160px;
}
#p2Format {
top: 30px;
left: 1450px;
}
.scoreBox {
position: absolute;
width: 45px;
height: 45px;
background: white;
border-radius: 10px;
align: center;
}
#p1Box {
top: 28px;
left: 1150px;
}
#p2Box {
top: 28px;
left: 1440px;
}
<div class="graphicBox">
</div>
<div class="statusBox">
<p>NEXT</p>
</div>
<div class="timeDisplay">
<h1 id="current-time"></h1>
</div>
<div class="timeZone">
<p>EST</p>
</div>
<div id="overlayP1" class="scoreboardP1">
<span id="p1Wrapper" class="wrappers">
<span id="p1Name" class="names"></span>
</span>
</div>
<div class="scoreboardP2">
<span id="p2Wrapper">
<span id="p2Name" class="names"></span>
</span>
</div>
The problem seem to be two things in the CSS class .wrappers.
Because .wrappers has the property position: absolute, the element was disappearing out of the screen.
Also, with the propriety opacity: 0 the item is invisible.
So, by commenting out these elements in the CSS:
.wrappers {
/* position: absolute; */
width: 340px;
height: 100px;
line-height: 54px;
top: 356px;
/* opacity: 0; */
color: black;
}
I can now see both p1Name and p2Name when the parent span p1Wrapper and p2Wrapper have the wrappers class added to them, like this:
<span id="p1Wrapper" class="wrappers">
Also, just some quick notes:
align: center is not a valid CSS property.
While testing I added inside the p1Name span some words "testp2" so I could see the changes after formatting: <span id="p2Name" class="names">testp2</span>
Is there any simple way that I could efficiently make use of one textbox/container and use it for all of my pages?
I am new to HTML/CSS, so I had been duplicating the same code every time in CSS for the same style, but just different positioning.
Is there a way I could make just one container & one textbox in CSS that gives a fixed style, but the positioning could be changed?
.container-2 {
position: relative;
top: 230px;
left: 1166px;
}
.textbox1 {
background: rgb(172, 221, 232);
border: 3.5px solid black;
width: 900px;
height: 215px;
padding: 15px 25px;
position: absolute;
right: 467px;
top: 385px;
margin: 0;
}
.textbox2 {
background: rgb(45, 110, 125);
border: 3.5px solid black;
width: 900px;
height: 45px;
padding: 15px 25px;
position: absolute;
right: 1625px;
top: 71px;
margin: 0;
}
.container-3 {
position: relative;
top: 550px;
left: 1166px;
}
.textbox3 {
background: rgb(45, 110, 125);
border: 3.5px solid black;
width: 900px;
height: 45px;
padding: 15px 25px;
position: absolute;
right: 1625px;
top: 0px;
z-index: 0.9;
}
.textbox4 {
background: rgb(172, 221, 232);
border: 3.5px solid black;
width: 900px;
height: 290px;
padding: 15px 25px;
position: absolute;
right: 467px;
top: 630px;
margin: 0;
}
.textbox1 p {
color: black;
text-align: justify;
font-weight: bold;
}
.textbox2 p {
color: white;
position: relative;
font-size: 50px;
bottom: 62px;
left: 370px;
}
.textbox3 p {
color: white;
position: relative;
font-size: 50px;
bottom: 64px;
left: 150px;
}
.textbox4 p {
color: black;
text-align: center;
font-weight: bold;
width: 302px;
left: 90px;
position: relative;
}
<section class="textbox1">
<p>#
<p>
<em>#</em>
</section>
<section class="container-2">
<section class="textbox2">
<p>#
<p>
</section>
</section>
<section class="container-3">
<section class="textbox3">
<p>#
<p>
</section>
</section>
<section class="textbox4">
<p>'#'</p>
</section>
I recently wrote some code for a pop-up sign in and sign up. But I am having trouble as I want to hide overflow-y when someone is signing up using my pop-up.
#Login {
background: rgba(102, 102, 102, 0.5);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: none;
}
#okno1 {
width: 400px;
height: 200px;
text-align: center;
padding: 15px;
border: 2px solid #3A5156;
color: Black;
font-family: Ubuntu;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: #fff;
font-size: 22px;
}
#Login:target {
display: block;
}
<div id="Login">
<div id="okno1">
Вход<br>
<img src="Krest.png" id="Krestik1">
</div>
</div>
Try using overflow-y: hidden:
:root,
html,
body {
overflow-y: hidden;
}
The design calls for the blue sphere to be behind the 'background', but over the edge of the container.
Design by Drippple artist Camila Cat: https://dribbble.com/Camila_cat
Code: First off my code is here:
https://codepen.io/misterhtmlcss/pen/VXxVvQ
I have no idea how to cover the exterior of the sphere that overlaps with the background, while allowing it (the sphere in the top left corner) to STILL cover the top left corner of the 'container'.
------ Structural HTML included here for simplicity -----
------ START HTML -----
<div class="container">
<div class="card">
<div class="top-border"> </div>
<div class="card-body"> </div>
</div>
<div class="top-left"></div>
</div>
------- End HTML ------
------- SCSS -------
* {
box-sizing: border-box;
}
$background: #eef1f8;
$card: rgb(253, 253, 253);
$shadow: 2px 2px 6px rgba(grey, 0.6);
$green: rgb(0, 216, 178);
$yellow: rgb(255, 213, 111);
$blue: rgb(0, 177, 250);
body {
background-color: white;
padding: 50px;
font-size: 12px;
font-family: Roboto, sans-serif;
font-weight: 300;
height: 100vh;
width: 100vw;
}
#container {
position: relative;
display: inline-block;
background-color: $background;
width: 850px;
padding: 100px 125px;
}
.card {
background-color: $card;
display: inline-block;
width: 650px;
position: relative;
.top-border {
height: 10px;
background-color: $green;
}
.card-body {
height: 330px;
.text {
position: absolute;
left: 100px;
top: 60px;
li {
position: relative;
top: 40px;
left: -40px;
}
}
}
}
.avatar {
position: absolute;
left: -70px;
top: 50%;
transform: translatey(-50%);
}
.qrcode {
position: absolute;
left: 450px;
top: 50%;
transform: translatey(-50%);
}
li {
font-size: 0.9rem;
font-weight: 400;
color: darkgrey;
line-height: 1.5;
list-style-type: none;
}
img {
height: 120px;
width: 120px;
border: 3px solid white;
}
.uppercase {
text-transform: uppercase;
}
h1,
h2 {
margin: 0;
padding: 0;
}
h1 {
font-size: 2.2rem;
font-weight: 900;
}
h2 {
font-size: 1.5rem;
font-weight: 300;
color: rgba(68, 68, 68, 0.6);
}
.top-left {
position: absolute;
left: -250px;
top: -250px;
width: 500px;
height: 350px;
background-color: $blue;
border-radius: 50%;
box-shadow: 5px 5px 150px rgb(173, 220, 239);
z-index: 5;
}
------- END SCSS -------
Do you want something like this?
I just hide outside portion of the top-left circle from container. overflow: hidden;
Codepen Link: https://codepen.io/vishnuprasad/pen/RMBYKv
#container {
position: relative;
display: inline-block;
background-color: $background;
width: 850px;
padding: 100px 125px;
overflow: hidden;
}
.top-left {
position: absolute;
left: -260px;
top: -260px;
width: 400px;
height: 400px;
background-color: #00b1fa;
border-radius: 100%;
box-shadow: 5px 5px 150px rgb(173, 220, 239);
z-index: 5;
}
My header is devided in 3 sections: left, center and right. The left section is empty. In the center section I have my page title and in the right section I placed an "Account" link with an icon next to it. The link contains the word ACCOUNT and an icon. the icon is somehow pushed to the top and leaves a blank space below it next to the word. I want them both in one line and on the same hight. How can I achieve this? I added a red background to make the problem better understandable.
html {
height: 100%;
box-sizing: border-box;
overflow: hidden;
}
*,
*:before,
*:after {
box-sizing: inherit;
overflow: inherit;
}
body {
background-color: #f5f5f5;
margin: 0;
padding: 0;
position: relative;
height: 100%;
}
#in {
width: 1000px;
margin-left: auto;
margin-right: auto;
height: 100%;
}
/* ------------------------------------------------------------------------ */
/* -------------------------------- HEADER -------------------------------- */
/* ------------------------------------------------------------------------ */
header {
background-color: #131b23;
border-bottom: 6px solid #0f151a;
text-align: center;
left: 0;
top: 0;
width: 100%;
height: 170px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
z-index: 99;
}
#left {
background-color: green;
width: 20%;
position: absolute;
height: 164px;
}
#center {
background-color: red;
width: 60%;
margin-left: auto;
margin-right: auto;
height: 100%;
position: absolute;
left: 20%;
right: 20%;
height: 164px;
}
#right {
background-color: blue;
width: 20%;
height: 100%;
position: absolute;
right: 0;
height: 164px;
}
#heading {
font-size: 60px;
display: block;
margin-bottom: -7px;
margin-top: 15px;
}
.accountlink {
font-family: "Helvetica";
text-decoration: none;
font-weight: 800;
color: #ffffff;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
background-color: red;
position: absolute;
right: 30px;
top: 15px;
}
.navigationicon {
position: relative;
width: 24px;
margin: 0;
padding: 0;
top: 50%;
bottom: 50%;
}
<header>
<div id="left">
</div>
<div id="center">
<h1 id="heading">My Page</h1>
</div>
<div id="right">
<a class="accountlink" href="login.html">Account <img class="navigationicon" src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-512.png"></a>
</div>
</header>
Can you check this ?
html {
height: 100%;
box-sizing: border-box;
overflow: hidden;
}
*,
*:before,
*:after {
box-sizing: inherit;
overflow: inherit;
}
body {
background-color: #f5f5f5;
margin: 0;
padding: 0;
position: relative;
height: 100%;
}
#in {
width: 1000px;
margin-left: auto;
margin-right: auto;
height: 100%;
}
/* ------------------------------------------------------------------------ */
/* -------------------------------- HEADER -------------------------------- */
/* ------------------------------------------------------------------------ */
header {
background-color: #131b23;
border-bottom: 6px solid #0f151a;
text-align: center;
left: 0;
top: 0;
width: 100%;
height: 170px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
z-index: 99;
}
#left {
background-color: green;
width: 20%;
position: absolute;
height: 164px;
}
#center {
background-color: red;
width: 60%;
margin-left: auto;
margin-right: auto;
height: 100%;
position: absolute;
left: 20%;
right: 25%;
height: 164px;
}
#right {
background-color: blue;
width: 20%;
height: 100%;
position: absolute;
right: 0;
height: 164px;
}
#heading {
font-size: 60px;
display: block;
margin-bottom: -7px;
margin-top: 15px;
}
.accountlink {
font-family: "Helvetica";
text-decoration: none;
font-weight: 800;
color: #ffffff;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
background-color: white;
position: absolute;
left: 50px;
top: 20px;
background: url("https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-512.png");
background-size: 24px;
background-repeat: no-repeat;
background-position-x: right;
background-position-y: 0px;
width: 40%;
line-height: 2;
}
<header>
<div id="left">
</div>
<div id="center">
<h1 id="heading">My Page</h1>
</div>
<div id="right">
<a class="accountlink" href="login.html">Account </a>
</div>
</header>
Four changes to your css code to get there: 2 at .navigationicon and 2 at .accountlink
.accountlink {
font-family: "Helvetica";
text-decoration: none;
font-weight: 800;
color: #ffffff;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
background-color: red;
position: absolute;
right: 80px;
top: 70px;
}
.navigationicon {
position: relative;
width: 12px;
margin: 0 0 2px -5px;
padding: 0;
top: 50%;
bottom: 50%;
}