Not sure if I'm thinking of this the entirely wrong way but some guidance would be much appreciated. I'm essentially trying to get a child div larger than it's parent.
Please see image for what I'm trying to achieve
However the height on the container element will be smaller. Am I right in thinking I should have them as separate elements or is there a better practice way?
You can use position and achieve what you want. I would say, a combination of position, negative margin will do the trick:
.parent {background-color: #000; height: 100px;}
.parent .child {height: 200px; background-color: #ccc; width: 75%; margin: auto;}
.parent {margin-top: 100px;}
.parent .child {position: relative; top: -50%;}
<div class="parent">
<div class="child"></div>
</div>
Preview:
If you don't know the height of the content, you can use translate to fix it to the centring:
.parent {background-color: #000; width: 75%; margin: auto;}
.parent .child {height: 200px; background-color: #fff; width: 75%; margin: auto;}
.parent {margin-top: 100px; position: relative; min-height: 100px;}
.parent .child {position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%);}
Simply transform: scale(1.2); your child element
#parent{
margin: 40px;
background:#000;
}
#child{
background:#d8d8d8;
height:140px;
box-shadow: 0 0 40px rgba(0,0,0,0.2);
position:relative;
margin:0 auto;
width:60%;
transform:scale(1.2); -webkit-transform:scale(1.2);
}
<div id="parent">
<div id="child"></div>
</div>
Related
I was ask to create half circle-like design for my project in html css , its look like this :
Figma Design but it really ""zoomed"in.
i tried to make it and the closest i could look like this :
My Closest
with this code :
.semi-circle {
transform: translate(0, 0);
height: 150px;
width: 100%;
border-radius: 0 0 150px 150px;
/* border-radius: 0 0 150px 150px; */
background-color: #0E47A1;
}
<div class="semi-circle"></div>
what can i tweak and how to make it like the designed one
Heres some idea for you. you can set it to transform then rotate it at the same time put a fake div at the top so you can cover all remaining blue. Let me know.
body {background-color:lightgrey;}
.semi-circle {
height: 200px;
width: 200px;
border-radius : 50%;
background-color: #0E47A1;
margin-top:0px;
transform: scale(1.5) rotateX(105deg);
overflow:hidden;
align-items:center;
margin-left:50px;
}
.box {
width: 300px;
height: 800px;
border:1px solid gray;
background-color:white;
}
.blue {
background-color:#0E47A1;
height:100px;
}
.whitebox {
width:220px;
height:40px;
line-height:1;
margin:0 auto;
box-shadow: 2px 2px 4px 2px gray;
text-align:center;
padding:10px;
border-radius:20px;
position:absolute;
top:120px;
left:40px;
background-color:white;
}
<body>
<div>Home</div>
<div class="box">
<div class="blue">
<div class="semi-circle"></div>
<div class="whitebox">Hello Visitors!
<span>this is the hidden text......</span>
</div>
</div>
</div>
</body>
I have used ::after to create the effect, you can change the height get desired curve.
.curve{
position: relative;
width: 300px;
height: 200px;
margin: auto;
overflow: hidden;
}
.curve::after{
content: "";
position: absolute;
top: 0px;
left: 50%;
border-radius:50%;
background: blue;
width:500px;
height:300px;
transform: translate(-50%, -50%);
}
<div class="curve"></div>
This looks like the example. It is responsive and will fit like that on any screen.
.semi-circle {
transform: translate(0, 0);
height: 150%;
width: 150%;
border-radius: 50%;
/* border-radius: 0 0 150px 150px; */
background-color: #0E47A1;
position: absolute;
top: -90%;
left: -22.5%;
}
body {
overflow: hidden;
}
<div class="semi-circle"></div>
The image is moving depending on the size of the screen, I would like to fix it on the top middle. How do I do it? Here is 2 screenshots explaining:
HTML:
<div class="logo"></div>
CSS:
.logo {
background:url(../img/logo.png) no-repeat;
position:absolute;
display: inline-block;
left:50%;
top:30%;
height:120px;
width:175px;
margin:-115px 0px 0px -112px;
}
You could use translate:
.logo {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
height:120px;
width:175px;
background:url(../img/logo.png) no-repeat;
}
jsFiddle
You can use calc function in CSS.
Resize your window to see it's effect (in fullscreen).
.logo{
position: absolute;
width: 175px;
height: 120px;
top: 30%;
left: calc(50% - (175px / 2)); /* 50% parent width - half_of_image_width */
border: 1px solid red;
}
.container{
position: absolute;
width: 90%;
height: 90%;
border: 1px solid black;
}
<div class="container">
<div class="logo"></div>
</div>
I want to make it so that Online Users div stays always at size of 200px while the chat window to the left of it resize to the max size it can taking all available space.
So when window is resized for example - the chat window will shrink but Online Users window stays at 200px, kind of like liquid layout.
left div (chat window) is: entry_window
right div (online users) is: online_window
#entry_window{
border: 2px solid #D4D4D4;
float: left;
width: 75%;
height: 100%;
margin: 1%;
overflow: scroll;
overflow-x: hidden;
}
#online_window{
border: 2px solid #D4D4D4;
margin: 1%;
margin-left: 0%;
display: inline-block; float: left;
background-color: white;
width: 21.5%;
height: 100%;
}
oh and by the way: for vertical size I made this function to make it in height as big as possible without disturbing bottom part.
function autoscale(){
var v = window.innerHeight - 170;
document.getElementById("entry_window").style.height= v+"px";
document.getElementById("online_window").style.height= v+"px";
}
This can be done entirely without javascript. You can use absolute positioning along with defining top/left/bottom/right and width.
example:
<div id="lefty">this is left content</div>
<div id="righty">this is right content</div>
and
#lefty {
position: absolute;
background-color: blue;
top: 0;
bottom: 0;
left: 0;
right: 200px;
}
#righty {
position: absolute;
background-color: red;
top: 0;
bottom: 0;
width: 200px;
right: 0;
}
See this jsfiddle:
http://jsfiddle.net/Lyp96yqq/
With display:table and table-cell you can do it this way:
*{margin:0;padding:0}
.parent {
width:100%;
display:table;
}
.parent > div {
height:200px;
line-height:200px;
background:orange;
display:table-cell;
}
.parent .fixed {
width:200px;
}
.parent .flexible {
background:red;
}
<div class="parent">
<div class="fixed">Fixed Width</div>
<div class="flexible">Chat Room</div>
</div>
Here The Example on Jsfiddle too.
This could be easily done with the css calc function. However, it depends on what browsers you want to support. check out this link so see what it is compatible with.
Essentially, just do this:
#entry_window{
border: 2px solid #D4D4D4;
float: left;
width: calc(100% - 208px);
height: 100%;
overflow: scroll;
overflow-x: hidden;
background-color:red;
}
#online_window{
border: 2px solid #D4D4D4;
margin-left: 0%;
display: inline-block;
float: left;
background-color: white;
width: 200px;
height: 100%;
}
note: you need to -208 to take the border into account. Also, check out the jsfiddle
I have a page I'm creating where I want to have to columns the first colomn has a fixed a sized and the second column has to fill the rest of the window width. This is what I came up so far but it doesn't seen to work.
HTML:
<div id="container">
<div class="nav"></div>
<div class="page">my page content</div>
</div>
CSS:
#container{
width: 100%;
padding: 0 0;
}
#container > div{
color: white;
}
.nav{
width:200px;
height:500px;
float:left;
background-color:#666;
}
.page{
height:500px;
float:left;
background-color:#FFF;
}
JS FIDDLE
Just remove float: left and add width: 100% to .page
http://jsfiddle.net/scNSL/2/
You probably can do it like this: http://jsfiddle.net/scNSL/4/
<div id="container">
<div class="page">
<div class="nav"></div>
Inhalt
</div>
</div>
#container{
width: 100%;
padding: 0 0;
}
#container > div{
color: white;
}
.nav{
width:200px;
height:500px;
float:left;
background-color:#666;
}
.page{
height:500px;
width:100%;
float:left;
background-color:#333;
}
Try this,
.page{
height:500px;
width:100%;
background-color:#FFF;
}
Note: Removed float:left; & added width:100%;
Instead of writing it myself...
Check out this article for more information:
http://css-tricks.com/fluid-width-equal-height-columns/
Should help you learn more about equal height columns 100% height etc.
Try this:
#container{
width: 100%;
padding: 0 0;
}
#container > div{
color: white;
}
.nav{
width:40%;
height:500px;
float:left;
background-color:#666;
}
.page{
height:500px;
width: 60%;
float:left;
background-color:#333;
}
The classical way of creating a fixed + fluid column layout is to float an element next to another element with padding:
HTML:
<div class="container">
<div class="nav"></div>
<div class="page">content</div>
</div>
CSS (float):
.container {
color: #FFF;
}
.nav {
background-color: #666;
float: left;
height: 200px;
width: 200px;
}
.page {
background-color: #333;
height: 200px;
padding-left: 200px;
}
This has some drawbacks, particularly when the .nav and .page elements have differing heights, or when you want to add a border around the .page element.
The modern way of creating a fixed + fluid column layout is to use flexbox:
.container {
color: #FFF;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
.nav {
background-color: #666;
height: 200px;
width: 200px;
}
.page {
background-color: #333;
-webkit-flex: 1;
flex: 1;
height: 200px;
}
fiddle (pardon the BEM classes, they're used so that the difference in CSS between these two methods can be seen more readily)
True Fit (allows for borders)
Change to this (see fiddle):
.page{
height:500px;
overflow: hidden; /* or auto */
background-color:#FFF;
}
By not floating the .page, and setting an overflow other than visible, the browser fills a block level element with the space beside the floated element (good explanation here).
Why this can be better than setting width: 100%
Compare these div elements with borders. One with width at 100%, one with the overflow set as above.
I'm using a div, and inside that div another div which needs to stick to the parent div.
But when i rescale the browser there's it's not sticking to the right place. Do i need to do this with javascript?
HTML
<div class="block">
White div block
<div class="block-content">
Green div
</div>
</div>
CSS
.block {
position: relative;
width: 100%;
height: 100%;
background-image: url('voorgrond.png');
background-repeat: no-repeat;
background-position: 70% center; /* positie van de screen */
}
.block-content {
position: absolute;
left: 65%;
top: 42%;
width: 200px;
height: 200px;
}
The green dot should stick inside the white square.
LIVE DEMO
<div class="block">
<div class="block-content"></div>
</div>
.block {
position: absolute;
background:#fff;
border-radius:10%;
width: 200px;
height: 200px;
padding:50px;
left: 65%;
top: 50%;
margin-top: -150px;
margin-left: -150px;
}
.block-content {
position: absolute;
background: #00A652;
border-radius:50%;
width: 200px;
height: 200px;
}
#media (max-width: 600px) {
.block{
left: 50%;
}
}
Assuming your goal is the image I made this fiddle which mimics what you seem to need.
FIDDLE
HTML:
<div class="block">
<div class="block-content">
Hierzo!
</div>
</div>
CSS:
.block{
position:relative;
margin: 300px 0 0 50%;
width:30%;
height:80px;
background:grey;
border-radius:10px;
}
.block-content{
width:50px;
height:50px;
background:green;
border-radius:50px;
position:absolute;
top:50%;
left:50%;
margin: -25px 0 0 -25px;
}
Hope this helps!
EDIT Added responsive width to .block