My list is (somewhat) successfully calling flexbox's space-around alignment, except the first-child of the footer list in question has a relatively larger margin on it's left. Cannot figure this out and would rather not risk its future with a cheat. Here's the code; any input helps, thank you:
#footer {
width: 75%;
background: dimgray;
height: 150px;
/* position: relative;
*/ bottom: 0;
position: fixed;
display: flex;
display: -webkit-flex;
}
#footer ul {
width: 100%;
display: -webkit-flex;
display: flex;
flex-direction: row;
justify-content: space-around;
-webkit-justify-content: space-around;
}
#footer li {
width: 30%;
height: 130px;
list-style: none;
border: 1px solid white;
}
The ul element automatically gets a default padding from the browser.
#footer ul {
padding-left: 0;
}
Related
I want the image and text to display on the same line, and have the image shrink and stay inline as the window shrinks.
Below is the CSS code. I want the image to shrink as the window shrinks.
.body1 {
display: flex;
flex-wrap: wrap;
background-color: #3803f6;
color: white;
align-items: center;
justify-content: space-between;
height: 500px;
padding: 0px;
margin: -10px;
position: relative;
height: 100%;
justify-content: flex-start;
}
.text {
display: flex;
display: block;
width: 300px;
height: 300px;
padding: 15px;
padding-left: 90px;
color: rgb(201, 212, 254);
}
.imgcontainer {
display: flex;
overflow: hidden;
position: relative;
align-items: center;
padding-bottom: 50px;
background-color: aqua;
}
.img {
display: flex;
background-image: url('blue.jpeg');
padding: 100px;
position: relative;
background-size: cover;
}
Any suggestions would be nice
Give the img container a percentage width and the img element width=100%.
For example if you had 3 images on every line with 10px margin, set img container width to width: calc(100%/3 - 20px) and so on. Same goes with the text, it depends how many element you want on each line and then do the calculations accordingly.
I've been trying to make a navbar but I haven't quite been succesful. The navbar div has a height of 60px, however, I can't seem to be able to increase the height of the inside elements in any way. (except padding) What am I doing wrong?
What I'm getting
What I'm trying to get
#navbar {
width: 100vw;
height: 60px;
background: #deff00;
box-shadow: 0 0 50px black;
z-index: 2;
position: relative;
top: 85px;
}
#navbar ul {
height: 100%;
list-style: none;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.navbar-link {
text-decoration: none;
color: black;
height: 60px;
padding: 0 20px;
}
.navbar-link:hover {
background: #adc703;
}
<div id="navbar">
<ul>
<li>
<a href="#" style="font-weight: bold;" class="navbar-link"
>ÚVODNÍ STRÁNKA</a
>
</li>
<li>
ŠKOLA
</li>
<li>STUDIUM</li>
<li>FOTOGALERIE</li>
<li>KONTAKT</li>
</ul>
</div>
Thanks!
Try this:
#navbar {
width: 100vw;
height: 60px;
background: #deff00;
box-shadow: 0 0 50px black;
z-index: 2;
position: relative;
top: 85px;
}
#navbar ul {
height: 100%;
list-style: none;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
#navbar li {
display: table;
}
.navbar-link {
text-decoration: none;
color: black;
height: 60px;
padding: 0 20px;
vertical-align: middle;
display: table-cell;
}
.navbar-link:hover {
background: #adc703;
}
Just added display: table; for the li, and vertical-align: middle;display: table-cell for the a tag, sometimes this old technics fit perfect)
Codepen: https://codepen.io/Liveindream/pen/mdyXmxj?editors=1100
If I'm understanding this question correctly, you want to raise the elements in height. The thing that is constricting you from doing that is inside of your CSS
#navbar ul {
height: 100%;
list-style: none;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
Remove align-items: center; from #navbar ul
So that it looks like this:
#navbar ul {
height: 100%;
list-style: none;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
Now you should be able to increase and/or decrease it in height to correctly align it onto your div tag the way you'd like.
I want to make my centered div text responsive on my website loader. The clue is I don't know how I am be able to do this. Im a learning coder so I hope someone can help me with my problem :)
NOTE! Load the snippet in full page so you can see the text :P
Here is the source code:
body {
overflow: hidden
}
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url(https://www.publicdomainpictures.net/pictures/200000/velka/plain-red-background.jpg);
z-index: 99;
/* makes sure it stays on top */
}
#camera {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
/* centers the loading animation horizontally one the screen */
top: 50%;
/* centers the loading animation vertically one the screen */
background-image: url(https://svgshare.com/i/6kD.svg);
/* path to your loading animation */
background-repeat: no-repeat;
background-position: center;
margin: -150px 0 0 -150px/* is width and height divided by two */
}
#text {
line-height: 890px;
margin: auto;
text-align: center;
color: white;
font-size: 20px;
font-weight: bold;
}
<div id="preloader">
<div id="text">Website loading...</div>
<div id="camera"></div>
</div>
What you want to be using here is display: flex; as that allows you to center elements both horizontally and vertially. This is also known as a flexbox.
Some other notes regarding the code, you should have the image as an image rather than a background image in this case, and it is much easier to use background-color: red; than using an image as a background color.
body,
html {
margin: 0;
padding: 0;
}
body {
overflow: hidden
}
#preloader {
position: fixed;
background-color: red;
z-index: 99;
/* makes sure it stays on top */
width: 100%;
height: 100%;
display: flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
#camera {
height: 150px;
/* path to your loading animation */
background-repeat: no-repeat;
background-position: center;
background-size: contain;
display: flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
flex-direction: row;
align-items: center;
justify-content: center;
text-align: center;
}
#text {
height: 100px;
line-height: 890px;
text-align: center;
color: white;
font-size: 20px;
font-weight: bold;
display: flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
flex-direction: row;
align-items: center;
justify-content: center;
text-align: center;
}
<body>
<div id="preloader">
<img src="https://svgshare.com/i/6kD.svg" id="camera">
<div id="text">Website loading...</div>
</div>
</body>
Cheers!
Should note:
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
This just makes sure that the centring works on all browsers.
I think using flexbox here would be better idea
I have added flexbox styles for #preloader
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url(https://www.publicdomainpictures.net/pictures/200000/velka/plain-red-background.jpg);
z-index: 99;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* makes sure it stays on top */
}
Here is the fiddle with other changes to make everything correct
I'm having an issue on my project where the content is not aligning vertically in the flexbox. We have a fluid responsive page that needs to center all items within the flexbox via %'s. in the example below we've set a fixed pixel height just so you can play with it.
I have tried a ton of different methods for hours..
body{
margin:0px auto;
}
/* top bar navigation */
.topBoxNav {
background:red;
padding: 0;
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
width: 100%;
height: 50px;
color: white;
font-weight: bold;
font-family: 'League Gothic';
font-size: 1.5em;
text-align: center;
}
.topBoxNav li {
box-sizing: border-box;
border: 1px solid white;
width: 100%;
height: 100%;
}
.topBoxNav a {
text-decoration: none;
color: white;
}
HTML:
<nav class="" alt="top Nav">
<ul class="topBoxNav">
<li>Box1</li>
<li>Box2</li>
<li>Box3</li>
</ul>
</nav>
example:
http://codepen.io/anon/pen/iwDdy
First, realize that the one that has the display: flex property is your ul, not your li elements, so you have two options here:
1) Give your li elements display: flex and add align-items: center to it and justify-content: center
You will get something like this:
.topBoxNav li {
box-sizing: border-box;
border: 1px solid white;
width: 100%;
height: 100%;
display: flex;
align-items center
-moz-align-items center
-ms-flex-align center
-webkit-align-items center
justify-content center
-moz-justify-content center
-ms-flex-pack center
-webkit-justify-content center
}
2) Give your li elements line-height equal to the height, in this case 50px and vertical-align: middle.
You will have something like this:
.topBoxNav li {
box-sizing: border-box;
border: 1px solid white;
width: 100%;
height: 100%;
align-items: center;
-webkit-align-items: center;
vertical-align: middle;
line-height: 50px;
}
Both ways will work :)
here's what I have Fiddle
ul {
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
width: 100%;
height: 100px;
background: #333;
padding: 15px;
}
ul li {
padding: 15px;
margin: 5px;
background: #efefef;
border: 1px solid #ccc;
display: inline-block;
list-style: none;
}
#item-1 {
height: 50px;
}
#item-2 {
height: 70px;
}
<ul>
<li id="item-1">Home</li>
<li id="item-2">Menu</li>
<li>More</li>
<li>Stuff</li>
<li>Settings</li>
</ul>
I want the last item inside the flex-box to be pulled to the right ("Settings" in my fiddle) while keeping all other items the way they are. The "Settings"-item should also be centered vertically and everything.
align-self: flex-end pushes the item to the bottom (I want it on the right).
I would very much prefer a solution using flex-box because my items have variable heights and should always be centered vertically.
What is the cleanest way to achieve this?
Thanks for your help!
Simple fix, use an auto-adjusting margin:
ul li:last-child {
margin-left: auto;
}
You may also want to not use width: 100% so that the element stays inside the visible area:
ul {
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
/* width: 100%; */
height: 100px;
background: #333;
padding: 15px;
}
http://jsfiddle.net/dwLHE/
See also https://www.w3.org/TR/css-flexbox-1/#auto-margins