I´m trying to align an iframe with the social buttons.
This is my website:
http://kickads.mobi/test/spotify/
The thing is that I want to put the buttons right down the iframe, leaving the Spotify preview in a line and the buttons in another, but I don´t know how. I have tried with aboslute position and floating, but it wouldn´t work.
I want to put the three buttons in a line after the iframe.
How can I do it?
I have separated the buttons and the iframe in different divs.
Can you help me?
The following CSS styling on the social div could achieve what I think you're asking for:
#social {
position: absolute;
bottom: 0;
min-height: 190px;
}
It will give you this output:
Related
I'm trying to make a CSS only sticky menu. This menu is inside another div under the header of the website. But as the user scrolls it should remain visible on the page. Googling and looking for answers here I found a good example of what I want to achieve: http://jsfiddle.net/g7x102s4/ (the red div)
My problem is that I'm doing this inside a React app where I can't install any other plugin, so It has to be done in pure CSS. I made a codesandbox where I'm trying to get it working. The menu class can float inside the menu container, but always visible to the user. It's the same effect from the first link above, just without JavaScript.
Is it possible? If so, how can I achieve it?
Add properties position:sticky and top:0 to your menu.
.menuContainer .menu {
background: red;
height: 300px;
position: sticky;
top: 0;
}
I am building a website using bootstrap, which has some (minimal) content on top (basically title, subtitle, and a navigation bar). I would like to be able to center a div both horizontally and vertically. The contents of this div will be something small, like a login or search widget.
What is the recommended way to do this in Bootstrap and CSS? Of course I want it to also look "good" when opened on a phone. The content on top will be rather minimal, so on a small screen, it's unlikely the top and center will touch. This is different from other questions in this style, because I also have some content on the top. I guess I could try to follow one of those answers, and "absolutely" place the content on the top, but somehow this doesn't seem too clean. Are there better solutions?
Kristof Hi there. A search would have probably given you a answer on how to do this.
He is a Fiddle that will do what you want to do here.
.centerthis {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
I have a floating bar that contains 5 social buttons. Only the Facebook button is shifting about 20 pixels in the left.
In the tens of CSS elements of the button under elements inspector, when I deactivate the position: absolute; of the code below, the button goes to its normal place. But I am not sure if it is the appropriate solution since it can affect the beahviour in other browsers.
.fb_iframe_widget iframe {
position: absolute;
}
Do you have an idea about this problem? Your help is appreciated.
You can try adding this to your CSS:
.fb_iframe_widget iframe {
position: relative !important;
}
That should fix it.
I also got this problem today. It seems that Facebook recently made a change to the Like buttons.
I'm adding this code to all my sites with Fb Like buttons now.
I'm trying to make a navigation with a couple Image links with background images. If I make the links divs calling to the images, they show up. But when I make the links calling to the same class the background image disappears. Any help appreciated
CSS
#advertising {
z-index: 1;
width: 465px;
height: 65px;
display: block;
position: absolute;
background: url('../images/advertising.png');
}
HTML
1) You should probably give it a top, left ... values for the position.
2) try absolute path of the image.
3) try setting the position of one of the element containers to relative.
4) Disable ads filter :)
In one of my project, I have a similar problem. If I called my css like this "css/medium.css", it doesn't work. I had to called it with a slash in the beggining "/css/medium.css"
I've set up my blog, doopist.com, using tumblr.
I'm trying to line up a twitter Follow button and Facebook Like button with my blog's header logo image. Currently, the Twitter icon is aligned at the top of the top banner while the FB button is closer to being centered. I am attempting to vertically center the buttons similarly to how the logo is centered.
I don't know much CSS and have tried to make a div style with vertical align middle but that caused the tumblr icon logos (random post, archives, etc.) to bump down to a new line, which is not desired.
I was curious if anyone had suggestions on how to vertically center the Twitter and FB buttons vertically. Thanks so much for your time and help.
Few CSS changes
#header, #header .inner { height:48px; position:relative; }
On your iframe add preferably in a class:
position: absolute;
left: 200px;
top: 10px;
On your span holding facebook:
position: absolute;
left: 365px;
top: 15px;
Again preferably in a class.
You really don't need the extra spans around each iframe. Just add a class to each iframe to specify the styles.