I have two buttons, that I was hoping to have side by side, however their right on top of each that I can't figure out why.. here's what i'm looking at.
here's my code.
CSS:
button {
position: absolute;
top: 250px;
left: -15px;
z-index: 9999;
color:white;
display: block;
margin: 30px;
padding: 7px 35px;
font: 300 150% langdon;
background: transparent;
border: 3px solid white;
cursor: pointer;
}
button:hover {
background: black;
border: 1px solid black;
}
button:active {
background: #2e2e2e;
border: 1px solid black;
color: white;
}
Any ideas?
position:absolute removes the elements from the normal document flow. Thus, they will be positioned on top of each other where specified (top: 250px;, left: -15px;) since they share the same position styles.
For your scenario, it would probably be better to use floats and margins:
button {
float:left;
margin-top:250px;
}
In general, position: absolute; should be avoided; you're taking an element out of the standard flow (which means no more side by side or top to bottom reflowing).
If you insist on using it, you need two different positioning rules for your buttons so you can assign them to different places.
Try position:static; I read that it renders elements in order as they appear in the document flow.
Related
I have animated my navigation buttons that expand upon hover, but they keep on disrupting the flow of the rest of the page. I've tried using z-index to take them out of the flow, but that isn't working, either. Is there a way to do this with out the buttons shoving everything out of whack? Here's my relevant code so far:
.btn-group .button {
background-color: teal;
border: 2px solid orange;
color: orange;
padding: 2px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
float: left;
font-size: 1em;
border-radius: 50%;
margin: 5px 0 5px 5px;
padding-left: 30px;
position: relative;
z-index: 1; }
.btn-group .button:hover {
background-color: cadetblue; }
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s; }
.button span:after {
content: '\00bb';
opacity: 0;
top: 0;
right: -20px;
transition: 0s;
padding-left: 10px; }
.button:hover span {
padding: 10px;
color: black;
font-size: 1.5em; }
.button:hover span:after {
opacity: 1;
right: 0;
color: black; }
Thanks for your help!
You have to limit your animations to properties that do not interfere with object's position and dimensions in the document flow.
Those are: transform, left, right, bottom and top. For the last 4, in order to work, you also need position:relative on the button. When using any of these, even though you see the element moving, its place is kept in the flow, just like it would still be there. Only its projected image is moved/transformed.
Example with transform:
.button {
margin: 1rem;
transition : transform .3s cubic-bezier(.4,0,.2,1);
display: inline-block;
border: 1px solid black;
padding: 1rem;
}
.button:hover {
transform: scale(1.1);
}
.red {
background-color: red;
padding: 1rem;
color: white;
}
<a class="button">Example with transform</a>
<div class="red">see? I'm not moving</div>
That's how the vast majority of web animations are done (using transforms).
As an alternative, if you really want to animate properties that would normally affect the rest of the document, you will need to remove your element from document flow. For that, you need to:
wrap your element in a wrapper (placeholder) of desired dimensions (which will never move and keep everything in place), and give the wrapper position:relative,
set position:absolute on the button.
Now you can animate anything on the button without affecting the rest of the document.
But remember, the wrapper needs to have proper dimensions, as the button, now being absolutely positioned, will no longer occupy any space in the document flow. Also, note that your button is now relative to its placeholder. If the placeholder moves, the button moves too.
Example with absolute positioning and wrapping:
.wrapper {
height: 5rem;
position: relative;
}
.button {
position: absolute;
top: 1rem;
padding: 1rem;
transition: all .3s cubic-bezier(.4,0,.2,1);
border: 1px solid black;
}
.button:hover {
top: .5rem;
padding: 1.5rem;
}
.red {
background-color: red;
padding: 1rem;
color: white;
}
<div class="wrapper">
<a class="button">Example with absolute positioning and wrapping</a>
</div>
<div class="red">see? I'm not moving</div>
That's the basics.
As a side note, best practices require you to limit animations to a very select and limited bunch or properties which do not hit browser performance: the bunch is made of exactly two items:
transforms
and opacity.
You animate anything else... boom!, your scroll begins to stagger on devices with limited resources. There is quite a lot to read on the subject, but here's a good one.
Setting a high z-index does not take the element out of the document flow, you need to use absolute positioning for your button.
i.e.
.btn-group{
position: relative;
}
.button{
position: absolute;
}
I created a navigation with a subnavigation, see JSFiddle with subnavigation. I have the issue that between the top navigation with yellow background and the subnavigation with red-colored background I want to have a distance of 1px solid white to separate both areas. At the moment this CSS definition is used
html, body {
background-color: green;
}
I tried to put another div around <nav class="top-bar" data-topbar> and set the background-color: white; but without success.
The goal is to have always a 1px solid line below the .top-bar area. So also when there is no subnavigation displayed, see JSFiddle without subnavigation, there should be this separator. I tried it to achieve it there with
.top-bar {
background: yellow;
border-bottom: 10px solid white; /*10px only to see that the border is inside the box*/
}
but the border is not outside the yellow top-bar box, it is inside, which I do not want to have. Also it would be great to have a combined so that the 1px white space between top and sb navigation is always there.
Working demo
Your border solution was almost correct, just change the box-sizing property so the border isn't placed inside the div:
.top-bar {
background: yellow; border-bottom: 10px solid white;
box-sizing: content-box;
}
This is the default value but you included Foundation that override this value with box-sizing: border-box;.
Add outer Box Shadow to your top-bar. like This:
.top-bar{
background: yellow;
box-shadow:0 0 1px #fff;
}
You can use a white border-bottom with 1px extra height on the nav:
.top-bar { height:71px; border-bottom:1px solid #fff; }
add Z-INDEX on .menu-center .active > a:before, .menu-center .active > a:after and
ul.sub-menu {
background-color: red;
display: block;
left: 0;
border-top: 1px solid #FFF;
position: absolute;
right: 0;
text-align: center;
top: 100%;
}
http://jsfiddle.net/aytaxykf/12/
This question has been asked here before, yes. But none of the answers seem to work for me and what I am trying to do.
I need a div to display across the entire browser. So far, I have this.
HTML
<body>
<div id="header">My Website</div>
<div id="games">Video Games</div>
</body>
CSS
#header {
height: 80px;
background-color: black;
color: white;
width: 100%;
top: 0;
left: 0;
position: absolute;
}
#games {
height: 40px;
border: 1px solid black;
background-color: grey;
}
So, top:0, left:0, and position:absolute are what get my div to span across the entire page. What's the problem?
My #games div is hidden behind my #header div. I am relatively new to html and css, and when I started learning divs, they would display right next to each other or right below and on top one another.
When I take out position:absolute, the #games div drops below the #header div, but then the header div only goes to the edge of the page's left and right side, and the top. I want it to go all the way to the edge, with no space in between the div and the browser sides, AND have my #games div naturally display underneath.
Note that I know that I can adjust the #games div's top-margin, but I wanted to know if there was a way to have it naturally sit underneath the #header div.
What can I do to make it so that my #games div is not naturally hidden behind the #header div, and sits just below?
My suggestion is to do it like this DEMO:
body {
margin: 0;
}
#header {
height: 80px;
background-color: black;
color: white;
}
#games {
height: 40px;
border: 1px solid black;
background-color: grey;
}
<body>
<div id="main_wrap">
<div id="header">My Website</div>
<div id="games">Video Games</div>
</div>
</body>
CSS
body{
margin: 0px;
padding: 0px;
}
#main_wrap {
background-color: gray;
width: 100%;
}
#header {
height: 80px;
background-color: black;
color: white;
width: 100%;
top: 0;
left: 0;
}
#games {
height: 40px;
border: 1px solid black;
background-color: grey;
}
position: absolute; This tells the browser that whatever is going to be positioned should be removed from the normal flow of the document and will be placed in an exact location on the page.
so it means in your CSS you not really need to use position:absolute because by default when you will put div in html document it will start from top, left.
Note: you should think about using position:absolute in worst case scenario and if still need to use please make sure parent div should be position:relative.
#header {
height: 80px;
background-color: black;
color: white;
width: 100%;
/* top: 0;
left: 0;
position: absolute;*/
}
I'm trying to divide a border with a background image. I don't know if this is even possible this way. Hopefully somebody can help me figure out a good clean way to achieve this.
I'm trying to get the bottom one and that top one is what I have right now.
.tinybanner h1 {
padding-bottom: 0.5em;
margin-bottom: 50px;
border-bottom: 1px solid $green;
display: inline-block;
#include adjust-font-size-to(24px);
background: url('images/tinybanner.png') center bottom no-repeat;
}
By using the pseudo-selector :after, you can add an element after every h1:
h1 {
padding-bottom: 0.5em;
margin-bottom: 50px;
border-bottom: 1px solid green;
display: inline-block;
position: relative;
}
h1:after {
position: absolute;
left: 50%; /* center the element */
margin-left: -15px; /* shift left by (width+border)/2 */
display: block;
content: '';
width: 20px;
height: 20px;
background: green; /* this can of course be a background image, too */
border: 10px solid white; /* adds a gap to the left and right */
}
The reason why I like this approach is because it degrades nicely. If your browser doesn't support the :after pseudo-selector, you are still left with the border underneath the header (because it is set on the h1, not the pseudo element) and don't see a dangling background image (because it is set on the h1:after).
http://jsfiddle.net/stevemchey/YFXGa/
How about using an :after sudo-element with left and right borders:
.tinybanner h1 {
padding-bottom: 0.5em;
margin-bottom: 50px;
display: inline-block;
#include adjust-font-size-to(24px);
background: url('http://placekitten.com/10/20') center bottom no-repeat;
}
.tinybanner h1:after {
height:1px;
content:'';
display:block;
border-left: 40px solid #00ff00;
border-right:40px solid #00ff00;
}
http://jsfiddle.net/bhlaird/XSdbs/
I'm trying to do something like this:
The boxes have shadows and the background of the corners must be transparent because they are over an image (unpredictable background).
After searching Google, I found solutions using pseudo selectors :before and :after as well as solutions using extra markup, but all of them use a fixed colour background. These were my results:
I'm trying to use box-shadows and only a small image for the corner, instead of a large complete background.
How I can do this?
Use both the pseudo-elements, one for the upper box, the other for the white triangle:
h1 {
background: #F0B032;
box-shadow: 1px 1px 4px #362708;
line-height: 30px;
position: relative;
}
h1:before, h1:after {
content: '';
position: absolute;
left: 100%;
}
h1:before {
background: #F0B032;
box-shadow: 1px 1px 2px #362708;
width: 15px;
height: 16px;
top: 0;
}
h1:after {
border: 7px solid transparent;
border-left-color: #fff;
border-top-color: #fff;
bottom: 0;
}
Here's the fiddle: http://jsfiddle.net/Kjp6v/
This does not add a shadow under the fold, but looks realistic enough.