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
Related
I am trying to achieve these opposing skewed rectangles with text inside in css:
The first rectangle is set around the text container with the text skewing the opposite way of the rectangle.
HTML
<div class="col-lg-12 col-md-6">
<div class="container-fluid md">
<div class="rectangles rectangle-1">
<div class="text_container">
<?php if ($text) { ?> <div class="text WYSIWYG-styles"> <?= $text ?> </div> <?php } ?>
</div>
</div>
</div>
</div>
SCSS
display: block;
border: 1px solid $primary-color-2;
padding: 60px;
text-align: center;
&.rectangle-1 {
transform:skew(10deg, 10deg);
}
&.rectangle-2 {
transform: skew(-10deg, 10deg);
}
}
.text_container {
.text {
display: block;
transform: skew(-10deg, -10deg);
}
}
}
The problem is getting the second rectangle to skew the opposite way on the same plane. I thought about about using a pseudo element. I don't think that would work. Obviously, another inner div will just create an inner rectangle.
This is what I have so far:
Any help would be greatly appreciated.
I thought about using a pseudo element
Yea, you can use pseudo elements like this:
.double-skew {
position: relative;
text-align: center;
padding: 2rem;
max-width: 80%;
margin: 0 auto;
}
.double-skew:before, .double-skew:after {
content: "";
position: absolute;
border: 1px solid black;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.double-skew:before {
transform: skew(30deg);
}
.double-skew:after {
transform: skew(-30deg);
}
<div class="double-skew">
Just wow!
</div>
You really only need the first argument in the skew transform to achieve this effect. The second argument will skew it vertically, which isn't what you want if you're trying to match your spec image.
I created this element using a parent div with relative positioning. Inside I have two spans that act as the border elements and a single p element which contains the text. The spans are absolutely positioned so they don't affect the p's position and can be placed on top of each other. Finally the outer div is a table and the inner p is a table-cell so I can easily align the contents of the p to the vertical and horizontal center.
This is done with plain CSS so it can be shown in a snippet, but you could just as well convert it to SASS.
div
{
display: table;
width: 400px;
height: 100px;
position: relative;
margin-left: 50px;
}
div span
{
display: block;
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
border: 2px solid black;
}
div span.left
{
transform: skew(30deg);
}
div span.right
{
transform: skew(-30deg);
}
div p
{
display: table-cell;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-align: center;
vertical-align: middle;
}
<div>
<span class="left"></span>
<span class="right"></span>
<p>Lorem ipsum dolor sit amet.</p>
</div>
I am attempting to left align text in a div that takes the full width of it's parent.
This is the structure of one of several links created using Angular's Flex Layout.
<div class="container" fxLayout fxLayoutAlign="center" fxLayoutGap="10px">
<a mat-flat-button color="primary" fxFlex href="https://example.com/">
<div class="hoverOff"><fa-icon [icon]="faToolbox"></fa-icon>Broken</div>
<div class="hoverOn">
<div class="text">
Is your request causing an impact to a business-critical function, which is impacting daily production?
</div>
</div>
</a>
......
</div>
Without hovering, the .hoverOff element is visible. During hover, the .hoverOn element slides over the .hoverOff element.
.hoverOn uses position: absolute to stay hidden until hover.
Adding text-align: left to .text left aligns the text like I want but it's on the left edge of the div and not in the center with margins like I would like.
I have created an example for this and the CSS is below.
a {
color: white !important;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
a .hoverOn {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #00539b;
overflow: hidden;
height: 0;
border-radius: 4px;
width: 99%; /* Prevents flicker on bottom corners */
margin: 0 auto; /* Centers div for new width */
transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1); /* Material's Standard easing */
}
.text {
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: relative;
padding: 5px;
text-align: left;
}
a:hover .hoverOn {
height: 100%;
}
How can I solve this?
I want to display my page's title, "Math Achievement Tutoring", over a photograph of a hiker. My first attempt was to create this html:
<div id="wrapper">
<header>
<h1>Math Achivement Tutoring</h1>
</header>
<div id="hero">
<img src="http://michaelmossey.com/demo/home-hiker-grayish.jpg" alt="" width="500">
</div>
</div>
with this CSS, the idea being to position the h1 as absolute:
h1 {
text-align:center;
position: absolute;
color: #a04040;
}
but this means the title is no longer centered. I may run into other trouble as well if I start to fiddle with margin and padding.
h1 {
text-align:center;
position: absolute;
color: #a04040;
}
<div id="wrapper">
<header>
<h1>Math Achivement Tutoring</h1>
</header>
<div id="hero">
<img src="http://michaelmossey.com/demo/home-hiker-grayish.jpg" alt="" width="500">
</div>
</div>
What are my options for achieving this, and does it depend on where I want to take this website eventually? (like adding a navigation menu below the image)? Is there any simple demonstration code?
First, add position relative to #wrapper, then :
if you want it to be vertically & horizontally centered
h1 {
text-align:center;
position: absolute;
color: #a04040;
left: 50%;
top: 50%;
transform: translate( -50%, -50% );
}
if you want it to be vertically centered
h1 {
text-align:center;
position: absolute;
color: #a04040;
top: 50%;
transform: translateY( -50% );
}
if you want it to be horizontally centered
h1 {
text-align:center;
position: absolute;
color: #a04040;
left: 50%;
transform: translateX( -50% );
}
Just as Loesh Gupta says: make the wrapper .wrapper { position: relative; }. To center the text you can use multiple options. I'd go with something like this:
h1 { position: absolute; left: 50%; right: 50%; transform: translate(-50%, -50%); }
I can also recommend this tool: http://howtocenterincss.com/
Here's a solution using flexbox:
#wrapper {
display: flex; /* establish flex container */
flex-direction: column; /* stack flex items vertically */
position: relative; /* establish neares positioned ancenstor for absolute positioning */
}
h1 {
color: red;
}
.text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: bold;
}
.center-aligned {
display: flex;
align-items: center;
justify-content: center;
}
<div id="wrapper" class="center-aligned">
<img class="background-image" src="http://michaelmossey.com/demo/home-hiker-grayish.jpg" />
<div class="text"><h1>Math Achivement Tutoring<h1></div>
</div>
Using a background image on a div and a display flex on the text might do it. Make sure to add the height on the text based on the image so it can be centered.
*{margin: 0 auto;}
.bg{
background-image:url('http://michaelmossey.com/demo/home-hiker-grayish.jpg');
height: 380px;
background-repeat: no-repeat;
background-size:cover;
background-position: center center;
}
.bg h1{
display: flex;
justify-content: center;
align-items: center;
height: 380px;
font-size: 3em;
color: #ffffff;
background-color: rgba(0,0,0,0.5);
}
<div class="bg">
<h1>Math Achivement Tutoring</h1>
</div>
I have this hamburger I'm creating. I'm trying to understand how to position the bars with precise calculation without eyeballing it. The hamburger height is 24px
so I would assume in order to position the middle bar it would be half the height so 12px(top: 12px;) or incase of the example 0.5em but that doesn't look centered to the overall menu. (top: 10px looks right or 0.625em).
Overall whats a better way to calculate anything in css?
http://codepen.io/anon/pen/Bjjqez
<div class="hamburger">
<div class="hamburger__top"></div>
<div class="hamburger__middle"></div>
<div class="hamburger__bottom"></div>
</div>
SASS
.hamburger {
position: relative;
width: 3em;
height: 1.5em;
cursor: pointer;
div {
background-color: red;
position: absolute;
width: 100%;
height: .25em;
}
&__top {
top: 0;
}
&__middle {
background-color: green;
top: 0.5em;
}
&__bottom {
bottom: 0;
}
}
Flexbox can do that....no positioning required.
Here's a couple of options.
.hamburger {
width: 3em;
height: 1.5em;
cursor: pointer;
display: flex;
flex-direction: column;
margin: 1em auto;
}
.hamburger div {
background-color: red;
height: .25em;
}
.around {
justify-content: space-around;
background: lightblue;
}
.between {
justify-content: space-between;
background: lightgreen;
}
<div class="hamburger around">
<div class="hamburger__top"></div>
<div class="hamburger__middle"></div>
<div class="hamburger__bottom"></div>
</div>
<div class="hamburger between">
<div class="hamburger__top"></div>
<div class="hamburger__middle"></div>
<div class="hamburger__bottom"></div>
</div>
Replace your top: 0.5em with:
top: 50%;
transform: translateY(-50%);
From my understanding of how this works, the top: 50% will move the top of the element to be half way down. The translateY(-50%) will then move the element up by half it's own height, and therefore centrally position it.
Example: http://codepen.io/anon/pen/RrrqWP
I know how to put text on hover on an image if the height and the width is fixed. but I have a responsive slider (owl-slider) and want to add link (easy - yeah.) and a blue overlay with white text in it and a simple fading/sliding transition from the overlay.
The problem is: every item changes its height and width on resizing. I could write several media queries, but I'm quite sure there must be a simpler solution to that problem.
I have a very simple markup:
<div>
<a href="#">
<img src="http://placehold.it/360x100">
<div class="overlay">Click here for more Infomartion</div>
</a>
</div>
Normally I would go for pure css method with setting height and width from .overlay to the image size and set visibility on hover. But.. that won't work, because the width & height will differ from viewport to viewport. So, what would you suggest?
The trick involves setting position: relative to the parent container .image-container which contains the image. Using display: inline-block will force the parent container to shrink-to-fit the image.
You then apply position:absolute to the child container (overlay) .hover-text and set all the offsets (left, right, top and bottom) to zero, which will force the overlay to match the size of the image.
If you want to vertically center the text, you need to add two nested blocks.
One way of doing it is to repurpose the a element using display: table with width and height of 100%, and then apply display: table-cell to the nested div with vertical-align: middle. This will center the text vertically if so desired.
I added a transition effect to demonstrate how to set it up. You can
adjust the details as you like for duration and transition type.
Ref: http://www.w3.org/TR/css3-transitions/
You could also do a translation using a CSS transform, which is also feasible since the modern browsers support transforms (especially in 2D).
.image-container {
position: relative;
display: inline-block;
}
.image-container .hover-text {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 255, 0.5);
opacity: 0;
transition: opacity;
}
.hover-text a {
display: table;
height: 100%;
width: 100%;
text-decoration: none;
}
.hover-text a div {
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 3.0em;
color: white;
}
.image-container img {
vertical-align: top; /* fixes white space due to baseline alignment */
}
.image-container:hover .hover-text {
opacity: 1;
transition-duration: 1s;
transition-timing-function: linear;
}
<div class="image-container">
<img src="http://placehold.it/360x100">
<div class="hover-text">
<a href="#">
<div>Text on hover</div>
</a>
</div>
</div>
Try this, it doesn't care about the image size
.image-container{
position: relative;
display: inline-block;
}
.image-container .hover-text{
position: absolute;
top: 33%;
width: 100%;
text-align: center;
visibility: hidden;
}
.image-container:hover .hover-text{
visibility: visible;
}
/* styling */
.hover-text{
font-family: sans-serif;
color: white;
background: rgba(0,0,0,0.3);
text-shadow: 1px 1px 1px black;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.hover-text a{
color: white;
}
<div class="image-container">
<img src="http://placehold.it/360x100">
<div class="hover-text">
Text on hover Link
</div>
</div>
Skipped the transition stuff, but is this what you're requesting?
div {
position: relative;
}
img {
width: 100%;
}
.overlay {
background: blue;
color: white;
display: none;
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
}
a:hover .overlay {
display: block;
}
JSFIDDLE: http://jsfiddle.net/volzy/hLpLabaz/1/
For full size overlay do:
.overlay {
height: 100%;
top: 0;
}