Align wordpress site title with logo - html

My website tite is not aligned with the logo
This is how it looks now:
Wordpess is generating the following html snippet:
<div id="logo" class="clearfix">
<img width="100" height="100" src="http://localhost/test/wp-content/uploads/2016/06/icon.png" class="custom-logo" alt="recette flocon advoine" itemprop="logo">
<h1 class="site-title">test test</h1>
<h2 class="site-description">slogan</h2>
</div>
How can I get something like this :

#logo{display: table;}
.h1{display: table-cell; vertical-align:middle}
This should work, if not, try:
top: 50%; margin-top: - half.the.height.of.the.font.size .
By the way, "http://localhost/test/" this is wrong on so many levels. Use "index.php / index.html" instead.

To your h1 element add the following: style="padding-top:20px;" resulting:
<h1 class="site-title" style="padding-top:20px;>
Add more padding pixels as needed.

Related

HTML5 - img alignment centre not working

I am trying to align my profile picture in the middle of my webpage yet cannot seem to get it working. I have attempted both align="middle" & float methods yet it still refuses to leave the left hand side.
The code I have attempted to use (HTML5) is
<header>
<h1> Luke Johnson Portfolio</h1>
<div class="image-cropper" style="text-align">
<img src="lukeprofile.jpg" align="center" alt="Luke Profile Pic" class="rounded" />
</div>
</header>
Any help would be appreciated, thank you.
align attribute for the image is aligning it relativelly to the text or other images on webpage (for more info: https://www.w3schools.com/tags/att_img_align.asp).
And notice (info from w3schools):
"The align attribute of is not supported in HTML5. Use CSS instead."
So align attribute will not do the trick in your case, you can center image using:
img {
display: block;
margin: 0 auto;
}
instead. Here is an example:
img {
display: block;
margin: 0 auto;
}
<header>
<h1> Luke Johnson Portfolio</h1>
<div class="image-cropper" style="text-align">
<img src="https://pbs.twimg.com/profile_images/378800000017423279/1a6d6f295da9f97bb576ff486ed81389_400x400.png" alt="Luke Profile Pic" class="rounded" />
</div>
</header>
You Have misused the inline style tag, proper use would be as follows:
<div class="image-cropper" style="text-align: center">
<img src="lukeprofile.jpg" alt="Luke Profile Pic" class="rounded" />
</div>
I could help you more if I had the URL to the website.
Compatibility Notes
The align attribute of img tag is not supported in HTML5. Use CSS instead.
For the image to align middle, top, or bottom use the CSS property.

CSS - Top to Logo = 0px

I am working for a few hours right now on the CSS changes on one of my customer´s website. My customer wants the header image (logo) to appear at the top of the screen without a space between the top and the logo.
<header id="header">
<div class="avada-row" style="padding-top:30px;padding-bottom:0px; overflow:hidden;">
<div class="logo" data-margin-right="0px" data-margin-left="0px" data-margin-top="3px" data-margin-bottom="3px" style="margin-right:0px;margin-top:3px;margin-left:0px;margin-bottom:3px;">
<a href="#">
<img src="http://placehold.it/1000x100" alt="Heider Matriken – Falk Fengler" class="normal_logo">
</a>
</div>
</div>
</header>
I do not find the correct .css settings to solve this problem and to move the header image to the top. I already tried:
margin-top: -30px;
...but that is not working. It is a Wordpress Site, I am using Avada and the only thing I need is the header image at the top.
Would be cool if someone can help me out.
The problem is that your generated code contains padding-top:30px in:
<div class="avada-row" style="padding-top:30px;padding-bottom:0px; overflow:hidden;">
I understand that you cannot change this, and a simple CSS won't help you because the inline style is more important.
Use this trick to override the inline style using an external CSS:
.avada-row {
padding-top:0px !important;
}
either use this HTML
<header id="header">
<div style="padding-bottom:0px; overflow:hidden;" class="avada-row">
<div style="margin-right:0px;margin-left:0px;margin-bottom:3px;" class="logo" data-margin-right="0px" data-margin-left="0px" data-margin-bottom="3px">
<a href="#">
<img src="http://placehold.it/1000x100" alt="Heider Matriken – Falk Fengler" class="normal_logo">
</a>
</div>
</div>
</header>
or use this css
.avada-row {
padding-top: 0px !important;
}
.avada-row .logo {
margin: 0px !important;
}
tha class ".avada-row" is top padded, so you need to remove that padding:
.avada-row { padding-top: 0px !important; }

Make a div class for a img button

sorry if my title is a bit misleading but didn't know how to word/phrase it.
Currently, I have href'd images that go to various social networks. For example, by clicking on the facebook icon, it goes to my facebook. It is layed out like this:
<div class="row">
<center>
<div class="span2">
<img src="assets/img/icons/fbwhitebig.png" width="64" height="64"></img>
</div>
Is there a way to make this a "class" if that makes sense? So I can get the same effect by doing something like
<div class="span2">
</div>
and then in the CSS have this:
.facebookbutton {
width:64px;
height64px;
background: url(assets/img/snicons/fbwhitebig.png) no-repeat;
}
Sorry if this is a ridiculous post, I'm still learning haha!
Thanks :)
If you fix the typos (the missing opening quote after href= and missing colon after height), and add display: block the code you wrote works fine.
http://jsfiddle.net/oudL3ovz/1/
.facebookbutton {
width:64px;
height:64px;
background: url("http://s10.postimg.org/l40wid7mt/facebook_logo_64px.png") no-repeat;
display:block;
}
HTML
<div class="span2">
</div>
You may want to use display: inline-block;.

HTML/CSS misplaced header and missing images

I am having a little issue with a few headers being misplaced on the site I am working on and also an image that's supposed to show below each one of them is not showing.
You can see what I am talking about here:
Here's my HTML:
<!-- main-content -->
<div id="main-content">
<h1> Check out all our DEADicated sites: </h1>
<div class="sites">
<a href="http://www.thedeadicated.tumblr.com" target="_blank">
<img src="images/sites/tumblr.jpg" width="215" height="150" alt="Tumblr"/></a>
<p> Tumblr </p>
</div>
<div class="sites">
<a href="http://www.twitter.com/thedeadicated" target="_blank">
<img src="images/sites/twitter.jpg" width="215" height="150" alt="Twitter"/></a>
<p> Twitter </p>
</div>
<div class="sites">
<a href="http://www.youtube.com/user/DeadicatedRepository" target="_blank">
<img src="images/sites/youtube.jpg" width="215" height="150" alt="YouTube"/></a>
<p> YouTube </p>
</div>
<h2> To join TheDEADicated, click HERE! </h2>
<h2> To get your own DEADicated wristband, click HERE! </h2>
<h2> Can't get enough of Dead Sara?! Dead Sara Addiction Treatment Facility </h2>
<h2> Email us at: TheDEADicated#TheDEADicated.org </h2>
</div> <!-- close main-content -->
And this is the CSS code for the main-content & headers:
#main-content{
padding: 50px 50px 30px 50px;
background: #fff url('images/shadow.png') repeat-x;
min-height: 800px;
}
#main-content h2{
margin-top: 30px;
padding-bottom: 8px;
background: url('images/ink-line.png') no-repeat left bottom;
clear: both;
}
Any kind of help would be greatly appreciated. Thanks!
I can't tell exactly what is happening here, but taking a guess at how the elements above the headers look, I'd say you have a float issue. Try removing the "clear: both" from the h2 and add "float: left; width: 100%;" in its place.
The comments are correct that you're not really clear about what you should see but don't, but if I interpret you correctly you mean that "my headings aren't showing the margin and padding or background images that I expect".
I'm going to take another leap of faith to offer up a possible solution. I see
</div> <!-- close main-content -->
at the end of your html but I don't see a <div id="main-content> anywhere. It should either be at the top of the page, or before the block of h2s, depending on what you desire the outcome to be. Try adding <div id="main-content> before the first h2 tag and see if that solves it for you.
Edit: I see your problem more clearly now, but this is tricky to resolve without the live url to inspect. It could be a float issue, but the clear should resolve that, unless it's being overridden, so you could change to:
clear: both !important;
It could be a display problem, so try adding:
h2 { display: block !important; }
If there's a live url that would certainly help. Final thought is to make sure every tag in the entire page html is properly opened and closed. Redundant or unclosed divs can cause issues like this in my experience.

How to align an image of any size from the centre, rather than the top/bottom/sides, using css

I'd like to be able to position an image (blue) so that what ever size it is, it is always centered relative to the baseline of the div behind (red, not the containing div). The div behind will always be the same size/position.
Preferably this would be using css only as I'm using drupal and I don't know much about editing beyond the tpl files.
Thanks!
EDIT: Here's the layout http://pastebin.com/SisQHM4y
Hi you can do this pure css as like this
css
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 500px;
height: 400px;
background:green;
}
HTML
<div class="wraptocenter"><img src="//?" alt="images" /></div>
Live demo http://jsfiddle.net/rohitazad/tvrMp/
More information about this http://www.brunildo.org/test/img_center.html
​
Perhaps something like this:
<style>
#blue { margin-left:auto;margin-right:auto; }
</style>
<div id="red">
<div id="blue">
<img src="?" id="myImg" />
</div>
</div>
EDIT
I see, so you wish to center the x-axis horizontally, not vertically. And that link is a little messy. Perhaps you could try to
<style>
.user-picture { margin-top: auto; margin-bottom: auto; }
</style>
<div class="content">
<div class="profile" typeof="sioc:UserAccount" about="/users/diver1">
<div class="user-picture">
<a href="/users/diver1" title="View user profile." class="active">
<img typeof="foaf:Image" src="http://waterworksworldwide.com/sites/default/files/pictures/picture-126-1333572014.gif" alt="Diver1's picture" title="Diver1's picture" />
</a>
</div>
</div>
I am still having a little bit of a hard time seeing where the overlap between areas is as suggested by the red and blue in the question. If there is no overlap with my suggestion then please let me know and perhaps we can try to use some variations with position: absolute;