My Codepen: http://codepen.io/leongaban/pen/aFJfs
It has something to do with the .email-tip-icon and the tip-message because when I commented them out the spacing goes away. Each one seems to add more spacing... However I have the both the margin and padding set to 0
The extra spacing is between the email input field and the first name input field
Try making them position absolute and update accordingly.
this should work:
#register-form .email-tip-icon, #register-form .password-tip-icon {
position: absolute;
width: 30px;
padding: 0;
margin: 0;
left: 340px;
z-index: 2;
clear: both;
background: red;
top: 20px;
}
#register-form .tip-message {
position: absolute;
padding: 0;
margin: 0;
left: 374px;
width: auto;
height: auto;
text-indent: 10px;
background: url(http://leongaban.com/_projects/whoat/_HTML/img/gray-tip-triangle.png) no-repeat;
z-index: 2;
top: 25px;
}
I have no idea where this comes from, but here is an easy fix:
#register-email{
margin-bottom:-10px !important;
}
#register-firstname{
margin-top:-40px !important
}
http://codepen.io/seraphzz/pen/AyvgG
Related
After searching to center my div all I could get was margin: 0 auto; together with an assigned width, but still it not working.
My problem is simply centering a div. I have no idea why margin: 0 auto; isn't working.
Here is the layout of my CSS/html:
CSS
.countdown-box {
position: absolute;
width: 80px;
margin: 0 auto;
height: 130px;
/*left: 50%;*/
background: #008040;
border-radius: 4px;
z-index: 2;
}
<div class="countdown-box"></div>
It's because you are using position: absolute;. Change it to position: relative; and it will work.
The margin: auto works with elements with relative position. To center with absolute position should be like the following CSS:
.countdown-box {
position: absolute;
background: #008040;
border-radius: 4px;
height: 130px;
width: 80px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
<div class="countdown-box"></div>
Actually margin auto will allocate the available space, which means it doesn't has any relation with it is relative or not.
<div class="centerize"></div>
.centerize {
width: 200px;
height: 200px;
margin: 0 auto;
background: yellow;
}
I'm trying to get my login form to be on top of the div that I'm using as a menu bar, but the div is in front and it's blocking the login form. This is the code I have right now, does anyone know how to fix this?:
#login-form {
top: 0;
position: absolute;
}
#topbar {
height: 40px;
width: 100%;
background-color: #336680;
box-shadow: 0.1em 0.1em 0.1em;
position: absolute;
top: 0;
left: 0;
padding: 0;
}
In your HTML, put the #login-form element after the #topbar element. Logically, that's where it should be (which is useful for screen readers and text-only browsers)
Alternatively, use z-index in your CSS - a higher number gets put on top.
A good solution to this would be to use z-index on #topbar and #login-form in your CSS. Elements with a higher z-index will be displayed on top of those with lower ones. This should work:
#login-form {
z-index: 2;
top: 0;
position: absolute;
}
#topbar {
z-index: 1;
height: 40px;
width: 100%;
background-color: #336680;
box-shadow: 0.1em 0.1em 0.1em;
position: absolute;
top: 0;
left: 0;
padding: 0;
}
I have already looked here (How to show text on image when hovering?) to find a solution to this problem but it doesnt 100% work... Because the paragraph is located below the image part of the image is not covered when you hover over it. I want the whole image covered by the text when you hover over the image.
(Look at this: http://jsfiddle.net/rMhGE/ or below.)
The HTML
<body>
<div class="cube1">
<a href="http://google.com"><img src="http://us.123rf.com/400wm/400/400/busja/busja1209/busja120900010/15099001-detailed-vector-image-of-symbol-of-london--best-known-british-double-decker-bus.jpg">
<p class="contact">Random Text Here</p></a>
</div>
</body>
The CSS
.cube1 {
position: relative;
width: 400px;
height: 400px;
float: left;
}
.contact {
overflow: hidden;
position: absolute;
width: 400px;
height: 386px;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(255,255,255,0.95);
color: #aaa;
visibility: hidden;
opacity: 0;
}
.cube1:hover .contact {
visibility: visible;
opacity: 1;
}
Any help is appreciated. Thank you.
Remove the height from contact. as well as the margin. You also don't need the width value if you're stretching it with the absolute 0 0 0 0 method.
.contact {
overflow: hidden;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(255,255,255,0.95);
color: #aaa;
visibility: hidden;
opacity: 0;
margin: 0;
}
change the p {margin:0px} of the p element
or give the class
.contact {
overflow: hidden;
position: absolute;
width: 400px;
height: 395px;//change height also to cover it completly
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(255,255,255,0.95);
color: #aaa;
visibility: hidden;
opacity: 0;
margin:0px
}
The image has the text over it, I am not sure what you are trying to do here. What do you mean by "covering the image"?
You need to set margin on the "p" element to 0 and the "height" to 400:
margin:0;
height:400px;
Updated jsFiddle: http://jsfiddle.net/rMhGE/5/
Demo
Remove the height from .contact and apply top: -15px; bottom: -15px;
Alternatively, the best way, set margin: 0; removing height.
I have to centralize an image in both axis and then add a linkable area to that image's top left area. This works great for webkit and ff but ie fails. My html code is this:
<body>
<div class="content">
<img src="images/main_image.jpg" />
Logo
</div>
</body>
and my css code this:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
}
div.content {
position: relative;
width: 1001px;
height: 626px;
top: 50%;
margin: 0 auto;
padding: 0;
}
div.content img {
margin: 0;
padding: 0;
display: block;
position: relative;
top: -50%;
}
div.content a {
width: 14%;
height: 9%;
display: inline-block;
position: absolute;
top: -42%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
text-indent: -9999px;
}
this doesn't work for ie because i use an a tag displayed as inline-block positioned accordingly. Our friend ie doesn't show the linkable part in the screen at all because the text-indent. Can someone help a little bit? Thanks. This demo shall help you more i think.
Take a look at this demo (or results only here)
HTML is not changed. I assume that image has the same height/width as content div
CSS:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
}
div.content {
position: relative;
padding: 0;
border:solid 1px blue;
width: 1001px;
height: 626px;
/*below will center div on screen */
top: 50%;
margin: -313px auto 0;
}
div.content img {
margin: 0;
padding: 0;
display: block;
border:solid 1px white;
/*top:-50% removed. Assuming that image has the same height/width as content div*/
}
div.content a {
width: 14%;
height: 9%;
position: absolute;
/* top: -something changed. Remember that absolutely positioned div is always positioned from closest parent relative div*/
top: 10%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
text-indent: -9999px;
border:solid 1px green;
}
It looks a like you're creating a container, moving it to the bottom of the screen and then moving the image outside of it to the top-left corner of the screen. This last step is exactly what will fail in many cases. Child-elements usually will be hidden or cutted away when leaving their parent container. IE is more restrictive but correct in this case.
You can achieve your goal easier when you'll place the image outside the container. Keep in mind that body is a container by itself that is allways 100% wide and high (and cannot be changed to be 50% or whatsoever).
Here's the result on js-fiddle
The Html:
<body>
this is the body
<img class="my_image" src="images/main_image.jpg" />
<div class="content">
This is the container
<a href="#" >Logo</a>
</div>
</body>
CSS:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
color:silver;
}
div.content {
color:black;
background-color: silver;
position: relative;
width: 1001px;
height: 626px;
top: 50%;
margin: 0 auto;
padding: 0;
}
.my_image {
width:160px;
height:60px;
border:1px solid red;
margin: 0;
padding: 0;
display: block;
position: absolute;
top: 0;
left:0;
}
div.content a {
color:red;
font-size:14px;
display: inline-block;
position: absolute;
top: 20%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
}
In general it's the best to avoid negative values. They're misinterpreted in many browsers and produce problems.
UPDATED PROVIDING CONTEXT FOR THE LAYOUT
I have a relatively simple structure for my page. The page is composed of two div's both absolutely positioned. One is centered within the other.
<div id="protocol_index_body_wrapper">
<div id="protocol_index_body">
</div>
</div>
Which has the corresponding CSS:
#protocol_index_body_wrapper {
background: url("/images/stripe.png") repeat scroll 0 0 transparent;
position: absolute;
top: 120px;
left: 0px;
right: 0px;
bottom: 10px;
}
#protocol_index_body {
width: 960px;
margin: 0 auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
The expected behavior is seen in the image above. This behavior is present in IE8, Firefox, and Chrome. However, in IE7 the div which should be centered is flush against the left side. Any ideas?
Try this:
#protocol_index_body {
width: 50px;
margin: 0 auto 0 -25px;
position: absolute;
top: 0;
left: 50%;
right: 0;
bottom: 0;
background-color: red;
}
Or ...
#protocol_index_body {
width: 50px;
margin: 0 auto 0 50%;
position: absolute;
top: 0;
left: -25px;
right: 0;
bottom: 0;
background-color: red;
}
Unless you need the parent div to have a fluid width (which would be a little silly when you're setting the child div's width), why not just set the parent div's width and add margin:0 auto?
Okay I played around with it and this works identical in FF, Opera and IE7:
#protocol_index_body_wrapper {
background-color:black;
padding: 0 0 20px 0;
position: absolute;
top: 120px;
left: 0px;
right: 0px;
bottom: 10px;
text-align: center;
width: 100%;
height: 100%;
}
#protocol_index_body {
width: 50px;
margin: 0 auto;
background-color: red;
height: 100%;
}
autoCenterAlign = function() {
var bodyWidth = $("body").innerWidth();
var protocolWidth = $("#protocol_index_body").innerWidth();
if(protocolWidth < bodyWidth) {
$("#protocol_index_body").css("left",((bodyWidth-protocolWidth)/2)+"px");
}
}
window.onload = autoCenterAlign;
window.onresize = autoCenterAlign;
jQuery(window).load(function () {
autoCenterAlign()
});
text-align:center to the wrapper, or <div align=center> (ugly, I know, but works)
or with JS:
document.getElementById("protocol_index_body_wrapper").style.marginRight = (document.body.clientWidth - 50)/2_+"px"
works only on IE6+.