I need to reformat predefined HTML to give me a different layout using CSS. The HTML is returned from the server as an error message and as such I'm unable to change the format.
.server-errors ul {
list-style: none;
}
.server-errors li:before {
content: "D";
font-family: "pictos";
}
<div class="server-errors">
<ul>
<li>
<label>Server error message goes here.</label>
</li>
</ul>
</div>
The requirement is to display this with removing the <li> dot and replacing it with another (pictos) character which is left and vertically aligned.
I have managed to display the character but am unable to align it vertically as a separate entity.
I need:
---------------------------------------
- Long error message goes -
- X here and it will span -
- three lines -
---------------------------------------
I get:
---------------------------------------
- X Long error message goes here and -
- will span three lines -
- -
---------------------------------------
I'm not sure what exactly I should be changing or even which part of the CSS to look at to get the effect.
You can use css3 flexbox.
.server-errors li {
align-items: center;
display: flex;
}
Output Image:
.server-errors ul {
border: 1px solid black;
list-style: none;
padding: 10px;
width: 150px;
}
.server-errors li {
align-items: center;
display: flex;
}
.server-errors li:before {
margin-right: 10px;
content: "D";
font-family: "pictos";
}
<div class="server-errors">
<ul>
<li>
<label>Long error message goes -
- X here and it will span -
- three lines</label>
</li>
</ul>
</div>
You can either use flexbox:
.server-errors li {
display: flex;
align-items: center;
}
Or, css table-cell with more browser support:
.server-errors li:before,
.server-errors li label {
display: table-cell;
vertical-align: middle;
}
.all {
width: 300px;
display:flex;
}
li {
list-style: none;
}
.side {
width: 10px;
}
.letter {
width: 100px;
display:flex;
justify-content:center;
align-items:center;
}
.all * {
line-height: 30px;
}
.message {
display: flex;
justify-content: center;
align-items: center;
}
<body>
<div class="server-errors">
<ul>
<li>
<div class="all">
<div class="side">
<span>-</span>
<span>-</span>
<span>-</span>
</div>
<div class="letter">
X
</div>
<div>
Long error message goes here and it will span three lines
</div>
<div class="side">
<span>-</span>
<span>-</span>
<span>-</span>
</div>
</div>
</li>
</ul>
</div>
</body>
Related
I have a list where one of the items breaks onto two lines.
I need to keep all <li> elements the same height, but also center align them, which I can't seem to do (code on CodePen):
#test ul{
display:flex;
border:1px solid black;
list-style: none;
padding-left:0;
}
#test li{
flex: 1;
width:33.333333%;
border-left:1px solid black;
padding:10px;
}
<div id="test">
<ul>
<li>
Two line Text<br/>
Two line Text
</li>
<li>
One line Text
</li>
<li>
One line Text
</li>
</ul>
</div>
How can I do what I'm trying to without using any hacky paddings, margins, or heights on the "One line Text" elements? If I use the suggested align-items: center on the ul, then the borders no longer look correct, as the element is no longer full height.
align-items defaults to stretch, which make the li fill the height of the ul.
Change it to center, by adding align-items: center; to the #test ul rule, will align them vertically centered (this will make the li collapse to their content though)
#test ul {
display:flex;
align-items: center; /* added */
border:1px solid black;
list-style: none;
padding-left:0;
}
#test li {
flex: 1;
width:33.333333%;
border-left:1px solid black;
padding:10px;
}
<div id="test">
<ul>
<li>
Two line Text<br/>
Two line Text
</li>
<li>
One line Text
</li>
<li>
One line Text
</li>
</ul>
</div>
Or make the li a flex container and vertical align the a using justify-content: center, which btw defaults to flex-start.
Why the use of column direction and justify-content, because there is 2 items and you most likely want to stack them on top of each other.
#test ul{
display:flex;
border:1px solid black;
list-style: none;
padding-left:0;
}
#test li{
flex: 1;
width:33.333333%;
border-left:1px solid black;
padding:10px;
display:flex; /* added */
flex-direction: column; /* added */
justify-content: center; /* added */
}
<div id="test">
<ul>
<li>
Two line Text
Two line Text
</li>
<li>
One line Text
</li>
<li>
One line Text
</li>
</ul>
</div>
If there is only 1 item with two lines of text, we can use the default row direction and align-items
#test ul{
display:flex;
border:1px solid black;
list-style: none;
padding-left:0;
}
#test li{
flex: 1;
width:33.333333%;
border-left:1px solid black;
padding:10px;
display:flex; /* added */
align-items: center; /* added */
}
<div id="test">
<ul>
<li>
Two line Text<br>Two line Text
</li>
<li>
One line Text
</li>
<li>
One line Text
</li>
</ul>
</div>
You need to change the HTML structure a little bit & apply align-items: stretch to ul.
#test ul {
display: flex;
align-items: stretch;
}
And inside li create a .inner div and give it display: flex with align-items: center.
#test li {
flex: 1;
display: flex;
align-items: center;
}
Have a look at the working snippet below:
#test ul{
display: flex;
align-items: stretch;
border: 1px solid black;
list-style: none;
padding-left: 0;
}
#test li {
flex: 1;
display: flex;
align-items: center;
border-left: 1px solid black;
}
#test li:first-child {
border-left: none;
}
#test li .inner {
padding: 10px;
}
<div id="test">
<ul>
<li>
<div class="inner">
Two line Text<br/>
Two line Text
</div>
</li>
<li>
<div class="inner">
One line Text
</div>
</li>
<li>
<div class="inner">
One line Text
</div>
</li>
</ul>
</div>
Hope this helps!
.d1 {
background-color: red;
display: flex;
justify-content: center;
}
.s1 {
color: blue;
}
<div class="d1">
<u>list:</u>
<br>item1
<br>item2
<br><span class="s1">item3</span>
</div>
I am trying to make a div where its contents are aligned in the center. I use the above code to display the text list: item1 item2 item3 one below the other, list: underlined and the item3 to have blue color but this gives so strange results:
item1 and item2 but item3 is... on top and next to list:... What's the matter and how can I fix this? Ty
You can fix this by not using flex but inline-block and a wrapper <div> instead.
.d1 {
background-color: red;
text-align: center;
}
.d2 {
display: inline-block;
text-align: left;
}
.s1 {
color: blue;
}
<div class="d1">
<div class="d2">
<u>list:</u>
<br>item1
<br>item2
<br><span class="s1">item3</span>
</div>
</div>
You can use <li> along with <u> and add u li {list-style-type: none;} to disable list item circle.
Check this :
.d1 {
background-color: red;
display: flex;
justify-content: center;
}
.s1 {
color: blue;
}
u li {list-style-type: none;}
<div class="d1">
<u>list:
<li>item1</li>
<li>item2</li>
<li><span class="s1">item3</span></li>
</u>
</div>
You could make you usage of an unsorted list like this one here:
If you need a more specific solution let me know that!
.d1 {
background-color: red;
justify-content: center;
display: block;
text-align: center
}
.s1 {
color: blue;
}
<div class="d1">
<p>Items:</p>
<lu>
<li>item1</li>
<li>item2</li>
<li><span class="s1">item3</span></li>
</lu>
</div>
.d1 {
background-color: red;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.s1 {
color: blue;
}
<div class="d1">
<u>list:</u>
<br>item1
<br>item2
<br><span class="s1">item3</span>
</div>
Result okay?
why you used <u> tag and "display:flex". If you use display:flex then its child nodes will take the whole height and <u>list:</u>, <span class="s1">item3</span> have done that and created 3 column. besides other content are not considered as the child nodes.
You can see the link to clear the idea of flex
I'm trying to create a simple footer with images to each side and some text in the middle.
Problem is the images aren't the same size and therefore the alignment is from top to bottom , i know their is a way to align to middle - I've tried to use
vertical-align:middle
But it didn't work.
Here is what I've done so far - if you have more tips for me regarding doing footer right i'll be glad to hear.
Fiddle
Use the flexbox module with justify-content: space-between. This will push the child nodes of your container away from each other so the left and right images sit against the edges.
footer {
display: flex;
justify-content: space-between;
text-align: justify;
}
<footer>
<img>
<span>text</span>
<img>
</footer>
display: flex; align-items: center; justify-content: center; on the footer ul will align the items in the footer vertically and horizontally. Also removed the fixed height from your footer and am applying top/bottom padding instead which will ensure even spacing on the top/bottom. And you have a random stray </p> that needs to be removed.
img {
width: 120px;
}
.container-footer {
margin: auto;
width: 100%;
text-align: center;
}
#footer {
background-color: #01b3d0;
padding: 1em 0;
}
#footer-images ul {
padding: 0;
}
#footer-images li {
list-style: none;
margin: 0 10px;
display: block;
}
#footer-images ul {
display: flex;
justify-content: center;
align-items: center;
}
<div class="container-footer">
<div id="footer">
<div id="footer-images">
<ul>
<li class="pull-left">
<img src="http://www.essai-automobile.com/actualites/photos-logos/jaguar-logo.png" class="pull-left img-responsive">
</li>
<li class="pull-center">©QBS LAB - ©TCWD 2017</li>
<li class="pull-right">
<img src="https://s-media-cache-ak0.pinimg.com/originals/9e/0d/0d/9e0d0d29921036c2ff5e78d891573f45.png" class="pull-right img-responsive">
</li>
</ul>
</div>
</div>
</div>
I had been working on this for some days and reading information about display flex, but I'm still having an issue that I can't fix. I have 3 boxes and they have % width and some px separating each others, something like this
[[first box] [second box] [third box]]
so, to do this I used the nth-of-type(3n+2) in order to get all the middle elements and addind the px separation to both sides
each box has two divs, an image(to the left) and a text, but, when the text has at least two lines, the box get missaligned
[[first box] [second box]
[third box]]
and that's not good. So, playing with the styles if I remove the display:flex and the box were aligned, but the text now is not vertical aligned to the middle -.-
.general-cont {
width: 100%;
text-align: center;
}
.each-cont {
width: 32.5%;
display: inline-block;
margin-top: 6px;
}
.each-cont:nth-of-type(3n+2) {
margin-left: 10px;
margin-right: 10px;
}
.img-cont {
float: left;
height: 48px;
display: flex;
align-items: center;
}
.text-cont {
height: 48px;
overflow: hidden;
align-items: center;
text-align: left;
display: flex;
}
<div class="general-cont">
<div class="each-cont">
<a>
<div class="img-cont">
123
</div>
<div class="text-cont">
456
</div>
</a>
</div>
<div class="each-cont">
<a>
<div class="img-cont">
ABC
</div>
<div class="text-cont">
DEF
</div>
</a>
</div>
<div class="each-cont">
<a>
<div class="img-cont">
QWE
</div>
<div class="text-cont">
ASD
</div>
</a>
</div>
</div>
You're code is a bit of everything. You shouldn't be combining widths, floats etc when you're using flex. Here's a quick example using your code:
.general-cont {
display: flex;
flex-direction: row;
flex-flow: center;
align-items: stretch;
}
.each-cont {
background: #eee;
margin: 0 10px;
padding: 10px;
}
.img-cont {
display: block;
}
http://codepen.io/paulcredmond/pen/rrRvkk
I would advise reading the guide on CSS tricks: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I wanted to create a list of items by displaying a name, a list of properties and an image. Although this seems like quite a common and easy problem, I am struggling to get it right.
After having changed the markup a dozen of times, I chose to represent the list by a ul in which each li consists of a h3(name), a ul(properties) and a img(image).
In order to make it fill the page a bit more, I used CSS's flexbox in order to put the image and the properties next to each other in a responsive way.
img {
max-width: 100px;
}
#example > ul > li {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content: space-around;
-webkit-align-items: center;
align-items: center;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
h3 {
width: 100%;
text-align: center;
}
div > ul {
border-left: 2px solid red;
}
<section id="example">
<ul>
<li>
<h3>Bulbasaur</h3>
<div>
<span>Properties</span>
<ul>
<li>green</li>
<li>seed</li>
<li>grass</li>
<li>poison</li>
</ul>
</div>
<img src="http://cdn.bulbagarden.net/upload/2/21/001Bulbasaur.png" />
</li>
<li>
<h3>Charmander</h3>
<div>
<span>Properties</span>
<ul>
<li>orange or some kind of red, I am not completely sure</li>
<li>lizard</li>
<li>fire</li>
</ul>
</div>
<img src="http://cdn.bulbagarden.net/upload/7/73/004Charmander.png" />
</li>
<li>
<h3>Squirtle</h3>
<div>
<span>Properties</span>
<ul>
<li>blue</li>
<li>tiny turtle</li>
<li>water</li>
</ul>
</div>
<img src="http://cdn.bulbagarden.net/upload/3/39/007Squirtle.png" />
</li>
</ul>
</section>
This looks pretty nice when the properties for all elements are equally long, but it kind of looks messy when this is not the case (the property-lists are not properly aligned as indicated by the red lines in the above snippet). I know I could get all the content in a table, causing every table element to be aligned nicely under each other, but then I don't know how I can have my names in a different line than the properties and the image...
My question could thus be formulated as:
How can I align the properties nicely under each other in such a way that they are displayed next to the image (to fill the space on the screen)? Additionally I would like that the image is displayed under the properties when the screen becomes too small (i.e. responsive design) and a separate line for the name.
Any help will be greatly appreciated
Update:
As it turned out that my question is not that clear, I tried to make it more clear by adding the vertical red lines in the snippet. I manage to get the desired result when using a table, but then I have to omit the names (as shown in the attached image) and the responsiveness...
You can just create a simple item element, something like this:
HTML
<li class="item">
<h2>Charmander</h2>
<div class="content">
<h3>Properties</h3>
<ul>
<li>orange or some kind of red, I am not completely sure</li>
<li>lizard</li>
<li>fire</li>
</ul>
</div>
<div class="image">
<img src="http://cdn.bulbagarden.net/upload/7/73/004Charmander.png" />
</div>
</li>
I simply divided the element in three main sections: title, properties and the image.
As you can see the properties are still inside a <ul> because they are used like a enumeration.
CSS
#example > ul {
padding: 0;
}
.item {
width: 100%;
background: #CCC;
padding: 20px;
box-sizing: border-box;
/* Padding will be inside the element (will not affect the width/height) */
margin: 20px 0;
overflow: hidden;
/* Used to keep the floated element inside the flow */
}
.item h2 {
text-align: center;
}
.item .content {
width: 60%;
float: left;
padding-left: 20px;
box-sizing: border-box;
}
.item .image {
width: 200px;
float: left;
}
.item img {
width: 100%;
}
.item .content ul {
border-left: 2px solid red;
margin-bottom: 20px;
}
With the first selector (#example > ul) I reset the default padding it has.
The text of the properties will just start on a new-line if it is too long (you can test this by resizing the window).
You can just edit the padding-left of the .content element, to move the properties a little bit more to the right or to the left.
Example JsFiddle
This is just to give you an example of how you want to approach this.
Hope it was helpful!
I have just been so stupid. As an alternative to the helpful answer of nkmol, it could also be as simple as changing the justify-content property to space-between and correct it by setting width and auto-margins.
img {
max-width: 100px;
}
#example > ul > li {
width: 80%;
margin: auto;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: center;
align-items: center;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
h3 {
width: 100%;
text-align: center;
}
li > div > ul {
border-left: 2px solid red;
}
<section id="example">
<ul>
<li>
<h3>Bulbasaur</h3>
<div>
<span>Properties</span>
<ul>
<li>green</li>
<li>seed</li>
<li>grass</li>
<li>poison</li>
</ul>
</div>
<img src="http://cdn.bulbagarden.net/upload/2/21/001Bulbasaur.png" />
</li>
<li>
<h3>Charmander</h3>
<div>
<span>Properties</span>
<ul>
<li>orange or some kind of red, I am not completely sure</li>
<li>lizard</li>
<li>fire</li>
</ul>
</div>
<img src="http://cdn.bulbagarden.net/upload/7/73/004Charmander.png" />
</li>
<li>
<h3>Squirtle</h3>
<div>
<span>Properties</span>
<ul>
<li>blue</li>
<li>tiny turtle</li>
<li>water</li>
</ul>
</div>
<img src="http://cdn.bulbagarden.net/upload/3/39/007Squirtle.png" />
</li>
</ul>
</section>
PS: I'm sorry for my awful question...
You need to break out your items from the primary UL
You can think of it as though you were building a table, but instead, use divs and then use a UL just to list the properties. This way, you can style each of the individual elements as needed.
look here: https://jsfiddle.net/oq04f6pm/2/
<section id="example">
<div class="section-title">Bulbasaur</div>
<div class="section-list">
<span>Properties</span>
<ul>
<li>green</li>
<li>seed</li>
<li>grass</li>
<li>poison</li>
</ul>
</div>
<div class="section-image">
<img src="http://cdn.bulbagarden.net/upload/2/21/001Bulbasaur.png" />
</div>
</section>
img {
max-width: 100px;
}
.section-title {
width: 100%;
text-align: center;
font-weight: bold;
}
.section-list, .section-image {
width: 50%;
float: left;
}
.section-image {
text-align: center;
}
#media screen and (max-width: 400px) {
.section-list, .section-image {
width: 100%;
}
.section-image {
text-align: left;
}
}