Am using fullCalendar.io 3, and i want to show the date (7,8,10) in each day cell at the bottom instead of top.
I have tried to apply styles to bring them to bottom, they are td's in a thead of table with cls skeleton-content.
Nothing worked, looks like i have to make source code changes. I could get the file where i have to make changes, but it is right approach AFAIK.
There should be some extension or overriding mechanism to acheive this.
Any help is highly appreciated.
Sample
I was able to achieve this with the help of the following CSS. Margin and top may vary in others cases.
a.fc-day-number
{
width: 18px;
text-align: right;
position: absolute;
top: 60px;
margin-left: 100px;
}
Related
What I want seems to be simple but I cannot achieve it! :(
I am trying to modify and use the Web template example given here. However, there are a few problems:
First, I want the footer to be at bottom of the page at all times. In the given example, the footer looks like a footer at the bottom of the page because it's only using a fraction of the browser. However, if you run the code as an independent page, you see it is not stuck to the bottom.
Second, I also don't like the below line. I don't want to specify a height.
.row.content {height: 450px}
How I can achieve both at the same time?
This question has been asked many times but here's the code anyways:
footer {
bottom: 0;
position: fixed;
width: 100%;
}
.row.content {
position: fixed;
height: 100%;
}
I have a very simple background image of a couple of lines on my webpage. The code I'm currently using for it is:
{
background-image:url('stripe.png');
background-repeat:repeat-x;
background-attachment:fixed;
}
Super simple. But when I'm scrolling down in the page, I want things to underlap it, rather than overlap it.
Considering it's a small image (only 8px tall and 1px wide), it needs to go the entire edge of the page, and needs to meet the top edges to look right. Because of this, I don't know how to do it as anything other than a background image. Any suggestions?
Thank you.
Edit: If you know of a way to do this as being something other than a background, that'd be great! It doesn't need to be a background, so long as the effect is there.
Edit again: Thank you, here is a link to the page in question: What's going on really is that I want a bar to appear between the frames (but a nice looking bar, not like the ones that are automatically made) And I can't figure out how to make one that will stay on top.
I've got the two frames, and most pages don't scroll, so it's not a problem. So I have the bar as the background of the bottom frame, but when viewing scroll able pages, the effect falls apart.
Thanks everyone! I was able to edit things by adding a div at the top and having it formatted like this
#stripe {
background-image:url('stripe.png');
position: fixed;
width: 100%;
height: 8px;
left: 0;
top: 0;
}
That way I still had my image as the border, and was able to make the div exactly the right size and everything. Thank you for your help!
It is a background, so it is in the back. If you want something in the front, you need to have an element that is in front of the page.
HTML:
<div id="header"></div>
CSS:
#header {
background: gold;
position: fixed;
width: 200px;
height: 200px;
left: 0;
top: 0;
}
JsFiddle
So I'm making a jQuery slideshow using the jQuery cycle plugin.
Part of the code generates an <input type="button"> with a value from 1 to i (where i equals the total number of slides)
I'm trying to style these buttons so that they appear on top of the image in the slideshow. However when I try to absolute position the buttons they all stack on top of each other. I understand why this is happening, I just don't understand how to get around it.
This is how I'm targeting the buttons the JavaScript is generating.
input[type=button] {
position: absolute;
left: 400px;
}
How do I prevent the buttons from stacking?
If Position is absolute, you must define left and top for each separately, else it will stack up,
Or you may use position:relative with margin:5px; float:left;
thank you,
Instead of trying absolute positioning, try floating the image.
input[type=button] {
position: relative;
float: center;
padding: 10px;
}
This should eliminate the stacking and you can also easily add borders and customize this to be whatever you want. This is just a general description of what I thought was necessary .
I used tags instead of buttons, but I don't think it should make too much of a difference. Anyways, if you want to go about making it vertical, I would just go like this:
HTML:
<h1>Example</h1><br />
<h1>Example1</h1><br />
<h1>Example2</h1><br />
CSS:
h1{
position: relative;
float: none;
padding-bottom: 10px;
}
This is fairly simple CSS work so it won't take you too far, but this is a good start. Also, I would never recommend using absolute positioning unless you're only dealing with one object instead of several since it creates a stacked look. Hope this helps.
I am struggling with a CSS issue. I want to display a Google +1 button next to ShareThis buttons (I am using Drupal).
For some reason, Drupal adds a panel searator CSS class:
I tried to modify my CSS file as following:
.panel-separator { display: none; }
but it only produced this:
There is enough space to the right of the ShareThis buttons to display the Google +1 buttons. But, the buttons are stacked on top of each other.
How do I get the button to align horizontally? Thanks.
Update
I have set a lot of width and I also added float: left;:
.GYPO_social_buttons {
padding-top: 91px;
width: 200px;
float: left;
}
.GYPO_share_this {
width: 90px;
}
.GYPO_google_plus_one {
width: 40px;
}
Here is the enclosing div according to firebug (I am using Firefox):
Update II
Woops, my bad. I have now set the float: left; on the button themselves rather than the enclosing div and the issue is solved. Thanks !!!
.GYPO_share_this {
width: 90px;
float: left;
}
.GYPO_google_plus_one {
width: 40px;
float: left;
}
You need to give enough width to the container div, that is holding these icons. After that you can float these icons by giving float: left; . The reason why Google +1 is moving down is because the container div doesn't have enough width to accommodate this next to mail icon.
From the portion of html and css you are providing it is a little bit difficult to find out what would be the best way to do this. The question is what generates the break. It could be that the parent element is not wide enough to and the +1 needs to be below. In that case you can simply change the width. It could also be that there is css that generates a break (e.g. display: block and no float for on eof the elements) In that case you might try to change that to display: inline or a float: left for the buttons. There might be a clear somewhere in there which would cause the float to break (although it doesnt look like a clear on the image)
I suppose there are more possibilities than that...
I need to see more of your code. If you have tried to make your container larger to hold all of the icons and that didn't work, I would guess it was another element forcing the icon to the next line. Without more code, all I can do is make a guess...
I was in the same situation once. Here's what solved my problem:
You can also choose the "style" setting on the region and choose "No markup at all". This will remove the panel separator.
For more info: https://www.drupal.org/node/579020#comment-8163459
I'm trying to place an img to the bottom of the outer div.
Sadly it is not working as the default styles from wordpress are making it impossible...
My Project
The img I'm talking about is the small image on the left next to the big main one...
I would appreciate any help as this is already driving me crazy for hours!
Any help is appreciated!
Thanks
edit:
Here's a picture of what it should look like later:
It would help if you posted a picture of what you want the end result to be, but to put an element at the bottom of a container the usual way is setting it's style to something like position: absolute; bottom: 0 you can put a small value in bottom: to offset it a bit to match, you can then use left or rightto set the offset with the other limits of the container.
Edit: I tried this code in the img tag with firebug, seemed to work like in your picture:
element.style {
bottom: 90px;
position: absolute;
right: 350px;
}