so i am having trouble collapsing borders between two floating divs. I know how to do it with table cells but these are not cells and I'm not using tables. Here is a picture of what the picture looks like page image
Here is my html and css code as well.
body{
background-color: #C8C8C8;
}
h1{
text-shadow: 2px 3px gray;
margin-left: auto;
margin-right: auto;
width: 200px;
}
img.width{
width: 100%;
}
img.tLeft {
float: left;
z-index: -1;
padding-right: 3em;
}
img.tRight {
float: right;
z-index: -1;
}
.div1 {
width: 900px;
height: 700px;
margin-left: auto;
margin-right: auto;
border-radius: 20px;
box-shadow: 10px 10px 5px #A8A8A8;
background-color: #4dffa6;
overflow: hidden;
z-index: -1;
}
.div2 {
height: auto;
border: 1px solid red;
overflow: hidden;
border-top-left-radius: 20px;
top: 0;
left: 0;
float: left;
border-right: collapse;
}
.div3 {
height: auto;
border: 1px solid red;
overflow: hidden;
border-top-right-radius: 20px;
top: 0;
right: 0;
z-index: -1;
float: right;
}
.div4 {
height: auto;
border: 1px solid blue;
background-color: lightgray;
overflow: hidden;
left: 0;
display: block;
}
strong{
font-size: 70px;
color: red;
}
<div>
<img class="width" src="images/rancidbanner.png" alt="Rancid Tomatoes">
</div>
<h1>TMNT (2015)</h1>
<!---block one--->
<div class="div1">
<!---block two--->
<div class="div2">
<img class="tLeft" src="images/rottenlarge.png" alt="Rotten" /> <strong>33%</strong>
</div>
<!---block three--->
<div class="div3">
<img class="tRight" src="images/overview.png" alt="general overview" />
</div>
<!---box four
<div class="div4">
<p>HEllo relkgnaldfkgnadlgsknasdlkgnasldkgnaslkdgnasldkn aslkdgnslkdgn sjdnaslkdjfnaslkdjfn sdgnaslkjgnlaskjgdn
</p>
</div>
--->
</div>
Might be worth using a CSS reset so that the browser doesn't affect your CSS - http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited/
Related
I want to create a circle image with text like a picture, i upload in below
But i create a circle image with text like this show in after correct image
.circles {
margin: auto;
height: 73px;
width: 130px;
border: 2px solid black;
display: flex;
justify-content: center;
overflow: hidden;
background-color: black;
opacity: 50%;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
margin-top: -169px;
}
.tit {
color: white
}
<div className="circle">
<img src={imageupload} className="cirimage" />
</div>
<div className="circles">
<p className="tit">Title</p>
</div>
.round {
background: #fff;
border: 2px solid #000;
width: 100px;
height: 100px;
border-radius: 50px;
overflow: hidden;
}
.text {
background-color: black;
opacity: 50%;
color: #fff;
padding: 10px;
text-align: center;
z-index: 999;
position: relative;
}
.image {
background-color: #e6baba;
height: 100px;
width: 100px;
position: relative;
top: -38px;
z-index: 9;
}
<div class="round">
<div class="text">
Text
</div>
<div class="image">
Add Image Here
</div>
</div>
update your CSS file
.text-container {
background-color: black;
opacity: 50%;
padding: 10px;
text-align: center;
z-index: 999;
color: #fff;
position: relative;
}
.image-container {
background-color: #e6baba;
height: 100px;
width: 100px;
z-index: 9;
position: relative;
top: -38px;
}
.circle-container {
background: #fff;
border: 2px solid #000;
height: 100px;
width: 100px;
overflow: hidden;
border-radius: 50px;
}
Use HTML as below
<div class="circle-container">
<div class="image-container">
Add Image Here
</div>
<div class="text-container">
Text
</div>
</div>
I have an HTML structure where I can't seem to get the CSS position sticky working.
I think it because it's within the aside container. If I make aside stick it works.
I want the .product-info div to be sticky and when it hits the div .content-other it unsticks.
Unless with flex I could move out .personal-info and .product-info from within the aside and have them sit to the right on top of each other? Like
content | Personal info
| Product info
Then not bother having the wrapping aside? Not sure how to stack these like this though with flex.
body {
padding: 20px;
}
.container {
margin-left: auto;
margin-right: auto;
position: relative;
padding-bottom: 16px;
padding-top: 16px;
width: 100%;
display: flex;
}
.content {
position: relative;
max-width: 100%;
flex-basis: 74%;
border: 1px solid black;
width: 300px;
margin-right: 20px;
height: 540px;
}
.right-side {
align-self: flex-start;
background-color: #ffffff;
border: 2px solid #e8e8e3;
border-radius: 0 4px 4px 4px;
flex: 1 1;
flex-basis: 40%;
min-width: 338px;
padding: 16px 16px 0;
display: block;
width: 400px;
}
.personal-info {
height: 250px;
}
.product-info {
position: sticky;
position: -webkit-sticky;
top: 24px;
border: 1px solid red;
}
.content-other {
width: 100%;
background: #f5f5f5;
height: 400px;
}
<div class="container">
<div class="content">content area here</div>
<aside class="right-side">
<div class="personal-info">some info</div>
<div class="product-info">sticky info</div>
</aside>
</div>
<div class="content-other">.product-info unsticks when it hits here</div>
Cheers
Simply remove align-self: flex-start;
body {
padding: 20px;
}
.container {
margin-left: auto;
margin-right: auto;
position: relative;
padding-bottom: 16px;
padding-top: 16px;
width: 100%;
display: flex;
}
.content {
position: relative;
max-width: 100%;
flex-basis: 74%;
border: 1px solid black;
width: 300px;
margin-right: 20px;
height: 540px;
}
.right-side {
/*align-self: flex-start;*/
background-color: #ffffff;
border: 2px solid #e8e8e3;
border-radius: 0 4px 4px 4px;
flex: 1 1;
flex-basis: 40%;
min-width: 338px;
padding: 16px 16px 0;
display: block;
width: 400px;
}
.personal-info {
height: 250px;
}
.product-info {
position: sticky;
position: -webkit-sticky;
top: 24px;
border: 1px solid red;
}
.content-other {
width: 100%;
background: #f5f5f5;
height: 400px;
}
<div class="container">
<div class="content">content area here</div>
<aside class="right-side">
<div class="personal-info">some info</div>
<div class="product-info">sticky info</div>
</aside>
</div>
<div class="content-other">.product-info unsticks when it hits here</div>
I have the following html code with a div that contains 4 additional divs:
<body>
<div id="main">
<div class="one">
</div>
<div class="two">
</div>
<div class="three">
</div>
<div class="four">
</div>
</div>
</body>
How can I access the 4 divs inside and position them on the page to my liking with css?
The layout I'm going for is something like this:
I've been trying to google this but couldn't find anything helpful.
Thanks!
With the best understanding of your question, I tried to give you an answer.
section {}
.main {
float: left;
position: absolute;
width: 400px;
height: 100%;
margin: auto 13%;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.section1 {
width: 40%;
}
.section2 {
width: 40%;
}
.section1,
.section2 {
margin: 0px;
padding: 0px;
padding: 0px 5px;
float: left;
position: relative;
height: 80%;
}
.section3 {
padding: 0px;
/*border: 1px solid #cccccc;*/
float: left;
position: relative;
width: 83%;
margin: 5px 5px;
height: 20%;
}
.section1 .inner-1 {
float: left;
width: 100%;
height: 100%;
border: 1px solid #000000;
}
.section2 .inner-1 {
float: left;
width: 100%;
min-height: 30%;
border: 1px solid #000000;
}
.section2 .inner-2 {
float: left;
width: 100%;
min-height: 30%;
border: 1px solid #000000;
margin: 10px 0px 0px 0px;
}
.section3 .inner-1 {
width: 100%;
float: left;
border: 1px solid #000000;
width: 100%;
height: 50%;
}
<section class="main">
<section class="section1">
<div class="inner-1">
</div>
</section>
<section class="section2">
<div class="inner-1"></div>
<div class="inner-2"></div>
</section>
<section class="section3">
<div class="inner-1"></div>
</section>
</section>
Hope it may helpful to you.
I am trying to set three divs side by side with each equal width and height.
I am unable to remove that extra space at right at right most div. If I set its margin-right to 0 the rightmost div becomes bigger than other two.
Here is the fiddle.
Css:
.recordpopup {
position: fixed;
z-index: 10000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba( 0, 0, 0, .8);
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
}
.recordpopup .retry {
background-color: black;
border: 1px solid white;
xborder-radius: 8px;
box-sizing: border-box;
color: white;
font-family: ProximaNova-Regular;
font-size: 16px;
font-weight: bold;
xheight: 50px;
margin-left: auto;
margin-right: auto;
padding-top: 0px;
position: relative;
text-align: center;
top: 30%;
width: 40%;
z-index: 15000;
border-radius: 8px;
padding: 20px 10px;
background-image: url('images/gray_bar.png');
background-repeat: repeat-x;
background-color: white;
}
#product-wrapper {
overflow: hidden;
margin-top: 25px;
}
.product {
float: left;
width: 33%;
display: table-cell;
width: 33.33333333%;
}
.product .container {
margin-right: 10px;
padding: 10px;
background-color: #000;
}
.product .container img {
display: block;
margin: 0 auto;
width: 100%;
}
#closeRecord {
background: black none repeat scroll 0 0;
border: 2px solid white;
border-radius: 50%;
color: white;
cursor: pointer;
height: 25px;
right: -15px;
left: right;
position: absolute;
top: -10px;
width: 25px;
}
Html:
<div class="recordpopup">
<div class="retry">
<div id="closeRecord">x</div>
<div style="width: 100%;text-align: left;margin: 5px 0;font-size: 12px;color:#333;"><span class="TitleText">Lorem Ipsum Lorem Ipsum</span> </div>
<div id="product-wrapper">
<div class="product">
<div class="container">
<img src="images/circle.png">
<p>Dummy</p>
</div>
</div>
<div class="product">
<div class="container">
<img src="images/circle.png">
<p>Dummy</p>
</div>
</div>
<div class="product">
<div class="container">
<img src="images/circle.png">
<p>Dummy</p>
</div>
</div>
</div>
</div>
</div>
Here is my solution.
The key is removing the margin-right: 10px and adding
.product:nth-child(1) .container{
margin-right:5px;
}
.product:nth-child(2) .container{
margin: 0 5px 0 5px;
}
.product:nth-child(3) .container{
margin-left: 5px;
}
JSFiddle ===> https://jsfiddle.net/kjkk3f9d/1/
The margin-right: 10px was pushing out your divs, replace it with margin: 0 5px to give a uniform look
.product .container {
margin: 0px 5px;
padding: 10px;
background-color: #000;
}
https://jsfiddle.net/kjkk3f9d/3/
check out my fiddle:
https://jsfiddle.net/kjkk3f9d/2/
the important styles are
#product-wrapper {
overflow: hidden;
margin-top: 25px;
display: flex;
justify-content: space-between;
}
.product {
flex-basis:0;
flex: 1 1 auto;
margin: 5px;
}
I read this post but still ain't able to center the inner <div> :
div {
margin: 0 auto;
border: 5px solid orange;
width: 60%;
font-family: Verdana;
text-align: center;
}
.game {
border: 5px solid black;
overflow: hidden;
position: absolute;
}
<div>
<div class="game" style="width: 100px; height: 100px;">
</div>
</div>
It must be related to the position: absolute; property but it is required in order to insert absolute-position <img> elements in the inner <div>.
Simple, add this:
.game {
right: 0;
left: 0;
margin: 0 auto;
}
Since the width is given left and right will not affect your elements width. margin: 0 auto; will do the positioning
Example:
div {
margin: 0 auto;
border: 5px solid orange;
width: 60%;
font-family: Verdana;
text-align: center;
}
.game {
border: 5px solid black;
overflow: hidden;
position: absolute;
right: 0;
left: 0;
margin: 0 auto;
}
<div>
<div class="game" style="width: 100px; height: 100px;">
</div>
</div>
div {
margin: 0 auto;
border: 5px solid orange;
width: 60%;
font-family: Verdana;
text-align: center;
}
.game {
border: 5px solid black;
overflow: hidden;
position: absolute;
left: 0;
right: 0;
margin: auto;
}
<div>
<div class="game" style="width: 100px; height: 100px;">
</div>
</div>
div {
margin: 0 auto;
border: 5px solid orange;
width: 60%;
font-family: Verdana;
text-align: center;
}
.game {
border: 5px solid black;
overflow: hidden;
position: absolute;
left: 0;
right:0;
}
<div>
<div class="game" style="width: 100px; height: 100px;">
</div>
</div>
Just add
left: 0;
right:0;
To the game class, and it will be horziontally centered. The trick here is to set the position to left 50%, and margin left to minus 1 half of the container width. Let me know if this solves it for you.
EDIT: helpful comments have shown me that we do not need the margin left negative, we can just set the left and right attribute for horizontal alignment. This is better because it will work regardless of the width of the element
Here's another approach..
.game {
border: 5px solid black;
overflow: hidden;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
div {
margin: 0 auto;
border: 5px solid orange;
width: 60%;
font-family: Verdana;
text-align: center;
}
.game {
border: 5px solid black;
overflow: hidden;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
<div>
<div class="game" style="width: 100px; height: 100px;">
</div>
</div>
http://www.codeply.com/go/E0xL0KyOkU
you can use the image as the background of the class game
div {
margin: 0 auto;
border: 5px solid orange;
width: 60%;
height:300px;
font-family: Verdana;
text-align: center;
}
.game {
border: 5px solid black;
overflow: hidden;
position:relative;
left: 0;
top:28%;
right: 0;
margin: auto;
}
<div>
<div class="game" style="width: 100px; height: 100px;">
</div>
</div>
try this
div {
margin: 0 auto;
border: 5px solid orange;
width: 60%;
font-family: Verdana;
}
.game {
border: 5px solid black;
width:30%; margin:0 auto;
position: absolute;
left: 0;
right: 0;
padding: 0 20px;
}
<div>
<div class="game">
test
</div>
</div>