i have 3 divs, i want for a navbar, i need the navbar to be responsive
They cant stay inline on a width less than 800px, what im i doing wrong
.logo {
width: 18%;
min-width: 120px;
display: inline-block;
}
.middle {
width: 60%;
display: inline-block;
}
.user {
width: 18%;
min-width: 100px;
display: inline-block;
}
<div class="navbar">
<div class="logo"> LOGO </div>
<div class="middle"> About, contact </div>
<div class="user"> signin </div>
</div>
Use display: flex; in .navbar
The default flex direction is row so that should align your 3 divs horizontally .
And remove display properties from the child divs.
Give them flex-basis for respective widths
Related
Hi I am creating a website and I am trying to align a picture and some text vertically, but I am not being able to do this and the picture is only taking 100% space of the website, this is the code:
body {
width: 100%;
max-width: 960px;
margin: 0;
}
div.content {
width: 100vw;
display: flex;
}
div.column1 {
width: 15%;
background-color: #F7F7F7;
overflow: hidden;
height: 100vh;
}
div.column2 {
width: 70%;
overflow: hidden;
}
.banner {
width: 100vw;
height: 10vh;
}
.container2 {
display: flex;
}
<div class="content">
<div class="column1">
</div>
<div class="column2">
<div class="container2">
<div class="lobby">
<img src="img/lobby.jpg" alt="" /> </div>
<div class="content">
<p>lorem50gsdgsdsgdgsgdfgdfgdfgdfgfdggsd</p>
</div>
</div>
</div>
<div class="column1">
</div>
</div>
The website is divided into 3 columns and I am putting the content on the middle one.
Shouldn't the display flex align them vertically? Why is it not working? Thank you in advance!
You need to set align-items:center on flex parent in order to vertically center its children. Check this for more details about flex-container, and this for more general info about flexbox
You can add justify-content:center for horizontal alignment.
Since you are using display: flex to the content div, add just the property align-items:center and your text will be centred vertically:
body {
width: 100%;
max-width: 960px;
margin: 0;
}
div.content {
width: 100vw;
display: flex;
align-items:center;
}
div.column1 {
width: 15%;
background-color: #F7F7F7;
overflow: hidden;
height: 100vh;
}
div.column2 {
width: 70%;
overflow: hidden;
}
.banner {
width: 100vw;
height: 10vh;
}
.container2 {
display: flex;
}
<div class="content">
<div class="column1">
</div>
<div class="column2">
<div class="container2">
<div class="lobby">
<img src="img/lobby.jpg" alt="" /> </div>
<div class="content">
<p>lorem50gsdgsdsgdgsgdfgdfgdfgdfgfdggsd</p>
</div>
</div>
</div>
<div class="column1">
</div>
</div>
In order to make it work, try to think with me ok? In order to you understand what is happening here:
First of all if you have a parent div its children should be one bellow one another
Your first step is to set the div to have flex: 1, flex check it out this website to learn more.
now set the items to be side by side with display: flex
set the same container with justify-content: center and align-items:center
and if you wish to align the div to the middle of your page, try this: margin: 0 auto
Here is where the magic happens: flex-direction: column, check the documentation flex-direction
I want to show an image and two buttons below it, image dimensions could vary a lot, so I set max-width to 60% and max-height to 80%, but I'm not sure how to make these two buttons below to be aligned correctly under the image, left button floating on the left, right on the right of .buttons div, and .buttons div should be exact width of image.
Here's my HTML:
<div class='content'>
<img class='nft'>
<div class='buttons'>
<button class='buy'>Buy</button>
<button class='share'>Share</button>
</div>
</div>
CSS looks like this:
.content {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100%;
}
.nft {
max-width: 60%;
max-height: 80%;
display: block;
margin: auto;
margin-bottom: 32px;
}
.buy {
float: left;
}
.share {
float: right;
}
It's unclear if you want the buttons to expand to each fill half of the width of the image above them. That was my take, though, so here is an example showing the buttons filling space at different image widths:
.content {
display: inline-flex;
flex-direction: column;
}
.buttons {
display: flex;
}
.buttons>button {
flex: 1;
}
<div class='content'>
<img src='http://placekitten.com/400/200' class='nft'>
<div class='buttons'>
<button class='buy'>Buy</button>
<button class='share'>Share</button>
</div>
</div>
<div class='content'>
<img src='http://placekitten.com/200/200' class='nft'>
<div class='buttons'>
<button class='buy'>Buy</button>
<button class='share'>Share</button>
</div>
</div>
What I have set up is a flexbox that contains 3 children: the previous button, a div that contains the slideshow, and the next button. I have the flexbox set to justify-content: center, but the arrows stick to the far sides of the flexbox instead of right next to the slide div on either side. There is a gap between each arrow and the slide that won't go away unless I make the browser window narrower so the flexbox doesn't have any extra room. Setting justify-content to center should be keeping them all together.
I'm having the same issue with the slide container as well. It is also a flexbox and contains 3 children: a title, the image, and numbers at the bottom. When I shrink the window, the slide image shrinks to fit, but the title and numbers both stay stuck to the top and bottom of the flexbox instead of clustered in the middle with the image.
I would like this to be dynamic so I won't have to adjust the CSS as much with media queries for a number of different breaking points.
Things I have tried:
setting the margins to 0px for all children
setting the padding to 0px for all children
putting the buttons inside the slideshow container instead of the
current parent and setting the slideshow container to flex
every other option for justify-content (center, flex-start, flex-end, etc); none of them seemed to have any effect on the children
removing the width attribute from my slideshow container and setting it to auto (this made the slides disappear)
removing the height attribute from my slide container (this did fix the issue, but it also caused the slide to extend past the boundaries of its container)
I am also using some javascript that probably doesn't need to be included, but it sets each new slide's display to block and each previous slide's display to none. In order for this slideshow to work, I am under the impression that the slides need to their position set to absolute, and their parent container set to relative.
Here is a fiddle with the exact code I am using. I initially tried to simplify it to ask this question by removing container1 and the description on the left, but then I couldn't replicate the problem I was having. I am wondering if it has something to do with the height or width attributes of one of elements.
https://jsfiddle.net/kj7wzr5a/
.container1 {
width: 85%;
height: 650px;
display: flex;
justify-content: space-around;
align-items: center;
margin: 0 auto;
text-align: center;
}
.left {
width: 45%;
text-align: center;
margin-left: 30px;
margin-right: 20px;
}
.descrip1 {
margin-top: 20px;
}
.right {
height: 100%;
width: 45%;
display: flex;
justify-content: center;
align-items: center;
}
.flex {
height: 100%;
display: flex;
flex-direction: column;
align-content: center;
}
.slideshow-container {
height: 100%;
width: 360px;
margin-top: 25px;
position: relative;
}
.slide {
height: 90%;
width: 100%;
display: none;
position: absolute;
}
.slide:first-child {display: block}
.slide {
-webkit-transition: 0.5s ease;
transition: 0.5s ease;
}
.slide img {
height: 100%;
width: 100%;
margin: 0px;
object-fit: contain;
}
/* Next & previous buttons */
.buttons {
height: auto;
}
<div class="container1 bodytext">
<div class="left">
<div class="descrip1">
<p>Blah blah text</p>
</div>
</div>
<div class="right">
<div class="buttons">
<a class="slider_nav prev"><</a>
</div>
<div class="slideshow-container">
<div class="slide">
<div class="flex">
<div class="text">New Character</div>
<img src="1.png" style="width:100%">
<div class="numbertext">1 / 10</div>
</div>
</div>
<div class="slide">
<div class="flex">
<div class="text">New Character Stats</div>
<img src="2.png" style="width:100%">
</div>
</div>
</div>
<div class="buttons">
<a class="slider_nav next">></a>
</div>
</div>
</div>
I am fairly new to coding and haven't had any formal training.
I have three columns inside a div called row and each column is in a div called third-col. I want the three columns side by side (inline) and then the next div contact to be below them. Currently all of the divs are in block one after another.
Another problem I'm having is with my home image. When the browser window is not maximized I want the image to still stretch to the bottom of the page.
img {
padding: 0;
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
text-align: center;
}
.row {
padding: 0 20px;
display: inline;
}
.third-col {
width: 30.3%;
font-size: 16px;
display: inline;
}
.col {
float: left;
box-sizing: border-box;
}
<img class="center" src="homepage.jpg" alt="">
<section id="skills">
<p class="header">My Skills</p>
<div class="skillsContainer">
<div id="row">
<div class="third-col">
<ul>
<li>items</li>
</ul>
</div>
</div>
</div>
</section>
For you background-image, you will want it to set it using CSS. This will allow it to stretch from side to side, top to bottom. Here is an example:
.body { margin: 0; padding: 0;}
.full-page-image {
background-image: url(https://images.unsplash.com/photo-1489914099268-1dad649f76bf?auto=format&fit=crop&w=2850&q=80);
background-size: cover; /* THIS MAKES THE IMAGE STRETCH TO ALWAYS COVER THE PAGE */
background-position: center center;
position: relative;
width: 100%;
height: 100vh; /* This is 100% of the height */
}
<div class="full-page-image"></div>
<h1>Page content goes here</h1>
For the rows, I suggest using flexbox. Here is a complete guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
The idea is that each row is 100% of the witdh of the page. The content inside the row will be divided by the width you want. Here is an example:
.row{
padding: 0 20px;
display: flex; /* Makes the sub-elements flex */
flex-wrap: wrap; /* Forces flexbox to respect children width */
align-items: stretch; /* Makes childs the same height */
}
.third-col{
width: 33%;
font-size: 16px;
min-height: 40px;
}
<div class="row">
<div class="third-col">Col 1</div>
<div class="third-col">Col 2</div>
<div class="third-col">Col 3</div>
</div>
<div class="row">
<div>Other page content</div>
</div>
I'm trying to achieve a certain fluid layout where the content of each DIVs are centered vertically and horizontally. But, my middle row (A, B, C) keeps on having vertical and/or horizontal alignment issues.
The goal is to have it work like this:
Note: If there's a way I can have the option to set the Mobile layout's "C" area fluid as well (without having to change the HTML, just the CSS, so that I can test which option works best), that'd be a bonus!
Here's a snippet of the HTML:
<div class="page">
<div class="col col-top">top</div>
<div class="col col-mid">
<div class="col col-left">
<div class="centerBox"><div class='debugBox'></div></div>
</div>
<div class="col col-center">
<div class="centerBox"><div class='debugBox'></div></div>
</div>
<div class="col col-right">
<div class="centerBox"><div class='debugBox'></div></div>
</div>
</div>
<div class="col col-bottom">bottom</div>
</div>
I'm not sure if the "wrapper" DIVs with the "centerBox" class is really necessary (they're set as display: table-cell while each col class are set to display: table to behave like tables, but this causes issues to place those areas with position: absolute and % values for their left / right / top / bottom properties.
For instance, if the "C" area is set to display: table, this happens:
And if I change the "C" area to display: block;, then it fills that full center area, but...
... the horizontal and vertical alignment breaks inside of it.
Would using "Ghost" DIV elements (as discussed in this css-tricks article, "Centering in the Unknown" by Chris Coyier ) be any better to get the correct alignment?
Ok, this solution works without a framework, pure CSS using flexbox. As long as the layout is horizontal, C has a fixed width. When it is mobile, C takes up the whole width and has a variable height.
header,
footer {
padding: 10px;
background-color: lightblue;
}
main {
display: flex;
flex-direction: row;
}
main > div {
padding: 10px;
background-color: tomato;
flex-grow: 1;
min-height: 40px;
display: flex;
align-items: center;
}
main > div:nth-child(2) {
background-color: olive;
}
.fixed {
width: 400px;
}
#media (max-width: 768px) {
main {
flex-direction: column;
}
.fixed {
width: auto;
}
}
<header>Top</header>
<main>
<div>A</div>
<div class="fixed">C</div>
<div>B</div>
</main>
<footer>Bottom</footer>
Here is a pen (drag the border to see the mobile layout):
Codepen
Here are the styles for the code you have provided. The one thing to keep in mind is your middle column, being a fixed width, is what helps with the calc() function. 50% of HALF the width of the middle container. This will not work in IE 8 or less, so you'll have to write a JS solution if you care about those browsers.
.page {
width: 100%;
position: relative;
}
.col-top {
background: #0f0;
width: 100%;
height: 50px;
}
.page .col-mid {
width: 100%;
display: table;
}
.page .col-mid .col {
width: calc(50% - 250px);;
height: 100px;
background: #f00;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.page .col-mid .col-center {
width: 500px;
background: #00f;
}
.debugBox {
display: inline-block;
width: 20px;
height: 20px;
background: #000;
vertical-align: middle;
}
.col-bottom {
clear: both;
height: 50px;
background: #0f0;
}
and a working example here:
https://jsfiddle.net/g45pwedd/
And you don't need some of the container elements, as you stated.
UPDATE
Sorry, forgot to add for responsive. I wasn't sure if you still needed vertical align for responsive or not. This solution removes vertical align, as I doubt it's needed on a mobile display anyways:
#media (max-width: 768px) {
.page .col-mid .col {
display: block;
width: 100%;
}
}
https://jsfiddle.net/g45pwedd/2/
In bootstrap 4
to center the childs horizontally, use bootstrap-4 class
justify-content-center
to center the childs vertically, use bootstrap-4 class
align-items-center
but remember don't forget to use d-flex class with these
it's a bootstrap-4 utility class, like so
<div class="d-flex justify-content-center align-items-center" style="height:100px;">
<span class="bg-primary">MIDDLE</span>
</div>
Note: make sure to add bootstrap-4 utilities if this code does not work