I've been playing around with flex box and I would like to center the "Logo" test in the upper left corner vertically in its blue container.
You can see it here: http://codepen.io/TimRos/pen/MwKNgw
* {
margin: 0;
padding: 0;
}
.box {
color: white;
font-size: 80px;
text-align: center;
text-shadow: 4px 4px 3px black;
}
/* COLORS & Style
===================================== */
.main-header { background: #e3e3e3; }
.main-footer { background: #e3e3e3; }
.main-content { background: #e3e3e3; }
.main-wrapper {
box-shadow: 2px 2px 10px #333;
}
.main-wrapper {
width: 80%;
margin: 0 auto;
}
/* HEAD
===================================== */
.main-header {
width: 100%;
height: 100px;
border-bottom: 1px solid black;
}
.main-nav {
list-style: none;
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: flex-end;
height: 100%;
}
.main-nav li {
margin-left: 8px;
margin-right: 8px;
}
#logo {
margin-right: auto; /* Align Logo to Left, Nav to the right*/
margin-left: 0;
align-self: center;
}
.main-nav li:last-child {
margin-right: 0;
}
.main-nav li {
background-color: #3f8abf;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom: 4px solid firebrick;
}
.main-nav a {
text-decoration: none;
color: white;
text-align: center;
font-weight: bold;
padding: 8px 15px;
display: block;
width: 100px;
}
#logo {
border-top-left-radius: 0;
border-bottom-right-radius: 5px;
border-bottom: 0;
border-left: 4px solid firebrick;
padding: 0;
height: 100%;
}
#logo h1 {
padding: 0;
margin: 0;
}
/* CONTENT
===================================== */
.main-content {
padding: 15px;
}
h3 {
margin-bottom: 15px;
}
/* FOOTER
===================================== */
.main-footer {
border-top: 1px solid black;
text-align: center;
padding: 5px;
}
I tried margin and padding auto but that doesnt seem to work, please help!
Just add this CSS:
CSS
#logo a{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%); // For Safari and Chrome Mobile
}
DEMO HERE
I have done a bit more research and found another solution to this problem. Since I'm already using flexbox anyways, might as well use flexbox like this:
#logo {
display: flex;
align-items: center
}
As I said, the other solution works just fine.
Related
I am currently creating a bit of a fun project. For some reason, my text and check / radio boxes do not align with the text. They seem to be off to one side and higher than the text.
Here is my pen - https://codepen.io/Amnesia180/pen/RwKQOKP
html,
body {
line-height: 1.5;
height: 100%;
margin: 0 auto;
font-family: 'Quicksand', sans-serif;
color: #070707;
}
header {
position: relative;
top: 0;
padding: 0;
background-color: #EFEFEF;
width: 100%;
height: 60px;
}
.material-icons {
color: #505050;
}
#nav-bar {
position: relative;
display: flex;
justify-content: space-between;
padding: 10px;
}
ul {
display: flex;
padding: 0;
list-style: none;
}
li {
padding: 0px 20px;
}
.nav-link-left {
float: left;
text-decoration: none;
color: #070707;
font-weight: 800;
}
.nav-link {
float: right;
text-decoration: none;
color: #070707;
font-weight: 800;
}
.nav-link:hover {
float: right;
color: #5873D9;
border-bottom: 3px solid #5873D9;
padding-bottom: 5px;
}
#intro {
display: flex;
flex-direction: column;
align-items: center;
height: 470px;
margin-top: 50px;
max-width: 90em;
}
h1 {
font-size: 4em;
color: #34D1BF;
}
h2 {
color: #5873D9;
margin-top: 20px;
}
form {
display: flex;
flex-direction: column;
}
label {
font-size: 1.5em;
padding: 10px 0;
}
input {
width: 100%;
height: 30px;
border: 2px solid #34D1BF;
padding: 5px;
}
#submit {
background-color: #34D1BF;
width: 40%;
height: 40px;
margin-top: 15px;
margin-left: 30%;
margin-right: 30%;
border: 2px solid #34D1BF;
color: white;
}
#about,
#promo-image,
#burger {
max-width: 50em;
width: 90vw;
margin: 0 auto;
padding: 5px;
text-align: left;
}
#promoimage {
display: block;
margin: 0 auto;
max-width: 518px;
width: 100%;
}
#burgers {
margin-top: 40px;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: space-around;
}
.box {
border: 2px solid #EFEFEF;
border-radius: 5px;
margin: 2px;
text-align: center;
}
.price {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
}
.price li {
padding: 30px;
border: 0.5px solid #EFEFEF;
}
.card-header {
background-color: rgba(52, 209, 191, 1);
color: white;
}
footer {
width: 100%;
background-color: #EFEFEF;
height: 80px;
text-align: center;
}
footer p {
padding-top: 20px;
}
.burgerform {
text-align: left;
display: inline;
}
.burgerform label {
font-size: 1.5em;
font-weight: bold;
}
.burgerform legend {
font-weight: bold;
}
#media (min-width: 600px) {
#intro {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
}
#burgers {
display: flex;
flex-direction: row;
align-items: center;
text-align: center;
justify-content: space-between;
}
}
<label>Sauces</label>
<p/> Burger Sauce <input type="checkbox" id="burgersauce" name="burgersauce" onclick="calculateTotal()"> Dirty Mayo Sauce
Can anyone advise?
Thanks!
Your inputs have width: 100%; which means it'll occupy entire width. And the "label" is just plain text so they are just flowing into the next line.
If you want to align them then you need proper elements (label>) aligned within 100% of the same line.
That is because you have given your inputs a width of 100%, so now each checkbox and radiobutton spans the whole width of the screen.
input {
width: 100%;
height: 30px;
border: 2px solid #34D1BF;
padding: 5px;
}
You can debug CSS issues using the CSS developer tools of your browser, as in the attached screenshot
Wrap both label (eg. Burger Mayo Sauce) and checkbox within a Flex-box, apply 100% width to it, and justify-content:space-between.
.menu-item{
witdh: 100%;
display:flex;
justify-content:space-between;
}
input[type=checkbox]{
//Whatever styling you want to apply to the checkbox.
}
Do not add the 100% width to the input, flexbox will manage the space for you.
I'm just wondering how I can put my button at the right-bottom of the parent box.
I have put position: relative; to the parent box and used position: absolute; for the button class.
This worked perfectly. However, the button overlapped with the contents of the parent box.
What would be the best way to fix this?
Here's my html and css Thank you!!
.color {
border: 1px solid black;
width: 70%;
margin: 10px auto;
padding: 0 30px;
position: relative;
}
.color p {
display: inline-block;
width: 200px;
height: 80px;
margin-right: 10px;
text-align: center;
line-height: 78px;
}
p.black {
background: black;
color: white;
}
p.gray {
background: gray;
color: white;
}
p.blue {
background: blue;
color: white;
}
p.white {
border: 1px solid black;
}
.btn {
position: absolute;
right: 10px;
bottom: 10px;
}
.btn a {
display: inline-block;
background: #efd9ca;
padding: 25px;
width: 300px;
text-align: center;
text-decoration: none;
}
<h1 class="heading">color</h1>
<p class="black">black</p>
<p class="gray">gray</p>
<p class="white">white</p>
<p class="blue">blue</p>
<div class="btn">Mozilla color collection website</div>
I removed your relative and absolute position declarations. Then I added following css declrations:
.btn {
float: right;
margin-bottom: -20px;
}
float: right; will align the button to the right side. With margin-bottom: -20px; you counter the padding bottom of 30px so that the spacing will only be 10px as previos attempted.
.color {
border: 1px solid black;
width: 70%;
margin: 10px auto;
padding: 0 30px;
}
.color p {
display: inline-block;
width: 200px;
height: 80px;
margin-right: 10px;
text-align: center;
line-height: 78px;
}
p.black {
background: black;
color: white;
}
p.gray {
background: gray;
color: white;
}
p.blue {
background: blue;
color: white;
}
p.white {
border: 1px solid black;
}
.btn a {
display: inline-block;
background: #efd9ca;
padding: 25px;
width: 300px;
text-align: center;
text-decoration: none;
}
.btn {
float: right;
margin-bottom: -20px;
}
<h1 class="heading">color</h1>
<p class="black">black</p>
<p class="gray">gray</p>
<p class="white">white</p>
<p class="blue">blue</p>
<div class="btn">Mozilla color collection website</div>
I have a search box that can have a variable number of results. The growth of results is pushing down the elements below it. I'm trying to understand the best way to avoid this in the most maintainable way. I want the results to overlap whatever is beneath it, not grow the underlying container.
I was wondering if I make the results actually float, but it screwed up the whole layout and I'm trying to go with a flex-first approach.
Snippet:
* {
box-sizing: border-box;
}
nav {
min-width: 800px;
padding: 20px;
background-color: #f7f7f7;
width: 100%;
justify-content: center;
display: flex;
column-gap: 40px;
}
a {
text-decoration: none;
padding: 20px;
}
.search-container {
border: 2px solid darkgrey;
border-radius: 20px;
flex-basis: 40%;
display: flex;
flex-direction: column;
justify-content: center;
column-gap: 20px;
z-index: 1;
}
.search-container a, .search-container p {
border-bottom: 1px solid #b7b5b5;
background-color: white;
text-align: center;
}
.search-container p {
margin: 0;
padding: 30px 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.search-container a:last-child {
border: none;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.links-container {
display: flex;
padding: 10px 0;
flex-basis: 40%;
z-index: 1;
}
.links-container a {
height: 60px;
padding: 20px 40px;
background-color: blue;
color: white;
}
.links-container a:hover {
background-color: green;
}
.header-overlay {
width: 100%;
min-width: 800px;
height: 120px;
background-color: lightgrey;
position: absolute;
}
<body>
<header>
<div class="header-overlay"></div>
<nav>
<div class="search-container">
<p>Search Results</p>
Result 1
Result 2
Result 3
Result 4
Result 5
</div>
<div class="links-container">
One
Two
Three
</div>
</nav>
</header>
</body>
Desired Result:
Put the result links in a div and position it absolutely. It's parent container i.e the search container should be positioned relatively.
* {
box-sizing: border-box;
}
nav {
min-width: 800px;
padding: 20px;
background-color: #f7f7f7;
width: 100%;
justify-content: center;
display: flex;
column-gap: 40px;
}
a {
text-decoration: none;
padding: 20px;
}
.search-container {
border: 2px solid darkgrey;
border-radius: 20px;
flex-basis: 40%;
display: flex;
flex-direction: column;
justify-content: center;
column-gap: 20px;
z-index: 1;
position: relative
}
.search-container a, .search-container p {
border-bottom: 1px solid #b7b5b5;
background-color: white;
text-align: center;
}
.search-container p {
margin: 0;
padding: 30px 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.search-container a:last-child {
border: none;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.result-box{
width: 100%;
position: absolute;
top: 50px;
background: red;
}
.result-box a{
display: block;
}
.links-container {
display: flex;
padding: 10px 0;
flex-basis: 40%;
z-index: 1;
}
.links-container a {
height: 60px;
padding: 20px 40px;
background-color: blue;
color: white;
}
.links-container a:hover {
background-color: green;
}
.header-overlay {
width: 100%;
min-width: 800px;
height: 120px;
background-color: lightgrey;
position: absolute;
}
<body>
<header>
<div class="header-overlay"></div>
<nav>
<div class="search-container">
<p>Search Results</p>
<div class="result-box">
Result 1
Result 2
Result 3
Result 4
Result 5
</div>
</div>
<div class="links-container">
One
Two
Three
</div>
</nav>
</header>
</body>
To position an element over other elements, you use position:absolute. However - just like floats - this takes the element out of the flow and affects your flex nav.
Therefore to keep your search box as part of the flexbox display, you need an extra element to take the absolute position. Inside your search-container, add a container for the results that will have the absolute positioning.
The CSS for these 2 elements should be like this:
.search-container {
z-index: 1;
position: relative;
flex-basis: 40%;
}
.search-results {
position: absolute;
right: 0;
top: 0;
width: 100%;
border: 2px solid darkgrey;
border-radius: 20px;
display: flex;
flex-direction: column;
justify-content: center;
column-gap: 20px;
z-index: 1;
}
This keeps the search container as flex using 40% of the width, and the search-results div takes on the styling and flex display to make it work as you want it to.
By using position:relative for the search container div, we can place the results div relative to the search container, so we are able to position in inside it so it appears where it was, except overlaying the page.
Working Example:
* {
box-sizing: border-box;
}
nav {
min-width: 800px;
padding: 20px;
background-color: #f7f7f7;
width: 100%;
justify-content: center;
display: flex;
column-gap: 40px;
}
a {
text-decoration: none;
padding: 20px;
}
.search-container {
z-index: 1;
position: relative;
flex-basis: 40%;
}
.search-results {
position: absolute;
right: 0;
top: 0;
width: 100%;
border: 2px solid darkgrey;
border-radius: 20px;
display: flex;
flex-direction: column;
justify-content: center;
column-gap: 20px;
z-index: 1;
}
.search-container a,
.search-container p {
border-bottom: 1px solid #b7b5b5;
background-color: white;
text-align: center;
}
.search-container p {
margin: 0;
padding: 30px 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.search-container a:last-child {
border: none;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.links-container {
display: flex;
padding: 10px 0;
flex-basis: 40%;
z-index: 1;
}
.links-container a {
height: 60px;
padding: 20px 40px;
background-color: blue;
color: white;
}
.links-container a:hover {
background-color: green;
}
.header-overlay {
width: 100%;
min-width: 800px;
height: 120px;
background-color: lightgrey;
position: absolute;
}
<body>
<header>
<div class="header-overlay"></div>
<nav>
<div class="search-container">
<div class="search-results">
<p>Search Results</p>
Result 1
Result 2
Result 3
Result 4
Result 5
</div>
</div>
<div class="links-container">
One
Two
Three
</div>
</nav>
</header>
<div class="content">
<h1>Page Heading</h1>
</div>
</body>
I have a rather nice navbar but unfortunatly, when I resize my laptop window a bit, the text starts overlapping. It seems to be stuck in the middle and wont make use of all the space, despite me having checked throughly that here are no padding or margins causing this.
This is how it looks on a big screen
this is the problem when I narrow the window a bit
Could someone please help me figure out why this is happening, please?
I would be very grateful.
My main CSS navbar (displayed on small screens):
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/* I tilfælde af at der skal cleares */
br.tabula {
clear: both;
}
a {
text-decoration: none;
color: orange;
}
/*Fjerner underline osv.*/
a:link, a:visited {}
a:hover {}
a:active {}
/***********************************************************/
/* Specielle! */
/***********************************************************/
/***********************************************************/
/* Billeder! Img! ****** Video! */
/***********************************************************/
#burger {
width: 15px
}
img.lille-l {
float: left;
margin: 8px 20px 20px 0;
width: 160px;
height: 165px;
}
img.mellem-r {
float: right;
padding: 20px;
width: 350px;
}
img.top {
margin: 8px 0 20px 0;
}
.sponsor {
width: 50px;
height: 50px;
border: 0;
padding-bottom: 22px;
}
.klik {
padding: 5px;
box-shadow: 3px 5px #888888;
}
#socialbar img {
width: 30px;
height: 30px;
}
iframe {
width: 390px;
height: 250px;
float: left;
padding: 10px 15px 10px 0px;
border: none;
}
/***********************************************************/
/* Tekst! */
/***********************************************************/
h1, h2, h3 {
margin: 0 0 1% 0
}
/*****************************************************************************/
/* HEADER! ****** BANNER! */
/******************************************************************************/
#bannerkat {
margin-top: 1%;
width: 100%;
height: 46px;
background-image: url("billeder/katte/mathilde.jpg");
background-size: cover;
color: white;
border-bottom: solid 1px #444444;
}
/******************************************************************************/
/* NAV! */
/******************************************************************************/
/* Menu Button */
#menu-button {
z-index: 1;
text-align: center;
padding: 5px 5px 5px 5px;
position: absolute;
position: fixed;
top: 15px;
right: 5px;
transition: all 0.2s ease;
cursor: pointer;
width: 50px;
height: 35px;
background-color: #19c589;;
border-radius: 5px; /* pæne runde hjørner*/
-moz-border-radius: 5px; /* Fox*/
-webkit-border-radius: 5px; /* IE */
}
nav p {display:none;}
#mainlogo {display:none;}
#menu-button .bar {
display: block;
height: 4px;
background: black;
margin: 4px;
}
#menu-checkbox {
display: none;
}
#menu-checkbox:checked ~ #menu-button {
transform: rotate(90deg);
}
nav ul {
position: fixed;
display: none;
width: 100%;
}
#menu-checkbox:checked ~ #menu {
display: block;
}
#menu {
display: none;
list-style: none;
margin: 0;
padding: 0;
border-radius: 20px;
overflow: hidden;
}
#menu li {
width: 100%;
background-color: beige;
text-align: center;
padding: 7px 2px 7px 2px;
}
This is the code for the nav in the images, displayed on larger screens with media query:
#mainlogo {display: block;}
#bannerkat {display: none;}
#menu-button {
display: none;
}
#menu {
display: block;
border-radius: 0;
text-align: center;
position: relative;
}
.mainheader {width: 100%; padding: 0 auto;
margin: 0}
#menu ul {width:100%; padding: 0 auto;
margin: 0}
#menu li {
display: inline-block;
width: 12%;
background: none;
padding: 0 ;
margin: 0;
}
#menu li a {
font-size: normal;
text-decoration: none;
color: #505050;
text-align: center;
line-height: 75px;
text-transform: uppercase;
transition: all .4s ease;
display: inline-block;
width: 100%;
border-top: 5px solid #80bb80;
}
#menu li:nth-of-type(2) a {
border-top: 5px solid #9b5e5e;
}
#menu li:nth-of-type(3) a {
border-top: 5px solid #5656b3;
}
#menu li:nth-of-type(4) a {
border-top: 5px solid grey;
}
#menu li a:hover {
border-top: 5px solid darkgreen;
}
}
nav { font-family: helvetica, arial, sans-serif;}
/* højde for billed-sektion*/
section {min-height: 204px;}
#baggrund {
background:
url("billeder/katte/sophi.png");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;}
#mainlogo {
font-size: 37px;
color: white;
border: 7px solid white;
display: inline-block;
padding: 10px;
position: absolute;
height: 123px;/* hvid boks*/
line-height: 25px;
top: 202px;
margin-top: -180px;
left: 50%;
width: 600px;
text-align: center;
margin-left: -300px;
text-shadow: 1px 2px 1px #000;
box-shadow: 1px 2px 1px #000; }
/* og omegns */
#mainlogo p {font-size: 20px; padding:5px;}
.vector{width: 60px;
margin-left: -450px;
margin-top: -36px;}
.mainheader {margin-top: 10px;}
/* Navigations menuen (links osv) */
#nav_wrap {
background: #f9f4ea;
width: 100%;
white-space: nowrap;
float: left;
height: auto;;
position: relative;
margin-top: 144px;
bottom: 0;
overflow: hidden;
z-index: 00;
opacity: .9;
box-shadow: 0px 1px 4px beige;
padding: 0;
}
/* MAIN! BODY! *********************************************************/
body {
background-image: url("billeder/bgorange.jpg");
background-size: cover;
color: black;
/* Base font size (14px)? 7%*/
font-family: sans-serif, arial;
line-height: 1.5;
text-align: left;
}
.body { width: 90%;}
.maincontent {
line-height: 20px;
width: 79%;
float: left;
border-radius: 5px;
/* pæne runde hjørner*/
-moz-border-radius: 5px;
/* Fox*/
-webkit-border-radius: 5px;
/* IE */
}
#Ginger
You should remove fixed width: 12% from #menu li.
#menu li word needs to be wrapped and font-size should be small on lower screen size. i.e word-wrap:break-word
I need to center buttons in the middle of page, one under another.
I've used code below, but the result was that buttons still appear next to each other.
header {
text-align: center;
.btn {
#include Myriad-Pro-Light;
border-radius: 7px;
padding: 5px 10px;
border: none;
}
.btn-green {
color: #fff;
background: #7CAE9E;
margin: 20px;
}
.btn-grey {
color: #333;
background: $grey;
margin: 20px;
}
}
<header>
Button A
Button B
</header>
Thank you
you can use "flexbox" for this
header {
display: flex;
flex-direction: column;
align-items: center;
.btn {
#include Myriad-Pro-Light;
border-radius: 7px;
padding: 5px 10px;
border: none;
}
.btn-green {
color: #fff;
background: #7CAE9E;
margin: 20px;
}
.btn-grey {
color: #333;
background: $grey;
margin: 20px;
}
}
<header>
a
b
</header>
Without flexbox
.btn {
#include Myriad-Pro-Light;
border-radius: 7px;
padding: 5px 10px;
border: none;
float: left;
clear: both;
width: calc(100% - 40px);
box-sizing: border-box;
text-align: center;
}
.btn-green {
color: #fff;
background: #7CAE9E;
margin: 20px;
}
.btn-grey {
color: #333;
background: $grey;
margin: 20px;
}
<header>
a
b
</header>
Update check new fiddle
https://jsfiddle.net/bimbonkens/fa7s3ypj/
you needed only the
display:block
on your buttons.
also your css syntax is wrong for vanilla css(no preprocessors)
header {
.btn {}
}
should be this
header { }
.btn { }
and if you need context:
header {}
header .btn {}
You need to use
margin: 0 auto;
for block elements, because
text-align:center;
works only on inline and inline-block
one way to go could be the following:
header {
text-align: center;
}
header .btn {
border-radius: 7px;
padding: 5px 10px;
border: none;
display: block;
width: 100px;
margin: auto;
}
.btn-green {
color: #fff;
background-color: #7CAE9E;
margin: 20px;
}
.btn-grey {
color: #333;
background-color: grey;
margin: 20px;
}
<header>
Button A
Button B
</header>
Do you want something like this:-
header {
text-align: center;
.btn {
#include Myriad-Pro-Light;
border-radius: 7px;
padding: 5px 10px;
border: none;
}
.btn-green {
color: #fff;
background: #7CAE9E;
margin: 20px;
}
.btn-grey {
color: #333;
background: $grey;
margin: 20px;
}
}
<header>
Button A<br>
Button B
</header>