this has been trying my patience for about an hour so I thought I would ask.
I need to have three divs, centered inside another div that is inside another div lol. Here is what the code I have looks like.
HTML
<div id="frontnav">
<div id="front1" class="frontboxes">
<h2>Gold</h2>
</div>
<div id="front2" class="frontboxes">
<h2>Green</h2>
</div>
<div id="front3" class="frontboxes">
<h2>Blue</h2>
</div>
</div>
CSS
/* FRONT PAGE BOXES */
#frontnav {
width: 90%;
margin-left: auto;
margin-right: auto;
height: 300px;
transition: all 2s;
-moz-transition: all 2s;
/* Firefox 4 */
-webkit-transition: all 2s;
/* Safari and Chrome */
-o-transition: all 2s;
/* Opera */;
}
#front1 {
text-align: center;
float: left;
height: 200px;
width: 30%;
box-shadow: 0px 0px 19px #615D69;
}
#front2 {
text-align: center;
float: left;
height: 200px;
width: 30%;
box-shadow: 0px 0px 19px #615D69;
}
#front3 {
text-align: center;
float: left;
height: 200px;
width: 30%;
box-shadow: 0px 0px 19px #615D69;
}
.frontboxes {
margin: 6px;
}
div element can only be center by setting margin css property as
margin: 0px auto;
The text-align:center; declaration needs to be on the outermost div, i.e. frontnav in your example.
Change the last rule to:
.frontboxes {
margin: 6px auto;
}
and remove the float: left;s.
Related
i wanted to create a box with a border and inside it a small div, i wanted when i have a hover over the box the small div inside it will start to animate and but the animation did not start at all, so i deleted hover also the animation did not work in this case too,
here what i have tried:
<div class="row mb-4">
<div class="col col__animation">
<div id="object"></div>
</div>
</div>
Scss:
.col__animation{
display: flex;
border-radius: 1rem !important;
border: 1px solid #284876;
height: 200px !important;
align-items: center;
#object {
width: 40px;
height: 50px;
background: blueviolet;
margin-top: 2px;
margin-bottom: 1px;
margin-right: 3px;
}
&:hover{
#object{
transition: transform 1000ms;
transition-timing-function: ease-in-out;
}
}
}
I am trying to try many animations effects like making the box move to right and go back to initial position and many more animations
This should work
.col__animation {
display: flex;
border-radius: 1rem !important;
border: 1px solid #284876;
height: 200px !important;
align-items: center;
}
.col__animation #object {
width: 40px;
height: 50px;
background: blueviolet;
margin-top: 2px;
margin-bottom: 1px;
margin-right: 3px;
animation: mymove 3s infinite;
}
#keyframes mymove {
0% {
margin-left: 0px;
}
50% {
margin-left: calc(100% - 40px);
}
100% {
margin-left: 0px;
}
}
Codepen
I try to have a div that fit it width from image child. It works in google chrome, safari but not in =< IE9 and some other browsers...This div is responsive and the height is in % defined by js.
Here the html code :
<div class="element wide music">
<div class="element-container element-back-bg5">
<div class="audio-player-cover">
<img class="cover" src="http://www.konbini.com/fr/files/2013/04/Random-Access-Memories-Daft-Punk-88883716862.png" alt="" />
</div>
<div class="audio-player-informations">
<div class="element-audio-separator"></div>
<div class="audio-player-songtitle">Get Lucky feat Colin Farrell</div>
</div>
</div>
</div>
And the css :
.element {
position: relative;
overflow: hidden;
cursor: pointer;
float: left;
width: 450px;
height: 180px;
border: none;
}
.element-container {
position: absolute;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 2px!important;
-webkit-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.5);
/*box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.5);*/
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.audio-player-cover div {
position: relative;
height: 100%;
width: auto;
float: left;
}
.audio-player-informations {
position: relative;
overflow: hidden;
height: 100%;
}
.audio-player-cover img.cover {
position: relative;
height: 100%;
min-height: 100%;
max-height: 100%;
width: auto;
float: left;
}
.audio-player-artiste {
position: relative;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
width: 100%;
height: 30px;
box-sizing: border-box;
opacity: 1;
font-family: 'MavenProLight-300';
font-size: 16px;
line-height: 30px;
text-align: left;
}
/* Title */
.audio-player-songtitle {
position: relative;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
width: 100%;
height: 30px;
margin-top: 20px;
box-sizing: border-box;
opacity: 1;
font-family: 'MavenProLight-300';
font-size: 20px;
line-height: 30px;
text-align: left;
}
.element-back-bg5 {
background:#ECEDF0;
color: #58585C;
}
.element-audio-separator {
position: absolute;
overflow: hidden;
width: 3px;
height: 100%;
left: 0;
top: 0;
border-left: 1px solid rgba(0,0,0,0.05);
-webkit-box-shadow: inset -1px 0px 2px 0px rgba(0,0,0,0.2);
-moz-box-shadow: inset -1px 0px 2px 0px rgba(0,0,0,0.2);
box-shadow: inset -1px 0px 2px 0px rgba(0,0,0,0.2);
}
.element.wide .audio-player-songtitle, .element.square .audio-player-artiste {
padding-left: 5%;
padding-right: 5%;
}
And the fiddle; http://jsfiddle.net/zKEkG/1/
I'm sorry but your css is very messy. It looks like you're lacking a good understanding of the box model and how positioning works. I recommend you read:
More about box model:
http://learn.shayhowe.com/html-css/box-model
More about how to use positioning properly using css:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
As for a quick fix to your problem, if you set the height of the cover image directly to the height of the container, it should work cross browser.
.audio-player-cover img.cover {
/*Manually set height to match container*/ height: 180px;
min-height: 100%;
max-height: 100%;
width: auto;
float: left;
}
Edited:
Misinterpreted question. Seems like the issue is stricter css selector.
Changed: audio-play-cover to div.audio-player-cover
jsfiddle: jsfiddle.net/zKEkG/8
I have a structure like so
<div class="contentWrapper">
<div class="left_side"></div>
<div class="right_side"></div>
</div>
My contentWrapper class has this style:
.contentWrapper {
margin: 0px auto;
padding: 0px;
width: 990px;
text-align: left;
background-color: #FFF;
box-shadow: 0 2px 7px rgba(0,0,0,0.25);
position: relative;
z-index: 20;
}
but the background color and border do not appear.
My left_side and right_side class has this as styleing:
.left_side {
width: 630px;
float: left;
padding: 0 10px 0;
}
.right_side {
width: 300px;
float: right;
margin: 0 20px 20px;
}
If I turn off the float on either the left side or right side, but background and border appear..How do I fix this, I really need to background and border around both left and right side.
Thanks,
J
The class names in the css are wrong. In the html they're called left_side and right_side, while in the css you have right_column and left_column.
Fiddle
.contentWrapper {
margin: 0px auto;
padding: 0px;
width: 990px;
text-align: left;
background-color: #FFF;
box-shadow: 0 2px 7px rgba(0,0,0,0.25);
position: relative;
z-index: 20;
overflow: hidden; /* THIS /*
}
This will clear the float and basically fixing it. When you float an element it jumps out of the normal layer, causing the parent to behave as there was nothing inside it.
I don't know why but when the height of the content_second_box is set higher then the height of the screen resolution then the whole page shifts left by a few pixels. Once the div reaches the bottom of the screen it shifts, when the height does not reach then it is ok.
I have tried many things but nothing has worked. Does anyone please know why?
CSS is as follows:
body {
background-color: white;
}
#container {
position: relative;
width: 1300px;
margin-left: auto;
margin-right: auto;
padding: 10px 50x 30px 50px;
}
#content {
width: 1000px;
margin-left: auto;
margin-right: auto;
padding: 40px 0px 0px 0px;
/*text-align: center;*/
}
#content_first_box {
width: 225px;
height: 50px;
/* min-height: 160px; */
/* height: auto !important; */
background-color: #ff8b00; /*#9caad6;*/
border-radius:5px;
box-shadow: 3px 3px 5px #888888;
padding: 5px 5px 5px 5px;
overflow: hidden;
float: left;
text-align: center;
margin-right: 15px;
}
#content_second_box {
width: 225px;
height: 500px;
/* min-height: 160px; */
/* height: auto !important; */
background-color: #79bbff; /*#9caad6;*/
border-radius:5px;
box-shadow: 3px 3px 5px #888888;
padding: 5px 5px 5px 5px;
overflow: hidden;
float: left;
text-align: center;
margin-right: 15px;
}
HTML file is as follows:
<body>
<div id="container">
<div id="content">
<div id="content_first_box">text</div>
<div id="content_first_box">text</div>
<div id="content_first_box">text</div>
<div id="content_first_box">text</div>
<div id="content_second_box">text druhy</div>
<div id="content_second_box">text druhy</div>
<div id="content_second_box">text druhy</div>
<div id="content_second_box">text druhy</div>
</div>
</div>
</body>
The scroll bar appears once the page is longer than the viewport. This causes all content to shift left to allow for the scrollbar.
You can get rid of the content shift by always showing the scrollbar in browser as -
html{
overflow-y: scroll;
}
I don't understand why my menu is not centering. I tried everything from inline elements to margin: 0 auto; to align="center" and I can not get the menu to center. You can see it here http://jeremyspence.net78.net you have to scroll down all the way to see it, t only appears when it goes past the main menu. Here is some css
.scrollmenu {
display:none;
position: fixed;
top: 0;
text-align:center;
margin: 0px auto;
width: 1020px;
z-index: 10000;
padding:0;
}
.scrollmenu li{
width: 200px;
height: 75px;
overflow: hidden;
position: relative;
float:left;
background: #fff;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
margin-right: 4px;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.scrollmenu li:last-child{
margin-right: 0px;
}
.scrollmenu li a{
text-align: left;
width: 100%;
height: 100%;
display: block;
color: #000;
position: relative;
}
.scroll-icon{
font-family: 'Symbols';
font-size: 60px;
color: #333;
text-shadow: 0px 0px 1px #333;
line-height: 80px;
position: absolute;
width: 100%;
height: 50%;
left: 0px;
top: 0px;
text-align: center;
}
.scroll-home{
font-size: 30px;
opacity: 0.8;
text-align: center;
position: absolute;
left: 0px;
width: 100%;
height: 50%;
top: 30%;
}
.scrollmenu li:nth-child(2):hover{
background-color: #CEFECE;
}
.scrollmenu li:nth-child(3):hover{
background-color: #CEFEFE;
}
.scrollmenu li:nth-child(4):hover{
background-color: #CECEFE;
}
.scrollmenu li:last-child:hover{
background-color: #FECEFE;
}
Just add this on your <ul class="scrollmenu"></ul> :
left: 50%;
margin-left: -510px;
or :
left: 0;
right: 0;
Looks like you're centering a div? <div> is a block element, by default. They're centered by using margins. You were close -- you need to make both the left AND right margin auto. margin-left:auto;margin-right:auto;. That will center it inside its parent element, which needs to be 100% width (block elements will expand to maximum width of parent by default). If it's an inline element, you can use text-align:center; on its parent (parent still needs to be 100% width), and that will do the trick.
In the HTML for your link, it looks like you need to set the position:fixed in the div above the ul menu. It looks like you're setting both position:fixed and trying to center at the same time. Get the parent div positioned in the fixed location, and then its child ul should be able to be centered via margin-left: auto; margin-right: auto;.
Have you tried giving a width to the content div?
.content {
position: relative;
width: 1024px;
margin: 0 auto;
}
That seems to solve the issue in Chrome.
By setting position: fixed; without a size for the enclosing container, the menu uses the window border for the container, then with all the items floating left... well they all are on the left.