CODEWITHSUNDEEP
htmlcss
user4509377
user4509377

Reputation: 3

<a> inline not working

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/

Upvotes: 0

Views: 102

Answers (2)

Suhaib Janjua
Suhaib Janjua

Reputation: 3574

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:

<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=""><div class="fc-event-inner"><span class="fc-event-title">&nbsp;</span></div></a>
<a href="/component/dpcalendar/event/2" class="fc-event fc-event-hori fc-event-start fc-event-end dpcal-module_event_dpcal_198" style="position: absolute; left: 102px; border-color: rgb(204, 0, 0); width: 23px; top: 146px; background-color: rgb(204, 0, 0);" data-original-title="" title=""><div class="fc-event-inner"><span class="fc-event-title">&nbsp;</span></div></a>

Working Fiddle here.

Upvotes: 0

Cyrille Armanger
Cyrille Armanger

Reputation: 759

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);

Upvotes: 1

Related Questions