I'm building a simple website and cant figure out my the h1 title is wrapping, the nav doesnt touch it and nothing seems to be interfering with it, causing it to wrap. I have declared white-space: nowrap; but its still wrapping, does anyone know what is causing this and how I can fix it?
https://jsfiddle.net/xsqk3xk4/1/
#media screen and (min-width: 400px){
header{
height: 120px;
display: flex;
justify-content: space-between;
}
header h1{
margin: 0 0 0 8%;
font-size: 2em;
align-self: flex-start;
white-space: nowrap;
}
header nav{
display: block;
align-self: flex-end;
}
nav ul{
display: flex;
justify-content: flex-end;
margin: 0 8% 0 0;
}
nav li{
border-radius: 8px;
padding: 5px;
margin: 4px 1%;
}
footer nav{
display: none;
}
}
Working fine for me in the fiddle. Anyways if you remove the margin of the header h1 then it appears properly.
header h1{
margin:0;
...
}
Related
I'm trying to align three things in a li with a border. A <h1> to the left, a <p> to the middle, and a <img> to the right. Currently I'm doing it using the CSS margin property, but since the elements change in width and height, that ends up looking good on some and worse on others:
The first looks bad, but the second one has wider elements and looks better.
Here is the relevant HTML code I'm currently using:
And CSS:
css
html,
body {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
#container{
display: block;
margin: 0 auto;
max-width: 40rem;
padding: 1rem;
}
#raidList{
list-style: none;
margin: 0;
}
#raidList li{
background: #ffffff;
border-radius: 0.5rem;
margin-top: 1rem;
min-height: calc(1rem + 96px);
margin: 1.75rem 0;
box-shadow: 0.25rem 0.25rem 0.6rem rgba(0,0,0,0.05), 0 0.5rem 1.125rem rgba(75,0,0,0.05);
display: flex;
align-content: center;
align-items: center;
flex-direction: row;
overflow: none;
text-align: center;
}
#raidList li img{
margin-left: calc(100% - (160px + 50%));
float: right;
}
#raidList li h1{
margin: 30px;
font-size: 50px;
float: left;
}
#raidList li p{
margin-left: calc(50% - 160px);
}
#raidList li > *{
position: relative;
}```
How can I fix this? Keep in mind that it's a li and not a div. Thanks!
this is what i have changed to make it work as you want:
.container{
display: block;
margin: 0 auto;
justify-content: center;
align-items: center;
}
.raidList{
position: absolute;
display: flex;
justify-content: center;
width: 100%;
list-style: none;
margin: 0;
}
.raidList li{
position: absolute;
width: 40%;
background: #ffffff;
border-radius: 0.5rem;
margin-top: 1rem;
min-height: calc(1rem + 96px);
margin: 1.75rem 0;
box-shadow: 0.25rem 0.25rem 0.6rem rgba(0,0,0,0.05), 0 0.5rem 1.125rem rgba(75,0,0,0.05);
display: flex;
justify-content: center;
align-items: center;
overflow: none;
}
For your "li" try using justify-content instead of align-content and set it to center.
I also changed raidList to a display flex so it goes horizontally and so I can apply the justify-content to the center.
This works just fine, I may have changed some values such as width or heigth but you can vary those as you like.
You can add as many elements as you want, the "li" will justify them.
Hope it helps ;)
This is the sort of layout that flexbox is made for -
simply apply display: flex to the li - and align-items:center- to vertically center everything and then justify-content: space-between to space them out horizontally
That said - you really shouldn't be using a h1 on every row - h1s are intended to be the top level heading and indicate the highest level of content heading for the page.
ul {
padding: 0;
margin:0;
list-style: none;
}
h1 {
margin: 0;
}
.flex-container {
padding: 16px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
li{
border-bottom: solid 1px red;
}
<ul>
<li class="flex-container">
<h1>left content</h1>
<p>middle content</p>
<span>right content</span>
</li>
<li class="flex-container">
<h1>left content</h1>
<p>middle content</p>
<span>right content</span>
</li>
<li class="flex-container">
<h1>left content</h1>
<p>middle content</p>
<span>right content</span>
</li>
</ul>
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'm quite new to html 5 and css 3 but I wanted to make project page with flexbox and ran into a problem:
The site looks good in desktop mode but when it switches to the mobile view and "flex-flow: column" there is way too much space between the items as you can see in the pictures below.
Desktop version
Smartphones
The problem only occurs in chromium based browsers (Google Chrome, Vivaldi, Iron, Opera) Firefox, IE and Edge work well.
I'm not allowed to post images yet so I just put the links here.
Down there you can see my CSS code. I hope some can help me with this!
body {
display: flex;
flex-flow: row wrap;
margin: 0 auto;
background-color: f4f4f4;
font-family: Hind, Sans-serif;
justify-content: space-between;
}
header,
nav,
nav a,
article,
aside,
footer {
border-radius: 0px 0,5em 0em;
padding: 15px;
margin: 0.5em;
flex: 1 100%;
}
header {
background: var(--color-primary);
display: flex;
flex-flow: column;
align-items: center;
}
header * {
flex: 1 1 0%;
}
header nav {
flex: 1 1 100%;
}
nav,
nav ul,
nav li {
margin: 0;
padding: 0;
border: none;
}
nav ul {
display: flex;
flex-direction: column;
}
nav li {
list-style-type: none;
margin: 1.3em 0;
flex: 1 1 100%;
}
nav a {
display: inline-block;
width: 95%;
/*background: #fffbf0;*/
border-bottom: solid 0.1em;
border-color: var(--color-primary);
margin: 0;
font-weight: bold;
text-decoration: none;
text-align: center;
color: var(--color-secondary-2);
}
#media all and (min-width: 35em) {
header {
flex-flow: row wrap;
}
nav ul {
flex-direction: row;
}
nav li {
margin: 0 0.5em;
flex: 1 1 0%;
}
Now for the essential HTML part:
<header>
<nav>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
</ul>
</nav>
</header>
It will work if you remove align-items: center; from the header rule
header {
background: var(--color-primary);
display: flex;
flex-flow: column;
/* align-items: center; commented out */
}
and change to flex: 1 1 0%; instead of flex: 1 1 100%; in your nav li rule
nav li {
list-style-type: none;
margin: 1.3em 0;
flex: 1 1 0%; /* change basis to 0% */
}
You also need to close your media query properly by adding its missing end bracket }
I try to make a responsive website which looks similar in Chrome, IE(11), and FF.
My problem in IE is, that if the site is too long the scrollbar doesn't scroll to the end because of the sticky page-footer('page-footer'). I tried to give my page-main-area a margin or padding bottom but that doesn't change anything.
Another thing is that my sidebar background doesn't fill to the end.
CSS extract:
.page-sidebar {
padding: 10px;
border-top: 2px solid #000;
background-color: #00BB9C;
width: 100%;
padding-bottom: 58px;
}
.page-sidebar h3 {
color: black;
}
.page-sidebar h3:first-child {
margin-top: 0;
}
.page {
display: -webkit-flex;
display: -ms-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100%;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.page-main-area {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.page-footer {
position: fixed;
bottom: 0;
width: 100%;
max-width: 900px;
margin: 0 auto;
padding: 8px;
background-color: #000;
color: #fff;
max-height: 50px;
}
HTML + CSS:
http://jsfiddle.net/mvz8rq1o/2/
What can i do to fix this in IE?
margin-bottom: on page-sidebar should get the full sidebar showing. (won't fix the fill-to-bottom however...)
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