I am trying to design a landing page to link to 2 web apps. I am trying to make the design as visually attractive as possible. I think it would look good if the Divs containing the links were side-by-side at the centre of the screen, with their edges overflowing the left and right of the screen. I can then put a border-radius on them and some nice blocky colour:
Goal:
I have tried numerous options, including inline-block and overflow:hidden:
HTML
<div id="centre-pane">
<div class="app-btn">
<img src="icon.png">link text
</div>
<div class="app-btn">
<img src="icon2.png">link text
</div>
</div>
CSS
.app-btn
{
width:1000px;
height:320px;
display:inline-block;
border:10px solid black;
border-radius: 50px;
}
#centre-pane {
width:2000px;
margin:0 auto;
text-align:center;
overflow-x: hidden;
}
Is this possible? I have found several ways of getting them side-by-side (eg here) but nothing that also lets them overflow the screen.
Just using position absolute would do the trick.
I've added a wrapper but it may not be required.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
html,
.wrapper {
height: 100%;
}
.wrapper {
position: relative;
}
.btn {
width: 45%;
height: 30%;
background: lightblue;
border: 2px solid blue;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.left {
left: 0;
border-radius: 0 25% 25% 0;
border-left: none;
}
.right {
right: 0;
border-radius: 25% 0 0 25%;
border-right: none;
}
<div class="wrapper">
<div class="btn left"></div>
<div class="btn right"></div>
</div>
You can achieve this with absolute positioning and negative margins (for the right item). You'll have to fix the size of the body though in order to achieve the effect. I've also added individual classes to the first and second item respectively (.app-btn-1 and .app-btn-2):
body {
width: 2000px;
overflow-x: hidden;
}
.app-btn {
width:1000px;
height:320px;
position: absolute;
border:10px solid black;
border-radius: 50px;
overflow-x: hidden;
}
.app-btn-1 {
left: -500px;
text-align: right;
}
.app-btn-2 {
left: 100%;
margin-left: -500px;
}
DEMO
NOTE: For my demo to look right in jsfiddle, I've quartered the sizes so you can see the effect in the small window
Here is the code you need:
.menu {
display: inline-block;
height: 200px;
width: 40%;
margin-top: calc(50% - 100px);
border: 2px solid red;
background-color: brown;
color: black;
text-decoration: none;
transition: all 0.5s;
}
#left {
float: left;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
margin-left: -10px;
}
#right {
float: right;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
margin-right: -10px;
}
.menu:hover {
background-color: gray;
border-color: brown;
color: red;
}
<div class="menu" id="left">Left</div>
<div class="menu" id="right">Right</div>
I made a
JS Fiddle for you.
Related
I have an outer and inner box with position set to relative. What i want should look like this:
The code is:
body {
background-color: lightblue;
width: 100%;
height: 100%;
}
.outerbox {
position: relative;
float: left;
left: 30px;
top: 50px;
background: orange;
border: 2px solid red;
}
.innerbox {
position: relative;
float: left;
width: 100px;
height: 50px;
margin-left:100px;
margin-top:100px;
background: green;
border: 2px solid red;
}
<body>
<div class="outerbox">
<div class="innerbox">
</div>
</div>
</body>
Is it possible to get a similar result with margin:0 and changing only top and left values in innerbox?
With this style the outer div no more wraps the inner box:
CSS
.innerbox {
position: relative;
float: left;
width: 100px;
height: 50px;
margin: 0;
left: 100px;
top: 100px;
background: green;
border: 2px solid red;
}
Thank you.
* Update *
I would like to add that i don't want to fix the height of the outer box. Thanks.
Is it possible to get a similar result with margin:0 and changing only top and left values in innerbox?
Not really.
Relative positioning moves an element from it’s “default” position that it would normally have - but it keeps the original space it would have required reserved, it does not make it “take” the space at the position it was moved to. So while you can move the inner element to the place you want it, it will not make the outer element “grow” accordingly.
I don't want ("mis")use margin for positioning the inner div
Don’t worry about the “semantics of CSS” too much here … There is often more than one way to achieve a desired optical result, and seldom one way is “wrong” and the other one “right”.
As long as the solution you have achieves what you want, and is not hindered by other restrictions - use it!
When the outerbox has position: relative you can use position: absolute for the .innerbox so you can give dimensions to the .outerbox (width and height) and you can use top and left to position the inner rectangle on every position you want...
body {
background-color: lightblue;
width: 100%;
height: 100%;
}
.outerbox {
position: relative;
width:200px;
height:100px;
left: 30px;
top: 50px;
background: orange;
border: 2px solid red;
}
.innerbox {
position: absolute;
width: 100px;
height: 50px;
left:98px;
top:48px;
background: green;
border: 2px solid red;
}
<body>
<div class="outerbox">
<div class="innerbox">
</div>
</div>
</body>
Hope this will help you.
body {
background-color: lightblue;
width: 100%;
height: 100%;
}
.outerbox {
position: relative;
float: left;
left: 30px;
top: 50px;
background: orange;
border: 2px solid red;
height:200px;
width:300px;
}
.innerbox {
position: absolute;
float: left;
width: 100px;
height: 50px;
margin: 0;
/*left: 100px;
top: 100px; */
bottom:0;
right:0;
background: green;
border: 2px solid red;
}
<div class="outerbox">
<div class="innerbox">
</div>
</div>
I can't work out how to rotate an element so that it sits underneath another one. The image below should illustrate the intended result.
Here is what I have tried so far:
.div1 {
height: 120px;
width: 120px;
float: left;
margin: 20px;
border: solid 1px #000;
overflow: hidden;
}
.div1 button {
width: 48px;
height: 48px;
border: 0;
margin: 0;
padding: 0;
}
.div2 {
background-color: #999;
height: 48px;
line-height: 48px;
box-sizing: border-box;
}
.originFromLeft .div2 {
transform: rotate(90deg);
transform-origin: 24px 24px;
padding-left: 12px;
text-align: left;
}
.div1.originFromRight {
overflow: visible;
}
.originFromRight .div2 {
padding-right: 12px;
text-align: right;
transform: rotate(-90deg);
transform-origin: right top;
}
<div class="div1">
<button>></button>
<div class="div2">HELLO</div>
</div>
<div class="div1 originFromLeft">
<button>></button>
<div class="div2">HELLO</div>
</div>
<div class="div1 originFromRight">
<button>></button>
<div class="div2">HELLO</div>
</div>
The second example basically does what I want but the text is orientated the wrong way.
The closest I can get is example 3 but I need to pull this back to the left. I've tried translate but I can't get it to work, I've tried a negative right margin of 100% which almost works but basically doesn't.
One method to achieve the expected output would be to do the following:
Put the button within div2 and position it at the right edge.
Absolutely position the div2 at the bottom of the parent container.
Rotate the div2 in counter clockwise direction (-90deg) with the transform origin at left bottom.
After rotation, the div2 would entirely go outside of the container and hence we need to add an extra translateY(100%) to the transform stack.
The text is aligned to the right and an extra padding-right (greater than the width of the button) is added to keep the text away from the button.
The button would also get rotated by -90 degree because it is a child of div2 and to counter that (that is to make the button text get displayed properly), we need to apply counter rotation.
Now, in this approach the only drawback is that if the text length increases beyond what can be fit in a single line then it would wrap around to the next line (have a look at the second sample in snippet).
.div1 {
position: relative;
height: 120px;
width: 120px;
float: left;
margin: 20px;
border: solid 1px #000;
overflow: hidden;
}
button {
position: absolute;
display: inline-block;
bottom: 0;
right: 0;
width: 48px;
height: 48px;
border: 0;
margin: 0;
padding: 0;
transform: rotate(90deg);
}
.div2 {
position: absolute;
box-sizing: border-box;
bottom: 0px;
height: 48px;
width: 100%;
padding-right: 60px;
line-height: 48px;
background-color: #999;
text-align: right;
transform: rotate(-90deg) translateY(100%);
transform-origin: left bottom;
}
<div class="div1">
<div class="div2">HELLO
<button>></button>
</div>
</div>
<div class="div1">
<div class="div2">HELLO WORLD!!!!!
<button>></button>
</div>
</div>
I have taken your second example and rotated the element the other way round.
And then fixed the position with an extra translateX
.div1 {
height: 120px;
width: 120px;
float: left;
margin: 20px;
border: solid 1px #000;
overflow: hidden;
}
.div1 button {
width: 48px;
height: 48px;
border: 0;
margin: 0;
padding: 0;
}
.div2 {
background-color: #999;
height: 48px;
line-height: 48px;
box-sizing: border-box;
}
.originFromLeft .div2 {
transform: rotate(-90deg) translateX(-100%);
transform-origin: top left;
padding-left: 12px;
text-align: right;
}
<div class="div1 originFromLeft">
<button>></button>
<div class="div2">HELLO</div>
</div>
I am trying to make a css blocks for numbers shown in image below. My idea / goal is to make one responsive block so if there will be one number it will be round, if two then like second. I have been tried to make border-radius: 50% so the first block I succeed to do second was not like in image with border-radius: 50%
So my question is it possible to make such result with one class block or for each button (left | right) I need to write special class for each block ?
For ellipse use 100%:
border-radius: 100%;
For stadium use big value in px:
border-radius: 9999px;
Example
.round{
display: inline-block;
width:50px;
height:50px;
background: red;
border-radius: 100%;
margin: 10px;
}
.ellipse,.stadium{
width: 80px;
}
.stadium{
border-radius: 9999px;
}
<div class="round circle"></div>
<div class="round ellipse"></div>
<div class="round stadium"></div>
Fixed Height Solution
For this you will need a "fixed" height (otherwise, you'll need to calculate this with jquery).
What you'll need to do is something like this;
html,body{background:#222;}
div {
margin:10px;
display: inline-block;
height: 30px;
border-radius: 25px;
background: lightblue;
font-size: 30px;
min-width: 30px;
text-align: center;
line-height: 30px;
padding: 10px;
position:relative;
color:blue;
}
div:before{
content:"";
position:absolute;
left:0;
top:-10px;
width:100%;
border-top:3px solid tomato;
}
<div>1</div>
<div>123</div>
Note: The border-radius should be set to half the overall height for this.
I've also included a min-width to ensure it is always at least a circle.
JQuery Solution For non-fixed heights
$(document).ready(function() {
$('div').each(function(index) {
var height = $(this).height();
$(this).css("border-radius", height + "px");
});
});
html,
body {
background: #222;
}
div {
margin: 10px;
display: inline-block;
border-radius: 25px;
background: lightblue;
font-size: 30px;
min-width: 30px;
text-align: center;
line-height: 30px;
padding: 10px;
position: relative;
vertical-align:top;
color: blue;
}
div:before {
content: "";
position: absolute;
left: 0;
top: -10px;
width: 100%;
border-top: 3px solid tomato;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>1</div>
<div>123</div>
<div>Not a set height,
<br/>either :)</div>
div{
height:50px;
width:50px;
border-radius:9999px;
background:red;
text-align:center;
display:inline-block;
line-height:3em;
font-weight:bold;
font-size:16px;
}
<div>2</div>
<div>28</div>
Here is the JSFiddle: http://jsfiddle.net/W2UvH/1/
Very simple implementation of a sticky footer that should stick to the bottom of the screen when there is less content height than the height of the screen. But if the height of the content extends beyond the height of the screen, then the footer should follow along with it.
I don't understand why my footer is stopping half way up the screen.
HTML:
<div id="Canvas">
<div id="Container">
<div id="Wrapper">
</div>
</div>
</div>
<div id="SiteFooter">
<p>Copyright © All Rights Reserved.</p>
</div>
CSS:
body, html {
height: 100%;
}
#Canvas {
position: relative;
min-height: 100%;
}
#Container {
margin: auto;
background-color: #CCC;
max-width: 802px;
padding: 15px 0;
}
#Wrapper {
margin-right: auto;
margin-left: auto;
margin-top: 15px;
width: 730px;
background-color: #999;
border: 1px solid #DEDEDE;
overflow: hidden;
height: 1000px;
}
#SiteFooter {
bottom: 0;
left: 0;
position: absolute;
width: 100%;
z-index: 9000;
background-color: #FF00FF;
height: 45px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #E0E0E0;
}
I see that all your other elements are positions relative. So, not sure what your exact implementation is, but:
#SiteFooter {
position: relative;
}
The above code should also do it for you.
You want the position to be fixed, not absolute.
#SiteFooter {
position: fixed;
}
So I'm looking to create an effect where a header font is underlined. I want the underline to stretch the width of the div that the header is in. BUT I want the area of that underline that is directly underneath the text to be in a separate color. So under the text it should be blue, but the moment that underline is no longer underneath the text, it should be grey. I was figuring a double border system would work, but I'm not sure if it's even possible anymore to do this with just CSS...is it?
Here's another quick solution. Change the 500px to anything you want, could be a percentage.
HTML
<div class="blue">
Header
</div>
<div class="grey">
</div>
<div class="clear">
</div>
CSS
.blue {
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 2px solid blue;
float: left;
overflow: hidden;
position: absolute;
z-index: 0;
}
.grey {
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 2px solid grey;
float: left;
width: 500px;
overflow: hidden;
position: absolute;
z-index:-1;
}
.clear {
clear: both;
}
Example: http://jsfiddle.net/UuYvv/
Did this with fixed positioning here. If you try and do it with everything relative, it gets a little funkier but still sort of works. Hope that helps!
html:
<div class="outer">
<div class="word">My Word</div>
</div>
css:
.outer {
left: 0px;
top: 0px;
height: 20px;
width: 200px;
border-bottom: 2px solid grey;
overflow: visible;
position:fixed;
}
.word {
position: fixed;
top: 0px;
width: 80px;
margin-bottom: -1px;
border-bottom: 2px solid blue;
}