Anyone have code for sidebar button (fixed + 90deg)? Can't seem to find anything solid.
see demo / idea
https://codepen.io/clientagency/pen/MWgmKMx
see the pen
Use this example I created:
.sticky-container {
background-color: #06c;
box-shadow: gray -1px 1px;
padding-top: 10px;
padding-left: 10px;
padding-bottom: 10px;
padding-right: 3px;
position: fixed;
top: 50%;
right: 0px;
width: 60px;
height: auto;
z-index: 9999;
transform: rotate(-90deg);
margin-top: -24px;
text-align: center;
color: white;
}
a {
padding:0 !important;
display: block;
text-align: left;
height: 24px;
width: 24px;
padding: 8px 16px;
color: #ffff;
font-family: Arial, sans-serif;
font-size: 17px;
font-weight: bold;
text-decoration: none;
}
<button class="sticky-container">
<div class="button-container">
Test
</div>
</button>
<!-- Test Date -->
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
For a professional fixed sidebar and a stylish button with readable vertical text, check out this JSFiddle I made for you: https://jsfiddle.net/4y5Lhp3c/1/. The button only goes from horizontal to vertical when the page is done loading, so be patient :)
Markup:
<input type="button" value="Contact Us" id="vert" />
jQuery:
$(document).ready(function() {
$('#vert').val('c\no\nn\nt\na\nc\nt\n\nu\ns');
});
Related
I want to make an adaptive page with CSS grid like this for PC:
IMG | Text
Text | IMG
IMG | Text
And like this for mobile:
IMG
Text
IMG
Text
IMG
Text
The problem is I can not wrap each pair Text IMG to a div.
How can I make such layout with that chess order and without it for mobile?
img {
max-width: 100%;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
#media screen (max-width: 540px) {
.grid {
grid-template-columns: 1fr;
}
}
<div class="grid">
<div class="info">
<h2>Lorem, ipsum.</h2>
<p>Lorem ipsum dolor sit amet.</p>
<button>Lorem.</button>
</div>
<div class="img">
<img src="https://via.placeholder.com/350x150" alt="">
</div>
<div class="info">
<h2>Lorem, ipsum.</h2>
<p>Lorem ipsum dolor sit amet.</p>
<button>Lorem.</button>
</div>
<div class="img">
<img src="https://via.placeholder.com/350x150" alt="">
</div>
<div class="info">
<h2>Lorem, ipsum.</h2>
<p>Lorem ipsum dolor sit amet.</p>
<button>Lorem.</button>
</div>
<div class="img">
<img src="https://via.placeholder.com/350x150" alt="">
</div>
</div>
You can adjust the placement using grid-column:
img {
max-width: 100%;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-flow:dense; /* Don't forget this to fill all the tracks */
}
/* you pattern repeat each 4 elements */
.img:nth-child(4n + 2) {
grid-column:1;
}
.info:nth-child(4n + 1) {
grid-column:2;
}
/**/
#media screen and (max-width: 540px) {
.grid {
grid-template-columns: 1fr;
}
.info:nth-child(4n + 1) {
grid-column:1;
}
}
<div class="grid">
<div class="info">
<h2>Lorem, ipsum.</h2>
<p>Lorem ipsum dolor sit amet.</p>
<button>Lorem.</button>
</div>
<div class="img">
<img src="https://via.placeholder.com/350x150" alt="">
</div>
<div class="info">
<h2>Lorem, ipsum.</h2>
<p>Lorem ipsum dolor sit amet.</p>
<button>Lorem.</button>
</div>
<div class="img">
<img src="https://via.placeholder.com/350x150" alt="">
</div>
<div class="info">
<h2>Lorem, ipsum.</h2>
<p>Lorem ipsum dolor sit amet.</p>
<button>Lorem.</button>
</div>
<div class="img">
<img src="https://via.placeholder.com/350x150" alt="">
</div>
<div class="info">
<h2>Lorem, ipsum.</h2>
<p>Lorem ipsum dolor sit amet.</p>
<button>Lorem.</button>
</div>
<div class="img">
<img src="https://via.placeholder.com/350x150" alt="">
</div>
<div class="info">
<h2>Lorem, ipsum.</h2>
<p>Lorem ipsum dolor sit amet.</p>
<button>Lorem.</button>
</div>
<div class="img">
<img src="https://via.placeholder.com/350x150" alt="">
</div>
</div>
I am trying to create a layout using Flexbox where I have elements which consist of 3 other internal elements. The parent item element contains 3 divs: image, button, text. The issue is that my items will not always contain images or text that is the same height as the others. The button is the one thing that will have a consistent height. I am trying to figure out if it's possible to have each of my image divs be the same height as the tallest one and same for the text divs. I would also like the images to be vertically aligned to the bottom, so if one element has a shorter image, the white space to make the element the same height will go above the image like this:
And here is what I have so far:
.container {
display:flex;
flex-wrap:wrap;
flex-flow:row wrap;
justify-content:center;
}
.item {
max-width:200px;
margin:0 20px;
}
<div class="container">
<div class="item">
<div class="image">
<img src="http://placehold.it/150x300" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://placehold.it/150x200" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://placehold.it/150x250" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://placehold.it/150x270" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
I know that I could do this using Javascript to loop through each item to get the tallest and change the CSS of all others, but I'd like to use only CSS if possible. I also know that I could just set the height of the image container to the height of the tallest image, but these images are going to be dynamic and there are going to be a lot of them, so I'd rather have a solution that doesn't require hardcoding values.
Flexing the .item class and adding justify-content: flex-end; would provide the majority of the affect, but as far as I know you'd have to set a specific height on at least one of the items if you want two elements to be aligned the same across flexbox. Happy to be proven wrong though.
You could alternatively use margin-top: auto on the first child to push any unused space to the top and everything else down.
.container {
display:flex;
flex-wrap:wrap;
flex-flow:row wrap;
justify-content:center;
}
.item {
max-width:200px;
margin:0 20px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.text {
height: 36px; /* magic number */
}
<div class="container">
<div class="item">
<div class="image">
<img src="http://placehold.it/150x300" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://placehold.it/150x200" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://placehold.it/150x250" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://placehold.it/150x270" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
I'm currently creating a web page with Bootstrap and I'm using columns. My page looks like that:
I'd like to center the last column (in the second row) but the page is dynamic and I don't know how many containers there are.
I found this two solutions on Google:
1) Add this to my css:
.col-centered{
float: none;
margin: 0 auto;
}
2) Add this to the class tag attribute
col-lg-offset-4
But both solutions look like this:
That is not what i want. I want it to look like this:
How can i achieve this?
Bootstrap's columns are floating by default with css float property. With float we can't middle align columns. However with display: inline-block we can. All we need is to remove float from styles of columns and change them to inline-block with vertical-align: middle and you will get what you want. But don't forget to remove extra space that comes with inline-block.
Here is the trick.
.wrapper {
background: green;
padding: 20px 0;
}
.box {
border-radius: 10px;
margin-bottom: 30px;
background: #fff;
padding: 10px;
color: #000;
}
.center-align {
letter-spacing: -4px;
text-align: center;
font-size: 0;
}
.center-align [class*='col-'] {
display: inline-block;
vertical-align: top;
letter-spacing: 0;
font-size: 14px;
float: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="container center-align">
<div class="row">
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
<div class="container center-align">
<div class="row">
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
</div>
Note: Setting font-size: 0; letter-spacing: -4px on parent and applying parent's font-size: 14px; letter-spacing: 0 back on child elements will remove white space that comes with inline-block.
Bootstrap has built-in functionality to achieve the layout you are after, without the introduction of additional CSS rules. Simply use the .col-md-offset-* class:
Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.
Your layout would end up looking similar to this:
.show-grid {
margin-bottom: 15px;
}
.your-custom-div {
height: 50px;
background-color: green;
color: white;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row show-grid">
<div class="col-md-4">
<div class="your-custom-div">
.col-md-4
</div>
</div>
<div class="col-md-4">
<div class="your-custom-div">
.col-md-4
</div>
</div>
<div class="col-md-4">
<div class="your-custom-div">
.col-md-4
</div>
</div>
<div class="clearfix visible-md"></div>
</div>
<div class="row show-grid">
<div class="col-md-4 col-md-offset-4">
<div class="your-custom-div">
.col-md-4 .col-md-offset-4
</div>
</div>
<div class="clearfix visible-md"></div>
</div>
</div>
</body>
</html>
EDIT #1: For your requirement of not knowing how many columns you will be fetching from your database for the second row, another option would be to use a conditional during the output of the HTML to also output a .col-md-offset-4 class if the modulo of the number of items in your collection divided by the number of columns is equal to 1, or proceed as usual otherwise. In ASP.NET with Razor, this would look something like this (the example below is kept simple on purpose to demonstrate the proposed logic, it can be refactored to it's own HTML helper class, accounting for other column sizes as well):
#{
bool lastItemShouldBeCentered = Foo.Count % 3 == 1;
for (int i = 0; i < Foo.Count; i++)
{
bool isLastItem = i == Foo.Count - 1;
if (isLastItem && lastItemShouldBeCentered)
{
<div class="col-md-4 col-md-offset-4">
// Foo[i] content here
</div>
}
else
{
<div class="col-md-4">
// Foo[i] content here
</div>
}
}
}
EDIT #2: Looks like I misread your requirement. For 1 left-over column, this solution will suffice. For more, I would go with #Muhammad's answer.
You need to add the last block of text into a different row and change the "col-md-4" to "col-md-12".
<div class="row">
<div class="col-md-4"> // column 1
bla bla bla
</div>
<div class="col-md-4"> //column 2
bla bla bla
</div>
<div class="col-md-4"> // column 3
bla bla bla
</div>
</div>
<div class="row">
<center>
<div class="col-md-12"> //last column, also note I changed it to 12
bla bla bla
</div>
</center>
</div>
I would like to create this layout with twitter bootstrap.
http://i.stack.imgur.com/f6mn7.png
This my start Fiddle
http://jsfiddle.net/antoc/n8ec9j2h/
My html
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-md-4">
<h3 class="bg-blue">title</h3>
<p>Lorem ipsum</p>
</div>
<div class="col-md-8">
<h3 class="bg-red">title</h3>
<p>Lorem ipsum</p>
<h3 class="bg-green">title</h3>
<p>Lorem ipsum</p>
</div>
</div>
</div>
My problems are:
how to create the blu, red and green strip in css?
how to create the yellow background in css?
Add some margin/padding hackery into it... like this updated fiddle
Here's the relevent CSS:
.bg-yellow{
background:yellow;
margin:-10px 0 -9999px -9999px;
padding:10px 0 9999px 9999px;
}
.bg-blue {
margin-left:-1000px;
padding-left:1000px;
}
.bg-green, .bg-red{
margin-right:-1000px;
}
And the HTML
<div class="container">
<div class="row">
<div class="col-md-4">
<h3 class="bg-blue">title</h3>
<div class="bg-yellow">
<p>Lorem ipsum</p>
</div>
</div>
<div class="col-md-8">
<h3 class="bg-red">title</h3>
<p>Lorem ipsum</p>
<h3 class="bg-green">title</h3>
<p>Lorem ipsum</p>
</div>
</div>
</div>
Other than some padding editing for the yellow box and some text content, I think this is what you wanted:
http://jsfiddle.net/AndrewL32/n8ec9j2h/17/
<div class="row">
<div class="col-md-3 bg-yellow">
<h3 class="bg-blue">title</h3>
<p>Lorem ipsumLorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsumLorem ipsumLorem ipsum Lorem ipsumLorem ipsum</p>
<p>Lorem ipsumLorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsumLorem ipsumLorem ipsum Lorem ipsumLorem ipsum</p>
</div>
<div class="col-md-9">
<h3 class="bg-red">title</h3>
<p>Lorem ipsum</p>
<h3 class="bg-green">title</h3>
<p>Lorem ipsum</p>
</div>
</div>
I need to select every 2nd child of an element but if it is a multiple of 4 (4, 8, 12...) it should not be selected. So the "sequenze" that i want would be [2, 6, 10, 14].
My current solution is:
p:nth-child(2n) {
background: purple;
}
p:nth-child(4n) {
background: white;
}
Now the 2nd, 6th, 10th and 14th elements have a purple background color. But this isn't a fancy way to solve the problem.
Can I somehow combine these two selectors into something like
p:nth-child(2n \ 4n) { //Just an idea how this selector could work
background: purple;
}
This should work for your sequence ([2, 6, 10, 14].):
p:nth-child(4n-2) {
background: purple;
}
p:nth-child(4n-2) {
background: purple;
color: #FFF;
}
<p>Lorem ipsum 1</p>
<p>Lorem ipsum 2</p>
<p>Lorem ipsum 3</p>
<p>Lorem ipsum 4</p>
<p>Lorem ipsum 5</p>
<p>Lorem ipsum 6</p>
<p>Lorem ipsum 7</p>
<p>Lorem ipsum 8</p>
<p>Lorem ipsum 9</p>
<p>Lorem ipsum 10</p>
<p>Lorem ipsum 11 </p>
<p>Lorem ipsum 12</p>
<p>Lorem ipsum 13 </p>
<p>Lorem ipsum 14 </p>
<p>Lorem ipsum 15</p>
<p>Lorem ipsum 16</p>
How about this:
p:nth-child(4n+2) {
background: purple;
}