Misaligned Twitter Follow and Facebook Like buttons - html

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.

Related

How to align the logo at center in angular material?

I am making an angular application with toolbar at top.
Placed a left menu button, logo and a button and a text at last.
Problem:
Here the logo at center is not center to the toolbar but it is
center to the first menu button and the other button after logo text.
Requirement:
The logo at the center needs to be center for the entire toolbar no
matter what is placed next to it.
Working Stackblitz:
https://stackblitz.com/edit/material-flex-toolbar-21bjwf
Just make toolbar position: relative and position the logo with
.logo {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
This way, logo will be in the middle, no matter what. Of course, don't forget to stick the actions always to the right (either add margin-left: auto to actions or add justify-content: space-between for whole toolbar)

Align Iframe with buttons

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:

Vertically center element on HTML page with some content on top (Bootstrap)

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

How to align expandable divs to the side of an always centred / centered element - css

I would like to create a page with a logo that is always horizontally dead centre and upon opening the page before anything is clicked on is also vertically centred.
I have created the page with the logo centred using simple margins:
margin: auto;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
width: 100px;
height: 100px;
This works great with a full page background, but I would like to have a number of small 50px square divs to the right of the logo that will have icons for login, mail, info and if someone clicks on those divs they expand to show login fields etc.
Now the problem I have is I am very used to using 2/3 column layouts but I have no idea how to keep the logo dead centre if the div next to it expands.
(I dont mind if the logo moves up the page as the div next to it expands or whether the logo stays dead centre and the div expands downwards.)
This does not have to be compatible with anything before IE9
I may not fully understand your question but have you considered displaying the logo as a background-image:?
If that's not the solution you're looking for you should consider placing the logo in the first column of a table, and the boxes on the right in a second column of that table. Then vertically and horizontally center that table.
If you don't want to use a table you can achieve something similar with divs.

CSS positioning images and text

I'm trying to get some text between two images. The images are positioned correctly, but there are some weird design issues that are cropping up.
Current Page (web page)
Design Plan (jpg)
What I'm trying to figure out is this:
Background must stop before the right edge of the right image (the girl)
Background must extend the height of the right image
Vertical bar underneath left edge of right image.
Text wrapping before vertical bar
Bars to left of bottom text in center
Any help would be appreciated!
I'd advise against splitting the image up, as Aiden suggests. This is messy and not exactly a modern way to go about it. Try something like this:
.top-pic {
float: right;
margin-top: -200px;
}
Change the margin-top assignment to however high you want the image in pixels. The only issue left is to scale the width of the top-text div to accommodate the image. One way to do this would be to set padding-right: 250px; or so to .top-text h1 and .top-text h2.
This is a bit wrong
.top-pic {
position: absolute;
top: -5.7em;
right: -1.5em;
z-index: 1;
}
Cut this image into 2 images (one in the header next to the tabs, and one in the content). Stuff is floating underneath because of your z-index.
In your CSS. What you want is a pretty basic fixed 3-col layout with the text in the middle. I will point you here:
http://layouts.ironmyers.com/
http://www.csszengarden.com/
That is how CSS layouts are done.
If you move the top-pic above your logo and change the styling you can get a similar effect to what you want.
<div class="top-pic">
<img src="index2_files/girlbird.png">
</div>
<div class="logo">
<img src="index2_files/logo-center.png">
</div>
CSS Changes
.top-pic {
float: right;
position: relative;
top: -50px;
right: -25px;
}