I'm working on this page, and as you can see on the second "entry", there is a gap between the H2 and the image, but not the others.
Webpage: http://sim.rgmgleague.com/cap/trades.php
I can't seem to figure out why.
Add float:right to the class .teambanner and remove the bottom margin
.teambanner {
/* margin-bottom: 70px; */
float: right;
}
add css
.teambanner{
display: flex;
margin: 0;
justify-content: flex-end;
}
OR
.teambanner{
float: right;
margin: 0;
}
Add this css
.team_1_h2 {
margin-right: 10px;
float: left;
line-height: 0px;
}
.team_2_h2 {
margin-right: 10px;
float: left;
line-height: 0px;
}
.team_2_logo {
/* float: right; comment this float out!*/
height: 40px;
}
Related
I have this issue where my float: right element is indeed floated right but it's above other elements and sometimes it even goes offscreen
My CSS:
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
header {
background-color: black;
}
#header-limiter * {
display: inline-block;
color: white;
}
header span {
font-weight: 700;
font-size: 18px;
}
#header-limiter {
padding: 10px;
width: 100%;
display: block;
}
#logoText {
font-size: 16px;
}
#logout-btn {
float: right;
}
Jsfiddle: http://jsfiddle.net/wLftd9ph/3/
Your logout text doesn't have the same default margin as the p text (logoText).
Simply add margin: 1em 0 to #logout-btn.
http://jsfiddle.net/wLftd9ph/5/
A quick way to fix alignment would be to use display: inline-block with vertical-align: middle instead of floats as you can see in this fiddle http://jsfiddle.net/exmubg5m/
#logout-btn {
display: inline-block;
vertical-align: middle;
}
textarea {
display: inline-block;
vertical-align: middle;
}
Add this to logo text.
float: left;
z-index: 0;
Also remove the <p> tag from the Logo 'text' as this adds a new paragraph.
<span>LogoText</span>
I am trying to move an image. I Want it to be alligned with the title "Experience". Here is my code
html code
<header>
<h1>Experience</h1>
<div class="logo">
<img src="./img/exp.png">
</div>
</header>
and the css code
.logo{
width: 100px;
}
.logo img{
float: left;
margin-left: 0px 0px 0px 30px;
width: 150px;
height: 38px;
}
Just tweak the CSS a little:
.logo{
width: 100px;
display: inline-flex;
}
.logo img{
margin: auto 5px;
float: left;
width: 150px;
height: 38px;
}
Does this work?
This solution worked for me, but I have no idea for you as you didn't put your full code...
Try adding float:left to .logo and setting display: inline-block on your h1, like so:
*{
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, Sans-serif;
font-size: 34px
}
header{
background-image: url(../img/bar.png);
background-color: #00B9ED;
height: 75px;
border-bottom: 0px;
padding-left: auto;
padding-right: auto;
width: 100%;
}
.logo{
width: 100px;
float: left;
//display: inline-flex;
}
.logo img{
margin: auto 5px;
float: left;
width: 150px;
height: 38px;
}
h1 {
display: inline-block;
}
How about making margin-left: 0%; and margin-right. Depends where you want to move it.
You used shorthand for margin-left. We use shorthand for margin only. You did margin-left: top right bottom left instead. I don't think the program reads that correctly.
I have a header with a div inside of it, for some reason there is more space under the div then above. I tried setting all the padding to 0 in hope to see which one was causing it but it seems to not be a padding at all.
HTML
<header>
<div class="logo">
<div class="centrDivInDiv">
<h1>Welcome to Planet Earth</h1>
<p>The best planet after Pluto.</p>
</div>
</div>
</header>
CSS
body {
margin: 0px;
}
h1 {
margin-bottom: 0px;
}
header {
background-color: #E74C3C;
padding: 10px;
}
header p {
line-height: 0%;
}
.logo {
line-height: 80%;
padding: 10px 20px 10px 20px;
margin: 0px;
background-color: #2C3E50;
display: inline-block;
}
.logo p {
margin-top: 24px;
}
.centrDivInDiv {
display: table-cell;
vertical-align: middle;
margin: 0;
}
JsFiddle
Add vertical-align:middle to your .logo div (and you can remove it from .centrDivInDiv):
.logo {
line-height: 80%;
padding: 10px 20px 10px 20px;
margin: 0px;
background-color: #2C3E50;
display: inline-block;
vertical-align: middle;
}
jsFiddle example
Your problem is caused by the display: inline-block of your CSS. If you remove that or change it for display: blockit will be fine. You should also set your width: 50%
All of that in your .logo
check the fiddle
jsFiddle
The problem exists because you're using display: inline-block; in .logo
The best way to solve this problem is to set font-size to 0 in header so it will be like this:
header {
background-color: #E74C3C;
padding: 10px;
font-size: 0;
}
Also you should set font-size in .logo so it will be like this
.logo {
line-height: 80%;
padding: 10px 20px 10px 20px;
margin: 0px;
background-color: #2C3E50;
display: inline-block;
font-size: 16px;
}
Maybe this link will help you, it has more details
Fighting the Space Between Inline Block Elements | CSS-Tricks
I've tried everything, but it's not centering the list on the page. Here's the css:
#lowermenu2 {
width: 100%;
}
#lowermenu2 ul {
list-style-type: none;
display: block;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
width: 100%;
}
#lowermenu2 a {
width: 100%;
text-align: center;
display: block;
text-decoration: none;
color: #003E79;
font-family: "Adobe Garamond Pro";
font-weight: bolder;
font-size: 1.3em;
height: 44px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
padding-top: 7px;
font-style: italic;
line-height: 90%;
}
#lowermenu2 li {
float: left;
width: 30%;
max-width: 230px;
margin-right: auto;
margin-left: auto;
padding-left: 10px;
}
You can see the page at http://granthoneymoon.com/temp2.html (it's the lower menu right under the blank ad, not the top nav menu)
UPDATE: I got rid of the float:left and changed block to inline:block. I also changed lowermenu2 to position:relative and made the left and right margins "auto" and it still isn't centered. (it's the LOWER menu I'm talking about not the mainnav)
The reason is because of the "float: left;" on li tag. Float is normally used to position the content to left or right. Hence you wouldn't be able to center it. So the property you are looking for is "display: inline-block;"
#lowermenu2 ul {
list-style-type: none;
display: block;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
width: 100%;
text-align: center;
}
#lowermenu2 li {
display: inline-block;
padding-left: 10px;
width: 25%;
}
Add text-align: center to your UL element and remove float:left from your list elements and set them to display: inline-block.
#lowermenu2 ul {
/*your existing styles*/
text-align:center;
}
#lowermenu2 ul li{
/*your existing styles minus float left*/
display:inline-block;
}
Here is result:
If you are trying to center the actual "nav bar" and not just the nav "links"
then you need to edit 2 things:
BODY
body {
position:relative;
margin:0 auto;
width:1000px; <!-- Or Whatever you want it be -->
}
At present your body is set to 100%, that is fine, now just add the position and margin attributes as I have above...this will center your page.
Nav Bar
Now for the Nav Bar
#mainnav{
position:relative;
margin:0 auto;
width: 100%;
}
This will cause your nav bar to center itself in the middle of the page
At my wordpress theme at http://www.iam-us.nl/over-i-am-us I can't align my image to the left.
I have added those WordPress Generated Classes to the css
/******************************************
* Align box
******************************************/
img.centered, .aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}
img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}
.alignright {
float: right;
}
.alignleft {
float: left;
}
But somehow the css is not read well. When I open firebug there is no class added to the picture at all.
I checked your whole style.css and found that you have a bad comment here:
/** Coin Slider HACK by aSeptik * 14/06/2011 16.37.38 * fix navigation button z-index */
#slider {
margin: 0 0 10px 0;
padding: 0;
width: 950px;
height: 350px;
/*background-image: url('http://www.iam-us.nl/wp-content/themes/iamus/images/De-mens-op-de-juiste-plek.png');
}*/
you commented out the last curly brace!! }
so change it to this:
height: 350px;
/*background-image: url('http://www.iam-us.nl/wp-content/themes/iamus/images/De-mens-op-de-juiste-plek.png');*/
}
and that's it