I want to make li fill available width every line to make both side align.
sample
Here are my html and in-line CSS style.
Is there any CSS way to achieve this effect?
HTML:
<div class="row tag-cloud-wrap">
<div class="col-md-12 content-heading">
<a href="#">
<h3>
Find more Content by Keywords
</h3>
</a>
<div class="article-list" style="border: none">
<ul class="list-inline">
#foreach($videoData->keywords as $videokeyword)
<li style="background-color: #999;margin-right: -5px;margin-bottom:0;border-left: 1px solid white; border-bottom: 1px solid white; padding: 5px;">
<a style="padding: 5px;" href="#">
<strong>{{$videokeyword}}</strong>
</a>
</li>
#endforeach
</ul>
</div>
</div>
</div>
On div class article-list set width to whatever width you need the block to be.
Then on each li element add:
display: inline-flex;
You may have to play with it a little more to get exactly what you want, but this should get you started.
See: http://www.w3schools.com/css/css3_flexbox.asp for more information about Flex Boxes.
Related
I am working on a project and i can't seem to find a way that works to center and make my footer responsive.
This is my html code.
#footer {
position: absolute;
left:0;
bottom: 0;
width: 100%;
height: 2.5rem;
background-color: black;
border-top: 4px solid #F2D380 !important;
}
.socialIcon {//update
width: 20px;
}
<div id="footer">
<div class="col-lg-2 link_list">
Company Information
</div>
<div class="col-lg-2 link_list">
<a href="#" > Privacy Policy and User Agreement </a>
</div>
<div class="col-lg-2 link_list">
About
</div>
<div class="col-lg-2 link_list">
<a href="#" >
©2019 Copyright claim
</a>
</div>
```
<div class="col-sm-6 col-lg-3">//update
<a href="#">
<img src="images/linkedin.png" class=" socialIcon">
</a>
<a href="#" >
<img src="images/instagram.png" class=" socialIcon">
</a>
<a href="#">
<img src="images/facebook.png" class=" socialIcon">
</a>
<a href="#" >
<img src="images/youtube.png" class="socialIcon">
</a>
</div>
</div>
```
I tried some bootstrap classes like justify-content-center but it simply does not work. I know i need to be looking at flexbox but it won't work and i don't know what the problem is.
Thank you in advance for answering.
*Update after i did what i saw in the comments it doesn't work with the socialmedia icons.
I've edited your codes. I explained what I changed in the comment lines. I removed the display table. You don't need this with this codes.
Html :
<div id="footer">
<div class="row text-center"> // I added row here, and I've got all the columns in a row, because all columns must be in a row. I added a "text center" class to keep all the text in the middle.
<div class="col-sm-6 pb-sm-2 col-lg-3"> // that's how I arranged your columns . So they will adjust their width for each width value
Company Information
</div>
<div class="col-sm-6 col-lg-3">
Privacy Policy and User Agreement
</div>
<div class="col-sm-6 pb-sm-2 col-lg-3"> // "pb-sm-2" class to add padding bottom when dimensions are sm
About
</div>
<div class="col-sm-6 col-lg-3">
<a href="#">
©2019 Copyright claim
</a>
</div>
</div>
</div>
Css:
#footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
/* height: 2.5rem; */ you can use padding this way instead of specifying height. if you give a single height value, you will need to set height separately for all dimensions.
padding: 20px;
background-color: black;
border-top: 4px solid #F2D380 !important;
}
I hope I could help. Good Luck!
See the code below. You can forget about wrapping each anchor within a "div". It will be a lot easier to simply group them into the parent DIV and then target them. This should work and you can have more flexibility. Also, don't have to worry about flexbox or any external libraries.
<style>
body{
height:2000px; /* for demonstration purposes*/
}
/* position the footer div RELATIVE and give it a "top" property of 100% so it always sits at the bottom regardless of your window height*/
#footer {
position: relative;
top:100%;
width: 100%;
height: 2.5rem;
background-color: black;
border-top: 4px solid #F2D380 !important;
}
/* center all items INSIDE the link_list DIV*/
.link_list{
text-align:center;
}
/* target all the ANCHOR tags as inline elements*/
.link_list a {
margin:50% 20px;
color:white;
text-decoration:none;
text-align: center;
flex: 0 0 16.666667%;
}
</style>
<body>
<div id="footer">
<div class="col-lg-2 link_list">
Company Information
<a href="#" > Privacy Policy and User Agreement </a>
About
<a href="#" >©2019 Copyright claim</a>
</div>
</div>
</body>
Add display:flex; to #footer and it gets a bit of responsiveness.
quick fiddle => https://jsfiddle.net/0b9hoag1/
My footer when full screen adds space to the right and when i use for example mobile view a chunk of my footer disappears. I just want it to stay at the bottom and not cover any content. Even when it shrinks to mobile view.
[![De red line is the extra space im talking about][1]][1]
#footer {
position: absolute;
left: 0;
bottom: 0 !important;
width: 100%;
height: 2.5rem;
padding-right: 0;
background-color: black;
border-top: 4px solid #F2D380;
overflow: auto;
}
#footer a {
color: white;
text-decoration: none;
}
<div id="footer">
<div class="row text-center justify-content-center">
<div class="col-lg-2 ">
Company Information
</div>
<div class="col-lg-2">
Privacy Policy and User Agreement
</div>
<div class="col-lg-2">
About
</div>
<div class="col-lg-2">
©2019 Copyright claim
</div>
<div class="col-lg-2">
<a href="#">
<img src="images/linkedin.png" class=" socialIcon">
</a>
<a href="#">
<img src="images/instagram.png" class=" socialIcon">
</a>
<a href="#">
<img src="images/facebook.png" class=" socialIcon">
</a>
<a href="#">
<img src="images/youtube.png" class="socialIcon">
</a>
</div>
</div>
</div>
So the issue of why the space is added and it covers content is because of the absolute positioning. If you do not want it to cover content you have a couple options. Set the content wrapper to a set height and the footer to the rest of that height so the footer stays visible at the bottom and wont cover content.
If you just want it to act as a footer and be at the bottom on mobile I would just set it to be position relative.
It is hard to envision what you are going for without other content on the page.
By specifying height: 2.5rem, you have given the footer a fixed height and it won't scale according to the content you have provided in it. Try height: auto, or height: max-content, because it seems your content is larger than the footer itself.
Also put margin: 0 to ensure no space is added around it
<div class="row text-center mt8" >
<span style="border-bottom: 1px solid #e7e7e7;">
<span>Familiarized with the production process</span>
<span></span>
</span>
<div class="small8">
<span>(signature)</span>
</div>
</div>
Hi, I want to make this work. There must be text "Familiarz...." then there should be space, then border and it should be as long as the text is and after that signature. I tried adding spans and brs after text but it's not working.
as a trick you can add a fixer div. after the 'Familiarized...' span add a div class fixer with a little text:
<div class="fixer">fix</div>
and give to him style:
.fixer {
display: inline-block;
visibility: hidden;
padding-bottom: 10px;
}
now you can add a padding-bottom:10px to a span and it will work fine.
the whole code is:
<div class="row text-center mt8">
<span style="border-bottom: 1px solid #e7e7e7; padding-bottom: 10px;">Familiarized with the production process</span>
<div class="fixer" style="display: inline-block;visibility:hidden;padding-bottom: 10px;">fix</div>
<div class="small8">
<span>(signature)</span>
</div>
</div>
The following code blends both DIVs together instead of displaying them vertically, one after another. Both are set to display: block and I'd like to know which style attribute makes them behave like this?! See demo on jsfiddle.
<div data-role="page">
<div data-role="content">
<div>
Do something
<span href="#" style="float: right; border-radius: 10px; background-color: white; padding: .6em">Something</span>
</div>
<div>
<ul data-role="listview">
<li>Foo list entry</li>
</ul>
</div>
</div>
</div>
After using the floating elements you have to close them with element containing clear:both style, so the part of the code will be:
<div>
Do something
<span href="#" style="float: right; border-radius: 10px; background-color: white; padding: .6em">Something</span>
<div style="clear:both"></div>
</div>
Here is the working JSFiddle (with a little bit of margin modification as well): http://jsfiddle.net/Cw86p/9/
I am build a page,however I meet some layout related probelms,I can not make the div ajust its size(acutally the height) automatically. See the following markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<title>Link one</title>
<style type="text/css">
div#middle{
margin-top: 5px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div style="background-color: gray;border: solid 1px red" id="top">
<h1>Top<h1>
</div>
<div style="border: solid 1px blue;min-height: 200px" id="middle">
<div id="leftmenu" style="float: left;background-color:gray;width: 190px">
<ul>
<li><a href=''>Link One</a></li>
<li><a href=''>Link Two</a></li>
<ul>
</div>
<div id="content" style="background-color: black;margin-left: 200px">
I am in Link One
</div>
</div>
<div style="background-color: gray" id="foot">
<hr/>
<p>Copyright xxx</p>
</div>
</body>
</html>
Note the div whose id is "middle",I have to set its height manually,if not the div below it (div with id "foot")will not displayed below it. The foot div will go to the same line with "middle" div,just remove the "min-height: 200px" of "middle" div for a test.
And since the content is not sure,so I can not set its size manually,I just want to the height of the middle div to be the larger height of "leftmenu" or "content".
Any ideas?
-----------------------------------------
It does not expand ,
You are not clearing your floats. Add this line <div style="clear:both;"></div> below the the div with id=content
<div style="border: solid 1px blue;min-height: 200px" id="middle">
<div id="leftmenu" style="float: left;background-color:gray;width: 190px">
<ul>
<li><a href=''>Link One</a></li>
<li><a href=''>Link Two</a></li>
<ul>
</div>
<div id="content" style="background-color: black;margin-left: 200px">
I am in Link One
</div>
<div style="clear:both;"></div>
</div>
It does this because of the flow of the page. The flow is the order of the elements on your page. So in your example, your li elements are placed one after the other so the first one will appear before the second one on your page. The same applies to all elements, <a>, <div>, <p>, <img> and also text. When an element is floated it is taken out of the flow and elements that follow it are pushed up next to it; this way you can have text flowing around an image or links lined up next to each other.
Unfortunately when you float all elements within another element (as you have done with #leftmenu and #content) the parent element (#middle) acts as if it contains nothing because it has no child elements in the flow and acting as if it was essentially empty. By adding a clearing <div> we are creating a child element in the flow right below everything else and the parent element can then calculate the correct height.
I hope I explained that well enough.
The float:left is causing the issue. You need to insert a clearing element within middle.
eg
<div style="border: solid 1px blue;min-height: 200px" id="middle">
<div id="leftmenu" style="float: left;background-color:gray;width: 190px">
<ul>
<li><a href=''>Link One</a></li>
<li><a href=''>Link Two</a></li>
<ul>
</div>
<div id="content" style="background-color: black;margin-left: 200px">
I am in Link One
</div>
<div style="clear:both"></div>
</div>
JS Fiddle demo
Use a background-image to fake equal column height.
Check this article:
http://www.alistapart.com/articles/fauxcolumns/
For clearing use this class:
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
like this
<div style="border: solid 1px blue;min-height: 200px" id="middle" class="clearfix">