I have few problems to fix, that are
1- Why logo class properties not working ?
2- Why class title does not move to right, ie justify-content: flex-end not working OR which other way this can be done ?
3- Do I have to write display: flex; in all parent classes or simply container, which has all of them inside is enough ?
4- How it effect if I use display: flex; on all parent classes ?
Many Thanks
---HTML---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name = "viewport" content = "width=device-width", initial-scale = 1.0>
<title>My Portfolio</title>
<link rel="stylesheet" type="text/css" href="port.css">
</head>
<body>
<div class="container">
<div class="header">
<div id="logo"> Logo </div>
<div class="title">JAMES O BRAIN
<div class="sub-title">FRONT-END MONK</div> </div>
</div>
<div class="container2">
<div class="centre-picture">Central Pic</div>
<div class="left-boxs">
<div class="blue-box">Blue Box</div>
<div class="grey-box">Grey Box</div>
<div class="green-box">Green Box</div>
</div>
</div>
<div class="bottom-boxs">
<div class="featured-work">Featured Work</div>
<div class="appify">APPIFY</div>
<div class="sunflower">SUNFLOWER</div>
<div class="bokeh">BOKEH</div>
</div>
</div>
</body>
</html>
---CSS---
.container {
display: flex;
flex-direction: column;
border: 5px solid black;
margin: 10px;
padding: 50px;
}
.header {
display: flex;
border: 5px solid green;
}
.logo {
/* why these all properties not working at all ? */
border: 3px solid black;
padding: 10px;
margin: 10px;
}
.title {
border: 3px solid orange;
justify-content: flex-end; /* why this property not working, how can i get this to right ?*/
padding: 10px;
margin: 10px;
}
.sub-title {
border: 3px solid black;
padding: 5px;
margin: 5px
}
.container2 {
display: flex;
border: 5px solid red;
margin: 10px;
padding: 10px;
height: 300px;
}
.centre-picture {
border: 3px solid black;
margin: 10px;
padding: 10px;
}
.left-boxs {
border: 3px solid goldenrod;
margin: 10px;
padding: 10px;
order: -1;
}
.green-box {
background-color: green;
padding: 5px;
margin: 5px
}
.blue-box {
background-color: blue;
padding: 5px;
margin: 5px
}
.grey-box {
background-color: grey;
padding: 5px;
margin: 5px
}
.bottom-boxs {
display: flex;
border: 5px solid blue;
}
.appify {
border: 3px solid black;
margin: 10px;
padding: 10px;
}
.sunflower {
border: 3px solid black;
margin: 10px;
padding: 10px;
}
.bokeh {
border: 3px solid black;
margin: 10px;
padding: 10px;
}
As Daniel stated, you should make sure that you are not confusing #id and .class selectors in your markup/CSS. In your stylesheet you should be using #logo instead of .logo.
There are several ways you can align the items in your header. In the example below I attached justify-content: space-between; to the .header div which will align any direct child elements with an even amount of left over space between them. There are other ways you can do this...this is just one option. You can play around with margins, padding, and other flexbox values to see what works best for you.
Giving a container display: flex will have effect on all of the children elements inside the container, but not the contents inside each of those children. For example: If you have a container with three div elements inside it, and you give the container display: flex; justify-content: center; this will center each div horizontally, but not the text, images, etc, inside each div. In your case, at least in this example, yes, you need to add display: flex; to each of the divs inside the header in order to apply flexbox properties to the text inside.
Hope that helps a little. See the snippet below for one example. Good luck!
.container {
display: flex;
flex-direction: column;
border: 5px solid black;
width: 80%;
padding: 50px;
}
.header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
border: 5px solid green;
padding: 10px;
}
#logo {
display: flex;
justify-content: center;
align-items: center;
border: 3px solid black;
padding: 10px;
}
.title {
display: flex;
justify-content: center;
align-items: center;
border: 3px solid orange;
padding-left: 10px;
}
.sub-title {
display: flex;
justify-content: center;
align-items: center;
margin: 10px;
padding: 10px;
border: 3px solid black
}
<div class="container">
<div class="header">
<div id="logo">Logo</div>
<div class="title">JAMES O BRAIN
<div class="sub-title">
FRONT-END MONK
</div>
</div>
</div>
</div>
It's because in your HTML you are using an id, #, but your CSS is targeting a class .. Change your CSS to this instead:
#logo {
/* why these all properties not working at all ? */
border: 3px solid black;
padding: 10px;
margin: 10px;
}
Related
I need to show my header line as well as the logo.png at the same line. Here is my try.
<div class="header">
<a>Dashboard</a>
<div>
<a href="../test.php" > <img src="../assets/images/logo.png" width="50" height="50"/> <?php echo htmlspecialchars($_SESSION["username"]); ?></a>
<i class="fa fa-toggle-left"></i> logout
</div>
</div>
I could see the png image but it has not nicely fit with the header bar. Here is the output
But I need to show Dashboard,username and the logout in a same line which goes through the middle of the image.
I will put my styles as below,
.wrapper .main_content .header{
padding: 20px;
background: #fff;
color: #717171;
border-bottom: 1px solid #e0e4e8;
display: flex;
justify-content: space-between;
position: relative;
}
Can someone help me in this case?
Dashboard, james and logout should be in the same line,
Use align-items: center in your .header class to center everything vertically.
You can find more information about align-items here.
You set display flex in header class just you need to add a CSS property align-items: center; use the below code
.wrapper .main_content .header{
padding: 20px;
background: #fff;
color: #717171;
border-bottom: 1px solid #e0e4e8;
display: flex;
justify-content: space-between;
position: relative;
align-items: center;
}
Flexbox is the right tool for this. You can easily align your items the way you need and want!
body {
margin: 0px;
}
div {
box-sizing: border-box;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: auto;
border-bottom: 1px solid black;
padding: 10px 5px;
}
.header>h4 {
margin: 0px;
}
.user-info {
display: flex;
align-items: center;
gap: 10px;
}
.user-info>img {
width: 35px;
height: 35px;
border-radius: 50%;
}
.user-info > button {
border-radius: 5px;
background-color: white;
color: black;
border: 1px solid black;
padding: 3px 10px;
}
<div class="header">
<h4>Dashboard</h4>
<div class="user-info">
<img src="https://i.stack.imgur.com/hS58k.jpg?s=256&g=1" />
<label>James</label>
<button>Logout</button>
</div>
</div>
I have a flexbox with different items inside.
When it wraps onto a new line I want to align this new line with the 2nd item on the first row of the flexbox, but I can't figure out how to do this. The width of the elements will be dynamic, based on the text inside.
div {
font-family: arial, sans-serif;
margin: 5px;
color: white;
border: 1px dotted black;
}
.parent {
display: flex;
flex-wrap: wrap;
width: 300px;
}
.unique_element {
background-color: Crimson;
width: 30%;
padding: 10px 10px 10px 10px;
}
.child {
background-color: CornflowerBlue;
padding: 10px 10px 10px 10px;
}
<div class="parent">
<div class="unique_element">First</div>
<div class="child">Second</div>
<div class="child">Third</div>
<div class="child">Fourth</div>
<div class="child">Fifth</div>
</div>
When it wraps onto a new line I want to align this new line with the 2nd item on the first row of the flexbox.
So, the real question is: How to re-arrange flex items when wrapping occurs?
Since HTML and CSS, by themselves, have no concept of when elements wrap, they have no control of this situation. You have to handle it, either with media queries or JavaScript.
Once you've selected your method for detecting the wrap, you can use the order property to re-arrange the items.
To expand on #MichaelBenjamin's fantastic answer:
Since HTML and CSS, by themselves, have no concept of when elements wrap, they have no control of this situation. You have to handle it, either with media queries or JavaScript.
You can work around this by setting a new parent element and nest the unique element as the first child. Set this new master-parent to display: flex;.
div {
font-family: arial, sans-serif;
margin: 5px;
color: white;
border: 1px dotted black;
}
.parent {
display: flex;
flex-wrap: wrap;
width: 300px;
}
.unique_element {
background-color: Crimson;
width: 30%;
height: 27px;
padding: 10px 10px 10px 10px;
}
.child {
background-color: CornflowerBlue;
padding: 10px 10px 10px 10px;
}
.master-parent {
display: flex;
width: 400px;
}
<div class="master-parent">
<div class="unique_element">First</div>
<div class="parent">
<div class="child">Second</div>
<div class="child">Third</div>
<div class="child">Fourth</div>
<div class="child">Fifth</div>
</div>
</div>
You can create two divs inside the parent div, one that holds the unique element and one that holds generic children. That's how you get the separation
<div class="parent">
<div class="unique-wrapper">
<div class="unique_element">First</div>
</div>
<div class="child-wrapper">
<div class="child">Second</div>
<div class="child">Third</div>
<div class="child">Fourth</div>
<div class="child">Fifth</div>
</div>
</div>
Style the CSS as shown. Note .unique-wrapper has flex: 3 because you set the width of the element as 30%.
div {
font-family: arial, sans-serif;
margin: 5px;
color: white;
border: 1px dotted black;
}
.parent {
display: flex;
width: 300px;
}
.unique_element {
background-color: Crimson;
padding: 10px 10px 10px 10px;
}
.unique-wrapper, .child-wrapper {
border: none;
margin: 0;
}
.unique-wrapper {
flex: 3;
}
.child-wrapper {
flex: 7;
display: flex;
flex-wrap: wrap;
}
.child {
width: auto;
background-color: CornflowerBlue;
padding: 10px 10px 10px 10px;
}
Here is my codepen if you want to play with the code.
create a dummy element for spacing
div {
font-family: arial, sans-serif;
margin: 5px;
color: white;
border: 1px dotted black;
}
.parent {
display: flex;
flex-wrap: wrap;
width: 300px;
}
.unique_element {
background-color: Crimson;
width: 30%;
padding: 10px 10px 10px 10px;
}
.child {
background-color: CornflowerBlue;
padding: 10px 10px 10px 10px;
}
.hideme{
visibility:invisible;
background-color:white;
border:none;
}
<div class="parent">
<div class="unique_element">First</div>
<div class="child">Second</div>
<div class="child">Third</div>
<div class="unique_element hideme"></div>
<div class="child">Fourth</div>
<div class="child">Fifth</div>
</div>
here is how my screen should look like:
the orange button should be on the right of the "dashboard-detail-body" and have margins to the top, left, and bottom ("dashboard-container")
this is what I tried:
<div class="dashboard-detail-body">
<div style="float: right; margin-right: 10px; margin-top: 15px;">
{{ui-5/button label="click me"}}
</div>
<div class="dashboard-container">
but I do not get the desired behavior - no margin bottom (the orange button is overlapping with the bottom div)
margin-bottom, did not solve it, how can I get the desired behavior?
The issue is with the float: right; style. This makes the element overlap.
You can solve this issue by using flex-box, with the following code:
.dashboard-detail-body{
display: flex;
flex-direction:column;
}
.align-right{
align-self: flex-end;
}
<div class="dashboard-detail-body">
<div class="align-right">
I am right
</div>
<div class="dashboard-container">
<p>a<p>
<p>b<p>
<p>c<p>
</div>
</div>
Though it was difficult to understand and recreate your problem from the available data, I assume that you want to align a button center-right inside the container. You can use flexbox to align elements inside a parent.
.container {
height: 200px;
border: solid 1px #333;
display: flex;
justify-content: right;
align-items: center;
}
button.orange {
border: none;
outline: none;
height: 1.5rem;
/* optional basic styling */
background: orange;
color: #fff;
}
<div class="container">
<button class="orange">Click Me</button>
</div>
You can try with css grid:
.dashboard-detail-body{
display: grid;
grid-template-columns: 1fr;
justify-items: center;
border: 1px solid grey;
border-radius: 2em;
}
.right{
justify-self: end;
margin: 1em 3em 1em 1em;
background-color: orange;
padding: .5em;
border-radius: .5em;
}
.dashboard-container {
display: flex;
justify-content: center;
align-items: start;
border: 1px dashed grey;
border-radius: 1.5em;
margin-bottom: 2em;
width: 95%;
height: 200px;
}
.dashboard-container > p {
padding: 1.5em 2em;
margin: 1em;
border: 1px solid grey;
border-radius: .5em;
}
<div class="dashboard-detail-body">
<div class="right">
click me
</div>
<div class="dashboard-container">
<p></p>
<p></p>
<p></p>
</div>
</div>
As you are shrinking your div with float right it frees space on the left. The clear property doesn't work.
So the solution I came up with is to keep the div full & use a button
.dashboard-detail-body {
background: #eeeeee;
border: 3px solid #bbbbbb;
border-radius: 20px;
height: 80vh;
width: 80%;
min-height: 40rem;
min-width: 45rem;
margin: auto;
}
.btn-area {
height: 5rem;
width: 100%;
/* border: 1px solid red; */
}
.btn {
background: #ff9900;
padding: 10px 15px;
border-radius: 10px;
border: 2px solid #9c7842;
/* clear: left; */
/* display: inline-block; */
float: right;
margin-right: 25px;
margin-top: 25px;
}
.dashboard-container {
border: 3px solid #bbbbbb;
margin: auto;
width: 75%;
height: 75%;
border-radius: 20px;
display: flex;
justify-content: center;
/* align-items: center; */
}
.box {
border: 3px solid #bbbbbb;
width: 6.5rem;
height: 6.5rem;
border-radius: 20px;
float: left;
margin: 1rem;
}
<div class="dashboard-detail-body">
<div class="btn-area">
<button class="btn">Click Me</button>
</div>
<div class="dashboard-container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
I have a flex container that has multiple divs within. I am trying to figure out how to set a hover overlay black overlay with copy that is the same size as the container and overlays the divs within the container. I'm assuming there's a way to do this with HTML & CSS without JS? The idea being that when you hover over one of the boxes on the page, a "READ MORE" notice comes up on a 75% transparent black overlay. I'm just rambling now in order to "add some more details"
.box {
display: flex;
transition: background-color 0.5s ease;
background: white;
width: 23%;
margin: 10px;
color: black;
font-weight: bold;
font-size: .7em;
text-align: center;
justify-content: space-between;
height: 40%;
border-left: .5px solid black;
border-right: .5px solid black;
flex-direction: column;
}
#header-box {
display: flex;
border-top: 1px solid black;
border-bottom: 1px solid black;
width: 100%;
justify-content: flex-star;
align-content: flex-start;
font-family: 'Big Caslon';
}
#end-matter {
display: flex;
border-top: 10px solid black;
border-bottom: 10px solid black;
border-width: .5px;
width: 100%;
justify-content: space-around;
}
#sign-photo {
display: flex;
justify-content: center;
}
#aries {
display: flex;
width: 50%;
justify-content: center;
}
.sign-copy {
display: flex;
padding-left: 5px;
}
<div class="box">
<div id="header-box">
<h2 class="sign-copy">
Aries
</h2>
</div>
<div id="sign-photo">
<img id="aries" src="CSS/images/aries2.svg">
</div>
<div id="end-matter">
<p>
wtf
</p>
<p>
weird content here
</p>
<p>
time something?
</p>
</div>
</div>
You can use :hover as well as :after on specific css classes.
For example:
.container {
border: 2px solid blue;
display: flex;
}
.eachDiv {
border: 1px solid red;
background-color: gray;
width: 33%;
height: 50px;
}
.eachDiv:hover {
color: purple;
background-color: yellow;
}
.one:hover:after {
content: "this is the first div!!!";
}
.two:hover:after {
content: "el segundo div";
}
.three:hover:after {
content: "three is the best";
}
<div class="container">
<div class="eachDiv one">one</div>
<div class="eachDiv two">two</div>
<div class="eachDiv three">three</div>
</div>
Note: this answer may be a better solution to your question.
I'm trying to use flex layout in simple image gallery (wip) http://codepen.io/anon/pen/vmhLe.
<html>
<head>
<style>
.thumbPanel {
display: flex;
align-items: center;
border: 2px solid MidnightBlue;
background-color: Gray;
}
.thumbAdminMenu {
display: flex;
flex-direction: column;
align-items: stretch;
}
.thumbAdminButton {
display: inline-block;
margin: 0px;
margin-left: 5px;
flex-shrink: 0;
flex-grow: 0;
border: 2px solid MidnightBlue;
font-size: 20pt;
}
.thumbList {
display: flex;
align-items: center;
margin: 5px;
overflow: auto;
width: 100%;
border: 2px solid MidnightBlue;
background-color: Gainsboro;
}
.thumbArea {
min-width: 200px;
min-height: 200px;
margin: 5px 0px 5px 5px;
background-color: LightGoldenRodYellow;
border: 1px solid MidnightBlue;
}
.thumbArea:first-child, {
margin-left: 0px;
}
.thumbArea:last-child {
margin-right: 5px;
}
</style>
</head>
<body>
<div class="thumbPanel">
<div class="thumbAdminMenu">
<button class="thumbAdminButton">AddXXX</button>
</div>
<div class="thumbList">
<div class="thumbArea"></div>
<div class="thumbArea"></div>
<div class="thumbArea"></div>
<div class="thumbArea"></div>
<div class="thumbArea"></div>
<div class="thumbArea"></div>
</div>
</div>
</body>
</html>
The result (browser window shrinked):
http://i.imgur.com/znMcrS2.png
Why is the text AddXXX cropped?
Why is the right margin of right most yellow div missing? I'm setting it with .thumbArea:last-child rule.
Here's the playground: http://codepen.io/anon/pen/vmhLe. There's an issue on codepen and jsfiddle with bottom horizontal scrollbar overflowing (at least for me in Chrome). But when viewing HTML file it displays fine. Also if you open developer console in Chrome it will display fine too.
Thank you.
I can't reproduce the cropped text issue neither on Firefox nor Chromium.
You can fix the margin issue adding an ::after pseudo-element for the wrapper:
.thumbList:after {
content: ''; /* Enabling the pseudo-element */
min-width: 5px; /* Fake margin */
height: 1px; /* Anything but 0 */
}
.thumbPanel {
display: flex;
align-items: center;
border: 2px solid MidnightBlue;
background-color: Gray;
}
.thumbAdminMenu {
display: flex;
flex-shrink: 0;
flex-direction: column;
align-items: stretch;
}
.thumbAdminButton {
display: inline-block;
margin: 0px;
margin-left: 5px;
flex-shrink: 0;
border: 2px solid MidnightBlue;
font-size: 20pt;
}
.thumbList {
display: flex;
align-items: center;
margin: 5px;
overflow: auto;
border: 2px solid MidnightBlue;
background-color: Gainsboro;
}
.thumbArea {
min-width: 200px;
min-height: 200px;
margin: 5px 0px 5px 5px;
background-color: LightGoldenRodYellow;
border: 1px solid MidnightBlue;
}
.thumbList:after {
content: '';
min-width: 5px;
height: 1px;
}
<div class="thumbPanel">
<div class="thumbAdminMenu">
<button class="thumbAdminButton">AddXXX</button>
</div>
<div class="thumbList">
<div class="thumbArea"></div>
<div class="thumbArea"></div>
<div class="thumbArea"></div>
<div class="thumbArea"></div>
<div class="thumbArea"></div>
<div class="thumbArea"></div>
<div class="thumbArea"></div>
<div class="thumbArea"></div>
<div class="thumbArea"></div>
</div>
</div>