I have some floated elements and the container height is set to be at minimum the size of the viewport (min-height: 100vh), overflow: hidden.
However, in a responsive view (480x320) I find that the div is not expanding to contain the div which is holding the floated items. Therefore, the floated elements are cutting out of the div altogether as such:
I have tried adding the clearfix but this does not work.
HTML:
<div class="wrapper">
<div class="clients" id="clients">
<h2 class>Clients</h2>
<div class="clientLogoContainer">
<div class="clientLogo">
<img src="assets/ethiopian.jpg" class="fullSizeLogo">
</div>
<div class="clientLogo">
<img src="assets/kenya.jpg" class="fullSizeLogo">
</div>
<div class="clientLogo">
<img src="assets/southafrican.jpg" class="fullSizeLogo">
</div>
<div class="clientLogo">
<img src="assets/qatar.jpg" class="fullSizeLogo">
</div>
<div class="clientLogo">
<img src="assets/coalindia.jpg" class="fullSizeLogo">
</div>
</div>
CSS:
.clientLogoContainer {
max-width: 100%;
margin-left: 0;
margin-right: 0;
position: absolute;
top: 50%; /* move the div's top border to the half height of the outer div*/
transform: translateY(-50%); /* move the inner div up by half its height */
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
}
.clearfix { /* used for the navigation bar to prevent li items from crashing into same line as the logo */
content: " ";
display: block;
clear: both;
}
Non-responsive view
Related
I have a problem with the displaying from two containers with css. The first container has a background image. The second container is text only.
The position of the second container is on the top the first container.
but by the displaying in small media queries, I would displaying the second container after the first container.
#back,
#back1 {
width: 100%;
height: 50px;
background-color: red;
}
<html>
<body>
<div id="back">
<div id="text">
Hello
</div>
</div>
<hr />
<div id="back1"></div>
<div id="text">
Hello
</div>
</body>
</html>
Put them both in a relatively positioned container and then add a media query to absolutely position the the text for larger screens:
#back {
width: 100%;
height: 50px;
background-color: red;
}
#container {
position: relative;
}
#media screen and (min-width: 768px) {
#text {
position: absolute;
top: 0;
}
}
<div id="container">
<div id="back"></div>
<div id="text">
Hello
</div>
</div>
I have a small Problem. I am trying to make the structure from image. I have the CSS and HTML
.mask-skew {
transform: skewX(-10deg);
/*width: 300px;*/
height: 390px;
overflow: hidden;
margin: 5px;
/*border: 2px solid orange;*/
}
.art-skew {
transform: skewX(10deg);
position: relative;
left: -50%;
}
<div class="row flex--row advertising-row">
<div class="col-xs-12 col-sm-4 mask-skew">
<img class="art-skew" src="templates/Stordeur/themes/stordeur/images/BarbourSS18Banner_1140x392px.jpg" alt="">
</div>
<div class="col-xs-12 col-sm-4 mask-skew">
<img class="art-skew" src="templates/Stordeur/themes/stordeur/images/TeaserWellensteynKopie.jpg" alt="">
</div>
<div class="col-xs-12 col-sm-4 mask-skew">
<img class="art-skew" src="templates/Stordeur/themes/stordeur/images/template_teaser_images_fjallraven.jpg" alt="">
</div>
</div>
But the result is from this Image
How can I obtain the result from first image. The left and right image has straight edge.
You could basicly, skew links and then unskew img.
overflow:hidden will need to be used to cover the whole screen/link.
example
body {margin:0;}
div {
overflow:hidden;
}
nav {
display:flex;
height:100vh;
margin:0 -10vw
}
nav a {
flex:1;
height:100%;
transform:skew(-15deg);
overflow:hidden;
}
nav a + a {
margin-left:3vh;
}
nav a img {
width:140%;
height:100%;
display:block;
/* optionnal */
/*object-fit: cover;
object-position:center center;*/
transform:skew(15deg);
margin:0 -20%; /* in relation with width */
}
<div>
<nav>
<img src="http://www.intrawallpaper.com/static/images/desktop-backgrounds-8656-8993-hd-wallpapers_js7gwWA.jpg">
<img src="https://images.wallpaperscraft.com/image/pool_skyscraper_hotel_124522_1600x1200.jpg">
<img src="https://wallpaperscraft.com/image/dark_background_colorful_paint_47176_300x188.jpg">
</nav>
</div>
object-fit can also help to make sure image fills entire link. it will be clipped.
For the text, it can be added aside img. and centered via flex. pen to play with : https://codepen.io/gc-nomade/pen/vaJzaM
if you want to use background-image and a link on top of it, you may inspire yourself from https://codepen.io/gc-nomade/pen/vGvRPZ/ (turn titles into links)
Both example skew the container, then apply the opposite skew value to unskew content.
Straight edges are made from letting content overflowing but hidden outside edges.
I'm using Zurb Foundation. When the cursor hovers over one of the DIVs in the grid, an info DIV should appear over the top, making the background image darker so that the user can more easily see the text.
Foundation has a default padding for columns. So position:absolute; width:100% on the info div background makes it bigger than the Item Div.
Code:
<div class="row">
<div class="large-4 columns">
<div style="position:absolute; width:100%; height:100%;...">Tommy...</div>
<img src=".." style="width:100%; height:100%">
</div>
</div>
This is how it should look like:
This is what it looks like now:
You could add a wrapper <div> inside the column to contain the <img> and the absolutely positioned <div>. So that the overlay would respect to the content-box of the column rather than the padding-box.
.overlay-container { position: relative; display: inline-block; }
.overlay {
visibility: hidden;
opacity: 0;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
padding: 1rem;
background-color: rgba(0, 0, 0, 0.4);
color: white;
font-size: 1.2rem;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.overlay-container:hover .overlay {
visibility: visible;
opacity: 1;
}
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/css/normalize.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/css/foundation.min.css" rel="stylesheet" type="text/css" />
<div class="row">
<div class="large-4 columns">
<div class="overlay-container">
<img src="http://lorempixel.com/400/200" />
<div class="overlay">Overlay text</div>
</div>
</div>
</div>
So I have missed one simple thing - putting one more div into columns solves this problem, because new div can be without padding, so it's 100% width, as for parent div, will be ok for info div also. This is the code:
<div class="row">
<div class="large-4 columns">
<div>
<div style="position:absolute; width:100%; height:100%;...">Tommy...</div>
<img src=".." style="width:100%; height:100%">
</div>
</div>
</div>
I am having some issues positioning an image within a parent div. I have 2 divs side by side both within a parent div, the first div within the container contains text and the second contains an image. The parent container has no height specified so it adjusts to the height of the content contained within it. I am struggling to absolutely position the image in the 2nd div to the bottom. Below is my HTML and css...
<style>
.container{
width: 100%;
}
.box{
float: left;
width: 49%;
}
</style>
<div class="container">
<div class="box text">
<p>Text placed here</p>
</div>
<div class="box image">
<img src="xxx" />
</div>
</div>
I have tried to give .image a relative position and then give the img tag within it 'position: absolute: bottom: 0px;' however this does not seem to work as .image has no fixed height.
Thanks, any help would be appriciated.
That should do the work. In fact, your container has no height at all with 2 floated div inside of it. I use a clear:both to... clear the floats and give the container the proper height.
<style>
.container{
width: 100%;
position: relative;
}
.box{
float: left;
width: 49%;
}
.image img {
position: absolute;
bottom: 0;
right: 0;
}
.clear { clear: both; }
</style>
<div class="container">
<div class="box text">
<p>Text placed here</p>
</div>
<div class="box image">
<img src="xxx" />
</div>
<div class="clear"></div>
</div>
You can find more infos about floats and clear on this nice article on css-tricks.com
I need to stack these two divs on top of each other but am having trouble finding a way to make it possible. I need to keep al the text inside in the same positions but need to be able to have the divs sit on top of one and other without setting absolute positions for them.
Here is what I have...
<body>
<div style="position:relative;">
<div style="position:absolute">
<p style="width: 762px; left:193px;" class="large-bold-font">hello hello helloT</p>
<p id="Customer.Description" style="left: 397px; top: 45px;" class="small-font"></p>
</div>
</div>
<div style="position:relative;">
<div style="position:absolute">
<p style="width: 762px; left:193px;" class="large-bold-font">hello hello helloT</p>
<p id="Customer.Description" style="left: 397px; top: 45px;" class="small-font"></p>
</div>
</div>
</body>
You should put the content of both your divs inside an outer div which has "position:relative", and put absolute positioning on your inner divs, and add a z-index to each of them. Then the larger z-index is placed over the smaller one.
<body>
<div style="position:relative;">
<div style="position:absolute;z-index:0;">
<p style="width: 762px; left:193px;" class="large-bold-font">hello hello helloT</p>
<p id="Customer.Description" style="left: 397px; top: 45px;" class="small-font"></p>
</div>
<div style="position:absolute;z-index:1;">
<p style="width: 762px; left:193px;" class="large-bold-font">hello hello helloT</p>
<p id="Customer.Description" style="left: 397px; top: 45px;" class="small-font"></p>
</div>
</div>
</body>
Perhaps this simple example will help you:
Link to fiddle
<body>
<div class="one">
Content one
</div>
<div class="two">
Content two
</div>
</body>
CSS:
.one{
color:red;
position:absolute;
left:0;
top:0;
z-index:2;
}
.two{
color:blue;
position:absolute;
left:0;
top:0;
z-index:1;
}
By positioning both divs absolutely, we can then use the left and top properties, set them to the same left and top positions (it can be in pixels, percent, etc), and then determine which one should be placed on top of the other by varying the z-index. The higher z-index numbered div will be the one on top, so the .one div will be on top and you will see more red than blue. Swap the values around so that .one has z-index:1 and .two has z-index:2, and you will see more blue (since those are the font colours).
From here, you can put the rest of your content into the divs in my example.
You have a couple options:
Use absolute postions on your divs. http://jsfiddle.net/sUyS3/1/
You could use negative margins on your second div.
<div style="margin-top: -25px;">
The best way to do so is by using CSS grid.
This is a blog post explaining how to achieve this: https://zelig880.com/how-to-stack-two-elements-on-top-of-each-other-without-using-position-absolute
And this is a codepen with a live example:https://codepen.io/zelig880/pen/oNdZWNa
Quick code:
.container_row{
display: grid;
}
.layer1, .layer2{
grid-column: 1;
grid-row: 1;
}
.layer1{
color: blue;
background: red;
animation-direction: reverse;
}
.layer2{
color: white;
background: blue;
}
.layer1, .layer2 {
animation-name: fade;
animation-duration: 10s;
}
#keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="container_row">
<div class="layer1">
I am the layer behind
</div>
<div class="layer2">
I am actually on top
</div>
</div>
<div class="container_row">
Yuppi! This line is positioned successfully! This would not have been the case with position:absolute
</div>