I have a content area in the middle of the page, which I am centering with margin: 0 auto;
Now I want to have a background effect on the page with several small cubes, that, when hovered change with some effects.
The hover effects work fine under or over the content area, but the problem is that the margin, which centers the content seems to disturb the recognition of the hovering, because when hovered over the cubes behind the margin of the content area, the hover selector doesn't work.
Thanks for any help!
EDIT: Here a code example: http://cssdeck.com/labs/dl3ojm0g
Some small changes in the CSS and it works well.
#content {
margin: 0 auto;
position:relative;
margin-top: 50px;
width: 700px;
height: 300px;
padding: 20px;
background-color: white;
border: 2px solid darkgray;
color: darkgray;
z-index:2;
}
#cubeHolder {
position: absolute;
top: 0;
left: 0;
z-index:1;
}
Just needed to position #content to relative and gave it a higher z-index comparing to #cubeHolder
Example : http://jsfiddle.net/nwrFa/6/
Position your content-container absolute. Then left: 50% and margin-left: -700px/2
#content {
position: absolute;
top: 50px;
left: 50%;
margin-left: -350px;
width: 700px;
height: 300px;
padding: 20px;
background-color: white;
border: 2px solid darkgray;
color: darkgray; }
Related
I have created a container by <div> and I also pasted the pattern card and the image into the container. I am trying to put the text (under the name of class="under-name"beneath an image but the text is just sticking in the bottom without any effect.
I have been tried for several ways to move up the text but the text is just still locating in the same place.
The first thing I tried by setting with inline with moving the position by left or right. And I also tried to create the other new container with and it could not affect anything at all.
I want to move text beneath the image.
Please advise me the way to solve it.
enter image description here
.topcon {
background-color: #f6f5f5;
position: relative;
width: 250px;
height:250px;
border: 15px;
padding: 50px;
margin: 180px auto 150px auto;
border-radius: 20px;
}
.pattern-card
{
position: relative;
right: 50px;
border-radius: 20px 20px 0px 0px;
bottom: 50px;
}
.user-name{
position: relative;
width:40%;
left:0;
top:1000%
text-align: center;
margin: 0 auto 0 auto;
}
.victor{
position: relative;
background-color:#ffffff;
border:3px solid #ffffff;
border-radius: 50%;
display: inline-block;
margin-left: 50px;
margin-right: auto;
bottom: 110px;
width: 50%;
}
<div class="topcon">
<img class="pattern-card"src="images/bg-pattern-card.svg" alt="pattern card at the frame.">
<img class="victor"src="images/image-victor.jpg" alt="image for Victor">
<figcaption class="user-name">Victor Crest</figcaption>
26
London
80K
Followers
803K
Likes
1.4K
Photos
</div>
Try changing your 'user-name' class style to this
.user-name {
position: absolute;
width:40%;
left:20vh;
top: 20vh;
text-align: center;
margin: 0 auto 0 auto;
}
Add
bottom: 60px;
In .user-nameclass, adjusting the pixels until you have the position you are looking for.
It works as below. The most important is to you vh
This is my first time to use vh.
.user-name {
position: absolute;
width:40%;
left:20vh;
top: 20vh;
text-align: center;
margin: 0 auto 0 auto;
}
I have been experiencing trouble centering a number within a circular shaped div. The coding I have used has worked for all other elements but for some reason, one number just won't center like the rest.
I have tried to narrow the problem down and the only thing I have found is that the font size seems to be the problem. In smaller font sizes, the number centers fine, larger sizes, the number sits to the left.
Is this a bug or something someone else has experienced?
HTML:
<div class="circle">
<div>4.</div>
</div>
CSS:
#how-can-we-help-section-two .info-box-four .circle{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: green;
margin: 0 auto;
margin-bottom:-50px;
position:relative;
border: 7px solid #ebeced;
}
#how-can-we-help-section-two .info-box-four .circle div{
font-size: 35px;
font-weight:bold;
color: #fff;
line-height: 90px;
}
Problem is padding: 80px 40px 40px 40px; of .text-box.
You can solve your problem by position:absolute;.
#how-can-we-help-section-two .info-box-four .circle div {
font-size: 35px;
font-weight: bold;
color: #fff;
line-height: 90px;
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
}
Its because of your surrounding wrappers behaviour.
You could use an absolute positioned div or you could replace line-height: 90px with width: 100%; height: 100%; display: inline-block; on your text div inside .circle
I have a page where I have a div at the bottom of the page which when clicked shows another div, just above the bottom div.
I'd like to avoid the footer divs overlapping the content div higher up the page when the window is resized.
The heights of the divs involved shouldn't change.
Is a CSS-only solution possible?
I've created a jsfiddle here
CSS
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#container {
height: 100%;
width: 100%;
background-color: white;
border: solid #aaa 1px;
padding: 4px;
}
#content {
height: 300px;
border: solid blue 1px;
}
#footer-content {
height: 100px;
border: solid red 1px;
display:none;
}
#footer-footer {
cursor: pointer;
height: 20px;
border: solid cyan 1px;
}
#footer.expanded #footer-content {
display:block;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
HTML
<div id="container">
<div id="content">content
</div>
<div id="footer">
<div id="footer-content">footer-content</div>
<div id="footer-footer">Click me to expand</div>
</div>
</div>
JS
$("#footer-footer").on("click", function (evt) {
$("#footer").toggleClass("expanded");
});
Simply add position: relative to the #container. This way the absolute positioning of the footer refers to the container.
http://jsfiddle.net/5bkznxud/5/
You'll probably notice that in the example above there's always a scrollbar on the right. This is because of the borders and padding on #container. Here's an example with outline (border with no calculated width) and without any padding:
http://jsfiddle.net/5bkznxud/6/
TIP: Always use outline instead of border for blocking a layout OR use box-sizing: border-box. This causes a box' dimensions to also calculate for the border. Otherwise a box with width of 100% and border will span slightly wider than you want.
It can be solved by using calc().
In this case you can create a jQuery function that get the height of footer-content and footer-footer -> .height(). Without jQuery, I don't think it's possible.
Here is an example:
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#container {
height: 100%;
width: 100%;
background-color: white;
border: solid #aaa 1px;
padding: 4px;
min-height: 420px;
}
#content {
height:calc(100% - 135px);
border: solid blue 1px;
}
#footer-content {
height: 100px;
border: solid red 1px;
display:none;
}
#footer-footer {
cursor: pointer;
height: 20px;
border: solid cyan 1px;
}
#footer.expanded #footer-content {
display:block;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
http://jsfiddle.net/dokmngv0/
Browser support for the calc() feature: http://caniuse.com/#feat=calc
I have this dot, filled or not (depending on putting inner-circle id), that i want to use on Slick Slider.
#outer-circle {
height: 100px;
width: 100px;
position: relative;
border-radius: 50%;
padding: 100px;
background: #fff;
border: 15px solid red;
color: red;
text-align: center;
font: 32px Arial, sans-serif;
}
#inner-circle {
position: absolute;
background: red;
border-radius: 50%;
height: 250px;
width: 250px;
top: 50%;
left: 50%;
margin: -125px 0px 0px -125px;
}
Here is JSFiddle:
https://jsfiddle.net/thirtydot/dQR9T/2637/
I want to put it in the slick slider classes + make it inside slider (not above/below it)
https://github.com/kenwheeler/slick/blob/master/slick/slick-theme.css
Anyone have idea how to do that to look like on the picture?
In slider that should be text (f.e. "Profesjonalizm") and that red svg thing on the left. Of course navbar isn't part of that slider.
Any help would be much appreciated!
set the navbar over the slider with position absolute, and float:left on the circles.
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;*/
}