I want to make a child div inside parents div visible if I give the child div margin-top negative value.
I have tried with position:relative and z-index, but it doesn't seems work.
Here are my code:
HTML:
<div class="main-site">
<div class="container">
<div class="overlap top-border-radius">
<div id="facultylist">
<h1>Affordable Professional Web Design</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu luctus ipsum, rhoncus semper magna. Nulla nec magna sit amet sem interdum condimentum.</p>
</div>
</div>
</div>
</div>
CSS:
#facultylist {
position: relative;
}
.main-site {
padding: 50px 0;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
.overlap {
position: relative;
background: #fff;
margin-top: -50px;
margin-bottom: 20px;
}
.top-border-radius {
border-top: #006af4 3px solid;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
It sounds like you're looking to remove overflow: hidden on .container:
#facultylist {
position: relative;
}
.main-site {
padding: 50px 0;
}
.container {
width: 80%;
margin: auto;
/*overflow: hidden;*/
}
.overlap {
position: relative;
background: #fff;
margin-top: -50px;
margin-bottom: 20px;
}
.top-border-radius {
border-top: #006af4 3px solid;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
<div class="main-site">
<div class="container">
<div class="overlap top-border-radius">
<div id="facultylist">
<h1>Affordable Professional Web Design</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu luctus ipsum, rhoncus semper magna. Nulla nec magna sit amet sem interdum condimentum.</p>
</div>
</div>
</div>
</div>
Related
i'm trying to recreate this element
I've created the following structure:
.slider-container { max-width: 300px; margin: 100px auto; background: red; position: relative; box-sizing: content-box; }
.slider-background { background: white;
position: absolute;
top: 10px;
right: 10px;
width: 90%;
height: 90%;
text-align: right;
z-index: 1; }
.slider-background a {
padding: 15px 20px;
display: block;
}
.slider-info {
padding: 45px 30px;
}
.slider-content { position: absolute; top: 0; left: 0; z-index: 2; background: lightblue; }
<div class="slider-container">
<div class="slider-background">
more<br>info
</div>
<div class="slider-content">
<div class="slider-info">
<img src="https://via.placeholder.com/140x100"/>
<h2>
lorem<br><b>ipsum</b>
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at dolor tristique, ultricies nisl a, egestas metus. Nam ut enim in ante volutpat convallis. Donec efficitur nisl non nisi ornare tincidunt. Mauris at justo tellus.
</p>
</div>
</div>
</div>
But i'm not sure on how to recreate the curved angle on the top div, what would be the best solution to achieve that result?
Here is an idea with pseudo element and skew transformation.
I kept only the relevant for so we can see the trick:
.slider-info {
padding: 45px 30px;
}
.slider-content {
background:
linear-gradient(lightblue,lightblue) bottom/100% calc(100% - 200px) no-repeat;
width: 300px;
margin: 20px auto;
border-radius:20px 0 20px 20px;
position:relative;
z-index:0;
overflow:hidden;
}
.slider-content::after {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
height:200px;
background:lightblue;
transform-origin:bottom;
transform:skew(30deg);
border-radius:0 20px 0 0;
}
<div class="slider-content">
<div class="slider-info">
<img src="https://via.placeholder.com/140x100" />
<h2>
lorem<br><b>ipsum</b>
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at dolor tristique, ultricies nisl a, egestas metus. Nam ut enim in ante volutpat convallis. Donec efficitur nisl non nisi ornare tincidunt. Mauris at justo tellus.
</p>
</div>
I need some help with a practice project I'm working on. I've got my content divs (.primary, .secondary and .tertiary) sat within a wrapper that's currently set to 100% width (for the sake of debugging).
I want it so that .primary and .secondary appear next to each other side by side at a screen size of 779px and above with tertiary set at 100% of the wrapper's width below them.
All three content divs also have the class col which I've floated left so in theory, I should be able to set .primary and .secondary to 50% and they should happily sit next to each other, right?
Wrong.
They sit as blocks below each other. Both have a width of exactly half of the wrapper (used dev tools in google chrome to check) but they won't sit next to each other until I sit their widths to 48% and then they leave a gap to their immediate right.
I honestly can't make heads or tails of it. I'm going to include the full code below for anyone that wants to just copy and paste to see the weirdness. I should note as well, there is a normalize file on there, downloaded from: https://necolas.github.io/normalize.css/
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Dragon Ball Fan Site</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet">
</head>
<body>
<header class="main-header clearfix">
<div class="container">
<h1 class="title">Dragon Ball Fan Site</h1>
<ul class="main-nav">
<li>Main</li>
<li>Manga</li>
<li>Anime</li>
<li>Video Games</li>
<li>Register</li>
</ul>
</header>
<div class="banner">
<img src="img/main-img.png" alt="Main Image, Goku" class="main-img">
<h1 class="name">Dragon Ball Fansite</h1>
<span class="tagline">A Site For Fans, By Fans</span>
</div>
</div>
<div class="wrapper clearfix">
<div class="secondary col">
<h2>Welcome</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel dui at odio imperdiet pulvinar vitae sed arcu. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel dui at odio imperdiet pulvinar vitae sed arcu. Cras accumsan leo nulla, at suscipit augue finibus ac. Aliquam ut mi vulputate, ullamcorper metus quis, tempor lorem. Praesent eleifend dignissim ligula. Nunc enim lectus, fringilla at odio vel, sagittis volutpat velit. Integer pretium ac nisl eget volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="primary col">
<h2>About Dragon Ball</h2>
<img src="img/cast.png" alt="Main Cast" class="cast">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel dui at odio imperdiet pulvinar vitae sed arcu. Cras accumsan leo nulla, at suscipit augue finibus ac. Aliquam ut mi vulputate, ullamcorper metus quis, tempor lorem.</p>
</div>
<div class="tertiary col">
<h2>About Us</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Ut vel dui at odio imperdiet pulvinar vitae sed arcu. Cras accumsan leo nulla, at suscipit augue finibus ac.</li>
<li>Aliquam ut mi vulputate, ullamcorper metus quis, tempor lorem.</li>
</ul>
</div>
</div>
</div>
<footer class="main-footer">
<span class="copyright"> ©Dragon Ball Fan Site 2018</span>
</footer>
</body>
</html>
/* =========
Fonts
========= */
#font-face {
font-family: 'Roboto', sans-serif;
}
##font-face {
font-family: 'saiyain-sans';
src: url(font/Saiyan-Sans.ttf);
}
/* =========
Elements
========= */
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Roboto', helvetica, sans-serif;
font-size: 1.25em;
}
h1 {
margin: 0;
font-weight: 400;
font-size: 2.441em;
}
h2 {
font-size: 1.953em;
padding-bottom: 1em;
padding-left: 0;
padding-right: 0;
}
p {
line-height: 1em;
margin: 0;
padding: 0;
}
div {
margin: 0;
}
/* =========
Classes
========= */
.main-header {
text-align: center;
color: #f85b1a;
margin-bottom: 1em;
padding-top: 2em;
}
.title {
padding-bottom: 1em;
}
.main-nav li {
padding-bottom: 0.5em;
font-weight: 400;
}
.main-nav a {
text-decoration: none;
color: #f85b1a;
display: block;
}
.banner {
text-align: center;
background-color: #f85b1a;
color: #fff;
padding: 1em;
margin-bottom: 2em;
}
.main-img {
border-radius: 50%;
border: 3px solid #000;
margin-bottom: 2em;
}
.name {
font-family: 'saiyain-sans', 'Roboto', sans-serif;
margin-bottom: 0;
}
.wrapper {
margin: 0 auto;
width: 90%;
}
.col {
border: 1px solid red;
}
.primary,
.secondary {
margin-bottom: 1em;
}
.cast {
width: 100%;
padding: 0;
margin: 0 auto;
}
.main-footer {
background-color: #072083;
text-align: center;
padding: 1em;
margin-top: 1em;
}
.copyright {
font-size: 0.8em;
color: #8a9294;
}
/* =========
media queries
========= */
#media (min-width: 779px) {
.container {
margin: 0 auto;
}
.main-header {
padding: 1em;
}
.title,
.col {
float: left;
}
.title {
padding-top: 0;
padding-bottom: 0;
font-size: 1.25em;
}
.main-nav {
float: right;
}
.main-nav li {
display: inline-block;
float: left;
list-style: none;
font-size: 1.25em;
padding: 0 0.2em;
border-right: 1px solid #8a9294;
}
.main-nav li:last-child {
border-right: none;
}
.name {
padding-bottom: 0.5em;
}
.tagline {
font-size: 1.5em;
}
.wrapper {
width: 100%;
padding: 0;
}
.secondary,
.primary {
width: 50%;
}
.copyright {
padding: 2em;
}
/* =========
Clearfix
========= */
.clearfix::after {
content: " ";
display: table;
clear: both;
}
}
I finally figured it out. It was the border box property. Adding any padding and things like that were pushing it to be bigger than the wrap. I had the border property added to test where it was going wrong and that was just adding to the problem.
Thanks to everyone that took the time to look.
I am trying to make an info box with an info text (which is a simple div). At the right end of this info box there should be a text named "more info" (a nested div), which should indicate that you can click on the info box. To save space I would like to rotate the text 90 degrees, and it should only take so much space as the height of the text "more info". But I couldn't get it working. Either my text is breaking into two lines, or if I use white-space: nowrap; the text is not aligned vertically centered.
Does anyone have a hint for another css property I can try?
I created a fiddle: https://jsfiddle.net/girlscout/9e5u3j5w/3/
I colored the two divs with separate colors just for this example in order to see what the divs are doing.
Thank you Brett for hint with the the code snippet (it is my first post, and I didn't know that this is possible). Here is the code:
.first-div {
border:1px solid blue; width:300px; height:100px; margin:20px auto;
display:flex;
/*justify-content:flex-end; */
}
.second-div {
background-color:green;
/*align-items:center;*/
}
.mytext{
transform:rotate(-90deg);
/*white-space: nowrap;*/
}
<div class="first-div">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa sociis nato.
</p>
<div class="second-div"><p class="mytext">more info</p></div>
</div>
so you can make it work by setting the width on the .second-div and changing the padding and transform-origin on .mytext, but its going to be different for every tab you create.
.second-div {
background-color: green;
width: 120px;
position: relative;
}
.mytext {
position: absolute;
white-space: nowrap;
top: 0;
padding: 8px;
color: #FFF;
transform-origin: 50% 100%;
transform: rotate(-90deg);
}
I believe one key will be the transform-origin property.
We'll also position: absolute the .mytext element and fix the width, height and some other properties. However, it still remains flexible enough to work with a variety of content.
Like this:
.first-div {
border: 1px solid blue;
width: 300px;
height: 100px;
margin: 20px auto;
display: flex;
}
.second-div {
position: relative;
background-color: green;
height: 100%;
box-sizing: border-box;
flex-basis: 80px;
}
.mytext {
position: absolute;
top: 20px;
transform: rotate(-90deg);
transform-origin: 0% 0%;
white-space: nowrap;
margin: 100px 0 0 0;
line-height: 30px;
width: 100px;
text-align: right;
}
.first-div.larger {
height: 250px;
}
<div class="first-div">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa sociis nato.
</p>
<div class="second-div">
<p class="mytext">more info</p>
</div>
</div>
<div class="first-div">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa sociis nato.
</p>
<div class="second-div">
<p class="mytext">info</p>
</div>
</div>
<div class="first-div larger">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa sociis nato.
</p>
<div class="second-div">
<p class="mytext">even more info</p>
</div>
</div>
I think I understand what you're look for. You need to add positioning to the first-div of relative and second-div of absolute. See below code.
See it here: CODEPEN
.first-div {
border: 1px solid blue;
width: 400px;
height: 100px;
margin: 20px auto;
display: flex;
position: relative;
padding-right: 40px;
}
.second-div {
position: absolute;
top: 0px;
right: 0px;
background-color: green;
}
.mytext{
transform:rotate(-90deg);
padding: 20px 0;
font-size: 0.7em;
color: #fff;
}
<div class="first-div">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa sociis nato.
</p>
<div class="second-div">
<p class="mytext">more info</p>
</div>
</div>
There is a possible solution, although it means somewhat duplicating your markup in a way. You will need two elements: the text that serves as an invisible filler, and the text that is actually displayed:
<div class="second-div">
<!-- Used to precaluclate/reserve space, not displayed -->
<div class="mytext-spacer">more info</div>
<!-- The actual text that is displayed and rotated -90deg -->
<div class="mytext">more info</div>
</div>
The solution leverages on the fact that you can use a spacer element that "pre-occupies" the space that the rotated text needs. This will be the .mytext-spacer element. We simply force it to display text in a vertical manner so that it will take up the same space as rotated text:
.mytext-spacer {
text-orientation: upright;
writing-mode: vertical-rl;
visibility: hidden;
}
The spacer is then hidden away using visibility: hidden. Using display: none will not work because it will be taken out of the document flow and will not be able to "reserve" the pre-calculated space required to fit the rotated text.
Next, you simply rotate your actual .mytext, it will fit nicely. I have used the position + translate trick to visually center the text. We cannot leverage of flexbox here because it will then interfere with the layout involving the hidden spacer text.
.mytext {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-90deg);
text-align: center;
}
.first-div {
border: 1px solid blue;
width: 300px;
height: 100px;
margin: 20px auto;
display: flex;
/*justify-content:flex-end; */
}
.second-div {
background-color: green;
position: relative;
}
.mytext-spacer {
text-orientation: upright;
writing-mode: vertical-rl;
visibility: hidden;
}
.mytext {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-90deg);
text-align: center;
}
<div class="first-div">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa sociis nato.
</p>
<div class="second-div">
<div class="mytext-spacer">more info</div>
<div class="mytext">more info</div>
</div>
</div>
<div class="first-div">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa sociis nato.
</p>
<div class="second-div">
<div class="mytext-spacer">this is a long long text</div>
<div class="mytext">this is a long long text</div>
</div>
</div>
I want to manage hover event just like in the linked fiddle, assuming I don't know how long the content would be...
My question is: how can I add smooth transitions while hovering?
Fiddle
.news{
max-width:250px;
font-family:Arial, Helvitica, sans-serif;
}
.thumbs {
list-style: none;
position: relative;
padding: 0;
margin: 0;
text-align: left;
letter-spacing: -0.25em;
}
.thumbs li {
display: inline-block;
margin-top: 10px;
position: relative;
overflow: hidden;
letter-spacing: normal;
background-color: white;
border: 1px solid #CCC;
min-height:264px;
}
.thumbs .news-img-container {
height: 180px;
overflow: hidden;
z-index: 0;
}
.thumbs li a img {
display: block;
position: relative;
width: 100%;
height: auto;
}
.thumbs li a div.text {
display: block;
padding: 10px;
text-transform: none;
font-weight: 300;
text-align: left;
color: rgba(0, 0, 0, 0.9);
background-color: white;
border-top: 2px solid #8c1c40;
margin: -40px 15px 0 15px;
z-index: 1;
position: relative;
height: 100px;
overflow:hidden;
}
.thumbs li a div.text:hover {
height: 100%;
min-height:206px;
vertical-align: bottom;
margin-top: -160px;
}
.thumbs li a div.text:hover:after {
background: none;
}
.thumbs li a div.text:after {
content: '';
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 2em;
background: linear-gradient(to bottom,rgba(255,255,255,0) 0,#fff 100%);
}
.thumbs li a div.text p {
padding: 0;
margin: 0;
font-size: .9em;
}
h2 {
color:#8c1c40;
font-size:1em;
text-transform:uppercase;
margin:0 0 5px 0;
font-weight:bold;
}
a {
text-decoration:none;
}
}
<div class="news">
<ul class="thumbs">
<li>
<a href="#">
<div class="news-img-container">
<img src="http://docteurnature.org/boutique/img/cms/homepage_logo_1.jpg" />
</div>
<div class="text">
<h2>Title h2</h2>
<p>Long text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget ante libero. Morbi maximus urna id tellus tempus, sit amet volutpat augue venenatis. Pellentesque et fringilla ipsumorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur eget ante libero. Morbi maximus urna id tellus tempus, sit amet volutpat augue venenatis. Pellentesque et fringilla ipsum...</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="news-img-container">
<img src="https://static.pexels.com/photos/65977/pexels-photo-65977-large.jpeg" />
</div>
<div class="text">
<h2>Title h2</h2>
<p>Shorter text :lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget ante libero. Morbi maximus urna id tellus tempus, sit amet volutpat augue venenatis. Pellentesque et fringilla ipsumorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="news-img-container">
<img src="https://static.pexels.com/photos/33045/lion-wild-africa-african-large.jpg" />
</div>
<div class="text">
<h2>Title h2</h2>
<p>even shorter text: lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget ante libero. Morbi maximus urna id tellus tempus, sit amet volutpat augue venenatis.</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="news-img-container">
<img src="https://static.pexels.com/photos/28201/pexels-photo-28201-large.jpg" />
</div>
<div class="text">
<h2>Title h2</h2>
<p>Smallest text: lorem ipsum dolor sit amet...</p>
</div>
</a>
</li>
</ul>
</div>
Besides, It would be great that the animation launches while hovering the picture...
I'd like to avoid using js, if possible... But if not, well... why not.
Thanks a lot for your help
Here's your updated fiddle with smooth transition on hover.
https://jsfiddle.net/fhqxv36q/4/
All I have done is added some transition to .thumbs li a div.text. In this particular case, it's 0.3s for all properties that are changing on hover.
The solution, obviously doesn't take into consideration all the possible transitions and scenarios. It is here to give you an idea of what you need to do.
EDIT :
https://jsfiddle.net/fhqxv36q/7/
This takes away the transition effect when you mouse out.
Learn more about transitions here - https://developer.mozilla.org/en/docs/Web/CSS/transition
This one should do exactly what you want.
Adding the transition to both the element and its :hover state + fixed some other issues it caused.
https://jsfiddle.net/fhqxv36q/5/
I wanted to add a multiple column layout to one of my parent div's to display small widgets. I started of with 3 columns left, middle and right.
I tried to get the columns to display next to each other by using:
display: inline-block;
vertical-align: top;
But it didn't work JS Fiddle
I also tried to use:
float: left;
But again no success JS Fiddle
I got it right by using:
display: table-cell
Now my problem is that when using this last method it sets a minimum width after which it would not scale any smaller and it adds a scroll bar to the bottom of the page which I do not want.
I would like to know why the first two methods did not work in my scenario as I have found other answers on SO that shows that the first two methods are possible solutions.
CSS
#left_widget_column {
border: 0px;
margin: 10px 65% 10px 2%;
padding: 0px;
width: 32%;
}
#middle_widget_column {
border: 0px;
margin: 10px 34% 10px 34%;
padding: 0px;
width: 31%;
}
#right_widget_column {
border: 0px;
margin: 10px 2% 10px 65%;
padding: 0px;
width: 32%;
}
HTML
<div id="left_widget_column">
<h2>Widget 1:</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis suscipit venenatis tempor. Mauris sit amet consequat dui.</p>
</div>
<div id="middle_widget_column">
<h2>Widget 2:</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis suscipit venenatis tempor. Mauris sit amet consequat dui.</p>
</div>
<div id="right_widget_column">
<h2>Widget 3:</h2>
<p>Fusce felis nisl, egestas a dolor sit amet, mollis cursus diam. Nulla malesuada ullamcorper ante. Vestibulum pulvinar, metus a congue eleifend, magna eros mattis lectus, sed vestibulum neque augue vel risus.</p>
</div>
you should not using:
margin: 10px 34% 10px 34%;
http://jsfiddle.net/Whysg/2/
when using float:left the next Div location inside previous div so that's not need margin or ...
You should not use 3 id's: 1 class for the layout is enough. You can add id later on to use it in js, for example.
DEMO
.col {
box-sizing: border-box;
float: left;
width: 32%;
padding: 10px;
margin-left: 2%;
}
.col:first-child {
margin-left: 0;
}
Have you not thought of using floats instead? Remove the margins.
#left_widget_column {
border: 0px;
padding: 0px;
float: left;
width: 32%;
}
#middle_widget_column {
border: 0px;
padding: 0px;
width: 32%;
float: left;
}
#right_widget_column {
border: 0px;
padding: 0px;
width: 32%;
float: right;
}
See it here LIVE: http://jsfiddle.net/Whysg/3/