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.
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 am trying to show an image inside the customized circular li. I just want to show a success tick image in that li. I have a CSS as -
span.round-tabs {
width: 50px;
height: 50px;
line-height: 50px;
display: inline-block;
border-radius: 100px;
background: white;
z-index: 2;
position: absolute;
left: 0;
text-align: center;
font-size: 25px;
}
li.success span.round-tabs.one {
background-image: url('img/if_Tick_Mark_Dark_1398912.png');
}
<li class="success">
<a href="#" aria-controls="home" id="DivPatientDetails" name="PatientDetails" >
<span class="round-tabs one">
<i class="icon icon-profile-male"></i>01
<h4>Patient's Details</h4>
</span>
</a>
</li>
But I am getting the result as:
instead of:
What am I missing here?
Either use
background-position: center center;
or use
background-position-y or background-position-x to position the image correctly.
Then you may want to make sure the size is correct using the background-size rule in CSS. If you post a jsfiddle, I'll be happy to implement this solution into that for you to see.
I'm struggling with getting a section background color to change on mouse over. I'm trying to turn the entire section into a link. Right now, only the elements inside the section become links, not the block itself.
If I remove the <section> prior to the <a> the whole block becomes a link but the background sill does not change on mouse-over. I have an identical scenario in a menu and it works, so I'm a little confused here. I'm also wondering why only the elements turn into links withing a section and it does the opposite in my sub menu. Section code below:
.ch-section {
position: relative;
min-height: 140px;
max-height: 140px;
width: 400px;
color: $ch-section-text;
font-size: 13px;
border-bottom: 1px solid $body-1px-line;
}
.ch-section a {
display: block;
width: 400px;
text-decoration: none;
}
.ch-section a.active {
font-weight: bold;
}
.ch-section a:hover:not(.active) {
background-color: yellow;
color: $sn-list-link-active;
}
<section class="ch-section">
<a href="#">
<span class="ch-section-selected not"></span>
<img class="ch-section-image" src="assets/images/profileimg2.png" alt="img">
<span class="ch-section-user">
<span class="ch-section-status online"></span>
<span class="ch-section-name">Lindset T. Peters</span>
<span class="ch-section-location">Location, Province</span>
</span>
<time class="ch-section-date">8:48 AM</time>
<i class="fa fa-e1-message-sent ch-section-message"></i>
<span class="ch-section-snippet">Hey, it was really good to see you over the weekend, I look forward to...</span>
</a>
</section>
I'm struggling with getting a section background color to change on
mouse over. I'm trying to turn the entire section into a link. Right
now, only the elements inside the section become links, not the block
itself.
If I remove the prior to the the whole block becomes a
link but the background sill does not change on mouse-over.
It is because you have a as child of the section, so make it parent (as I did it in a previous question you had).
.ch-section {
position: relative;
min-height: 140px;
max-height: 140px;
width: 400px;
color: $ch-section-text;
font-size: 13px;
border-bottom: 1px solid $body-1px-line;
}
a {
text-decoration: none;
}
a .ch-section {
display: block;
width: 400px;
}
a.active .ch-section {
font-weight: bold;
}
a:hover:not(.active) .ch-section {
background-color: yellow;
color: $sn-list-link-active;
}
<a href="#">
<section class="ch-section">
<span class="ch-section-selected not"></span>
<img class="ch-section-image" src="assets/images/profileimg2.png" alt="img">
<span class="ch-section-user">
<span class="ch-section-status online"></span>
<span class="ch-section-name">Lindset T. Peters</span>
<span class="ch-section-location">Location, Province</span>
</span>
<time class="ch-section-date">8:48 AM</time>
<i class="fa fa-e1-message-sent ch-section-message"></i>
<span class="ch-section-snippet">Hey, it was really good to see you over the weekend, I look forward to...</span>
</section>
</a>
The actual problem here is that you haven't set the height of your a tag. However when setting the a tag height to 100%, you will notice it still won't work. This is because the section has no fixed height specified. Instead you specified both min-height and max-height to be the same height, which doesn't really make sense. If instead you specify height:140px, it will work as expected:
.ch-section {
position: relative;
height: 140px;
width: 400px;
font-size: 13px;
}
.ch-section a {
display: block;
height: 100%;
text-decoration: none;
}
.ch-section a.active {
font-weight: bold;
}
.ch-section a:hover:not(.active) {
background-color: yellow;
}
<section class="ch-section">
<a href="#">
<span class="ch-section-selected not"></span>
<img class="ch-section-image" src="assets/images/profileimg2.png" alt="img">
<span class="ch-section-user">
<span class="ch-section-status online"></span>
<span class="ch-section-name">Lindset T. Peters</span>
<span class="ch-section-location">Location, Province</span>
</span>
<time class="ch-section-date">8:48 AM</time>
<i class="fa fa-e1-message-sent ch-section-message"></i>
<span class="ch-section-snippet">Hey, it was really good to see you over the weekend, I look forward to...</span>
</a>
</section>
I wanted to have the entire div link to microsoft.com. How do I add a link to the entire div wrapper-promo? I wanted it to where ever the user clicks, they would go to the link.
Here's my jsfiddle:
http://jsfiddle.net/huskydawgs/eL7rwLx3/45/
Here's my HTML:
<div class="wrapper-promo">
<div class="title-top">
<h2 class="block-title">
Three states or less</h2>
</div>
<div class="promo-content">
<p>Bid and RFP Notification Only</p>
<p>Online and email support</p>
<p><img height="31" src="http://www.onvia.com/sites/default/files/button_get_started_orange.png" width="112" /></p>
</div>
Here's my CSS:
.wrapper-promo {
background-color: #e2e3e4;
margin: 10px 0;
width: 100%;
}
.title-top {
background-color: #2251a4;
height: 40px;
line-height: 40px;
}
.title-top-cell {
display: table-cell;
vertical-align: middle;
}
.promo-content {
margin: 20px;
padding: 0 0 10px 0;
}
h2 {
font-family:Arial,sans-serif;
font-size:19px;
font-weight: bold;
color:#fff;
margin: 10px 0 -10px 0;
text-transform:none;
}
h2.block-title {
font-size:22px;
margin: 0;
text-align: center;
text-transform:none;
}
.promo-content p {
font-family: Arial,sans-serif;
font-size: 14px;
color: #232323;
line-height: 20px;
text-align: center;
}
I would suggest adding an empty anchor element as a direct child of the .wrapper-promo element. Then you can absolutely position it relative to the parent element so that it will take whatever dimensions the parent element is.
In doing so, the entire element is clickable, and you don't have to worry about wrapping the a element around any div or block-level elements:
Updated Example
.wrapper-promo {
position: relative;
}
.wrapper-promo > a {
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
}
<div class="wrapper-promo">
<div class="title-top"><!-- ... --></div>
<div class="promo-content"><!-- ... --></div>
</div>
With HTML5 it is allowed to wrap block elements within a tags even though the a tag is an inline element. Here is a fiddle where your original link is used as a container for all the other elements.
http://jsfiddle.net/Nillervision/761tubkc/
<a class="blockLink" href="http://www.microsoft.com">
<div class="wrapper-promo">
<div class="title-top">
<h2 class="block-title">
Three states or less
</h2>
</div>
<div class="promo-content">
<p>Bid and RFP Notification Only</p>
<p>Online and email support</p>
<p>
<img height="31" src="http://www.onvia.com/sites/default/files/button_get_started_orange.png" width="112" />
</p>
</div>
</div>
</a>
Instead of a div, just use an a with display:block;.
It will behave as a block element in your flow, and you can set an href etc.
You may need to override its color, text-decoration, and :visited CSS.
The alternative here is to use a click event with Javascript - blech.
Code request edit:
All you need to do is change the style of .wrapper-promo:
.wrapper-promo {
background-color: #e2e3e4;
display:block;
margin: 10px 0;
text-decoration: none;
width: 100%;
}
then change it to an a:
<a class="wrapper-promo" href='http://www.google.com/'>
...
</a>
When I was working on my site I walked towards a problem. I want to have the <.p> element directly after my <.a> element, so it is not a line under it.
How it is now:
Login
\
Register
How I want it:
Login \
Register
You can visit my site if you want to take a look:
v14rkoende.helenparkhurst.net
This is my html code:
<div class=logreg>
<div class=logregb>
<p class=loginl ><a href=login.html class=loginr>Login</a> /</p>
<p class=loginl ><a href=register.html class=loginr>Registreer</a></p>
</div>
</div>
This is my CSS code:
.loginr {
font-family: Century Gothic;
color: white;
font-size: 12px;
margin-bottom: 0px;
margin-top: 0px;
text-decoration: underline;
}
.loginl {
font-family: Century Gothic;
color: white;
font-size: 12px;
text-decoration: none;
margin: 0px;
}
.logreg {
margin-left:-20px;
}
.logregb {
width: 0px;
margin-left: auto ;
margin-right: auto ;
margin-top: -40px;
}
Thanks for helping me out
Solution was to make the width bigger so for example:
.logregb {
width: 100px;
margin-left: auto ;
margin-right: auto ;
margin-top: -40px;
}
Thanks to all people for the fast awnsers!
try this (UNTESTED):
.loginl a {
float:left;
}
The width of your parent DOM element is to small. Remove the .logregb {width: 0px;} because it results in 2 line breaks.
Alternatively
Add nowrap to your CSS as following:
.loginl {
[...]
white-space: nowrap;
}
Here is the JSFiddle: http://jsfiddle.net/j3t47pqg/1/
p a {
display:inline-block;
}
<div class=logreg>
<div class=logregb>
<p class=loginl >
<a href=login.html class=loginr>Login</a>
<a href=register.html class=loginr>Registreer</a>
</p>
</div>
</div>