i have a simple inline list as below :
<ul class="list-inline">
<li>
<p>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
</p>
</li>
<li>
<h6>May - june</h6>
</li>
</ul>
css
.list-inline {
margin-left: 0;
font-size: 0;
padding-left: 0;
list-style: none;
text-align: center;
}
.list-inline>li {
padding-left: 0;
padding-right: 0.3rem;
font-size: 13px;
display: inline-block;
}
however the output is has below image : any solution for this , am using foundation6 framework ,
It's hard to understand your problem, since the image doesn't seem to correspond with your html, but there is one thing in your code that cannot work as you describe it:
You put a <h6> tag inside a <li> tag. Header tags like <h6> are by default block elements, so if you put this into an inline-set <li> tag, it will mess up the inline alignment.
Also the <p> tag in the first <li> is a block element - same thing...
Related
I'm trying to achieve a solution where a horizontal line appears to the left of the text but the text remains centre aligned. Please see image below.
I've also added my mark-up below. I'm currently using Bootstrap 4.
<div class="text-center nav-items">
<ul>
<div class="pb-5">
<li>
<h2 class="sidebar-first-item">About</h2>
</li>
<p>Behind the brand // Meet the team</p>
</div>
<div class="pb-5">
<li>
<h2>Our Work</h2>
</li>
<p>Take a look at our marvelous creations</p>
</div>
<div class="pb-5">
<li>
<h2>Services</h2>
</li>
<p>Learn more about what we can do for you</p>
</div>
<div class="pb-5">
<li>
<h2 class="sidebar-last-item">Contact</h2>
</li>
<p>Get in touch today. Let's make some magic</p>
</div>
</ul>
</div>
Use pseudo-elements to do so:
.sidebar-first-item {
position: relative;
}
.sidebar-first-item:before {
content: '';
position: absolute;
width: 45%;
height: 5px;
background-color: red;
top: 50%;
left: 0%;
}
CodePen: https://codepen.io/manaskhandelwal1/pen/xxEaQYg
First cleanup your html, a <ul> list may not have children other than <li>, <script> or <template> elements (see The Unordered List element). Hence remove the div's inside the <ul> and add their classes to the <li>.
A solution to your design problem is to add a element before and after your anchor elements, size them (width) with a percentage you like and set a min-width for the anchor, so you have a nice responsive layout also on small devices. This creates an equal width red line
If you want the red line to align with the width of the text, you can make your anchor non-breaking white space and a set a padding, so the red line comes as close as defined in the padding towards the text.
.redline,
.spacer {
width: 100%;
height: 3px;
display: inline;
background-color: red;
}
.spacer {
height: 0px;
}
li {
display: flex;
align-items: center;
}
li a {
margin: 0 auto;
border: 0px solid gold;
padding: 0 20px;
white-space: nowrap;
}
li p {
width: 100%; margin:-50px 0 50px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="text-center nav-items">
<ul>
<li class="pb-5">
<span class="redline"></span>
<a href="#">
<h2 class="sidebar-first-item">About</h2>
</a>
<span class="spacer"></span>
</li>
<li>
<p>Take a look at our marvelous creations</p>
</li>
<li class="pb-5">
<span class="redline"></span>
<a href="#">
<h2>Our Work</h2>
</a>
<span class="spacer"></span>
</li>
<li>
<p>Behind the brand // Meet the team</p>
<li>
</ul>
</div>
This is where a CSS pseudo element can come into play! A pseudo element can be used to place designs before or after an element.
I added a class called horizontal-line to your h2.
<div class="text-center nav-items">
<ul>
<div class="pb-5">
<li>
<h2 class="horizontal-line sidebar-first-item">About</h2>
</li>
<p>Behind the brand // Meet the team</p>
</div>
<div class="pb-5">
<li>
<h2>Our Work</h2>
</li>
<p>Take a look at our marvelous creations</p>
</div>
<div class="pb-5">
<li>
<h2>Services</h2>
</li>
<p>Learn more about what we can do for you</p>
</div>
<div class="pb-5">
<li>
<h2 class="sidebar-last-item">Contact</h2>
</li>
<p>Get in touch today. Let's make some magic</p>
</div>
</ul>
The CSS will look like this.
.horizontal-line {
position: relative;
}
.horizontal-line::before {
content: "";
display: block;
width: 60px;
height: 2px;
position: absolute;
top: 50%;
left: 35%;
border-radius: 30px;
background-color: #DE657D;
}
By adding the pseudo element it will know to place it before any content with that class name. In this case, we are leaving content blank and placing in
https://jsfiddle.net/rc463gb8/1/
This is what our dropdown looks like now:
We want it to be like this:
Here is our current code:
<li>
<a target="blank" class="pull-left dropdown-menu__split-li-left" href=""><i class="fa fa-link margin-right-5 text-muted"></i>
Public Invoice View</a>
<a class="pull-right dropdown-menu__split-li-right" data-clipboard-text="" href="#" title="Click me to copy to your clipboard"></a>
<div class="clearfix"></div>
</li>
We're using Bootstrap 3 and here is some custom CSS:
.dropdown-menu__split-li-left {
margin-right: 0;
display: inline-block;
clear: inherit;
}
.pull-left {
float: left;
}
How do we make Public Invoice View and it's associated icon on the right?
Here is my solution JSFiddle
<li class="dropdown-item item">
<a target="blank" class="" href="#">
<i class=" fa fa-link icon"></i>
Public Invoice View</a>
<a class=" fa fa-clipboard clip" data-clipboard-text="" href="#" title="Click me to copy to your clipboard"></a>
</li>
.clip {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 30px;
text-align: center;
}
I made the clipboard icon position:absolute and gave the entire li item some padding-right to accommodate the clipboard icon.
This will ensure that the icon always remains to the right even if the text is long.
Also the dropdown will take the width equal to maximum width of the text.
I have a site I am making with Bootstrap 3.3.5. I would like to center the div with the icons and I also want the icons centered, like what text-align: center; would do if it was just text and not the Fonat Awesome icons. This is what I have tried so far, the css is in my css folder and in the custom.css page.
#media (min-width: 992px) {
.col-md-1-5 { width: 20%; }
.col-md-2-5 { width: 40%; }
.col-md-3-5 { width: 60%; }
.col-md-4-5 { width: 80%; }
.col-md-5-5 { width: 100%; }
}
#media (min-width: 1200px) {
.col-lg-1-5 { width: 20%; }
.col-lg-2-5 { width: 40%; }
.col-lg-3-5 { width: 60%; }
.col-lg-4-5 { width: 80%; }
.col-lg-5-5 { width: 100%; }
}
.show-grid [class^=col-] span,
.container-fluid .show-grid [class^=col-] {
display: block;
padding-top: 1rem;
padding-bottom: 1rem;
text-align: center;
}
[class^=col-] {
margin-bottom: 2rem;
}
<div class="row show-grid">
<div class="col-sm-6 col-md-4-5 col-lg-1-5 text-center"><span class=""><a href="https://play.google.com/store/apps/details?id=com.nationalkitchencabinets.kitchensolutions" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-google fa-stack-1x fa-inverse"></i>
</span>
</a></span>
</div>
<div class="col-sm-6 col-md-5-5 col-lg-1-5 text-center"><span class=""><a href="https://appsto.re/us/IxCMbb.i" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-android fa-stack-1x fa-inverse"></i>
</span>
</a></span>
</div>
<div class="col-sm-6 col-md-3-5 col-lg-1-5 text-center"><span class=""><a href="mailto:info#nationalkitchencabinets.com">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-envelope fa-stack-1x fa-inverse"></i>
</span>
</a></span>
</div>
<div class="col-sm-6 col-md-3-5 col-lg-1-5 text-center"><span class=""><a href="https://www.facebook.com/NationalKitchenCabinets/" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a></span>
</div>
<div class="col-sm-6 col-md-3-5 col-lg-1-5 text-center"><span class=""><a href="tel:1-413-374-2939">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-phone fa-stack-1x fa-inverse"></i>
</span>
</a></span>
</div>
</div>
This is what it looks like now, the icons are left aligned,
The elements that you are trying to align are block elements, so you simply need to use margin: 0 auto rather than text-align: center.
.show-grid [class^=col-] span,
.container-fluid .show-grid [class^=col-] {
text-align: center;
}
Should be:
.show-grid [class^=col-] span,
.container-fluid .show-grid [class^=col-] {
margin: 0 auto;
}
I've created a Bootply showcasing this here.
UPDATE:
A temporary hack to have the icons display next to each other on mobile would be something like the following:
#media (max-width: 500px) {
.col-sm-6 {
width: 20% !important;
float: left;
}
}
However, this is a workaround, and you should really simply set a smaller column width. Bootstrap columns always add up to 12, and col-sm-6 refers to '6 columns on small devices'. Typically, you'd use something like col-sm-2 col-md-12 col-lg-12 to represent that each element should take up the full width on medium and large devices, and only take up one-sixth of the width on small devices. Of course, 12 isn't divisible by 5, so you'd have to come up with your own workaround, such as centralisation or padding ;)
A secondary fiddle showcasing the hack is available here.
Hope this helps!
Im making a little project and I just cant seem to get my css right... I need my header div(I used a regular div instead of an actual header because I wanted everything in the body). I want the blue header span my entire screen, but I just dont know how. I tried somethings with margin and padding but thats it.
Also I tried getting those buttons to the bottom of the Div, but just cant seem to get it right...
SCREENSHOT: http://prntscr.com/9slfw2
Description: See my website here
CSS:
body {
margin: 0px;
padding: 0px;
}
ul {
list-style-type: none;
}
.page-header{
background-color: #0094ff;
margin-top: 0px;
display: block
}
.panel, .list-group-item, .btn {
border-color: #0094ff;
}
#btnRegister {
margin-right: 10px;
vertical-align: bottom;
}
.input-group-addon {
min-width: 40px;
}
legend.scheduler-border {
width:inherit;
padding:0 10px;
border-bottom:none;
}
HTML:
<!-- Carousel -->
<div id="homeCarousel" class="carousel slide">
<!-- Menu -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Items -->
<div class="carousel-inner">
<!-- Item 1 -->
<div class="item active">
<img class="c_img" src="~/Images/chevy.jpg" />
<div class="container">
<div class="carousel-caption">
<h1>Contact</h1>
<p style="background-color:#428bca;">Om gemakkelijk met Rent-a-Car contact op te nemen kunt u ook bellen!</p>
<p style="background-color:#428bca;">Tel: 0534891034, Adres: Vuurnatieweg 69420</p>
<p>
<a class="btn btn-lg btn-primary" href="~/Home/Contact" >Klik hier voor meer contact informatie!</a>
</p>
</div>
</div>
</div>
<!-- Item 2 -->
<div class="item">
<img class="c_img" src="~/Images/42-RT-76.jpg" />
<div class="container">
<div class="carousel-caption">
<h1>Changes to the Grid</h1>
<p style="background-color:#428bca;">Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
<p style="background-color:#428bca;"><a class="btn btn-large btn-primary" href="#">Learn more</a></p>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
<div id="carouselButtons">
<button id="playButton" type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-play"></span>
</button>
<button id="pauseButton" type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-pause"></span>
</button>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#homeCarousel').carousel({
interval:5000,
pause: "false"
});
$('#playButton').click(function () {
$('#homeCarousel').carousel('cycle');
});
$('#pauseButton').click(function () {
$('#homeCarousel').carousel('pause');
});
});
</script>
EDIT: HTML code and .. I am using Bootstrap, just so you know
The issue is that you're using Bootstrap, as indicated by the classes in your HTML and your clarifying edit. Bootstrap adds its own styling (obviously).
In particular, the .container class has padding, margins, and a fixed width that will prevent your layout from spanning the full screen. If you're doing things correctly, your .row <div> tag is in a container.
You have two options to fix this:
Use .container-fluid instead of .container**
This is the preferred option.
Override the default .container CSS rules
To override it, add rules for .container, like so:
.container {
padding-left: 0px;
padding-right: 0px;
margin-right: 0px;
margin-left: 0px;
width: 100%;
}
Here's a sample with Bootstrap's default CSS and one with the .container tweaks above.
Note: if you only want to override the one .container, just give it its own class or id and use an appropriate selector instead of .container in your CSS.
If you're using bootstrap, you can use .container-fluid instead of .container to get a full-width container.
Also, you seem to have mixed head (not in body) with header (in body).
More on the header tag: https://developer.mozilla.org/en/docs/Web/HTML/Element/header
Your code does span
Have a look here Demo
I would like to add badge with some number (5, 10, 100) on top of the Font Awesome symbol (fa-envelope). For example:
But, I can not understand how to put the badge on top of the symbol. My attempt is available here: jsFiddle.
I would like to have it support Twitter Bootstrap 2.3.2.
This can be done with no additional mark-up, just a new class (which you would use anyway) and a pseudo element.
JSFiddle Demo
HTML
<i class="fa fa-envelope fa-5x fa-border icon-grey badge"></i>
CSS
*.icon-blue {color: #0088cc}
*.icon-grey {color: grey}
i {
width:100px;
text-align:center;
vertical-align:middle;
position: relative;
}
.badge:after{
content:"100";
position: absolute;
background: rgba(0,0,255,1);
height:2rem;
top:1rem;
right:1.5rem;
width:2rem;
text-align: center;
line-height: 2rem;;
font-size: 1rem;
border-radius: 50%;
color:white;
border:1px solid blue;
}
While #Paulie_D's answer is good, it doesn't work so well when you have a variable width container.
This solution works a lot better for that: http://codepen.io/johnstuif/pen/pvLgYp
HTML:
<span class="fa-stack fa-5x has-badge" data-count="8,888,888">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-bell fa-stack-1x fa-inverse"></i>
</span>
CSS:
.fa-stack[data-count]:after{
position:absolute;
right:0%;
top:1%;
content: attr(data-count);
font-size:30%;
padding:.6em;
border-radius:999px;
line-height:.75em;
color: white;
background:rgba(255,0,0,.85);
text-align:center;
min-width:2em;
font-weight:bold;
}
Wrap the fa-envelope and the span containing the number in a div and make the wrapper div position:relative and the span position:absolute.
Check this fiddle
HTML used
<div class="icon-wrapper">
<i class="fa fa-envelope fa-5x fa-border icon-grey"></i>
<span class="badge">100</span>
</div>
CSS
.icon-wrapper{
position:relative;
float:left;
}
*.icon-blue {color: #0088cc}
*.icon-grey {color: grey}
i {
width:100px;
text-align:center;
vertical-align:middle;
}
.badge{
background: rgba(0,0,0,0.5);
width: auto;
height: auto;
margin: 0;
border-radius: 50%;
position:absolute;
top:-13px;
right:-8px;
padding:5px;
}
Hope this might help you
This seems to work, and it has a very minimal code to be added.
.badge{
position: relative;
margin-left: 60%;
margin-top: -60%;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<span class="fa-stack fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-bell fa-stack-1x fa-inverse"></i>
<span class="badge">17</span>
</span>
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-bell fa-stack-1x fa-inverse"></i>
<span class="badge">17</span>
</span>
<span class="fa-stack fa-1x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-bell fa-stack-1x fa-inverse"></i>
<span class="badge">17</span>
</span>
http://jsfiddle.net/zxVhL/16/
By placing the badge inside the icon element I was able to position it relative to the bounds of the icon container. I did all the sizing using ems so that the size of the badge is relative to the size of the icon and this can be changed by simply changing the font-size in .badge
If you're using the SVG + JS version of Font Awesome:
https://fontawesome.com/how-to-use/on-the-web/styling/layering
Layers are the new way to place icons and text visually on top of each other.
<span class="fa-layers fa-fw">
<i class="fas fa-envelope"></i>
<span class="fa-layers-counter" style="background:Tomato">1,419</span>
</span>
From Font Awesome documentation:
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-envelope"></i>
<span class="fa-layers-counter" style="background:Tomato">1,419</span>
</span>