I'm trying to make a vertical button inside a div element, but I can't get the div's height to fill the remaining space.
I flipped the button using transform and I'm using Bulma for the layout. Here's the outline of my code:
.column {
border: 1px solid #ddd;
margin-top: 50px;
background: gray;
}
.button {
width: auto;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet" />
<div class="columns">
<div class="column">
SHOW OPTIONS
</div>
</div>
Not sure what I can do here to fix this and make it responsive? I know I can always use a fixed height, but is there any way I could do it differently, so it expands with the content? Can someone please take a look and let me know if you have any suggestions? I don't even have to use transform, that just seemed like a logical option.
Thank you!
If for any reason, you can't use the writing-mode property, here is an alternative solution:
.column {
border: 1px solid #ddd;
margin-top: 50px;
background: gray;
}
.button {
width: auto;
}
.so55562898-outer {
display: inline-block;
}
.so55562898-inner {
transform: rotate(90deg);
padding-top: calc(100% - 36px);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet" />
<div class="columns">
<div class="column">
<div class="so55562898-outer">
<div class="so55562898-inner">
SHOW OPTIONS
</div>
</div>
</div>
</div>
Note that this solution requires to know the height of the button (in this case: 36px).
I hope it works for you
.column1 {
border: 1px solid #ddd;
margin-top: 50px;
background: gray;
display: block;
padding: 3.40rem;
}
.button {
width: auto;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet" />
<div class="columns">
<div class="column1">
SHOW OPTIONS
</div>
</div>
Related
I have manged to piece together enough html/css from sources online to almost be able to do what I want. I am trying to display n (currently 4) images with buttons in the center next to each other horizontally across the top of the page. I have the four images loading with a button in the middle. I have them surrounded by a box. I have them acting responsively to the size of the browser (within reason).
Unfortunately, for a reason that is unclear to me, the images will only spread about half way across the box:
Here is what I believe to be the relevant html:
<div id ="buttonWrapper">
<div class="container" id="position1">
<img src="images/originals/mountainclimber.jpg" alt="Mountain Climber">
<button class="btn" id="mountainHtmlButton">The Mountain Climber</button>
</div>
<div class="container" id="position2">
<img src="images/originals/fuchun.jpg" alt="Fuchun">
<button class="btn" id="fuchunHtmlButton">Dwelling in the Fuchun Mountains</button>
</div>
<div class="container" id="position3">
<img src="images/originals/palace.jpg" alt="Palace">
<button class="btn" id="palaceHtmlButton">Amailenborg Palace Square</button>
</div>
<div class="container" id="position3">
<img src="images/originals/udnie.jpg" alt="Udnie">
<button class="btn" id="udnieHtmlButton">Udnie</button>
</div>
</div>
And the corresponding relevant CSS:
/* Container needed to position the button. Adjust the width as needed */
.container {
position: relative;
width: 25%;
}
/* Make the image responsive */
.container img {
width: 100%;
height: auto;
}
/* Style the button and place it in the middle of the container/image */
.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
}
.container .btn:hover {
background-color: black;
}
/*
**********
Section for button alignment/positioning stuff
**********
*/
#buttonWrapper {
background-color: black;
border-radius: 10px;
}
#position1 {
float: left;
/*width: 25%; */
overflow: hidden;
}
#position2 {
overflow:hidden;
}
#position3 {
overflow:hidden;
}
#position4 {
overflow:hidden;
}
The only 50% references I see appear to be tied to the button placement. But I clearly do not fully understand what is happening here. Again, my ideal outcome here is that the 4 images are displayed side by side horizontally all the way across the black background (assuming the window size is something reasonable). I know that will still look slightly strange because of the different aspect ratios of the images.
thank you for any help
#buttonWrapper {
display:flex;
}
/* ↑ i added above code ↑ */
.container {
position: relative;
width: 25%;
}
/* Make the image responsive */
.container img {
width: 100%;
height: auto;
}
/* Style the button and place it in the middle of the container/image */
.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
}
.container .btn:hover {
background-color: black;
}
/*
**********
Section for button alignment/positioning stuff
**********
*/
#buttonWrapper {
background-color: black;
border-radius: 10px;
}
#position1 {
float: left;
/*width: 25%; */
overflow: hidden;
}
#position2 {
overflow:hidden;
}
#position3 {
overflow:hidden;
}
#position4 {
overflow:hidden;
}
<div id ="buttonWrapper">
<div class="container" id="position1">
<img src="https://picsum.photos/300/700" alt="Mountain Climber">
<button class="btn" id="mountainHtmlButton">The Mountain Climber</button>
</div>
<div class="container" id="position2">
<img src="https://picsum.photos/300/700" alt="Fuchun">
<button class="btn" id="fuchunHtmlButton">Dwelling in the Fuchun Mountains</button>
</div>
<div class="container" id="position3">
<img src="https://picsum.photos/300/700" alt="Palace">
<button class="btn" id="palaceHtmlButton">Amailenborg Palace Square</button>
</div>
<div class="container" id="position3">
<img src="https://picsum.photos/300/700" alt="Udnie">
<button class="btn" id="udnieHtmlButton">Udnie</button>
</div>
</div>
Follow this in your CSS.
Give your container float:left; width: 25%; and position:relative;
.container img { width: 100%; object-fit: cover; height: auto;}
last thing from your html , make correction in ID names. You can not repeat ID name, You have repeated position3 ID twice.
How do i create like the image using two div?
I have search many used skew and I tried but didn't get exactly like the image.
only skew the div. not the content inside.
Here is what I have tried:
.container{
width: 100%;
}
.left{
float: left;
background: red;
height: 50px;
width: 50%;
-ms-transform: skew(-30deg, 0deg);
-webkit-transform: skew(-30deg, 0deg);
transform: skew(-30deg, 0deg);
}
.right{
float: left;
background-color: #666;
height: 50px;
width: 50%;
}
<div class="container">
<div class="left">
LEFT
</div>
<div class="right">
RIGHT
</div>
</div>
How is this. I used a gradient background and CSS grid to create two divs inside that are not skewed. A couple of caveats:
You will need to use padding on both sides to keep your text from running over the top of your color change.
You may need to use webkit for browser support of the linear gradient, depending on which older browser you intend to support.
.container {
background: linear-gradient(45deg,#FF0000 50%,#666666 50%);
display: grid;
grid-template-columns: auto auto;
width: 100%;
}
.side {
background-color: transparent;
color: #FFFFFF;
height: 50px;
}
<div class="container">
<div class="side">
test
</div>
<div class="side">
test
</div>
</div>
I've already coded this, but I'm just wondering if there's an easier way to make this? My way seems a bit 'glitchy', especially since I'm going to need the content to be in the middle of a div.
Here's my code so far:
body {
padding-top: 20px;
}
#line {
border-style: solid;
border-width: 90px 100vw 0 0;
border-color: white #fafafa transparent transparent;
transform: scale(1.0001);
}
.wrap {
background-color: #fafafa;
text-align: center;
padding-bottom: 100px;
}
hr {
width: 100px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div id="line"></div>
<div class="wrap">
<h2>Title</h2>
<hr>
<p>Text goes here</p>
<a href="#" class="btn btn-primary rounded-0 border-0">Click Here<a>
</div>
I don't want to use SVG, though. I'm trying to achieve this with CSS only.
You can use a div with either a border or the div itself with a set height and then use CSS transforms to rotate i.e. transform: rotate(7deg);
https://www.w3schools.com/cssref/css3_pr_transform.asp
Your solution is great though, and effective for allowing the div to cover the page.
I wouldn't use an element just for that effect. This is design, so separating it from the markup and keeping it in CSS would be ideal. You can use a pseudo element instead. And you can make one that is wide and use transform: rotate() with it to create a diagonal line.
body {
padding-top: 20px;
}
.wrap:before {
content: '';
position: absolute;
top: -50px;
left: -100%;
right: -100%;
bottom: 50%;
background: #fafafa;
transform: rotate(-2.5deg);
z-index: -1;
}
.wrap {
background-color: #fafafa;
text-align: center;
padding-bottom: 100px;
margin-top: 100px;
position: relative;
}
hr {
width: 100px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="wrap">
<h2>Title</h2>
<hr>
<p>Text goes here</p>
<a href="#" class="btn btn-primary rounded-0 border-0">Click Here<a>
</div>
I have a container div for the main content but am trying to have a sidebar float to the left of it. For example (http://www.bureautonic.com/en/) the menu button.
This is the code
.main-wrapper {
position: relative;
top: 50%;
height: 500px;
}
.container {
position: relative;
height: 100%;
}
.body {
height: 100%;
}
.slider {
display: block;
width: 940px;
height: 500px;
margin-right: auto;
margin-left: auto;
float: none;
}
.img {
position: absolute;
width: 100%;
height: 100%;
max-height: 100%;
}
.tagline {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
display: block;
width: 332px;
margin-right: auto;
margin-left: auto;
padding: 1em 3em;
border: 1px solid white;
-webkit-transform: translate(-50%, 0px) translate(0px, -50%);
-ms-transform: translate(-50%, 0px) translate(0px, -50%);
transform: translate(-50%, 0px) translate(0px, -50%);
font-family: 'Josefin Sans', sans-serif;
color: white;
text-align: center;
text-decoration: none;
text-transform: none;
}
.header {
margin-top: 33px;
margin-bottom: -61px;
}
.brand {
font-family: Cardo, sans-serif;
text-align: center;
}
<body class="body">
<div class="w-section container">
<div class="w-container header">
<h1 class="brand">The One And Only</h1>
</div>
<div class="w-container main-wrapper">
<div data-animation="outin" data-duration="500" data-infinite="1" data-easing="ease-in-cubic" data-hide-arrows="1" class="w-slider slider">
<div class="w-slider-mask">
<div class="w-slide slide">
<div class="tagline">
<h1>Marc Cain</h1>
<h3>F/W 2015-16</h3>
</div>
<img width="846" src="http://uploads.webflow.com/567a26541a69a693654038a1/567b15da06a9675444fc740d_marc_cain_campaign.jpg" class="img">
</div>
</div>
<div class="w-slider-arrow-left">
<div class="w-icon-slider-left"></div>
</div>
<div class="w-slider-arrow-right">
<div class="w-icon-slider-right"></div>
</div>
<div class="w-slider-nav"></div>
</div>
</div>
</div>
</body>
I'm using webflow and uploaded the site for you guys http://the-one-and-only.webflow.io/
I originally tried making another absolute div with a set width and 100% height, but the menu button wasn't relative to the main container. Any help would be appreciated.
Give this a look, it mimics what http://www.bureautonic.com/en/ has for their menu
$(function() {
$('#menu-container').click(
function() {
ToggleMenu();
}
);
});
function ToggleMenu() {
var $menu = $('#menu');
var newleft = +$menu.css('left').replace('px', '') <= -150 ? '0' : '-300px';
$('#menu').css('left', newleft);
}
#menu,
#content {
width: 300px;
height: 200px;
}
#menu-container {
display: inline-block;
height: 200px;
width: 30px;
background-color: yellow;
position: relative;
}
#menu {
display: inline-block;
position: absolute;
}
#content {
display: inline-block;
position: relative;
overflow: hidden;
background-color: red;
}
#menu {
transition: left 1s;
left: -300px;
background-color: orange;
}
#menu-label {
-moz-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
-webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
transform: translateX(-50%) translateY(-50%) rotate(-90deg);
position: absolute;
top: 50%;
text-align: center;
width: 200px;
left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="menu-container">
<div id="menu-label">
This is my Menu Label
</div>
</div>
<div id="content">
This is the content
<div id="menu">
Menu
</div>
</div>
For the sliding menu
The basic concept is a parent div with position:relative and overflow:hidden , and a child div with position:absolute, beginning with a negative left equal to the width of the div
I used the css transition property for the smooth slide effect
Edit:
For the left aligned & rotated menu label
This effect is created with a combination of several properties.
My code block has been updated with the appropriate css.
See here http://jsfiddle.net/CCMyf/79/ (not my fiddle) for alterations
to the css if you need to have a dynamic height
If you want to float a menu to left of the main content, you need to firstly create the menu element that you want to be the menu (obviously), then float it to the left with float: left. e.g.
HTML
<div class="floated-menu">
Menu
</div>
CSS
.floated-menu {
float: left;
width: 50px;
height: 600px;
background-color: #ccc;
}
Then you have to float the main content container as well. .e.g
.container {
float: left;
position: relative;
width: 800px;
height: 100%;
}
I could be wrong, but I believe if you don't float both the items, the normal (non-floated context) behaviour of the container divs display: block; property kicks in and it will move down the page to the next "line". Which is weird because all items next to something thats floated should lose their display block behaviour and sit next to the floated item - i.e. float was originally intended to make block type headings and paragraphs sit next to pictures like in a magazine or newspaper, but yep, welcome to the world of CSS - you fill find many nonsensical things like this.
Also, the combined width of both floated elements border box (the widest and largest of the boxes that an element is contained in) cannot be wider than their parent element - other wise the second element will drop down to the next line - which actually does make sense. I have reduced the sizes for you in my demo, but you will have to manage that as you build your page.
You also need to remember that, by default the browser uses the
"content-box" box-sizing property. from the docs
content-box
This is the default style as specified by the CSS standard. The width
and height properties are measured including only the content, but not
the padding, border or margin. Note: Padding, border & margin will be
outside of the box e.g. IF .box {width: 350px}; THEN you apply
{border: 10px solid black;} RESULT {rendered in the browser} .box
{width: 370px;}
Here is a demo - http://codepen.io/anon/pen/QyKyVV?editors=110
Jsfiddle: https://jsfiddle.net/pqbu2d70/
Requirements:
In responsive mode, the bottom box must be at the bottom, middle in the middle, top at the top
In desktop mode, the bottom box must be on the left side
No javascript
The height of the parent must be the height of the biggest child (so no absolute positioning)
You can see that as the fiddle stands now, the bottom is staying at the top as you reduce the width of the window. How can the above be achieved with just HTML / CSS?
.parent {
border: 1px solid blue;
overflow: hidden;
}
.random-height {
height: 200px !important;
}
.child {
height: 100px;
width: 30%;
border: 1px solid red;
float: left;
}
#media (max-width: 500px) {
.child {
width: 100%;
}
}
}
<div class="parent">
<div class="child random-height">bottom</div>
<div class="child">middle</div>
<div class="child">top</div>
</div>
I was able to achieve this by applying the following to both the parent and the children, but it seems...... wrong? https://jsfiddle.net/pqbu2d70/1/
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
I believe your best bet would be using direction. Change it in the parent to rtl (right to left), and in the children reset it to initial.
In order for it to work, instead of floating, you would need to set the children as inline-block elements.
I haven't solved every margin/padding issue, but it would be something like this:
Updated Fiddle
.parent {
border: 1px solid blue;
overflow: hidden;
direction: rtl;
}
.random-height{
height: 200px !important;
}
.child {
height: 100px;
width: 30%;
border: 1px solid red;
display: inline-block;
direction: initial;
}
#media (max-width: 500px) {
.child {
width: 100%;
}
}
<div class="parent">
<div class="child">top</div>
<div class="child">middle</div>
<div class="child random-height">bottom</div>
</div>