I don't manage to center the second line of text with the first.
Here is the Demo: https://jsfiddle.net/DTcHh/27036/
HTML
<div id="deal-button">
<a class="btn btn-primary" href="www.yahoo.fr">
<span class="glyphicon glyphicon-star pull-left" aria-hidden="true"></span>
<span style= "font-weight: bold;font-size: 18px;text-transform: uppercase;">Take</span> <br/>
<span style= "font-style: italic">the deal</span>
</a>
</div>
CSS
#deal-button {
position: absolute;
width: 14%;
top: 50%;
right: 2%;
}
#deal-button a {
display: block;
margin-bottom: 10px;
font-size: 12px;
padding: 4px 12px;
white-space: normal;
line-height: 1.2;
}
#deal-button .glyphicon {
top: 8px;//override glitch in glyphicon vertical position
}
Note that I don't want to use a one line with wrap but really cut the first part from the second line with a <br/>. I always want the two components of the text to be split on 2 different lines inside the button. They will after be injected dynamically as text_part1 and text_part2
You can set the left margin on your bottom line.
margin-left: 8px;
Like so: https://jsfiddle.net/7s4cdy2t/
Alternatively set the position of your icon like so: https://jsfiddle.net/5dxjfL4v/
Although you should write it in the css;
<span style= "font-style: italic;padding-left:14%;">the deal</span>
Related
Not able to move the button to the right of the page and the text to the center of the page even though I have added the necessary CSS ( float right etc.,)
<div id="project-heading" style = "margin-top: 0px; padding-bottom: 0px;margin-bottom: 0px ; padding-top: 5px" text-align="center">
<span display="inline;" float = "center;" style="color: white;">Visual Analysis of US Accidents Data </span>
<button position = "absolute;" background-color ="black;" color = "white;" float ="right;" display="inline-block;" padding-left = "100%;" id="reset" onclick="reset">Reset
</button>
</div>
display, float, etc.
are all CSS variables that should be included in the style="" part of the HTML, not as keyword parameters. I have demonstrated the correct way to insert them in the snippet below. You can also use right: 0 to align an element to the right side of its parent. It is often more reliable than float. I used right: 10px in this example so the button had a bit of breathing room on its right side.
<h1>Only fixed syntax:</h1>
<div id="project-heading" style = "background: blue;margin-top: 0px; padding-bottom: 0px;margin-bottom: 0px ; padding-top: 5px; text-align: center;">
<span style = "display: inline; float : center; color: white;">
Visual Analysis of US Accidents Data
</span>
<button style="position: absolute; color: white; background-color: black; float: right; display: inline-block; padding-left: 100%" id="reset" onclick="reset">
Reset
</button>
</div>
<h1>Fully fixed version</h1>
<div id="project-heading" style = "background: blue;margin-top: 0px; padding-bottom: 0px;margin-bottom: 0px ; padding-top: 5px">
<span style = "display: inline; float : center; color: white;">
Visual Analysis of US Accidents Data
</span>
<button style="position: absolute; background-color: black; color: white; float: right; display: inline-block; right: 10px" id="reset" onclick="reset">
Reset
</button>
</div>
You have quite a few issues with your code, so let's clean them up and break down what's happening:
First off, don't style inline unless you have some specific reason for doing so. Use classes or ids or even just generic selectors but separating your HTML and your CSS will make your life much easier(and ours when you come looking for assistance! ;) )
You have tags that are opened and never closed which is causing some problems. The float isn't doing anything for you. If you want to position your button to the right of the page using absolute you need to tell it to be on the right using the right attribute. Your headline is centered, you just can't see it because it's white on a white background.
If you are going to style inline, you need to include your style information in the style="" section, otherwise, you're risking issues or invalid code altogether.
Let me know if you need any additional help or explanations :)
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: lightgrey;
}
#project-heading {
margin-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
padding-top: 5px;
text-align: center;
}
.title {
display: inline;
float: center;
color: white;
}
.btn {
position: absolute;
right: 10px;
background-color: black;
color: white;
display: inline-block;
}
<div id="project-heading">
<span class="title">Visual Analysis of US Accidents Data </span>
<button class="btn" id="reset" onclick="reset">Reset</button>
</div>
I have 3 spans:
.see-more{
text-align: right;
padding-right: 20px;
display: inline-block;
}
.see-more .see-more-text{
display: inline-block;
padding-top: -2px;
}
.see-more .fa-angle-right{
display: inline-block;
margin-right:-6px;
}
<div class="see-more">
<a href="ground-stabilisation">
<span class="see-more-text">see more</span
<span class="fal fa-angle-right"></span>
<span class="fal fa-angle-right"></span>
</a>
</div>
efects of this code looks like this:
I am trying to lower the angle-right icons so that they are in the middle of the "see more" text, unfortunately in all tries always the whole div is moving , not the elements inside. Any ideas?
Try margin-top :20px (try to set the number as required) in fa-angle-right css
I have the following HTML:
<div class="total">
<span id="pledged-money" class="money">
<p>${{ total.amount }}
<span class="btn btn-xs btn-info question-mark"
data-toggle="tooltip"
data-placement="top"
title="Hello there">
!
</span>
</p>
</span>
</div>
with the following scss:
#pledged-money {
p {
display: block;
position: relative;
}
span {
position: absolute;
top: 22%;
margin-left: 10px ;
font-size: 0.5em;
width: 9%;
}
}
As a result I have the following:
So far everything is okay, but what I need is to display a dialog when clicking on this span element like this:
I have not too much experience with HTML and CSS and I am currently stuck with this. How can I display this element that has a close button and the dialog pointing to the span element.
If you use bootstrap, it would be very easy to implement the popup message.
Use bootstrap popover, here is the link for reference https://www.w3schools.com/bootstrap/bootstrap_popover.asp
I'm using Bootstrap in order to create a notification-like drop down when the user mouseovers the bell icon (font-awesome). The menu is created alright, each element inside the menu is indicated by a red chevron sign. I'm not able to center the chevron vertically and align the text to the right of the chevron to start from the same place (there's some margin at the beginning of each line). I cant vertically center the chevron with a fixed value because the length of the string inside the container can be different and the position of the chevron should be determined dynamically.
Basically, I'm creating a jQuery element
$("<div class='notification-content'><i class='ion-chevron-right'></i><span class=''>"+randromString+"</span></div>");`,
and the chevron is inserted with the content.
JSfiddle here.
HTML
<div class="notifications_wrap text-center center b-l b-r hidden-sm hidden-xs">
<span class="vlign"> </span>
<a href="#" id="notification-center" aria-haspopup="true" data-toggle="dropdown">
<i class="glyphicon glyphicon-bell"></i>
<span class="bubble "></span>
</a>
<div class="dropdown-menu notification-toggle1" role="menu" aria-labelledby="notification-center" id="notif">
<!-- START Notification -->
<div class="notification-panel">
<div class="test"></div>
</div>
</div>
</div>
CSS
#notif{
background-color: white;
color: black;
}
.notification-content{
text-align: left;
padding: 10px;
padding-right: 25px;
border-bottom: 1px solid #ddd;
transition: 0.4s ease;
}
.notification-content:hover{
color: #48B0F7;
}
.notification-toggle1 {
top: 75px;
padding: 0;
z-index: 9999;
left: 100px;
width: 250px;
}
/* > sign of the notification*/
.notification-content >.ion-chevron-right:before {
color: red;
/* display:inline-block;*/
vertical-align: middle;
line-height: 50%;
width: 50px;
height: 20px;
}
.notification-content>span{
position: relative;
left: 15px;
}
JS
$(".notifications_wrap").find("a").mouseover(function(){
$(".notification-content").remove();
var random_i=randomNumOfNotifs();
for(var i=0;i<random_i;i++){
var randromString = stringGen(randomLength());
var notification = $("<div class='notification-content'><i class='ion-chevron-right'></i><span class=''>"+randromString+"</span></div>");
$("#notif").append(notification);
}
$("#notif").animate({height:"show"},500);
});
You can add the following css:
.notification-content >.ion-chevron-right {
display:table-cell;
vertical-align:middle;
}
.notification-content>span{
display:table-cell;
}
Here is a fiddle
I want the link x to appear as long to the right as possible:
<div class="token" data-value="bad">
<span class="token-label" style="max-width: 897px;">
sadfasfasf
</span>
<a class="close" tabindex="-1" href="#">
×
</a>
</div>
.tokenfield .token .close {
font-family: Arial;
display: inline-block;
line-height: 100%;
font-size: 1.1em;
line-height: 1.49em;
margin-left: 5px;
float: none;
height: 100%;
vertical-align:top;
padding-right: 4px;
}
I have tried float:right and right:0px but they did not work. Any suggestions?
The following CSS would do it:
position: absolute;
right:0;
jsFiddle example
Note though that your selector is incorrect. .tokenfield .token .close selects an element that has the class close that's a descendant of an element with the class token that's a descendant of an element with the class tokenfield.