So my goal here is to create 5 rectangles next to each other that are centered left, right, up, and down no matter how you re-size the browser.
<body>
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<div id="test4"></div>
<div id="test5"></div>
</body>
#test1 {
background-color:blue;
width:200px;
height:40px;
margin:auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
float:left;
}
#test2 {
background-color:black;
width:200px;
height:40px;
margin:auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 25%;
float:left;
}
#test3 {
background-color:gray;
width:200px;
height:40px;
margin:auto;
position: absolute;
top: 0; left: 25%; bottom: 0; right: 0;
float:left;
}
#test4 {
background-color:yellow;
width:200px;
height:40px;
margin:auto;
position: absolute;
top: 0; left: 50%; bottom: 0; right: 0;
float:left;
}
#test5{
background-color:orange;
width:200px;
height:40px;
margin:auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 50%;
float:left;
}
This is the code I have so far and it almost works. But the rectangles start to overlap at a certain browser window width. I thought it would work to change the width to a percentage on each rectangle but if they are all at the same percentage they are just sitting on top of each other. Thanks in advance hopes someone can help me understand this a bit more.
What it looks like with maximized browser
What I wand to avoid when the browser gets too small
Here is a fiddle demonstrating my solution. Basically, I added a container for your boxes, centered that, and then set the boxes to 20% of the container's width.
The HTML:
<body>
<div id="container">
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<div id="test4"></div>
<div id="test5"></div>
</div>
</body>
The CSS:
#container{
width: 80%;
position:fixed;
top:45%;
left:10%;
padding: 0;
height: 40px;
}
#test1 {
background-color:blue;
width:20%;
height:40px;
margin:auto;
float:left;
}
#test2 {
background-color:black;
width:20%;
height:40px;
margin:auto;
float:left;
}
#test3 {
background-color:gray;
width:20%;
height:40px;
margin:auto;
float:left;
}
#test4 {
background-color:yellow;
width:20%;
height:40px;
margin:auto;
float:left;
}
#test5{
background-color:orange;
width:20%;
height:40px;
margin:auto;
float:left;
}
Let me start with the working fiddle, explanation below:
First, wrap your divs in a main div, and to make things simple, I gave all the child divs a common class:
<div id="main">
<div class = "box" id = "test1">
</div>
<div class = "box" id = "test2">
</div>
<div class = "box" id = "test3">
</div>
<div class = "box" id = "test4">
</div>
<div class = "box" id = "test5">
</div>
</div>
Now we need the main div to do two things, first, be 100% wide, second, have the same height as width, so we add the following css:
#main {
width: 100%;
position: relative; /* for absolutely positioned children */
}
#main:before {
content: "";
display: block;
padding-top: 100%; /* 1:1 ratio */
}
Then we give the common style to the boxes:
.box {
width: 33%;
height: 33%;
position: absolute;
margin: auto;
}
Now we set up the child elements (I might have changes the colors, oops)
#test1{
background-color: blue;
left: 0;
right: 0;
top: 0;
}
#test2{
background-color: black;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#test3{
background-color: green;
left: 0;
right: 0;
bottom: 0;
}
#test4{
background-color: red;
left: 0;
top: 0;
bottom: 0;
}
#test5{
background-color: purple;
right: 0;
top: 0;
bottom: 0;
}
And there you go, have fun.
Related
I've created a large div-container that can contain multiple items (div's),
like that:
But, as you can see, there is an unwanted white gap at the bottom and to the right of each item and I don't know where this is coming from.
The items should be scrollable if they not fit into the Container (horizontally)
HTML:
<div class="maincontainer">
<div class="container">
<div class="box">
</div>
<div class="box2">
</div>
</div>
<div class="container">
<div class="box">
</div>
<div class="box2">
</div>
</div>
<div class="container">
<div class="box">
</div>
<div class="box2">
</div>
</div>
</div>
CSS:
.maincontainer {
width: 90%;
min-height: 200px;
margin: auto;
border: 1px solid black;
padding: 0;
overflow-x: auto;
white-space: nowrap;
}
.container {
position: relative;
width: 200px;
height: 200px;
display: inline-block;
background-color: #444444;
margin: 0;
padding: 0;
}
.box{
position: absolute;
top:0;
right: 0;
left: 0;
bottom:0;
margin:auto;
height:100px;
width:180px;
background-color:#666666;
}
.box2{
position: absolute;
top:0;
right: 0;
left: 0;
bottom:0;
margin:auto;
height:80px;
width:160px;
background-color:#fff;
}
I've also made a Plunker
Any help appreciated! Thanks
I found a solution. Setting the maincontainer's font size to 0 does it! Googled removing whitespaces in css and found:
this
By default, your divs are block elements, however, you changed them to inline elements. Inline elements have a whitespace. That is why there is a gap between your two elements.
You can change the maincontainer display to flex like so:
.maincontainer {
width: 90%;
display:flex;
min-height: 200px;
margin: auto;
border: 1px solid black;
padding: 0;
overflow-x: auto;
white-space: nowrap;
}
.container {
position: relative;
width: 200px;
height: 200px;
display: inline-block;
background-color: #444444;
margin: 0;
padding: 0;
}
.box{
position: absolute;
top:0;
right: 0;
left: 0;
bottom:0;
margin:auto;
height:100px;
width:180px;
background-color:#666666;
}
.box2{
position: absolute;
top:0;
right: 0;
left: 0;
bottom:0;
margin:auto;
height:80px;
width:160px;
background-color:#fff;
}
That should be it! :)
I am trying to create HTML page shown in this sample image.
I want to place other component on top of this black and maroon circles. For this I am using tag Structure of div and span. And using span background-image to apply this image as background.
My problem is what will be structure of div and span to arrange black circle on radius of div/span tags containing maroon circle as background.
Till now I have center circle placed. I don't know how to arrange other circles around it
div.table-text {
position: fixed;
top: 20%;
left: 20%
}
span.table-text {
position: inherit;
display: block;
width: 60%;
height: 60%;
background-image: url(../images/table-text.png);
background-position: bottom;
background-repeat: no-repeat;
}
<div class="table-text">
<span class="table-text">
</span>
</div>
Im not sure I understood the question, but I'll try to answer.
You can't use something like cos() to arrange elements on HTML, you will have to use negatives margin-top: or position: absolute;
My advise: use negative margins, for the black dots on the left and right.
Edit: I did your job, now pay me! #:
.circle {
display: inline-block;
border-radius: 200px;
position: absolute;
width: 100px;
height: 100px;
background-color: black;
}
#bigCircle {
border-radius: 200px;
width: 400px;
height: 400px;
margin: 0 auto;
background-color: brown;
}
#bottom {
margin: 50px calc(50% - 50px);
}
#left {
margin: -50px calc(25% - 50px);
}
#right {
margin: -50px calc(75% - 50px);
}
<div id="bigCircle"></div>
<div class="circle" id="left"></div>
<div class="circle" id="bottom"></div>
<div class="circle" id="right"></div>
JSFiddle - DEMO
Without knowing the rest of your document structure, I've thrown together this proof of concept for you using absolute positioning which should, hopefully, point you in the right direction.
If you need clarification on anything or any of it doesn't suit your needs, please let me know and I'll attempt to update it accordingly.
*{
box-sizing:border-box;
color:#fff;
font-family:sans-serif;
}
.top{
background:red;
border-radius:50%;
margin:-10% auto 0;
padding:0 0 75%;
position:relative;
width:75%;
}
div>div{
background:green;
border-radius:50%;
overflow:hidden;
padding:0 0 20%;
position:absolute;
width:20%;
}
div.one{
left:-10%;
top:80%;
}
div.two{
left:40%;
top:103%;
}
div.three{
right:-10%;
top:80%;
}
p{
text-align:center;
position:absolute;
margin:0;
width:100%;
}
.top>p{
top:15%
}
.top>div>p{
top:5%;
}
<div class="top">
<p>top</p>
<div class="one">
<p>one</p>
</div>
<div class="two">
<p>two</p>
</div>
<div class="three">
<p>three</p>
</div>
</div>
I think you want like here
for responsive you can use value in percentages or max-width.
<div class="maroon">
<div class="m-child m-child1"></div>
<div class="m-child m-child2"></div>
<div class="m-child m-child3"></div>
<div class="m-child m-child4"></div>
</div>
.maroon{
max-width: 300px;
max-height:300px;
background:maroon;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
.m-child, .maroon{
position: absolute;
border-radius:100%;
}
.m-child{
background: #000;
width:100px;
height:100px;
}
.m-child1{
left: -50px;
top:0;
bottom: 0;
margin: auto;
}
.m-child2{
right: -50px;
top:0;
bottom: 0;
margin: auto;
}
.m-child3{
top: -50px;
left: 0;
right:0;
margin: auto;
}
.m-child4{
bottom: -50px;
left: 0;
right:0;
margin: auto;
}
I think you need something like following: You can make changes as per your requirement.
.middle_circle {
background: none repeat scroll 0 0 red;
border-radius: 100%;
height: 200px;
left: 220px;
position: absolute;
top: 60px;
width: 200px;
}
.circle{
position:relative;
width:5%;padding-bottom:50%;
margin-left:47.5%;
}
.circle div {
position:absolute;
top:0; left:0;
width:100%; height:100%;
-webkit-transform : rotate(24deg);
-ms-transform : rotate(24deg);
transform : rotate(24deg);
}
.circle:before, .circle div:before {
content:'';
position:absolute;
top:0; left:0;
width:100%; padding-bottom:100%;
border-radius: 100%; background:black;
}
<div class="circle">
<div><div><div><div><div><div><div><div><div><div><div><div><div><div><div>
</div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
</div>
<div class="middle_circle"></div>
Check Fiddle.
This is the image I have:
How do I centre the black circle, I have tried a number of ways, best has been using absolute, but i cannot make it responsive.
Its on JSFIDDLE
And here is the code:
HTML
<div class="main">
<div class="center"></div>
<div class="leftTop"></div>
<div class="rightTop"></div>
<div class="leftBottom"></div>
<div class="rightBottom"></div>
</div>
CSS
.main {
position:relative;
width:100%;
height:100%;
}
.rightTop {
float:right;
background-color:red;
min-width:50%;
height:250px;
}
.leftTop {
float:left;
background-color:blue;
min-width:50%;
max-width:50%;
height:250px;
}
.rightBottom {
float:right;
background-color:yellow;
min-width:50%;
height:250px;
}
.leftBottom {
float:left;
background-color:orange;
min-width:50%;
max-width:50%;
height:250px;
}
.center {
position:absolute;
left: 50%;
top: 50%;
height:400px;
background-color:black;
width:400px;
border-radius:50%;
}
As I have said above, I have managed to centre it using LEFT, TOP but it is not responsive. Also it's not 50% as I would expect.
Any ideas what it is i am doing incorrectly ?
You could use positioning for this (getting rid of those inefficient and horrible float elements), in combination with the calc css3 property.
You may also be interested in using vw units, in which I have used to make the circle responsive to the width of the screen:
html,
body {
margin: 0;
padding: 0;
}
.wrap {
margin: 5vw;
height: 80vh;
width: 90vw;
display: inline-block;
position: relative;
}
.wrap div {
position: absolute;
height: 50%;
width: 50%;
}
.wrap .red {
background: tomato;
top: 0;
left: 0;
}
.wrap .yellow {
background: yellow;
top: 0;
left: 50%;
}
.wrap .green {
background: lime;
top: 50%;
left: 0;
}
.wrap .blue {
background: cornflowerblue;
top: 50%;
left: 50%;
}
.wrap .black {
background: black;
height: 20vw;
width: 20vw;
border-radius: 50%;
top: -webkit-calc(50% - 10vw);
top: calc(50% - 10vw);
left: -webkit-calc(50% - 10vw);
left: calc(50% - 10vw);
}
<div class="wrap">
<div class="red"></div>
<div class="yellow"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="black"></div>
</div>
just add margin-left:-200px; in
.center {
position:absolute;
left: 50%;
top: 50%;
height:400px;
background-color:black;
width:400px;
border-radius:50%;
margin-left:-200px;
}
here is the updated fiddle file
DEMO
Added:
top: 50%;, and left: 50%; to make it displayed relative to its parent: .main { position: relative
Added transform: translate(-50%, -50%) to center it. To center it on its own center point :D
You should be clearing the floats in your main container.
To do so add this to the main element:
<div class="main">
<div class="center"></div>
<div class="leftTop"></div>
<div class="rightTop"></div>
<div class="leftBottom"></div>
<div class="rightBottom"></div>
<div class="clearfix"></div>
</div>
<style>
/* Add this to your CSS */
.clearfix{
clear:both;
}
</style>
This will make the main container expand to the height of those floaters. After that you can use:
.center{
margin-top:-200px;
position:absolute;
left: 50%;
top: 50%;
height:400px;
background-color:black;
width:400px;
border-radius:50%;
}
**OR**
.center {
position:absolute;
left: 50%;
top: 50%;
height:400px;
background-color:black;
width:400px;
border-radius:50%;
transform:translate(-50%,-50%); /* This property doens't rely on pixels of the element, so the element can also be defined in percentages */
-webkit-transform:translate(-50%,-50%);
}
Add this css in your code:
.center {
background-color: #000000;
border-radius: 50%;
height: 400px;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
text-align: center;
top: 50%;
width: 400px;
}
See demo http://jsfiddle.net/JentiDabhi/gnhwork9/1/
Im trying to make part of a div transparent so the transparent part can show the background pattern ( a complicated one made with css).
So i have a view_main div and 2 other small divs , divs that will be transparent and show the background
#View_main{
margin-left:7%;
top: 15%;
height:100%;
width:70%;
background-color:white;
position:relative;
border:0;
z-index:1;
}
the left_space div
#left_space{
height:12%;
width:12%;
background-color:transparent;
margin: auto;
position: absolute;
top: 0; left: -100%; bottom: 0; right: 0;
}
the right_space div
#right_space{
height:12%;
width:12%;
background-color:red;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: -100%;
}
i have tried to make the left_space with z-index=2 and the view_main z-index=1 and still nothing ,
Here is a simple example, i im trying to show the background (in this case is green but in my code is a pattern ,or image) from the left_space div
I have also tried the opacity but still nothing!
does someone have any idea?
here it is a visual rapresentation
Here's code for creating blue shape using before and after pseudo-classes
body {
background-color: green;
}
.container {
margin: 50px auto;
height: 300px;
width: 210px;
background-color: blue;
position: relative;
}
.container:before, .container:after {
content: "";
height: 44%;
position: absolute;
background-color: blue;
z-index: -1;
width: 112%;
left: -6%;
}
.container:before {
top: 0;
}
.container:after {
bottom: 0;
}
DEMO
Use opacity property in the div that you want to make transparent and set its value from 0.1 to 1
Reference Link on w3cschools
From your above diagram and link to code provide by you
I modified your code to get that structure:
<!DOCTYPE html>
<html>
<style>
body{
background-color:green;
}
#View_main{
margin-left:7%;
top: 15%;
height:300px;
width:210px;
background-color:blue;
position:relative;
border:0;
}
#left_space{
height:12%;
width:12%;
background-color:green;
margin: auto;
position: absolute;
top: 0; left: -88%; bottom: 0; right: 0;
opacity:1;
}
</style>
<body>
<body><div id="View_main">
<div id="left_space"></div>
</div>
</body>
</body>
</html>
I can refer you,
That the #right_space you can give green color
http://jsfiddle.net/5BZdF/3/
Check this
You can use a transparent box with a large box-shadow drawn with :before or :after pseudo elements.
HTML:
<div id="View_main"></div>
CSS:
#View_main {
position:relative;
overflow: hidden;
height:300px;
width:210px;
}
#View_main:before {
box-shadow: 0 0 0 1000px blue;
position: absolute;
margin-top: -40px;
content: '';
height: 80px; /* Change width and height to increase or decrease transparent box area */
width: 20px;
opacity: 1;
top: 50%;
left: 0;
}
body{
background-color:green;
}
#View_main {
position:relative;
overflow: hidden;
margin-left:7%;
height:300px;
width:210px;
border:0;
top: 15%;
}
#View_main:before {
box-shadow: 0 0 0 1000px blue;
position: absolute;
margin-top: -40px;
content: '';
height: 80px;
width: 20px;
opacity: 1;
top: 50%;
left: 0;
}
<body>
<div id="View_main"></div>
</body>
I have following layout structure:
<div id="wrapper">
<div id="head"></div>
<div id="columns">
<div id="menu"></div>
<div id="content"></div>
</div>
<div id="foot">
<div id="copyright"></div>
<div id="username"></div>
</div>
</div>
with this css:
div#wrapper {
position:relative;
margin-left:auto;
margin-right:auto;
top: 20px;
width:1000px;
}
div#head {
position: absolute;
width:1000px;
height:50px;
left:0px;
top: 0px;
}
div#columns {
position: relative;
width: 1000px;
top: 50px;
}
div#menu {
position:absolute;
width:250px;
top: 0px;
left:0px;
}
div#content {
position: relative;
width: 750px;
top: 0px;
left: 250px;
}
div#foot {
position: absolute;
width: 1000px;
bottom: 20px;
left: 0px;
}
The issue is, that the footer is displayed "to high up" in the page and the content - div is "bigger", which means it has stuff below the footer. See:
If i use position: relative for the footer, it is displayed a bit lower but not below columns-div as I would expect. I also tried with clear:both but that does not change anything.
I'm not a css expert so can someone post a solution and explain why the footer is displayed in this way?
<style>
div#wrapper {
position:relative;
margin-left:auto;
margin-right:auto;
top: 20px;
width:1000px;
}
div#head {
position: absolute;
width:1000px;
height:50px;
left:0px;
top: 0px;
}
div#columns {
position: relative;
width: 1000px;
top: 50px;
}
div#menu {
position:absolute;
width:250px;
top: 0px;
left:0px;
}
div#content {
position: relative;
width: 750px;
top: 0px;
left: 250px;
}
div#foot {
margin-top:25px;
width: auto;
}
</style>
<div id="wrapper">
<div id="head"></div>
<div id="columns">
<div id="menu"></div>
<div id="content"></div> <div id="foot">
<div id="copyright">Footer</div>
<div id="username"></div>
</div>
</div>
</div>
Ok, DaveHogans comments lead me to following solution:
div#wrapper {
position:relative;
margin-left:auto;
margin-right:auto;
top: 20px;
width:1000px;
}
div#head {
position: relative;
width:1000px;
height:50px;
left:0px;
top: 0px;
}
div#columns {
position: relative;
width: 1000px;
}
div#menu {
position:absolute;
width:250px;
top: 0px;
left:0px;
}
div#content {
position: relative;
width: 750px;
top: 0px;
left: 250px;
}
div#foot {
clear:both;
position: relative;
width: 1000px;
padding-top: 10px;
padding-bottom: 50px;
}