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.
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/
I have this JSFiddle: https://jsfiddle.net/96urhqcz/
There are 4 divs in a row - the HTML looks like this:
<div class="g-1-4 app">
<a style="text-decoration:none;" href="https://link1/">
<div style="margin:10px; padding: 30px 0px; background:#E74C3C" class="app">
<i class="fa fa-3x fa-comments-o" width="50%" style="display:block; margin:auto" src="/static/launcher/comments-o"></i>
Link Number 1
</div>
</a>
</div>
<div class="g-1-4 app">
<a style="text-decoration:none;" href="https://link2/">
<div style="margin:10px; padding: 30px 0px; background:#9D55B8" class="app">
<i class="fa fa-3x fa-paper-plane" width="50%" style="display:block; margin:auto" src="/static/launcher/paper-plane"></i>
Link Number 2
</div>
</a>
</div>
<div class="g-1-4 app">
<a style="text-decoration:none;" href="https://link3/">
<div style="margin:10px; padding: 30px 0px; background:#3395DD" class="app">
<i class="fa fa-3x fa-street-view" width="50%" style="display:block; margin:auto" src="/static/launcher/street-view"></i>
Link 3
</div>
</a>
</div>
<div class="g-1-4 app">
<a style="text-decoration:none;" href="https://link4/">
<div style="margin:10px; padding: 30px 0px; background:#00838F" class="app">
<i class="fa fa-3x fa-line-chart" width="50%" style="display:block; margin:auto" src="/static/launcher/line-chart"></i>
Link 4
</div>
</a>
</div>
The CSS for g-1-4 looks like this:
.g-1-4{
width: 25%;
}
As you can see in the JSFiddle - the margins between the boxes are 'linked' to the appropriate box.
Ultimately I'm trying to have a 4-across layout, but have the margins not linked. When a user mouses between the boxes I want it to be a regular mouse with no clickability.
I'm sure it's something really simple I'm missing - but I can't seem to correct it.
Any thoughts or ideas?
You can set a fixed width to your divs, and using flexbox they will be automaticaly displayed with space which is not 'linked'.
Hope this little code will help you.
.flex {
display : flex;
justify-content : space-around;
}
.div1, .div3 {
width : 120px;
height : 120px;
background-color : red;
}
.div2, .div4 {
width : 120px;
height : 120px;
background-color : blue;
}
p {
margin : 0;
color : white;
line-height: 120px;
font-size : 12px;
text-align : center;
}
<div class="flex">
<a href="#" class="div1">
<p>LINK 1</p>
</a>
<a href="#" class="div2">
<p>LINK 2</p>
</a>
<a href="#" class="div3">
<p>LINK 3</p>
</a>
<a href="#" class="div4">
<p>LINK 4</p>
</a>
</div>
Take the margin off of the <div> and add it to the <a> that's wrapping the div. Also add style="display:block:" to the <a>.
This CodePen has the updates.
The issue is coming from your using the table cell display method.
.g > div,
.g-m > div {
display: table-cell;
vertical-align: top;
}
I also support the flex box usage as pointed out by Louis.
What is happening is that the link element is expanding to the 100% of the container div to get some space you could set a specific width for the a tag or you could add some padding to the container element, you will have to play with padding and width to make it look good though.
https://jsfiddle.net/96urhqcz/1/
.g-1-4{
width: 25%;
padding: 10px;
}
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...
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
What's the best way to align these elements? I want to avoid using margin-top on the check mark icons to align them to the centerline of the buttons.
I Want To Avoid This
<div class="icon check" style="margin-top:11px;"></div>
Live example here:
JSFiddle
<div id="statusbar">
<div class="icon check"></div> <a class="btn inactive" href="">Button 1</a>
<div class="icon check"></div> <a class="btn inactive" href="">Button 2</a>
<div class="icon check"></div> <a class="btn inactive" href="">Button 3</a>
</div>
A good way is to set vertical-align:middle to the wrapper and using display:inline-block for the child like this:
<div id="statusbar">
<div class="icon check"></div> <a class="btn inactive" href="">Button 1</a>
<div class="icon check"></div> <a class="btn inactive" href="">Button 2</a>
<div class="icon check"></div> <a class="btn inactive" href="">Button 3</a>
</div>
.icon{
width:10px;
height:10px;
border:1px solid #000;
display: inline-block;
}
.inactive{
display: inline-block;
}
#statusbar{
height:auto;
vertical-align: middle;
}
DEMO
I would try setting the height of the checkbox icons to be equal to the button height, then centering the checkbox background image vertically. Depending on how the button height is set, this could be by font-size and line-height, or just a height. Then I'd use:
.icon {
background-position: 0 center;
}
Please share some of your CSS or a JSFiddle if that doesn't help.