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%;
}
Related
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>
For some reason my h3 element wants to scroll. I've tried testing and it appears to be in this code.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
overflow-x: hidden;
}
html,
body {
height: 100%;
width: 100%;
}
.model-detail-caption {
font-family: "Oswald";
font-size: 5rem;
font-weight: 700;
color: #fff;
position: absolute;
bottom: 20%;
left: 20px;
width: 100%;
border-left: 4px solid var(--accent);
padding: 0px 0px 0px 10px;
}
<h3 class="model-detail-caption">Some Text</h3>
position: absolute; bottom: 20%; left: 20px; will cause this behaviour.
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;
}
I'm trying to center the icon before the block of text so that if the text contains one word or multiple lines it will always be vertically centered before the block of text.
.box {
padding: 20px;
height: auto;
width:30%;
}
.headline {
position: relative;
padding: 0 0 0 70px;
font-size: 22px;
line-height: 1.5;
margin:: 40px 0;
color: #000;
}
.headline::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 60px;
height: 60px;
background: url('http://icons.veryicon.com/ico/Internet%20%26%20Web/Browsers%202/Google%20Chrome.ico') top right no-repeat;
background-size: cover;
}
<div class="box">
<h1 class="headline">Headline: your address is blalalaslsakdlpdslasddas/h1>
</div>
Try it this way.
.box {
padding: 20px;
height: auto;
width:30%;
}
.headline {
padding: 0 0 0 70px;
font-size: 22px;
line-height: 1.5;
margin:: 40px 0;
color: #000;
background: url('http://icons.veryicon.com/ico/Internet%20%26%20Web/Browsers%202/Google%20Chrome.ico') no-repeat;
background-size: 60px 60px;
background-position: 0 center;
}
<div class="box">
<h1 class="headline">Headline: etiam porta sem male suada magna</h1>
</div>
Use top: calc(50% - 30px); here 30 = height/2;
.box {
padding: 20px;
height: auto;
width:30%;
}
.headline {
position: relative;
padding: 0 0 0 70px;
font-size: 22px;
line-height: 1.5;
margin:: 40px 0;
color: #000;
}
.headline::before {
content: '';
position: absolute;
left: 0;
top: calc(50% - 30px);
width: 60px;
height: 60px;
background: url('http://icons.veryicon.com/ico/Internet%20%26%20Web/Browsers%202/Google%20Chrome.ico') top right no-repeat;
background-size: cover;
}
<div class="box">
<h1 class="headline">Headline: your address is blalalaslsakdlpdslasddas</h1>
</div>
Something like this are you looking for ?
.box {
padding: 20px;
height: auto;
width:30%;
}
.headline {
position: relative;
padding: 0 10px;
font-size: 22px;
line-height: 1.5;
margin: 40px 0;
color: #000;
width: 100%;
}
.headline::before {
content: '';
position: absolute;
right: 0;
margin: auto;
left: 0;
bottom: 0;
top: 0;
width: 60px;
height: 60px;
background: url(https://markwarrick.com/wp-content/uploads/2014/07/sample-icon.png) top right no-repeat;
background-size: cover;
}
<div class="box">
<h1 class="headline">Headline: your address is blalalaslsakdlpdslasddas</h1>
</div>
I have this image and I need to reply it.
I already did most of the code, however I'm having some trouble doing the black box.
It needs to be:
- on top of "redbox"
- behind the "bluebox"
- on top of "blueinbox"
body {
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin:0 !important;
width: 100% !important;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
.container {
background-color: #e1e1e1;
height: 200px;
width: 400px;
border: 0;
margin: auto;
display: table;
margin-top: 20px;
position: relative;
}
.redbox {
background-color: #fff;
height: 120px;
width: 120px;
margin: 20px 20px 0 0;
display: table;
right: 0;
border-style: solid;
border-width: 1px;
border-color: red;
border-radius: 5px;
position: absolute;
}
.bluebox {
background-color: #fff;
height: 120px;
width: 120px;
margin: 60px 60px 0 0;
display: table;
right: 0;
border-style: solid;
border-width: 1px;
border-color: blue;
position: absolute;
border-left-style: dashed;
}
.blueinbox {
background-color: #00aeef;
height: 80px;
width: 80px;
margin: 20px 20px 0 0;
float: right;
}
.ninja {
color: #fff;
font-family: "Open Sans", Arial, sans-serif;
letter-spacing: 2px;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
<body>
<div class="container">
<div class="redbox">
</div>
<div class="bluebox">
<div class="blueinbox">
<div class="ninja">
<p>NINJA!</p>
</div>
</div>
</div>
</div>
</body>
Done.
body {
font: 500 16px 'Open Sans', Arial, sans-serif;
color: #fff;
}
.container {
position: relative;
max-width: 400px;
height: 200px;
margin: 2rem auto;
border: 1px solid #000;
background-color: #eee;
}
.box-red, .box-blue-light, .box-blue-dark, .box-black {
position: absolute;
}
.box-red {
top: 20px;
right: 20px;
width: 120px;
height: 120px;
border: 1px solid red;
border-radius: 5px;
}
.box-black {
top: 40px;
right: 40px;
width: 60px;
height: 60px;
background-color: #000;
}
.box-blue-light {
top: 80px;
right: 80px;
width: 80px;
height: 80px;
background-color: #05adeb;
}
.box-blue-light::before {
content: "";
position: absolute;
right: 0;
width: 20px;
height: 20px;
background-color: #000;
}
.box-blue-light h5 {
margin-top: 2rem;
font: 500 1rem 'Open Sans';
letter-spacing: 2px;
text-align: center;
}
.box-blue-dark {
top: 60px;
right: 60px;
width: 120px;
height: 120px;
border: 1px solid blue;
border-left-style: dashed;
background: #fff url("https://media1.giphy.com/media/fLg3MEWdgH5Ti/200.gif");
}
.box-blue-dark::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(170,50,90,.25)
}
<body>
<div class="container">
<div class="box-red"></div>
<div class="box-black"></div>
<div class="box-blue-dark"></div>
<div class="box-blue-light"><h5>NINJA!<h5></div>
</div>
</body>
Add z-index:1; to .bluebox.
body {
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin:0 !important;
width: 100% !important;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
.container {
background-color: #e1e1e1;
height: 200px;
width: 400px;
border: 0;
margin: auto;
display: table;
margin-top: 20px;
position: relative;
}
.redbox {
background-color: #fff;
height: 120px;
width: 120px;
margin: 20px 20px 0 0;
display: table;
right: 0;
border-style: solid;
border-width: 1px;
border-color: red;
border-radius: 5px;
position: absolute;
}
.bluebox {
background-color: #fff;
height: 120px;
width: 120px;
margin: 60px 60px 0 0;
display: table;
right: 0;
border-style: solid;
border-width: 1px;
border-color: blue;
position: absolute;
border-left-style: dashed;
}
.blueinbox {
background-color: #00aeef;
height: 80px;
width: 80px;
margin: 20px 20px 0 0;
float: right;
}
.blackbox {
background-color: #000;
height: 80px;
width: 80px;
margin: 20px 20px 0 0;
float: right;
}
.ninja {
color: #fff;
font-family: "Open Sans", Arial, sans-serif;
letter-spacing: 2px;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
<body>
<div class="container">
<div class="redbox">
<div class="blackbox"></div>
</div>
<div class="bluebox">
<div class="blueinbox">
<div class="ninja">
<p>NINJA!</p>
</div>
</div>
</div>
</div>
</body>