I'll post a JSFIddle if necessary, that would take a bit of effort since I'm using a markup language, but go here: http://mixtape.meteor.com
Add enough elements so that there's overflow and a scroll-bar appears
Now try to check out the hover attribute for any of the list elements, they all appear out of place!
Below is the relevant CSS code.
.list_element .next_song{
cursor: pointer;
color:white;
margin-top:-38px;
margin-left:29%;
display:none;
position: absolute;
}
.list_element .destroy {
cursor: pointer;
color:white;
margin-top:-38px;
margin-left:32%;
display:none;
position: absolute;
}
.list_element:hover .destroy{
display:block;
}
.list_element:hover .next_song{
display:block;
}
Try to add position:relative at element_style, so the position:absolute will fit into the container. And then the only work for you is adjust the align of those buttons.
.element_style {
position: relative;
......
.list_element .next_song {
right: 10%;
......
.list_element .destroy {
right: 0%;
......
Related
I have a shift calendar for a local fire department that I built using foundation5 responsive css framework. Everything works great when viewing in my browser and resizing the window.
example:
However, when I view this on an iPhone the calendar days are moved one block up.
Here is my css:
.calRow {
max-width:100%;
}
.calMonth, .calPrev, .calNext {
text-transform:uppercase;
font-weight:bold;
color:gray;
font-size:1.7em;
margin:15px 0;
text-align:center;
}
.calMonth {
text-align:center;
}
.calPrev {
text-align:left;
}
.calNext {
text-align:right;
}
.pCal ul li {
text-align:center;
height:0;
padding:0 0 14.28571%;
border-left:solid 1px gray;
border-top:solid 1px gray;
position: relative;
}
.pCal ul li:after {
content:'';
display: block;
margin-top: 100%;
}
.pCal ul li dl {
position:relative;
padding:0;
margin:0;
top:0;
height:100%;
}
.pCal ul li dl dt {
padding:0;
margin:0;
}
.pCal ul li.calHead {
font-size:0.8em;
border:none;
color:gray;
height:25px;
margin-bottom:-20px;
}
.calToday {
border-bottom:0.5em solid lightGrey;
}
.calDay {
position:relative;
padding:15%;
margin:0;
top:-100%;
}
.calLayer2, .calLayer3, .calLayer4 {
position:relative;
padding:0;
}
.calLayer2 {
top:-200%;
}
.calLayer3 {
top:-300%;
}
.calLayer4 {
top:-400%;
}
/* SHIFT HEIGHT / SIZE STYLES */
.shift2 {
height:50%
}
.shift3 {
height:33.33%
}
.shift4 {
height:25%
}
/* OVERLAY STYLES */
.calX img{
width:100%;
padding-top:2%;
}
.calCircle img{
width:100%;
padding:9% 7%;
}
.calSquare img {
width:100%;
padding:7%;
}
.pCal .calDayParts {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.pCal .calDayOverlay {
position: absolute;
top: 0;
bottom: 0;
height: auto;
width:100%;
}
.calLayer1, .calLayer2, .calLayer3 {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
Can someone help me figure out why this is or at least suggest a way to debug it.
Thanks
EDIT 1 JS FIDDLE LINK
GO HERE for jsfiddle example - same issue is present when viewed on phone
side note, this answer has instructions on how to use iPhone over local network to connect to localhost of IIS on windows PC
It's difficult to debug without being able to inspect the site first hand. From first glance though, I would try adding a float and clear to the .calRow class, provided it is what it sounds like (the rows that make up the calendar).
.calRow {
float: left;
clear: both;
width: 100%;
}
Keep in mind by floating the calendar rows you will most likely need to also float the calendar container.
If that doesn't solve the problem it's most likely related to your absolute positioned elements not being positioned relatively to their parent element.
EDIT: I should add, if you have access to safari, an iPhone and a cord to plug the iPhone into your desktop. You can inspect the site using safari on your desktop by going to 'Develop' > 'iPhone'. More info on remote debugging here.
Okay,
so the problem was not with the css exactly. There were other styles bleeding into my styles. I placed this css inside an angular2 component and "encapsulated" the css, then it worked without the positioning error. It wraps the code in a shadow dom
I never did find out what style was bleeding into mine but the problem is now solved.
I have a normal paragraph:
HTML:
<p><span>[1]</span> list-type-1</p>
<p><span>[2]</span> list-type-2</p>
...
<p><span>[10]</span> list-type-3</p>
CSS:
span {
text-align:right;
}
Need Output:
[1] list-type-1
[2] list-type-2
....
[10] list-type-10
But the list numbers are placed on left. So, how to fix right align.
Thanks in advance.
Set up span's width ie:
span {
text-align:right;
display:inline-block;
width:30px;
}
http://jsfiddle.net/hedgehog34/50tp475k/
Modify your css like this
span {
text-align:right;
float:right; // This style is responsible to put your list numbers on right side in your case
}
see Fiddle : https://jsfiddle.net/5mmgu9dk/
alternative
p{
padding-left: 35px;
position: relative;
}
span {
text-align: right;
position: absolute; top: 0; left: 0;
width: 30px;
}
<p><span>[1]</span> list-type-1</p>
<p><span>[2]</span> list-type-2</p>
<p><span>[23]</span> list-type-23</p>
<p><span>[10]</span> list-type-3</p>
I am attempting to create a link that includes a right chevron that has a fairly large font. The problem that I have run into is that the right chevron has a very large margin above it that creates a big gap between it and the line above.
In addition to this - I would like the text that is next to it to be vertically centered on the point of the chevron.
CSS:
.big
{
font-size:80px;
}
a
{
text-decoration:none;
font-size: 30px;
}
HTML:
This is a test
<div>
Let's Go! <span class="big">›</span>
</div>
You can see an example of what I am talking about here
Should I just use a negative margin to close up this gap or is there a more graceful way to accomplish what I am trying to do? How can I center the text on the point of the chevron? I tried vertical-align:middle but had no luck.
You should use :after :pseudo-element instead of adding extra element. This way you won't have to position both individually, you could simply position the a tag relatively and its :after :pseudo-element absolutely. So that the :after :pseudo-element will follow wherever you position the a tag.
a {
text-decoration:none;
font-size: 30px;
position: relative;
top: 20px;
}
a:after {
content: '›';
font-size: 80px;
position: absolute;
bottom: -20px;
right: -30px;
}
This is a test
<div>Let's Go!</div>
Additionally, on Firefox it shows a weird dotted outline, when you click on an a element.
To prevent this, you could set outline: 0 on a:focus.
a {
text-decoration:none;
font-size: 30px;
position: relative;
top: 20px;
}
a:after {
content: '›';
font-size: 80px;
position: absolute;
bottom: -20px;
right: -30px;
}
a:focus {
outline: 0;
}
This is a test
<div>Let's Go!</div>
You could achieve this with relative positioning and line-height definition:
.big {
font-size:80px;
line-height: 30px;
bottom: -10px;
position: relative;
}
a {
text-decoration:none;
font-size: 30px;
}
This is a test
<div>
Let's Go! <span class="big">›</span>
</div>
JSFiddle: http://jsfiddle.net/CaseyRule/ptrxv99n/8/
<style type="text/css">
.big{
font-size:80px;
line-height:30px;
position:absolute;
top:2px;
}
a{
text-decoration:none;
font-size: 30px;
position:relative;
}
</style>
Let's Go! <span class="big">›</span>
I would use an image and set the background property of your anchor tag to use this image. You can adjust the padding to however much space you need to accommodate the chevron image.
a {
text-decoration:none;
font-size: 30px;
padding-right:30px;
background-image: url('/path/to/image.gif');
background-position: right center;
}
This would apply the chevron to all links on your page. You can of course use a CSS class to limit the chevron to specific hyperlinks.
a.chevroned { .... }
Let's Go!
This question already has answers here:
How to change the strike-out / line-through thickness in CSS?
(11 answers)
Closed 8 years ago.
Yesterday with one friend discuss for change height of line about strike-through.
Today searching on documentation of CSS says :
The HTML Strikethrough Element (<s>) renders text with a strikethrough, or a line through it.
Use the <s> element to represent things that are no longer relevant or no longer accurate.
However, <s> is not appropriate when indicating document edits;
for that, use the <del> and <ins> elements, as appropriate.
And seems that <s> accept all reference of CSS but not function on height.
CSS:
s {
color: red;
height: 120px
}
HTML:
<br /><br />
<s >Strikethrough</s>
There is a simpler demo on JSFIDDLE and you see that not change the height of line....
There is a alternative solution or I wrong on CSS?
EXPLAIN WITH IMAGE
I think the best way to handle this is to use a pseudo element to simulate the desired behavior.
s {
color: red;
display: inline-block;
text-decoration: none;
position: relative;
}
s:after {
content: '';
display: block;
width: 100%;
height: 50%;
position: absolute;
top: 0;
left: 0;
border-bottom: 3px solid;
}
The border inherits text-color and you gain full control over your styling, including hover effects.
JS Fiddle here
I've wanted to do this before and came up with this:
<span class="strike">
<span class="through"></span>
Strikethrough
</span>
and:
.strike {
position:relative;
color:red;
}
.strike .through {
position:absolute;
left:0;
width:100%;
height:1px;
background: red;
/* position of strike through */
top:50%;
}
JS Fiddle here
and if you want multiple strike throughs you can use something like this:
JS Fiddle - multi strikes
This is my alternative version.
s {
color: red;
position: relative;
text-decoration: none;
}
s:after {
position: absolute;
left: 0;
right: 0;
top: -10px;
content: " ";
background: red;
height: 1px;
}
JSFiddle demo
Try this
s {
color: red;
text-decoration: none;
background-image: linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 12px,transparent 9px);
height: 100px
}
I probably have one of the easiest questions of the day, but I'm having a hard time finding a direct answer for how to fix it (HTML/CSS -n00b)...
I have in my mark-up an img-tag and under that a div-tag containing an horizontal list.
In the lists ul-CSS I have declared a top and bottom border, the img (which is a .PNG with transparent background) is showed in front of the ul border-top, which is what I want. But for the li-CSS I have border-right for each element to separate them, and this border is in front of the img...
Here you see what I mean:
Edit:
#topLeftImage {
z-index: 999;
margin-left: 1em;
margin-top: 3px;
#navigationlist li
{
z-index: 0;
display: inline;
list-style-type: none;
padding-right: 2px;
font-size: 75%;
border-right: 2px solid #C0C0C0;
}
So how do I declare the img for it to be showed in-front of that li-border?
And another fast question, can I declare so that the last li-element doesn't get that border-right, since it doesn't have a right-neighbour?
Any tips would be helpful!
-Thanks
Are you using IE to check the results of these changes you are making? IE's z-index method is a little mental. Try the code below and see if that helps.
#topLeftImage {
z-index: 999;
margin-left: 1em;
margin-top: 3px;
position:relative;
}
#navigationlist li {
z-index: 0;
display: inline;
list-style-type: none;
padding-right: 2px;
font-size: 75%;
border-right: 2px solid #C0C0C0;
position:relative;
}
and give the parent of these two items:
#parent {
z-index: 0;
position:relative;
}
Firstly the css property z-index should help for the first problem.
img{
z-index:999;
}
That should make it appear above everything.
(IMPORTANT... Be careful with this though... The whole area of the image will be displayed on top of the nav, making it impossible to click the Item one hyperlink.)
For the latter question, you can use last-child pseudo class to set the right border to nothing. eg.
#nav li:last-child{
border-right:none;
}
This is a CSS3 feature... so IE8 and below will not let it work. Maybe just adding a class to the last item will be the most browser friendly way!
#nav li.last{
border-right:none;
}
<li>normal</li><li class="last">furthest right</li>
Let me know if the z-index advised by me and another guy causes the problem I outlined. There will be some solutions to this but require a little bit of effort!
You could set the z-index:9999; for the img if you give it a class and/or set the z-index:0; for the li's class.
e.g.
img.className {
z-index:9999;
}
li.className {
z-index:0;
}
Or if you use ID's:
img#idName {
z-index:9999;
}
li#idName {
z-index:0;
}
in your code you use z-index, and correctly, but you have to keep in mind that z-index works only with positioned elements. So in both #navigationlist li and #topLeftImage add position:relative;