how to make the lists to display inline........
now it is in vertical alignment can i make it into horizontal alignment....
providing my fiddle link below....
http://jsfiddle.net/JNyQU/1/
<ul class="homePageLists" style="">
<li style="padding-bottom: 5px; list-style: none; ">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
Menu
</li>
<li style="padding-bottom: 5px; list-style: none; ">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
Search
</li>
<li style="padding-bottom: 5px; list-style: none; ">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
Create PN
</li>
<li style="padding-bottom: 5px; list-style: none; ">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
Product List
</li>
<li style="padding-bottom: 5px; list-style: none; ">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
Create PN
</li>
<li style="padding-bottom: 5px; list-style: none; ">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
Create PN
</li>
</ul>
Use float:left;:
ul { clear: left; } // clear logo img
li { float: left; }
E.g. http://jsfiddle.net/JNyQU/4/
I have included a jFiddle for you.
http://jsfiddle.net/persianturtle/JNyQU/6/
The solution was to add a class to the container of the unordered menu list, which I called "inline."
The CSS was:
.inline ul {
float:left;
display:inline;
}
.inline ul li {
float:left;
display:inline;
}
The only HTML I changed was:
<div class="inline">
Hope this helps you! If it does, please don't forget the check mark!
Also, I added some margin to the left so it looks better! You can change that however you like.
Related
Hi, I have a problem with responsive. When it's responsive mode I need 4 icons in single line. Same like web mode. Please help. I added code in image.
<ul class="nav nav-tabs first">
<li class="active" style="padding-right: 15px;">
<a href="#Mala" data-toggle="tab">
<img style="padding-bottom: 15px;" src="laalsa.com/business/wp-content/uploads/2018/07/Malaicon.png" alt="" width="144" height="144">
<br>Mala Connect</a></li>
<li style="padding-right: 15px;">
<a href="#LaalsaApp" data-toggle="tab">
<img style="padding-bottom: 15px;" src="laalsa.com/business/wp-content/uploads/2018/07/laalsaappicon.png" alt="" width="144" height="144">
<br>Laalsa App</a></li>
</ul>
<li style="padding-right: 15px;">
<a href="#Toran" data-toggle="tab">
<img style="padding-bottom: 15px;" src="laalsa.com/business/wp-content/uploads/2018/07/toranicon.png" alt="" width="144" height="144">
<br>Toran</a></li>
</ul>
<li style="padding-right: 15px;">
<a href="#Web" data-toggle="tab">
<img style="padding-bottom: 15px;" src="laalsa.com/business/wp-content/uploads/2018/07/webicon.png" alt="" width="144" height="144">
<br>Web</a></li>
</ul>
You need to add #media css. Try this
#media screen and (max-width: 767px){
.icons-parent-elements-class{
display:inline-block;
width:25%;
float:left;
}
}
To achieve that you have to change the width of each element to the number of elements divided by 100%. for example:
#media (min-width: 750px){
.icons-parent-elements-class {
width: 25%;
display: inline-block;
float: left;
}
}
HTML:-
<div class="container">
<div class="div1">
<img src="pathnameofimage.png">
</div>
<div class="div2">
<img src="pathnameofimage.png">
</div>
<div class="div3">
<img src="pathnameofimage.png">
</div>
for mobile screens use
CSS:-
#media(max-width: 767px){
.container{
display:flex;
justify-content:center;
flex-direction:column;
}
}
#media(max-width: 767px){
.nav-tabs.first li {
width: 25%;
margin: 0;
float: left;
padding-right: 8px !important;
}
.nav-tabs.first li a img {
width: 100%;
max-width: 80px !important;
height: auto!important;
margin: 0 auto;
display: inline-block;
}
}
please try it. if don't work then please share your code. and also remove the height and width form the image tag. these are creating problem in the responsive view.
Basically I want to have a small row with 4 social icons in middle of screen. I wanted to have it middle of screen wheather I am opening my page in mobile, laptop or tab.
I have applied width:50% but issue is ul li's images are in left side. What I can do is to use media queries for all screen resolution but that will be not good as then for every screen/resolution point I have to make queries which is not good practise.
I think I am missing something easier about this point but I am not getting that.
You can see my code here
In short : I want to have my all 4 icons in middle of row in every screen(big, small) with fix gap between them.
HTML
<ul class="footerUl">
<li>
<img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32">
</li>
<li>
<img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32">
</li>
<li>
<img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32">
</li>
<li>
<img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32">
</li>
<div class="clearfix"></div>
</ul>
CSS
.clearfix{clear:both;}
ul li{list-style-type:none;float:left;padding-left:7%;}
ul li:first-child{padding-left:0px !important;}
ul li:last-child{padding-left:0px !important;}
ul{padding-left:0px;width:50%;margin-left:auto;margin-right:auto;}
You can simply use flex for doing that.
Review the answer below :
.clearfix{
clear: both;
}
ul li{
list-style-type: none;
float: left;
padding-left: 20px;
}
ul li:first-child{
padding-left: 0px !important;
}
ul li:last-child{
padding-left: 0px !important;
}
ul{
padding-left: 0px;
width: 50%;
margin-left: auto;
margin-right: auto;
}
.footerUl {
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
}
<ul class="footerUl">
<li>
<img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32">
</li>
<li>
<img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32">
</li>
<li>
<img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32">
</li>
<li>
<img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32">
</li>
<div class="clearfix"></div>
</ul>
I'm not sure if you like this way. But instant I have this idea.
ul.footerUl{
text-align:center;
}
ul li{list-style-type:none;display:inline-block;}
ul li img{ margin:5px 20px;}
<ul class="footerUl">
<li>
<img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32">
</li>
<li>
<img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32">
</li>
<li>
<img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32">
</li>
<li>
<img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32">
</li>
</ul>
The text representing each image is currently located to the right of the image. I want the text to be centered underneath its corresponding image, how do I achieve this?
Please note that I applied display: inline-bock on the list items, so they are in a row.
#footer1 {
float: left;
width: 100%;
border: 10px solid #e3e3e3;
}
#footer1>ul>li {
padding: 0 8px;
display: inline-block;
}
#footer1 a:hover img {
border: 1px solid #5cadff;
text-decoration: none;
box-shadow: 5px 5px 2px 2px #5cadff;
}
#footer1 img {
border: 1px solid transparent;
margin-left: 110px;
}
<div id="footer1">
<h2> SOURCES </h2>
<ul>
<li>
<a href="https://www.wikipedea.com" title="wikipedia">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
w
</li>
<li>
<a href="https://www.google.com" title="google">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
Google
</li>
<li>
<a href="https://www.youtube.com" title="youtube">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
Youtube
</li>
<li>
<a href="https://www.nlm.nih.gov/" title="Nih.gov">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
Nih
</li>
<li>
<a href="https://www.medindia.net" title="MedIndia.net">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
MedIndia
</li>
</ul>
</div>
I was able to do this without any changes to your existing HTML by doing this:
li{
display:inline-block;
text-align:center;
width:70px;
}
li img{
margin:0 10px;
}
The text-align centers all text and child elements inside the li. The width needs to be large enough that no caption will be too large to fit in that width. (If a caption won't fit in the allotted width, then the centering is wrecked.)
I added the left and right margin to the image for a little bit of future-proofing in case you later want to include a very short caption in your list. With that margin, even a very short caption will be forced to the next line (instead of next to the image) since 50 px image width + 10 margin on each side leaves no room for text.
Edited for float, keeps these inline and overflows if doesn't fit on page.
<style>
.container {
clear: both;
}
ul li {
width: 50px;
float: left;
text-align: center
}
ul li a {
text-decoration: none;
}
</style>
<div class="container">
<ul>
<li>
<a title="wikipedia" href="https://www.wikipedea.com">
<img src="wikipedia.png" height="50" width="50">wikipedia
</a>
</li>
<li>
<a title="wikipedia" href="https://www.wikipedea.com">
<img src="wikipedia.png" height="50" width="50">wikipedia
</a>
</li>
<li>
<a title="wikipedia" href="https://www.wikipedea.com">
<img src="wikipedia.png" height="50" width="50">wikipedia
</a>
</li>
</ul>
</div>
Please try this
HTML:
<div id="footer1">
<h2> SOURCES </h2>
<div class="item">
<a title="wikipedia" href="https://www.wikipedea.com">
<img src=""/>
</a>
<span class="caption">Text below the image</span>
</div>
<div class="item">
<a title="wikipedia" href="https://www.wikipedea.com">
<img src=""/>
</a>
<span class="caption">Text below the image</span>
</div>
<div class="item">
<a title="wikipedia" href="https://www.wikipedea.com">
<img src=""/>
</a>
<span class="caption">Text below the image</span>
</div>
</div>
CSS:
div.item {
vertical-align: top;
display: inline-block;
text-align: center;
width: 120px;
}
img {
width: 100px;
height: 100px;
background-color: grey;
}
.caption {
display: block;
}
DEMO
I stacked on the following problem. I have got an unordered list with the social icons and kind of a little dot appears on the right down corner of the icons when I change the display to inline.
HTML
<div class="iconos">
<ul class="contacto">
<li>
<a href="mailto:xxxxxx.com" class="socialicon">
<img src="images/mail.png" width="50" height="50">
</a>
</li>
<li>
<a href="https://www.facebook.com/pages/xxxxx" class="socialicon">
<img src="images/facebook.png" width="50" height="50">
</a>
</li>
<li>
<a href="https://www.facebook.com/pages/xxxx" class="socialicon">
<img src="images/twitter.png" width="50" height="50">
</a>
</li>
</ul>
CSS
ul.contacto {
list-style: none;
padding: 0;
margin: 0;
}
.contacto li {
padding: 20px;
display: inline;
}
That dot is an underline from <a> element. You can hide with this:
.contacto li a {
text-decoration: none;
}
when I resize the browser window the particular div goes out of the main container
how to fix the issue
http://jsfiddle.net/48y2Q/1
http://jsfiddle.net/48y2Q/1/embedded/result/
<section id="main" style="background-color: #646464; padding: 0px;">
<div class="inner clearfix" style="background-color: white;">
<span style="color: #06546a; font-weight: bold; font-size: 14px; background-color: white;">Defie Cloud Buisness Solutions</span>helps companies of all sizes to enhance business operation, to refine the process and optimize technology, to reduce company expenses on IT maintenance, Hardware upgrade. And more importantly, to change the way buisness operate.
<div id="primary">
<section class="primary">
<ul style="width: 800px;">
<li style="padding-bottom: 5px; list-style: none; font-size: 14px;">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
All-in-One Business Management Solutions
</li>
<li style="padding-bottom: 5px; list-style: none; font-size: 14px;">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
Cloud-based File Management
</li>
<li style="padding-bottom: 5px; list-style: none; font-size: 14px;">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
Real-Time Access from any where, any time and on any devices
</li>
</ul>
</section>
</div>
</div>
</section>
</div>
</div>
The issue is coming from 2 separate places:
//Reduce width from 100% (line 815, bootstrap) because you need left margin so this can't be 100%.
.row-fluid {
width: 90%;
}
also reduce margin-left from 100px
<div class="row-fluid marketing" style="margin-top: 27px; margin-bottom: 0px; margin-left: 100px;">
to
<div class="row-fluid marketing" style="margin-top: 27px; margin-bottom: 0px; margin-left: 20px;">