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?
Related
I have an image with a CSS overlay that slides up from the bottom, and it's on the left. I want it in the center. Also, I hate to admit it, but the other post doesn't help. I got a post suggestion(IDK why), but I don't see how it helps me. I'm not super familiar with this and what I'm doing is for a project in a class of mine, which is late, and I'm trying to shoot for extra credit.
I just want to know how to make it go to the center. I have tried moving it to the left by 25, 50, and 75%, same with the right. It just won't move. Here is the code:
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 50%;
height: auto;
}
/* This is what I have been using with to move it. */
.overlay {
position: absolute;
bottom: 0;
left: 0;
/* This will move wherever */
right: 0;
background-color: darkblue;
overflow: hidden;
width: 50%;
height: 0;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
.text {
white-space: nowrap;
color: red;
font-size: 20px;
font-family: cursive;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="container">
<img src="image is here" alt="Avatar" class="image"> This won't move
<div class="overlay">
<div class="text"><u>This is just here atm</u></div>
</div>
</div>
I solved it. I just needed to use the "center" tag and put my style tag in it. Moved the overlay and it was fixed.
I want to place an overlay on my rounded image but when I set it, the overlay doesn't display over the image correctly? It is filling the column div. Not the overlay container. Can the overlay container be made to size to the image inside of it? I have tried display:inline-block;but that doesn't work. I am using Bootstrap.
HTML Code
<div class="row" style="background-color:#ECECEC">
<div class="col-md-4 col-sm-4" >
<div class="overlaycontainer">
<img class="roundimg" src="images/george1x1.jpg" >
<div class="overlay">
<div class="overlaytext">Hello World</div>
</div>
</div>
<center><h3>George Jones <br><small>Owner and Founder</small></h3></center>
</div>
CSS
.overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
border-radius: 50%;
display:inline-block
}
.overlaycontainer{
display:inline-block
}
.overlaycontainer:hover .overlay{
opacity: 1;
}
.overlaytext{
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.roundimg{
max-width: 75%;
height: auto;
border-radius: 50%;
padding-top:10px;
display: block;
margin: 0 auto;
}
Any help would be appreciated.
Thanks
Joe
I was able to get this working a bit better by making this working demo with a placeholder image I was able to link to.
http://codepen.io/anon/pen/ryYaWx?editors=1100
and then adding position: relative to the .overlaycontainer selector, like this:
.overlaycontainer {
display: inline-block;
position: relative; /* <-- this was added*/
}
This works because you have .overlay set to position: absolute and you want the absolute positioning to be relative to .overlaycontainer instead of the entire page. Adding this line will do that.
I was able to transition text-align from center to left. With this code, if you run it, then hover over, you'll see the top one goes to the left. However the bottom overflows on the right; how can I figure out how to make the transition to right not overflow?
Note: This is a demo of my real application, which has strings/elements of unknown/variable width, from 1 to anything to fill a single line (no wrapping).
.header {
position: fixed;
width: 70%;
background-color: springgreen;
}
.title {
text-align: center;
}
.menu {
text-align: center;
}
.trans-left {
transition: margin-right 1s;
}
.trans-right {
transition: margin-left 1s;
}
.header:hover .trans-left {
margin-right: 100%;
}
.header:hover .trans-right {
margin-left: 100%;
}
<body>
<div class='header'>
<div class='title'>
<span class='trans-left'>This one goes left</span>
</div>
<div class='menu'>
<span class='trans-right'>This one goes right</span>
</div>
</div>
</body>
You're aligning the text elements like this:
margin-left: 100%;
margin-right: 100%;
This positions each element – from the starting point of the box – to the left and right edges.
Hence, the left edge of the left-moving box will align with the left edge of the container.
And the left edge of the right-moving box will align with the right edge of the container. This causes the rest of this box to overflow.
Try this instead:
margin-right: 90%; /* adjust as needed */
Edit based on revised question
Here is an alternative solution that works regardless of content width.
.header {
position: fixed;
width: 70%;
background-color: springgreen;
}
.title, .menu {
text-align: center;
position: relative;
width: 100%;
height: 50px;
}
.trans-left {
position: absolute;
left: 50%;
transform: translateX(-50%);
transition: 1s;
}
.trans-right {
position: absolute;
right: 50%;
transform: translateX(50%);
transition: 1s;
}
.header:hover .trans-left {
left: 0;
transform: translateX(0);
transition: 1s;
}
.header:hover .trans-right {
right: 0;
transform: translateX(0);
transition: 1s;
}
<div class="header">
<div class="title">
<span class="trans-left">This one goes left</span>
</div>
<div class="menu">
<span class="trans-right">This one goes right</span>
</div>
</div>
More details: Element will not stay centered, especially when re-sizing screen
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
For some reason my vertical alignment code is blurring some but not all child elements in Chrome and Safari.
Whats causing it is the translateY(-50%), if I remove this then blurriness is gone however the vertical centring effect is lost.
/* #group Center all the things */
.center-wrapper {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.center-wrapper .center {
position: relative;
overflow: hidden;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
/* This fixes the blurred buttons but breaks centering
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);*/
}
/* #end */
Tried and tested methods such as below work but they break the vertical centring:
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
Faced the same issue while trying to position buttons in the middle, but the button appeared on hover of the parent element and each time text inside was randomly cut.
The solution is:
.positioned-button {
transform: translateY(-50%) scale(1);
filter: blur(0);
line-height: 1;
}
Breaks nothing, fixes Chrome :)
The only way around this blurry issue, from what I could see was to change the vertical alignment method and use display: table instead. Here's how I did it:
1) Keep HTML markup the same
<div class="center-wrapper">
<div class="center">
<p>Centered content here</p>
</div>
</div>
2) Change CSS to the following:
/* #group Center all the things */
.center-wrapper {
min-height: 100%;
padding: 0;
display: table;
width: 100%;
}
.center-wrapper .center {
display: table-cell;
vertical-align: middle;
}
/* #end */
You can see the display table in action here.
.center-wrapper {
min-height: 200px;
padding: 0;
display: table;
width: 100%;
background: black;
}
.center-wrapper .center {
display: table-cell;
vertical-align: middle;
color: white;
}
.center-wrapper .center div {
height: 40px;
background: red;
width: 50%;
margin: 0 auto;
}
<div class="center-wrapper">
<div class="center">
<div>Centered content here</div>
</div>
</div>