I am stuck at it for very long time and googling did not helped me much. I am generating ul(s) dynamically, their count may also very according to number of items found from db.
Here's what its looking like:
The code:
CSS:
#container{
align-content: center;
}
ul{
display:inline-flex;
padding: 5px;
}
pug:
div(id="container")
each item in items_list
ul
a(href=somelink)
div(class="image")
//- a(href=url)
img(src="/images.link", alt="", height="120px", width="160px", class="dp")
p(id="title") Title:- #{item.title}
p(id="stuff") stuff:- #{item.stuff}
I have tried align-content, justify content, etc. Also I am not giving a property like margin-left or something as number of uls will vary. (I want them to get displayed in a horizontal manner.)
First think you missed li tag which need to list after ul
I am not sure which you want but i guess you want this. This is simple demo code
#container {
align-content: center;
}
ul {
padding: 5px;
}
li {
list-style: none;
}
a {
float: right;
}
div {
float: left;
}
p {
float: left;
margin-left: 20px;
}
<div id="container">
<ul>
<li>
<a href="#">
<div>
<p id="title">Test Code title1</p>
<p id="stuff">Test Code stuff1</p>
</div>
</a>
</li>
<li>
<a href="#">
<div>
<p id="title">Test Code title2</p>
<p id="stuff">Test Code stuff2</p>
</div>
</a>
</li>
<li>
<a href="#">
<div>
<p id="title">Test Code title3</p>
<p id="stuff">Test Code stuff3</p>
</div>
</a>
</li>
</ul>
</div>
Related
I've got a procedure that consists of steps. Some steps are accompanied by an image.
<p class="imagefloatright"><img src="step 1.png"/></p>
<ol>
<li>
<p>Step 1</p>
<p class="imagefloatright"><img src="step 2.png"/></p>
</li>
<li>
<p>Step 2</p>
<p>Step 3</p>
</li>
</ol>
and my CSS:
p.imagefloatright img {
float: right;
clear: both;
}
This is the default output. Images don't stay with the steps they belong to, the text for step 2 is put alongside image 1:
I want the image that belongs to step 2 to be vertically aligned with step 2:
In the past, I've achieved my desired result in XSL-FO by inserting a full-width block with height =0 before each floated image.
Can I achieve my desired layout using CSS commands?
Or do I need to insert a block in the HTML before I apply the CSS to the HTML?
To clear the float which contains the dynamic content ie. image can have dynamic height, you'll need to clear the parent element itself.
.imagefloatright {
clear: both;
}
.imagefloatright img {
float: right;
}
It means that you need to use clear on the element which contains the floating elements.
For brevity, I would rename it like:
.clearfix {
clear: both;
}
.float-right {
float: right;
}
HTML
<p class="clearfix"><img class="float-right" src="step 1.png"/></p>
<ol>
<li>
<p>Step 1</p>
<p class="clearfix"><img class="float-right" src="step 2.png"/></p>
</li>
<li>
<p>Step 2</p>
<p>Step 3</p>
</li>
</ol>
Here's a demo.
You should use clear property not on p element, but create another element in the place where you would like to stop float.
p.imagefloatright img {
float: right;
}
.clear {
clear:both;
}
<p class="imagefloatright"><img src="http://via.placeholder.com/80x80"/></p>
<p>Step 1</p>
<div class="clear"></div>
<p class="imagefloatright"><img src="http://via.placeholder.com/80x80"/></p>
<p>Step 2</p>
<div class="clear"></div>
By the way, here is a code snippet showing a better layout for your steps (from my point of view), which is more logical, each step is a block with image and text positioned correctly.
p.imagefloatright {
clear:both;
}
p.imagefloatright img {
float: right;
}
<p class="imagefloatright">
Step 1
<img src="http://via.placeholder.com/80x80"/>
</p>
<p class="imagefloatright">
Step 2
<img src="http://via.placeholder.com/80x80"/>
</p>
If you still would like to have text in a separate p element you may have all steps as a div elements with properly styled paragraph and images inside. I am also applying display:inline-block on p element to prevent it from taking whole width. You can do same or use span instead of p.
.imagefloatright {
clear:both;
}
.imagefloatright p {
display: inline-block;
margin: 0;
}
.imagefloatright img {
float: right;
}
<div class="imagefloatright">
<p>Step 1</p>
<img src="http://via.placeholder.com/80x80"/>
</div>
<div class="imagefloatright">
<p>Step 2</p>
<img src="http://via.placeholder.com/80x80"/>
</div>
If every step that has an image will only have exactly one image, and an image isn't going to be shared by more than one step, you can write a selector to have the following step clear each floating image but it's very rigid:
p.imagefloatright img {
clear: both;
float: right;
}
p.imagefloatright + p:not(.imagefloatright) + p {
clear: both;
}
<p class="imagefloatright"><img src="https://placehold.it/100x100"/></p>
<p>Step 1</p>
<p class="imagefloatright"><img src="https://placehold.it/100x100"/></p>
<p class="imagefloatright"><img src="https://placehold.it/100x100"/></p>
<p>Step 2</p>
<p>Step 3</p>
If there isn't a strict 1-to-1 relationship between steps and images then you will need to apply the clear property strategically to specific steps.
Here is an easy way with flexbox:
ol {
list-style: none;
padding:0;
margin:0;
}
li {
display: flex;
/*for illustration*/
border:1px solid;
padding:5px;
}
img {
margin-left: auto;
}
<ol>
<li>
Step 1
<img src="https://placehold.it/100x100">
</li>
<li>
Step 2
</li>
<li>
Step 3
</li>
<li>
Step 4
<img src="https://placehold.it/100x100">
</li>
</ol>
Solution 1: Using Flex
I would recommend using flex and justify-content: space-between the only drawback for using it would be if you are supporting older browsers such IE10- then you can check https://caniuse.com/#search=flex for more info.
As for space-between is simple as according to MDN
The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge.
Meaning, it will have a first child aligned to the beginning of the parent and the last child aligned to the end and the remaining space is divided equally among the rest of the children if they exist, which will give you the desired layout if the img is always the last child, no matter how many child divs exist.
Personally, I would find using flex is the most convenient and one of the cleanest ways to "position" and "layout" different elements across the page.
You can find the code below and a working fiddle here
HTML
<ol class="step-list">
<li class="step">
<p>Step 1</p>
<img src="https://placehold.it/150x150?text=Step1" alt="">
</li>
<li class="step">
<p>Step 2</p>
</li>
<li class="step">
<p>Step 3</p>
</li>
<li class="step">
<p>Step 4</p>
<img src="https://placehold.it/150x150?text=Step4" alt="">
</li>
</ol>
CSS
.step-list {
list-style: none;
}
.step {
display: flex;
justify-content: space-between;
}
Solution 2: Using Float
You can also still be using float but in that case you will need to clear the p instead of the img and float it too.
Since all of the element of the containing elements are floated it is important to add a clearfix to the li tag not to collapse to nothing you can find more info here.
So your code would like this and you can find a working fiddle here
HTML
<ol class="step-list">
<li class="step">
<p>Step 1</p>
<img src="http://placehold.it/150x150?text=Step1" alt="">
</li>
<li class="step">
<p>Step 2</p>
</li>
<li class="step">
<p>Step 3</p>
</li>
<li class="step">
<p>Step 4</p>
<img src="http://placehold.it/150x150?text=Step4" alt="">
</li>
</ol>
CSS
.step-list {
list-style: none;
}
.step img {
float: right;
}
.step p {
float: left;
}
/*This is what is called a clearfix solution, for the floating problem*/
.step::after {
content: "";
display: block;
clear: both;
}
Don't hesitate to ask me any more questions if anything unclear.
clearfix should help. :
.clearfix:after {
display: block;
content: "";
clear: both;
}
And the html:
<p class="imagefloatright"><img src="http://via.placeholder.com/80x80"/></p>
<p class="clearfix">Step 1</p>
<p class="imagefloatright"><img src="http://via.placeholder.com/80x80"/></p>
<p class="clearfix">Step 2</p>
<p>Step 3</p>
You can use this
<p>
<span class="left">1</span>
<img class="right" src="http://via.placeholder.com/90x90" alt="">
</p>
<p>
<span class="left">2</span>
<img class="right" src="http://via.placeholder.com/90x90" alt="">
</p>
p{
display:inline-block;
margin-bottom:5px;
width:100%;
}
p .left{
float:left;
margin-bottom:55px;
}
p .right{
float:right;
}
https://jsfiddle.net/jlbarcelona/vcmdo7uy/106/
Why not with a pseudo element?
p, .imagefloatright img { margin: 0 0 .25em; }
.imagefloatright img {
float: right;
}
.imagefloatright::before {
clear: both;
content: '';
display: block;
}
<p class="imagefloatright"><img src="http://via.placeholder.com/80x80"/></p>
<p>Step 1</p>
<p class="imagefloatright"><img src="http://via.placeholder.com/80x80"/></p>
<p>Step 2</p>
<p>Step 3</p>
<p class="imagefloatright"><img src="http://via.placeholder.com/80x80"/></p>
<p>Step 4</p>
<p>Step 5</p>
You have to play around with ::before and ::after pseudo elements. Another solution could be the following:
p, .imagefloatright img { margin: 0 0 .25em; }
.imagefloatright img {
float: right;
}
.imagefloatright + p::after {
clear: both;
content: '';
display: block;
}
<p class="imagefloatright"><img src="http://via.placeholder.com/80x80"/></p>
<p>Step 1</p>
<p class="imagefloatright"><img src="http://via.placeholder.com/80x80"/></p>
<p>Step 2</p>
<p>Step 3</p>
<p class="imagefloatright"><img src="http://via.placeholder.com/80x80"/></p>
<p>Step 4</p>
<p>Step 5</p>
Should all the following steps belongs to the image or shouldn't? It depends ;)
It is very easy to do that. When you use css float property you must use overflow with its parent element. In your situation:
p.imagefloatright{
overflow: auto;
}
must fix the issue. Read more about https://www.w3schools.com/css/css_float.asp
You can use an after pseudoelement in li tag to get the height of the floated elements. Also you have to specify that you only want to float the elements who are inside the li tag using the > selector.
ol {
padding: 0;
}
li {
padding: 10px;
list-style: none;
background: #eee;
margin: 10px 0;
width: auto;
}
li:after {
content: '';
display: table;
clear: both;
}
li > p {
width: 25%;
float: left;
}
p {
margin: 0;
}
<p><img src="http://fpoimg.com/300x300"/></p>
<ol>
<li>
<p>Step 1</p>
<p><img src="http://fpoimg.com/300x300?text=Step1"/></p>
</li>
<li>
<p>Step 2</p>
<p>Step 3</p>
</li>
</ol>
I have been seriously messing with this one thing for over an hour now. Basically I have a navigation bar, there is an icon on the far left, and the links are aligning to the bottom of the image.
I have tried messing with padding, margins, line height, vertical-align and everything else I could think of. I also tried having the image inside and before the ul. I need the ul items (will be links) to be vertically aligned to the center of the icon.
I have put all the code into one file that I will copy here. Also, when you post please explain why a solution will work, not just post code. The other posts I searched for about this before I posted here didn't explain anything, just included code that didn't help when I tried it. Unfortunately, because I have no idea what the solution is or what it relates to I am including all of the code.
body {
margin: 0;
/*background-color: #10f009;*/
font-size: 62.5%;
font-family: sans-serif;
}
img {
margin: 0 0 0 0;
max-width: 100%;
height: 50%;
}
.smallSection {
margin: 100px;
}
.paragraph {
font-size: 2em;
max-width: 500px;
}
.title {
font-size: 2.4em;
}
.list {
list-style: solid inside url("");
font-size: 2em;
}
.nav-link {
list-style-type: none;
display: inline-block;
text-align: center;
font-size: 2em;
width: 200px;
border: 1px solid red;
}
.nav-icon {
display: inline-block;
border: 1px solid red;
}
.largeSection {} #section1 {
background-image: url("../img/placeholder.jpg")
}
#nav {
border: 1px solid red;
margin: 0;
padding: 0;
align: top;
height: 100px;
line-height: 1;
}
/*temporary*/
div {
border: 1px solid red;
}
<!-- Dawn Little -->
<div id="section1" class="largeSection">
<!-- Navigation -->
<div>
<ul id="nav">
<div style="width:70px;height:70px;border: 1px solid red;display: inline-block;">
<!-- The img link is obviously broken so this is here instead. -->
</div>
<!-- <img src="img/herbfalife-icon.png" width="70px" height="70px" class="nav-icon"> -->
<li class="nav-link">Who am I</li>
<li class="nav-link">What I do</li>
<li class="nav-link">3-Day Trial</li>
<li class="nav-link">Challenges</li>
<li class="nav-link">Become a Coach</li>
</ul>
</div>
<div class="smallSection">
<p class="paragraph">
<span class="title">Client Name<br /></span> Hi, I'm a wife, mother, and Personal Wellness Coach with Herbalife Nutrition. My super power - I change lives.
</p>
</div>
</div>
<!-- What I do -->
<div id="section2" class="largeSection">
<div class="smallSection">
<p class="paragraph">
<span class="title">What I do</span>
<ul class="list">
<li>Wellness Evaluations</li>
<li>Nutrition Coaching</li>
<li>Impact Lifestyle</li>
<li>Get Results</li>
<li>Coach Coaches</li>
</ul>
</p>
</div>
</div>
<!-- 3-day trial -->
<div id="section3" class="largeSection">
<div class="smallSection">
<p class="title">
Try Our 3-Day Trial
</p>
<p class="title">
What you get:
</p>
<ul class="list">
<li>Personal Wellness Coach</li>
<li>Wellness Evaluation</li>
<li>Meal Plan</li>
<li>Daily Support</li>
<li>Plan of Action</li>
<li>6 Meals</li>
<li>Metabolism Booster</li>
</ul>
</div>
</div>
<!-- Challenges -->
<div id="section4" class="largeSection">
<div class="smallSection">
<p class="title">
Join a Weight Loss Challenge
</p>
<p class="title">What you get:</p>
<ul class="list">
<li>Personal Wellness Evaluation</li>
<li>Personalized Program</li>
<li>Nutrition Classes</li>
<li>ommunity of Support</li>
<li>Accountability</li>
<li>Opportunity to Win Cash & Prizes</li>
</ul>
</div>
</div>
<!-- Become a coach -->
<div id="section5" class="largeSection">
<div class="smallSection">
<p class="title">
Become a Coach
</p>
<p class="title">
What you get:
</p>
<ul class="list">
<li>Opportunity to Change Lives</li>
<li>Opportunity for Personal & Financial Growth</li>
<li>Training</li>
<li>Potential to Change Lives in Over 90 Countries</li>
<li>Be Part of a Team</li>
<li>Get in the Best Shape You've Ever Been</li>
</ul>
</div>
</div>
This way that you are coding is a bit tricky to align.I will rewrite your code. However, I recommend you to use a CSS framework like bootstrap or zurb.
Firstly, you need to rewrite HTML part like
<!-- Navigation -->
<div class="header clearfix">
<div class="logo">
<!-- The img link is obviously broken so this is here instead. -->
</div>
<div class="nagivation">
<ul id="nav">
<li class="nav-link">Who am I</li>
<li class="nav-link">What I do </li>
<li class="nav-link">3-Day Trial</li>
<li class="nav-link">Challenges</li>
<li class="nav-link">Become a Coach</li>
</ul>
</div>
</div>
I have added header and nagivation
then add these lines to your css to
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
.header{
min-height:70px;
clear:both
}
.logo{
width:20%;
float:left;
}
.nagivation{
width:80%;
float:right;
}
you need to remove #nav also in your CSS code.
based on your needs, you can change this class
.nagivation #nav{
// add needed adjustment
}
you can have an access to all codes here https://jsfiddle.net/mhadaily/7f152z3r/
The easiest way to accomplish what you want is to simply float the icon as seen in the css below and in this pen.
#nav {
border: 1px solid red;
height:100px;
line-height:1;
display:inline-block;
}
.nav-icon {
display: inline-block;
border: 1px solid red;
float:left;
}
Floats force other elements to flow around the floated element. You just want to be wary of floats because they wreak havoc on your layout if you're not vigilant (they collapse their parent containers). You can read all about it here.
I am not a UI expert. But By looking at the following tag I can asked you few question to understand? Because You are writing non-li tags within ul. Try ti wrap your code with li tag.
Just go to w3cshool link.
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_menu
http://www.w3schools.com/html/html_lists.asp
<ul id="nav">
<div style="width:70px;height:70px;border: 1px solid red;display: inline-block;">
<!-- The img link is obviously broken so this is here instead. -->
</div>
<!-- <img src="img/herbfalife-icon.png" width="70px" height="70px" class="nav-icon"> -->
<li class="nav-link">Who am I</li>
<li class="nav-link">What I do </li>
What about simply moving the li elements up a little bit?
.nav-link {
position: relative;
bottom: 20px;
}
First off, the only elements that should be inside a <ul> are <li>. That <div> (or link or whatever it is in reality) may cause you grief.
The real problem, however, is that you're using the wrong CSS property on the wrong element. You want vertical-align (not "align"), and it should be applied to the list-items (not the container).
Try this:
<ul>
<li class="nav-link"><!-- img here --></li>
<li class="nav-link">Who am I</li>
<li class="nav-link">What I do</li>
<li class="nav-link">3-Day Trial</li>
<li class="nav-link">Challenges</li>
<li class="nav-link">Become a Coach</li>
</ul>
with
.nav-link { vertical-align: middle; }
I'm using the rtMedia plugin to display a masonry gallery with images uploaded by users. My question is: how can I add space between the images to distribute them evenly inside the ul? When I add margin, the li elements aren't displayed next to each other anymore (the third one appears in the next row). But when I add padding the div inside the li appears larger than the rest.
I added the following CSS code to resize the li elements automatically.
.rtmedia-container {
display: table;
width: 100%;
}
.rtmedia-container ul {
display: table-row;
}
.rtmedia-container ul li {
display: table-cell;
max-width: 33%;
}
<div class="rtmedia-container">
<div id="rtm-gallery-title-container">...</div>
<ul class="rtmedia-list">
<li class="rtmedia-list-item">
<div class="rtmedia-gallery-item-actions">...</div>
<a class="rtmedia-list-item-a"> ... </a>
</li>
<li class="rtmedia-list-item">
<div class="rtmedia-gallery-item-actions">...</div>
<a class="rtmedia-list-item-a"> ... </a>
</li>
<li class="rtmedia-list-item">
<div class="rtmedia-gallery-item-actions">...</div>
<a class="rtmedia-list-item-a"> ... </a>
</li>
</ul>
</div>
I just noticed that the gallery is overlaping the div (rtm-gallery-title-container) in every browser except for Firefox. Does someone know how to solve this problem?
I also had to add "position: relative" to the div .rtmedia-container, because the gallery hasn't been displayed on the right position in other browsers.
You can use border-collapse:separate + border-spacing
Snippet
.rtmedia-container {
display: table;
width: 100%;
table-layout: fixed; /* optional */
border-collapse: separate;
border-spacing: 5px;
/*demo */
border: 1px dashed red
}
.rtmedia-container ul {
display: table-row;
}
.rtmedia-container ul li {
display: table-cell;
width: 33%;
}
.rtmedia-container ul li img {
max-width: 100%;
height:auto;
display:block
}
<div class="rtmedia-container">
<ul class="rtmedia-list">
<li class="rtmedia-list-item">
<div class="rtmedia-gallery-item-actions">...</div>
<a class="rtmedia-list-item-a">
<img src="//lorempixel.com/700/300" />
</a>
</li>
<li class="rtmedia-list-item">
<div class="rtmedia-gallery-item-actions">...</div>
<a class="rtmedia-list-item-a">
<img src="//lorempixel.com/700/300" />
</a>
</li>
<li class="rtmedia-list-item">
<div class="rtmedia-gallery-item-actions">...</div>
<a class="rtmedia-list-item-a">
<img src="//lorempixel.com/700/300" />
</a>
</li>
</ul>
</div>
Following is code:
<div class="row">
<div class="col-40">
<ul class="">
<li class="payment-type">Visa</li>
<li class="payment-type">Mastercard</li>
</ul>
</div>
<div class="col-60">60</div>
</div>
CSS
.payment-type {
background-color: lightgray;
text-align: center;
margin-top: 5px;
height: 50px;
}
AS you can see it only shows Visa rather both divs. The desired result is to to make a box like li with certain padding.
I use this method here in the below example.
<!-- vim: set nowrap:-->
<html>
<style type="text/css">
#titleImg{ <!--No use in the code but it makes -->
<!--things to work for some odd reason?!-->
position:absolute; <!--If I remove this, FAILURE --not 2x2.-->
<!--It becomes one-after-another after rem.-->
<!--Why?-->
}
li{
width:190px;
height:190px;
display: block;
float: left;
margin: 5px;
}
</style>
<body>
<center>
<ul style="width:400px; height:400px; text-align:center;">
<li>
<img id="titleImg"
src="../Pictures/Logos/logo.png"
style="width:100%;height:100%">
</li>
<li> </li>
<li> </li>
</ul>
</center>
</body>
You don't I think. Here's an updated jsFiddle example of what I believe you are trying to accomplish. Note: never use <center></center> tags - they are not good practice. Instead set the parent to display: block and its margin to 0 auto.
Here is the new live example
And the code:
HTML
<ul>
<li> <img src="http://www.woodlands-junior.kent.sch.uk/customs/images/uk.jpg"></li>
<li> <img src="http://www.crwflags.com/fotw/images/u/us.gif"> </li>
<li> <img src="http://www.enchantedlearning.com/school/Canada/flagbig.GIF"> </li>
</ul>
CSS
ul {
display: block;
margin: 0 auto;
}
li {
width:190px;
height:190px;
display: block;
float: left;
margin: 5px;
overflow: hidden;
}