With the code below I am attempting to practice a simple header with flex content below it. The content is generic lorem ipsum with a background image. Unfortunately, when I run the code, the items do not "flex." they just show up in a vertical line. Any idea what I am doing wrong?
also, bonus question - when I do a background image, how do I get it to automatically shrink to fit the size of its container?
Thanks!
Brian
Tried manipulating the flex qualities and also looked up similar questions.
header {
height: 80px;
width: 1235px;
display: flex;
background-color: gray;
color: black;
vertical-align: middle;
justify-content: center;
}
header h1{
background-color: gray;
color: black;
}
.flex{
height: 1000px;
width: 1235px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
}
.box{
width: 250px;
height: 250px;
background-image: url(./WS1.jpg);
background-repeat: no-repeat;
margin: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./GReat.css">
<title>Great</title>
</head>
<body>
<header>
<h1>This Page is Great!</h1>
</header>
<div class="Flex">
<div class ="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class ="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class ="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class ="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
</body>
</html>
Your parent element has the class Flex, which is not the same as flex. Changing it to flex shows your elements flexing as expected:
header {
height: 80px;
width: 1235px;
display: flex;
background-color: gray;
color: black;
vertical-align: middle;
justify-content: center;
}
header h1 {
background-color: gray;
color: black;
}
.flex {
height: 1000px;
width: 1235px;
max-width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
}
.box {
width: 250px;
height: 250px;
background-image: url(./WS1.jpg);
background-repeat: no-repeat;
margin: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./GReat.css">
<title>Great</title>
</head>
<body>
<header>
<h1>This Page is Great!</h1>
</header>
<div class="flex">
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
</body>
</html>
However, note that you have a fixed width of 1235px, which won't display well on mobile devices. I'd recommend adding in max-width: 100% to both header and .flex, so that it displays correctly for mobiles.
As for your background images, the .box class has a fixed width and height of 250px, sothe images will automatically shrink to that dimension. This can be seen in the following:
header {
height: 80px;
width: 1235px;
max-width: 100%;
display: flex;
background-color: gray;
color: black;
vertical-align: middle;
justify-content: center;
}
header h1 {
background-color: gray;
color: black;
}
.flex {
height: 1000px;
width: 1235px;
max-width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
}
.box {
width: 250px;
height: 250px;
background-image: url("https://placehold.it/1000");
background-repeat: no-repeat;
margin: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./GReat.css">
<title>Great</title>
</head>
<body>
<header>
<h1>This Page is Great!</h1>
</header>
<div class="flex">
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
</body>
</html>
Related
I'm trying to create a two column layout, where the second column is moved downward a bit.
Currently I create a two column layout and translateY the second column, which is odd and doesn't play nicely with flow of other elements.
Is there any way to do this in a more natural way?
* {
box-sizing: border-box;
}
main {
display: flex;
flex-wrap: wrap;
width: 12.4em;
}
.box {
display: flex;
justify-content: center;
align-items: center;
width: 6em;
height: 6em;
margin: 0.1em;
background-color: black;
color: white;
}
.box:nth-of-type(2n) {
transform: translateY(50%);
}
.box--more {
cursor: pointer;
}
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, ea.</p>
<main>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box box--more">...</div>
</main>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, corrupti?</p>
As #a-haworth and #paulie_d kindly mentioned, it can be solved quite easily with css-grids by filling the gap with a placeholder item:
main {
display: grid;
grid-template-columns: repeat(2, fit-content(1em));
grid-auto-rows: 1fr;
grid-gap: 0.1em;
}
main::before {
content: "";
grid-area: 1 / 2;
}
.box {
grid-row-end: span 2;
display: flex;
justify-content: center;
align-items: center;
width: 6em;
height: 6em;
background-color: black;
color: white;
}
.box--more {
cursor: pointer;
}
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, ea.</p>
<main>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box box--more">...</div>
</main>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, corrupti?</p>
I wanna build a connected li elements with a Vertical Line(Y-axis), straight line which goes from top to bottom connected,The design I made works well, However, I want to to add some space vertical between lis I used margin but it separates the Vertical line. How can I do space but keep the vertical line connected.
ul{
list-style:none;
}
li{
border-left: .4rem solid #BBB;
padding-left: 1.5rem;
font-size: 1.2rem;
margin: 1.5rem 0;/*Here does space but they're not connected*/
position:relative;
}
li::before{
content:"";
display:block;
width:1.3rem; height:.4rem;
background-color: #BBB;
position:absolute;
top:1rem;
left:0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linked Unordered List</title>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
</body>
</html>
Margin is not part of the element so the line won't show in it.
You can use padding instead, but instead of a top and bottom space you want to make it just at the bottom (otherwise you get a spurious line at the top of the first element).
But this means you want to get rid of what would be a spurious line at the bottom which you can do using last-child.
ul {
list-style: none;
}
li {
border-left: .4rem solid #BBB;
padding-left: 1.5rem;
padding-bottom: 3rem;
font-size: 1.2rem;
/* margin: 1.5rem 0;/*Here does space but they're not connected*/
position: relative;
}
li::before {
content: "";
display: block;
width: 1.3rem;
height: .4rem;
background-color: #BBB;
position: absolute;
top: 1rem;
left: 0;
}
li:last-child {
padding-bottom: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linked Unordered List</title>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
</body>
</html>
Remove your margin and use padding: 1.5rem 0 1.5rem 1.5rem; for your space.
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
How to vertically center text inside p? Thank you.
enter image description here
Flexbox solution - the more modern solution:
https://jsfiddle.net/2zqeL6g8/
The HTML:
<div class="todo">
<div class="todo-left">
<p>TODO 1</p>
</div>
<div class="todo-right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus aliquam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus aliquam egestas.</p>
</div>
</div>
The CSS:
.todo {
display: flex;
}
.todo-left {
background: #ccc;
padding: 0 15px;
flex: 0 0 100px;
display: flex;
align-items: center;
}
.todo-right {
background: #f5f5f5;
padding: 0 15px;
flex: 1;
display: flex;
align-items: center;
}
CSS table solution - older method, but works in older browsers ie8+:
https://jsfiddle.net/2zqeL6g8/2/
The HTML:
<div class="todo">
<div class="todo-row">
<div class="todo-cell-left">
<p>TODO 1</p>
</div>
<div class="todo-cell-right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus aliquam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus aliquam egestas.</p>
</div>
</div>
</div>
The CSS:
.todo {
display: table;
border-collapse: collapsed;
width: 100%;
}
.todo-row {
display: table-row;
}
.todo-cell-left,
.todo-cell-right {
display: table-cell;
vertical-align: middle;
padding: 0 15px;
}
.todo-cell-left {
background: #ccc;
width: 100px;
}
.todo-cell-right {
background: #f5f5f5;
}
.todo {
display: flex;
}
.todo-left {
background: #ccc;
padding: 0 15px;
flex: 0 0 100px;
height:100px;
display: flex;
align-items: center;
}
.todo-right {
background: #f5f5f5;
padding: 0 15px;
flex: 1;
display: flex;
align-items: center;
}
<div class="todo">
<div class="todo-left">
<p>TODO 1</p>
</div>
<div class="todo-right">
<p>Lorem ipsum dolor sit .</p>
</div>
</div>
I want to center the text in a div. I found this code on this site that works:
div {
width: 250px;
height: 100px;
line-height: 100px;
text-align: center;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
But when I try to add classes instead of global div or span, the code does not work anymore:
.titleDiv {
width: 250px;
height: 100px;
line-height: 100px;
text-align: center;
}
.titleSpan {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
<div class="titleDiv">
<span class="titleSpan">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span>
</div>
Any ideas why it does not work? I'm using VS2010 Pro.
Edit:
The css code is in a separate css file that is imported ok (when I change the background color in code then I can see the change in Chrome)
Edit 2:
Here is the entire markup:
Default.aspx file:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body class="titleDiv">
<form id="form1" runat="server">
<div class="titleDiv">
<span class="titleSpan">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
</form>
</body>
</html>
StyleSheet.css file:
.titleDiv {
width: 250px;
height: 100px;
line-height: 100px;
text-align: center;
}
.titleSpan {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
You need to have your CSS in a tag, e.g.
<style>
.titleDiv {
width: 250px;
height: 100px;
line-height: 100px;
ext-align: center;
}
.titleSpan {
display: inline-block;
vertical-align: middle;
ine-height: normal;
}
</style>
<div>
content
</div
I think it can be a solution for you.
Here
is the link
HTML
<body>
<div class="titleDiv">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
</body>
</html>
CSS
.titleDiv {
background-color:red;
text-align:center;
margin-left:auto;
margin-right:auto;
width:500px;
height:200px;
}
.titleDiv span{
background-color:aqua;
position:relative;
top:45%
}
top:45% must be
top:TOTAL HEIGHT(which is 200px here) - SPAN HEIGHT(WHICH IS JUST A FONT SIZE AND ITS PADDING):
if the css is in the same file use <style> </style> tags:
<style type="text/css">
.titleDiv {
width: 250px;
height: 100px;
line-height: 100px;
text-align: center;
}
.titleSpan {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
</style>
What will produce a gap from 100px:
<body>
<form id="form1" runat="server">
<div class="titleDiv"></div> <%--The gap--%>
<div class="titleDiv">
<span class="titleSpan">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
</form>
Is possible auto align in line 2 div without size?
The goal is to get something like the image attached.
I can't set percentages (80% and 20%) because the content is dynamic. I can't use tables. Any idea?
Example: http://jsfiddle.net/hKRyG/
<html>
<head>
<style type="text/css">
.navbar {
width: 500px;
background: #ccc;
display:table;
}
.navbar .breadcrumb {
float:left;
}
.navbar .breadcrumb ul {
margin: 0;
padding: 0;
}
.navbar .breadcrumb li {
list-style: none;
display: inline;
}
.navbar .navbutton {
float: right;
}
</style>
</head>
<body>
<div class="navbar">
<div class="breadcrumb">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>-></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>-></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>-></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
</div>
<div class="navbutton">
<input type="button" value="BUTTON" />
</div>
</div>
</body>
</html>
Thank you!
There you go! To align without defined size you must use table display properties
.navbar {
width: 500px;
background: #ccc;
display:table;
}
.navbar .breadcrumb ul {
margin: 0;
padding: 0;
}
.navbar .breadcrumb li {
list-style: none;
display: inline;
}
.navbar ul{
display: table-cell;
}
.navbutton {
display: table-cell;
vertical-align: middle;
}
Use the following:
<html>
<head>
<style>
.navbar {
width: 500px;
background: #ccc;
display:table;
float: left;
}
.navbar .breadcrumb {
float:left;
}
.navbar .breadcrumb ul {
margin: 0;
padding: 0;
}
.navbar .breadcrumb li {
list-style: none;
display: inline;
}
.navbar .navbutton {
float: right;
}
</style>
</head>
<body>
<div class="navbar">
<div class="breadcrumb">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>-></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>-></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>-></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</div>
</div>
<div class="navbutton">
<input type="button" value="BUTTON" />
</div>
<body>
</html>
If you move the button to the top of the markup and give it a float: right;, then add overflow: hidden; to the <div class="breadcrumb"> the button should be flush right and the breadcrumb will take up whatever room remains on the left.
jsFiddle
HTML:
<div class="navbar">
<div class="navbutton">
<input type="button" value="BUTTON" />
</div>
<div class="breadcrumb">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>-></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>-></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>-></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
</div>
</div>
CSS
.navbar {
width: 500px;
background: #ccc;
}
.navbar .navbutton {
float: right;
}
.navbar .breadcrumb {
overflow: hidden;
}
.navbar .breadcrumb ul {
margin: 0;
padding: 0;
}
.navbar .breadcrumb li {
list-style: none;
display: inline;
}