I have this code JSFiddle :
HTML
<div id="logo"></div>
<div id="menu"></div>
CSS
#logo {
width: 400px;
height: 100px;
margin: auto;
background-color: beige;
}
#menu {
width: 200px;
height: 100px;
margin: auto;
background-color: green;
}
#menu:hover {
border-top: 15px #f39539 solid !important;
margin-top: -15px;
}
It works very good but when i was playing with CSS values i found something that i didn't understand.
My question is why when i put value lower than -15px in margin-top, my menu div don't go up when i hover over it ?
why margin-top: -30px; is the same that margin-top: -15px; ?
P.S : 15px is also the value of my border-top-width.
UPDATE
and what is weird is when i drop border-top: 15px #f39539 solid !important; when i hover, My DIV go up without problem even when i put margin-top: -50px; ! JSFiddle
#menu:hover {
/* border-top: 15px #f39539 solid !important; */
margin-top: -50px;
}
I think if I understand what you are asking is....
What you are seeing is margin collapse.
It's when you have two adjoining margins, the largest wins - the smallest is lost.
More details here: http://reference.sitepoint.com/css/collapsingmargins
Related
I am trying to make an image circular but it does not look to be a perfect circle after-all, here is a snippet of my code and a link showing the result
#aboutme{
padding: 150px;
}
#aboutme img{
border-radius: 50%;
border: 0;
width: 150px;
vertical-align: middle;
float:left;
padding: 0px 10px 10px 0px;
}
This is what happens: https://gyazo.com/92f967809fc4dea91a8a5cbaabf8d087
Padding is included in the calculation, as is everything inside the border-box. Using margin instead of padding, it won't be inside the border-box, resolving your issue.
For a perfect circle to form, you need the width to equal to the height, so the hackie way of border-radius: 50%; for shaping circle would work properly.
img {
border-radius: 50%;
border: 1px solid;
}
.perfect {
width: 150px;
height: 150px;
}
.weird1 {
width: 150px;
height: 83px;
}
.weird2 {
width: 80px;
height: 150px;
}
<img class="perfect"></br>
<img class="weird1"></br>
<img class="weird2"></br>
Hey i'm a little unsure about this structure.
Essentially I want to a have 4 divs.
<div class="container">
<div class="top-border"></div>
<div class="box"></div>
<div class="bottom-border"></div>
</div>
The container holds the three smaller divs. My goal is to have the box div hold the content, and the border divs create a bracket around the box. Border-top will be floated to the left, and border-bottom will be floated to the right. The only issue is that the container overlaps the bottom bracket, but not the top. I don't want it to overlap either... Is there a way to fix this?
Here is a JsFiddle: http://jsfiddle.net/6ghzN/
On the bottom-border div, change
margin-top: -40px;
to
margin-bottom: -8px;
I would go a different way,
Just add .box:before and .box:after
This way, you don't have all those extra divs to be marked up!
.container{
background:#dedede;
width:80%;
height:auto;
float:left;
}
.box{
height:800px;
width:100%;
color:#cecece;
float:left;
position:relative;
}
.box:before{
content: "";
width: 40px;
height: 40px;
border-left: 8px solid gray;
border-top: 8px solid gray;
position: absolute;
left: -8px;
top: -8px;
}
.box:after{
content: "";
width: 40px;
height: 40px;
border-right: 8px solid gray;
border-bottom: 8px solid gray;
position: absolute;
right: -8px;
bottom: -8px;
}
http://jsfiddle.net/6ghzN/11/
I had success using this method:
1) Remove background color from .container and add it to .box.
.box{
...
background:#dedede;
}
2) Add a negative margin to the right of .top-border so that .box floats correctly:
.top-border{
...
margin-right:-40px;
}
http://jsfiddle.net/6ghzN/2/
Add margin-bottom: -10px; to bottom-border class.
jsfiddle
I have tried multiple methods found on this website, and nothing seems to help.
I am trying to center 2 divs that are floating left and right in a container that has a 100% width.
CSS Snippet:
#body-container {
background: none;
height: 100%;
width: 100%;
margin: 0 auto;
}
#body-inner {
float: left;
width: 550px;
left: 325px;
margin: 0 auto;
background: none;
padding-top: 3%;
padding-left: 10px;
padding-right: 10px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
#bodybox {
margin: 0 auto;
width: 200px;
height: 100%;
right: 325px;
background: none;
font-size: 10px;
font-family:Arial, Helvetica, sans-serif;
}
You need to do some research about how floats work, because I think you have the wrong idea. Floating one div left and one right, there is no way to center them, because they are floated. The left and right properties don't work unless the element is positioned (absolute, fixed, or relative with some implications). Also, it looks like you're trying to get the right edge of #bodybox to line up with the left edge of #body-inner. This won't work, because the right property is calculated from the right edge of the screen, not the left edge. Also, you're mixing fixed box dimensions with a fluid container width. This is fine, if you account for what happens to them when they collide.
If you're just trying to align the two <div> beside each other, centered on the page. In this case, inline-block is probably your friend. There are numerous implications and workarounds regarding white space, font sizes, order of content, etc., but essentially you would do:
#body-container {
width: 100%;
text-align: center;
}
#body-inner {
width: 550px;
}
#bodybox {
width: 200px;
}
In the above, the two <div>s would sit next to each other as long as the container is wide enough, once the container is too small, they will display one before the other, each centered in the container.
Could this be what you're looking for? Click here...
If I understand your question, you're trying to center a <div> that has 2 more <div> parents...
Code Snippet:
#body-container {
background: none;
height: 100%;
width: 100%;
/*margin: 0 auto;*/
/* testing border and height, could be deleted */
border: solid;
height: 500px;
}
#body-inner {
width: 550px;
margin: 0 auto;
background: none;
padding-top: 3%;
padding-left: 10px;
padding-right: 10px;
/*border-left: 1px solid #000000;
border-right: 1px solid #000000;*/
/* testing border and height, could be deleted */
border: solid;
height: 400px;
}
#bodybox {
margin: 0 auto;
width: 200px;
height: 100%;
/*right: 325px;*/
background: none;
font-size: 10px;
font-family:Arial, Helvetica, sans-serif;
/* testing border and height, could be deleted */
border: solid;
height: 400px;
}
I have some css problem. here is what I need.
No matter how many words the title have(example: title could be What's new today?, could be hello world)
it always have a background line pass through the whole div, and the word's background is white. (the word should be text-align:center; and it's background looks like broken the line)
Here is my code:
<style>
.ocell {
width:960px;
height:42px;
text-align:center;
padding: 20px 0 20px 0;
}
.wd {
margin: 0 auto;
background-col: white;
margin-left: -10px;
padding: 5px;
}
.line {
position: absolute;
border-bottom: solid 1px #999;
margin-top:-18px;
width: 960px;
}
</style>
<div class="ocell">
<div class="wd">Title</div>
<div class="line"></div>
</div>
also in http://jsfiddle.net/zApLA/ may be also can use a background-image instead of the line. Thanks.
This can be achieved by simply using div with border-bottom for the line, and positioning element with text on that line. Fiddle here.
Couple of problems with your CSS.
One - the .wd div spans the entire width of page (defaults to 100%)
Two - no z-index sset to say which div should be on top of which.
Try this code (worked in fiddle)
.ocell {
width:960px;
height:42px;
text-align:center;
padding: 20px 0 20px 0;
}
.wd {
margin: 0 auto;
background-color: #f0f;
margin-left: -10px;
padding: 5px;
font-size:20px;
z-index:10;
border:1px solid #f0f;
display:inline;
}
.line {
position: absolute;
border-bottom: solid 1px #999;
margin-top:-15px;
width: 960px;
z-index:-1;
}
Hi have had to put the menu bar further down the page so javascript will load a slide show.
I am trying to then push the menu bar up. Can I put in an absolute reference so it appears a t the top.
#left, #middle, #right {
background-color: inherit;
color: inherit;
float: left;
padding-left: 10px;
padding-right: 5px;
}
#left {
width: 15%;
min-width: 10em;
padding-left: 5px;
background: #fff;
}
#middle {
width: 80%;
border-left: 3px dotted #999;;
background: #fff;
}
#header {
width: 100%;
background: #666;
}
#footer {
clear: both;
width: 100%;
background: #fff;
}
#left2 {
width: 15%;
min-width: 10em;
padding-left: 5px;
background: #fff;
margin-top: -500px
}
#middle2 {
width: 80%;
border-left: 3px dotted #999;;
padding top: 500px
}
In Html
<div id="middle2">
<div id="left2">
Although it is completely unclear in your code what the 'menu bar' is, or which class might apply to it, it seems to me you should try absolute positioning in CSS
CSS:
.menubar
{
position:absolute;
top:20px;
left:20px;
}
html:
<div id="some_menu_bar" class="menubar">
your menu goes here
</div>
I am trying to then push the menu bar up.
This makes me think you hope to delay the positioning of the menu bar until some script has executed. You cannot do this with CSS alone*.
*Ok perhaps you can with CSS3 and animations but this isn't well supported at the moment.