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
Related
I would like to push the text down to be centered in the green part, but I cannot seem to figure it out. I've been messing around with it for some time, but I'm still a novice. Any help would be appreciated. I've added the HTML and CSS below.
.beerimgcontainer {
width: 300px;
height: 400px;
margin-bottom: 20px;
margin-right: 20px;
display: inline-block;
position: relative;
text-align: center;
margin-right: 10px;
overflow: hidden;
max-height: 400px;
}
.beerimgcontainer a {
text-decoration: none;
}
.beerimgcontainer span {
text-decoration: none;
font-size: 23px;
font-family: champagne;
color: black;
}
.beerimgcontainer:hover {
background: #165a11;
color: white;
box-shadow: 0px 0px 0px 2px #3c8837;
box-sizing: border-box;
}
.beerimgcontainer:hover span {
color: white;
}
<div class="beerimgcontainer">
<a href="mug.html">
<img src="images/text2.png" class="positionimg" alt="Mug">
<span>Mug</span>
</a>
</div>
img and span are inline elements. They are initially next to each other. Since your image covers the whole width (that's available; 300px on parent div), it pushes the span down. Margin on the span wouldn't work.
What you should do is to set display: block on the span and then set a margin:
.beerimgcontainer span {
display: block;
margin-top: 15px;
}
JSFiddle
HTML and CSS below. Div id "black" seems to be pushing a space between itself and the "brown" div above it. When I remove the "black" div, the excess space disappears. I have all margins and padding at zero. Can't sort out what's causing this. ANy suggestions are appreciated.
html {
padding: 0;
margin: 0;
}
body {
font-size: 62.5%;
margin: 0;
padding: 0;
text-align: center;
font-family: raleway;
font-style: normal;
font-weight: 400;
color: #000000;
}
#greyWrapper {
background-color: #303030;
margin: 0;
padding: 0;
width: 100%;
color: #FFFFFF;
height: auto;
}
#Brown {
margin: 0px;
padding: 0px;
width: 100%;
height: auto;
background-color: #644015;
}
#Brown ul {
text-decoration: none;
list-style-type: none;
text-transform: uppercase;
font-size: 0.7em;
margin: 0;
padding: 0;
}
#Brown ul li {
display: inline-block;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}
#black {
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
width: 100%;
background-color: #000000;
height: auto;
}
<div id="greyWrapper">
<div id="Brown">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolios</li>
<li>Team</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<div id="black">
<p>Grab Your Copy Of</p>
<p>The Premium Quality PSD Template</p>
<p>For free Download</p>
</div>
</div>
Your ps have a margin and this margin extends beyond the limits of the #black div and "push against" the #brown div. There's a good explanation in Why does this CSS margin-top style not work?
You can either:
Put a border around #black. The border will force the div to expand so that it contains all of the margins of the children.
#black {
border: 1px solid black;
}
or
Remove the top margin of the topmost paragraph
#black > p:first-child {
margin-top: 0px;
}
It's the automatic margin-before on the <p> tag that is applied by most browsers. Set:
#black p {
margin: 0
}
and you'll see it go away.
I am trying to center the flame and the heading to the middle of the white box.
HTML
<div class="contentheading">
<div class="floatmiddle">
<img src="images/flame45x45.png">
<h3>Receive only the email you want.</h3>
</div>
</div>
CSS
.contentheading {
position: relative;
height: 45px;
margin-top: 30px;
width: 636px; //this is the full width of the white box//
}
.floatmiddle {
margin: 0 auto;
height: 45px;
display: block;
}
.contentheading img {
position: absolute;
}
.floatmiddle > h3 {
font-family: "signika";
font-size: 22px;
font-weight: 500;
color: #37434f;
height: 45px;
line-height: 45px;
margin: 0 0 0 60px;
text-align: center;
vertical-align: top;
position: absolute;
}
I need the .float middle to inherit the width of the two enclosing elements - the image (45 x 45px) and the text (which will be different length for each chapter i have) so i need one class/formula so i can just go through and pop in the headings and no matter the headings length the heading and the fireball will be centered within the white div.
You can use display: inline-block; to center this div.
http://jsfiddle.net/d8gyd9gu/
HTML
<div class="contentheading">
<div class="floatmiddle">
<img src="http://www.neatimage.com/im/lin_logo.gif" alt="">
<h3>Receive only the email you want.</h3>
</div>
</div>
CSS
.contentheading {
height: 45px;
margin-top: 30px;
width: 636px;
text-align: center;
}
.floatmiddle {
height: 45px;
display: inline-block;
}
.contentheading img {
float: left;
margin: 20px 10px 0px 0px;
}
.floatmiddle > h3 {
font-family: "signika";
font-size: 22px;
font-weight: 500;
color: #37434f;
height: 45px;
line-height: 45px;
padding: 0px 0px 0px 60px;
}
If you can use flexbox you can do it really simply like this:
.contentheading {
border: 1px dashed #ff0000;
margin-top: 30px;
width: 636px;
display: flex;
justify-content: center;
align-items: center;
}
.contentheading h3 {
font-family: "signika";
font-size: 22px;
font-weight: 500;
color: #37434f;
}
<div class="contentheading">
<img src="images/flame45x45.png" width="45" height="45" />
<h3>Receive only the email you want.</h3>
</div>
If you need to support older browsers make sure you add the prefixed versions.
You can definitely pare your markup and styling down. If you only need to center the text and the image in a div of a fixed width, you can simply use text-align: center on the parent container, and display: inline-block on the two elements within. The following markup and styling is about as little as you need:
HTML
<div class="content-heading">
<img src="images/flame45x45.png">
<h3>Receive only the email you want.</h3>
</div>
CSS
.content-heading {
background-color: #ccc;
height: 45px;
margin: 0 auto; /** Centers on the page **/
text-align: center;
width: 636px;
}
h3 {
display: inline-block;
line-height: 45px; /** Only really works if you can rely on only displaying one line of text **/
margin: 0;
overflow: hidden; /** Need this to keep inline-block elements from staggering **/
padding: 0;
}
img {
background-color: black; /** Purely so we can see this **/
display: inline-block;
height: 45px;
width: 45px;
}
That's really all you need.
Codepen sketch
I want to delete underline. I have already put text-decoration: none;. However it doesn't work. Here is a DEMO.
HTML
<a href="./index.php?sign_in=1">
<div id="signup_button">
Sign up
</div>
</a>
CSS
#signup_button {
position: relative;
max-width: 206px;
min-height: 20px;
max-height: 40px;
margin: auto;
margin-top: 10px;
padding: 10px 10px 10px 10px;
background-color: #0096cc;
text-align: center;
color:#fff;
font: 35px/1 "Impact";
text-decoration: none;
}
Set
a {
text-decoration:none;
}
before your style. The underline is coming from there.
text-decoration belongs to the "a" tag, but you can also get rid of the div.
If you set the display:block on the a, you have the same effect
Sign up
now looks exactly the same as
<a href="./index.php?sign_in=1">
<div class="signup_button">
Sign up
</div>
</a>
using
.signup_button {
position: relative;
max-width: 206px;
min-height: 20px;
max-height: 40px;
margin: auto;
margin-top: 10px;
padding: 10px 10px 10px 10px;
background-color: #0096cc;
text-align: center;
color:#fff;
font: 35px/1 "Impact";
display:block;
}
a {
text-decoration: none;
}
.signup_button {
position: relative;
max-width: 206px;
min-height: 20px;
max-height: 40px;
margin: auto;
margin-top: 10px;
padding: 10px 10px 10px 10px;
background-color: #0096cc;
text-align: center;
color: #fff;
font: 35px/1"Impact";
display: block;
}
a {
text-decoration: none;
}
Sign up
<p><hr /></p>
<a href="./index.php?sign_in=1">
<div class="signup_button">
Sign up
</div>
</a>
You need to set text-decoration: none on the a element not the div inside it.
Also, it's not good practice to put block level elements like divs inside of inline elements like anchors. You should just apply all the #signup_button styles directly to the a and get rid of the div.
You should not place a DIV inside of an A tag. I did some changes which will make it work.
HTML
<div id="signup_button_container">
<a id="signup_button" href="./index.php?sign_in=1">
Sign up
</a>
</div>
CSS
#signup_button_container {
text-align: center;
}
#signup_button {
position: relative;
display: inline-block;
max-width: 206px;
min-height: 20px;
max-height: 40px;
margin: auto;
margin-top: 10px;
padding: 10px 30px;
background-color: #0096cc;
color:#fff;
font: 35px/1 "Impact";
text-decoration: none;
}
http://jsfiddle.net/96sf8/4/
I'm still new in CSS, sorry for the long post. I have the following code
<style type="text/css">
.btn {
float: left;
clear: both;
background: url(images/btn_left.png) no-repeat;
padding: 0 0 0 10px;
margin: 5px 0;
}
.btn a{
float: left;
height: 40px;
background: url(images/btn_stretch.png) repeat-x left top;
line-height: 40px;
padding: 0 10px;
color: #fff;
font-size: 1em;
text-decoration: none;
}
.btn span {
background: url(images/btn_right.png) no-repeat;
float: left;
width: 10px;
height: 40px;
}
.btn_addtocart { background-color: green; }
.btn_checkout { background-color: red; }
</style>
</head>
<body>
<div class="btn btn_addtocart">Add to Cart<span></span></div>
<div class="btn btn_checkout">Check Out<span></span></div>
</body>
</html>
I'm trying to center each button in the middle of the page (horizontal alignment), how can I accomplish that? I tried playing with the padding and the margin but it messes my background image.
Here is jsFiddle
try margin auto, text-align center, fixed width for middle part..
oh ..and get rid of the float, and dont forget the ';'
edit code..
.btn {
clear: both;
background: url(images/btn_left.png) no-repeat;
padding: 0 0 0 10px;
display: block;
margin: 5px auto;
text-align: center;
width: 120px;
}
.btn a {
height: 40px;
background: url(images/btn_stretch.png) repeat-x left top;
line-height: 40px;
padding: 0 10px;
color: #fff;
font-size: 1em;
text-decoration: none;
}
.btn span {
background: url(images/btn_right.png) no-repeat;
width: 10px;
height: 40px;
}
.btn_addtocart { background-color: green; }
.btn_checkout { background-color: red; }
You can text-align:center the links inside the divs (which are block-level elements) to center them inside their containers but you will have to make a couple of tweaks. Try this:
.btn {
clear: both;
background: url(images/btn_left.png) no-repeat;
padding: 0 0 0 10px;
margin: 5px 0;
text-align:center;
}
.btn a {
height: 40px;
background: url(images/btn_stretch.png) repeat-x left top;
line-height: 40px;
padding: 10px;
color: #fff;
font-size: 1em;
text-decoration: none;
}
.btn span {
background: url(images/btn_right.png) no-repeat;
float: left;
width: 10px;
height: 40px;
display: block;
}
.btn_addtocart a { background-color: green; }
.btn_checkout a { background-color: red; }
Demo
http://jsfiddle.net/andresilich/UtXYY/1/
A couple things you can do
.btn {
display: block
margin-left: auto;
margin-right: auto;
}
By default a button is an inline element, so margins will no work. Setting display to block, will make it act like a
div.btnParent {
text-align:center
}
The other method is to have the button's containing element text-align center. The may not necessarily always work, as there may be more content in this container that you do not want to be centered.
I can't fully see from your code snippet but to centre somthing in the middle of its parent, you need to set its margin to auto.
margin: auto
and its width
width: 100px:
EDIT:
Also remove any float: styles you have on the element.