I'd like to ask you if you know, how can I make it (which property should I set up) to make the "test" events (one is red other is green) in that calendar stand inline (not each on each row). There would be at most 4 event (25% width per each). Speaking about this elements:
<a href="/component/dpcalendar/event/1" class="fc-event fc-event-hori fc-event-start fc-event-end dpcal-module_event_dpcal_198" style="float: left;position: absolute; left: 93px; border-color: rgb(18, 163, 18); width: 23px; top: 146px; background-color: rgb(18, 163, 18);" data-original-title="" title="">
I am dealing with this problem on our website, based on Joomla, where I've uploaded this dpcalendar component - http://www.drnky.cz.
I tried to apply float: left, display: inline, changed the width but nothing helped. Do you know where is the problem, please? :) Thanks a lot.
http://jsfiddle.net/2th7x9ng/
Your issue is that the elements use the property position: absolute, float will have no effect on this.
You can simply change the left and top settings of the second element to the following and they will be aligned:
position: absolute;
left: 103px;
border-color: rgb(204, 0, 0);
width: 23px;
top: 146px;
background-color: rgb(204, 0, 0);
While using position: absolute you need to control your and style it by yourself. float will not work with position: absolute. So you need to change your left and top to place your green and red bullets hyperlinks wherever you want in the calender.
Just use the following style for your anchor tags in your calender at your website. I tested it live on your website and it solves your problem by showing both in the same line.
For green link:
position: absolute;
left: 93px;
border-color: rgb(18, 163, 18);
width: 23px;
top: 146px;
background-color: rgb(18, 163, 18);
For red link:
position: absolute;
left: 102px;
border-color: rgb(204, 0, 0);
width: 23px;
top: 146px;
background-color: rgb(204, 0, 0);
EDIT 2:
<div class="fc-event-inner"><span class="fc-event-title"> </span></div>
<div class="fc-event-inner"><span class="fc-event-title"> </span></div>
Working Fiddle here.
Related
I have a code like this
<div style="position: absolute; margin-left: -22px; margin-top: -22px; left: 502px; top: 379px; z-index: 380; display: block;" class="maptimize_marker_0 f st">1<span class="pinlabel">1B 100E</span></div>
I also have CSS for pinlabel
.pinlabel{
display: none;
position: absolute;
background-color: #3774d5;
height: 16px;
width: 200px;
color: white;
top: 0px;
left: 1px;
font-size: 10px !important;
border-radius: 10px;
border: white 2px solid;}
.maptimize_marker_0:hover span.pinlabel {display:block;}
But I cant get the Hover state work. If to Force hover state in developer tool in chrome everything works fine, but not working when mouse is over... What am I doing wrong? Also I want to put span Under the div, but the span is always on top and covers the div background picture... Please help!
I'm not sure what your problem is, on http://jsfiddle.net/abrunet/Bb9T3/, I copy paste your code and the hover is working..
Last, your span does not have a z-index specified. You might chose one, lower than the divs one and an other higher for the hover case.
You should also try to separate your style in a different sheet to keep your code clean.
Let me know if I misunderstood your question.
For some reason my login textbox is not clickable in the main area, only on the bottom-border. I looked at other topics on this issue and people have been advised to check for transparent overlapping elements, I checked and I don't see any - also tried messing with a higher z-index but that also did not work. Would love some input!
.input_large {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
border: 1px solid #929292;
padding:5px;
width:259px;
background-color:#f6f6f6;
}
this is the CSS. The problem is also viewable here: click
Thanks in Advance!
The span#status is overlapping the input. If you reduce the height of the span it allows the input to be clicked.
#status {
border-radius: 11px;
height: 50px; /*Height reduced*/
left: 0;
margin-top: -100px;
padding-top: 15px;
position: absolute;
text-align: center;
text-transform: uppercase;
top: 50%;
width: 100%;
z-index: 0;
}
You could also not position this element absolutely, which will allow the input to be clicked. I'm not sure the reasoning behind this element being position:absolute.
The <span id=status> element is in the way. It is not visible (opacity: 0) and blocks the Username control. Instead of using opacity: 0, you can use visibility: hidden, but it seems like you could just tweak the height and positioning of the element so that it fills up the white space above the inputs instead.
I am currently working on my share buttons and I am trying to make them act like the share buttons on YouTube do, when a:hovered a span elemental appears with a text "Facebook/Twitter/RSS" etc.
The span element width should be auto since "Facebook" and "RSS" contains a different amount of letters, and I don't want to set a fixed width.
I want the span element to appear in the "middle" of it's current element, check the youtube share buttom for a hint.
I have come this far, see: http://jsfiddle.net/Kz2n2/
try this:
<span title="share">share</span>
css:
.tooltip{
display: inline;
position: relative;
}
.tooltip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 100%;
}
.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
working jsfiddle:
demo
With jQuery UI Tooltip you can make tooltips for your social icons.
Check out the following example, here is the jQuery UI Tooltip implemented.
$('.tooltip').tooltip();
The title tag on your <a href='#'>` is used as the text for your tooltip.
#<span>RSS.</span>
On most startup pages, like this one (the error message from sever), I see a fancy triangle that seperates section divs. Is it using any bootstrap components or people do it manually?
How to make this nice triangle?
Creating a triangle is possible with CSS.
cssarrowplease.com (Have a look at this service, it will help you create these with ease!)
A sample code similar to the one you have mentioned :
.arrow_box {
position: relative;
background: #ffffff;
}
.arrow_box:after {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #ffffff;
border-width: 30px;
margin-left: -30px;
}
CSS triangles are actually very simple!
Here is a great tutorial on it: http://css-tricks.com/snippets/css/css-triangle/
I've been playing around with CSS and I'm stuck with one really awful problem - position:fixed. The problem is that I'm editing wordpress template and as it is known, there's an admin bar with position:fixed in every template. I've tried to add another bar, like a menu, below that admin bar, but it always shows not directly below the admin bar, but about 50px below it. The menu is fixed, but not in the exact place I want it to show up.
I cannot place the menu bar with property top:28px, because the admin is only visible for the registered users, so for guests, the menu would still float 28px below an invisible object. As for registered, it would be fine, but as I've said, not for guests.
Pasting the code of admin bar and menu, maybe someone of you may find the problem...
#headerbar {
min-width: 100%;
height: 55px;
background-color: rgb(0, 166, 81);
z-index: 999999;
position:fixed;
}
#wpadminbar {
direction: ltr;
color: rgb(204, 204, 204);
font: 13px/28px sans-serif;
height: 28px;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
min-width: 600px;
z-index: 9999;
background: linear-gradient(to top, rgb(55, 55, 55) 0px, rgb(70, 70, 70) 5px) repeat scroll 0% 0% rgb(70, 70, 70);
}
If this is not enough to spot the problem, I could post the body CSS (if only needed?).
You could set different top positions for logged-in and non-logged-in users. Like, give your header bar a default top position of 0, when the user is logged in and an admin, give it an additional "with-admin-bar" class which will set the top position to 28px or so.
EDIT: Actually, this here is the more correct and clean solution:
CSS:
.bar-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%
}
.admin-bar {
height: 50px;
background: red;
}
.other-bar {
height: 50px;
background: blue;
}
HTML:
<div class="bar-wrapper">
<div class="admin-bar"></div>
<div class="other-bar"></div>
</div>
See it live: http://jsfiddle.net/CVeXA