I have the following issue where I don't really know on how to word-wrap the overlay text to my desires. I want the text to cut-off at the bottom of the overlay (or a few pixels above the bottom) and I want it to end it with a triple dot, so something like this: eu dolor sed, euismod ...
$('.container').mouseenter (function () {
//alert($(this).find('.soverlay').innerHeight()); //returns 56.8 px
var hgt = 'calc(100% - ' + parseInt($(this).find('.soverlay').innerHeight()+5) + 'px)';
$(this).find('.overlay').css({'height' : hgt});
});
$('.container').mouseleave (function () {
//alert($('.container .soverlay').innerHeight()); //returns 56.8 px
$(this).find('.overlay').css({'height' : '0px'});
});
.container {
position: relative;
width: 50%;
max-width: 250px;
}
.image {
border-radius: 10px;
display: inline-block;
width: 100%;
height: auto;
box-sizing: border-box;
}
.soverlay {
border-radius: 10px 10px 0px 0px;
box-sizing: border-box;
position: absolute;
top: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5); /* Black see-through */
color: #f1f1f1;
width: 100%;
transition: .5s ease;
color: white;
font-size: 16px;
padding: 10px;
text-align: center;
overflow: hidden; /* remove on hover-in; add on hover-out*/
white-space: nowrap; /*remove on hover-in; add on hover-out */
text-overflow: ellipsis;
}
.overlay {
border-radius: 0px 0px 10px 10px;
position: absolute;
bottom: 4px;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5); /* Black see-through */
font-size: 12px;
color: white;
}
.container:hover .overlay {
/* height: calc(100% - 57px); /* change height depending on 'soverlay' height */
border-top: 3px solid yellow;
}
.container:hover .soverlay{
overflow: unset;
white-space: unset;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<h2>Image Overlay Title</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="soverlay">Some people just have very long names</div>
<div class="overlay">This is a very long job description which doesn't really fit in this div. Now the question is how do I cut of the text at the bottom of the overlay. </br></br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit convallis ligula, eget sollicitudin dolor lobortis ut. Duis venenatis, est vel volutpat dictum, magna mi pellentesque dolor, eu suscipit ligula augue eleifend justo. Nunc eleifend diam velit, id maximus eros tristique et. Donec sagittis mattis velit. Morbi gravida tincidunt metus in suscipit. Curabitur pharetra orci nec nunc sodales cursus. Morbi hendrerit id orci non vulputate. Duis nulla turpis, bibendum eu dolor sed, euismod mollis velit. Nullam tellus enim, condimentum porta rutrum ac, feugiat in ex. Sed tristique metus nunc, ut elementum elit hendrerit et. Quisque sed interdum ipsum. Etiam posuere.
</div>
</div>
</body>
</html>
I've managed to make a work-around using PHP by just cutting the length of each string at a certain length and appending the triple dots, but I actually want to try and do it with CSS only (to further improve my front-end skills).
You should add fix width to the .soverlay Div
.soverlay{width:250px;}
and then use the following CSS property
word-wrap: break-word;
Related
I can't work out how to make a parent div auto scrollable based on it's childs content.
I've got a menu that expands on click event and need it to scroll if the childs height exceeds the parent's.
This is my html for the menu wrapper.
<div class="menu-box">
<div class="page-links">
<div class="pl-inner">
<div class="pl-box">
<div class="pl-content">
<p>menu content goes here......Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>
This is my CSS
.menu-box {
width: 100%;
min-height: 100%;
background-color: #000;
position: fixed;
z-index: 10;
transition: all 1.5s ease-in;
}
.page-links {
width: 100%;
height: 100%;
position: relative;
top: 0px;
left: 0px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.pl-inner {
position: relative;
width: 100%;
}
.pl-box {
position: relative;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
padding: 120px 50px 180px 50px;
overflow: hidden;
}
.pl-content {
width: 100%;
display: inline-block;
opacity: 1;
color: white;
}
I have a working example https://codepen.io/eddywoods/pen/bGvopmL
I thought if I added overflow-y: auto to the parent element it would auto scroll the content but even when I shrink the screen vertically is doesn't want to auto scroll. Where am I going wrong?
Here at line 12 in css.
body {
overflow-y: hidden !important; // This needs to be auto so that your body can scroll
overflow-x: hidden;
}
you have set the overflow-y of body to hidden. So, your body isn't scrollable. and that's causing the issue.
Do you mean like this?? Take a look at it in full screen and let me know.
$('.burger-wrapper').on('mousedown' , function(){
$('.content-wrapper').toggleClass('show');
});
html, body {
margin: 0;
padding: 0;
background-color: rgba(244, 244, 244, 0.9);
width: 100%;
height: 100%;
}
body {
overflow-y: scroll ;
overflow-x: hidden;
position: relative
}
div {
display: block;
}
.menu-box {
width: 100%;
min-height: 100%;
background-color: #000;
position: fixed;
z-index: 10;
transition: all 1.5s ease-in;
}
.page-links {
width: 100%;
height: 100%;
position: relative;
top: 0px;
left: 0px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.pl-inner {
position: relative;
width: 100%;
}
.pl-box {
position: relative;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
padding: 120px 50px 180px 50px;
overflow: hidden;
}
.pl-content {
width: 100%;
display: inline-block;
opacity: 1;
color: white;
}
.plink {
font-size: 100px;
font-weight: 800;
color: #f4f4f4;
text-transform: uppercase;
margin: 0 0 10px 0;
padding-bottom: 5px;
letter-spacing: -3px;
text-align: left;
text-align: -webkit-left;
display: block;
}
.pspacer {
width: 100%;
height: 10px;
}
/* ---------------------------------------------------------*/
.burger-wrapper {
position: fixed;
top: 41px;
right: 41px;
width: auto;
height: auto;
padding: 5px;
/*background-color: #333;*/
background-color: rgba(228, 228, 228, 0.9);
z-index: 99;
}
.content-wrapper {
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
transition: all 1s cubic-bezier(.36, .17, .06, 1.02);
z-index: 40;
background-color: rgba(244, 244, 244, 1.0);
}
.show {
top: 90%;
}
.logo-wrapper {
position: fixed;
top: 41px;
left: 41px;
font-size: 17px;
font-weight: 900;
letter-spacing: 0px;
text-transform: uppercase;
color: rgba(204, 204, 204, 0.9) !important;
z-index: 99;
width: 150px;
height: 12px;
/*background-color: #333;*/
background-color: rgba(228, 228, 228, 0.9);
}
.container {
position: absolute;
top: 0px;
left: 0px;
bottom: 20px;
width: 100%;
height: 100%;
}
.block {
width: 100%;
height: 80px;
background-color: rgba(244, 244, 244, 0.9);
position: absolute;
z-index: 89;
}
.grid-wrapper {
position: absolute;
width: 100%;
height: 100%;
}
.thumb-grid {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
overflow-x: scroll;
padding: 130px 5% 150px 5%;
}
.box {
width: 100%;
height: 200px;
background-color: #333; ;
}
.box:nth-child(even) {
background-color: #999;
}
#media (max-width: 650px){
.plink {
font-size: 56px;
text-align: -webkit-center;
text-align: center;
display: block;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="menu-box">
<div class="page-links">
<div class="pl-inner">
<div class="pl-box">
<div class="pl-content">
<p>MENU CONTENT goes here......Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquam eget urna et consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales molestie odio a maximus. Pellentesque sit amet augue a leo sollicitudin hendrerit sit amet vel ligula. Nullam placerat dapibus rhoncus. Etiam a nulla sit amet tellus ullamcorper sagittis et pellentesque sapien. Curabitur eu purus eu massa blandit mollis. Vestibulum venenatis faucibus tempus. Curabitur finibus metus ut ipsum semper malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div> <!-- .menu-box end div -->
<div class="logo-wrapper"></div>
<div class="burger-wrapper">click</div>
<div class="content-wrapper">
<div class="container">
<div class="block"></div>
<div class="grid-wrapper">
<div class="thumb-grid">
<p>MAIN PAGE content goes here......Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquam eget urna et consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales molestie odio a maximus. Pellentesque sit amet augue a leo sollicitudin hendrerit sit amet vel ligula. Nullam placerat dapibus rhoncus. Etiam a nulla sit amet tellus ullamcorper sagittis et pellentesque sapien. Curabitur eu purus eu massa blandit mollis. Vestibulum venenatis faucibus tempus. Curabitur finibus metus ut ipsum semper malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc orci sapien, eleifend a risus quis, accumsan aliquet quam. Cras dolor ex, fringilla quis egestas eget, finibus ut velit. Donec lacinia rutrum enim. Nunc at viverra metus, ac pharetra urna. Sed dui turpis, tincidunt quis sem mattis, consectetur sagittis augue. Aenean porttitor, eros vehicula dapibus egestas, dolor nibh venenatis libero, eu viverra arcu ipsum quis dolor. Ut enim odio, vestibulum eu elit vitae, blandit commodo risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas imperdiet ligula quis ornare ullamcorper. Fusce eu facilisis lectus. Duis ultricies rhoncus eros, eget facilisis dui pulvinar nec. Morbi posuere enim dolor, id finibus eros sagittis id. Cras accumsan lacus.</p>
</div>
</div>
</div> <!-- .container end div -->
</div> <!-- .content-wrapper end div -->
Ok so after a little trial and error I found the answer is to set the position of .page-linksto absolute
Literally no idea if this is a good way to laying stuff out but seems to work. I've updated the Code Pen here
I've created a <textarea> of a fixed size that allows users to scroll within it. The problem is that for some reason the scroll displays above rather than below and inside the edges.
textarea {
width: 40%;
min-width: 40%;
max-width: 40%;
min-height: 120px;
max-height: 120px;
padding: 10px;
resize: none;
display: inline-block;
outline: none;
box-sizing: border-box;
border: solid 5px transparent;
border-radius: 30px;
background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
background-origin: border-box;
background-clip: padding-box, border-box;
font-family: 'Roboto', sans-serif;
font-size: 15px;
}
<textarea name="message" id="message" required>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie sem mauris, vel euismod odio venenatis non. Cras sed augue at ipsum pulvinar tristique a sit amet quam. Donec tempor molestie mi vel fringilla. Etiam commodo orci ut est hendrerit pretium. Vivamus mollis non arcu nec bibendum. Phasellus posuere viverra tortor. Etiam at lorem magna. Nunc pellentesque lacus at libero ullamcorper, a malesuada augue vulputate. Ut vitae est et nulla tincidunt elementum sed a ante. Donec egestas enim at auctor iaculis. Vestibulum a elementum libero. Vivamus eget elementum leo.</textarea>
Any ideas how to make the scroll bars behave more properly? There's also the issue with padding on the right changing when there's a scroll bar visible.
PS: This isn't a duplicate of Rounded corners on a textarea with a scrollbar from six years ago. The question doesn't have any answers that approach the issue I'm facing. Nesting within a DIV isn't something that works effectively within the form element. I just wish to have the scroll bar below the border-radius.
Just to be absolutely clear, I'm looking to do something like this (created in Photoshop as an example)
How about using a container for your textarea and applying border to that?
.textarea-container {
width: 250px;
height: 300px;
background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900cc);
background-origin: border-box;
background-clip: padding-box, border-box;
border: solid 5px transparent;
border-radius: 30px;
padding: 0;
overflow: hidden;
}
textarea {
width: 100%;
height: 100%;
padding: 10px;
resize: none;
display: inline-block;
outline: none;
border: none;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
font-size: 15px;
}
<div class="textarea-container">
<textarea name="message" id="message" required>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie sem mauris, vel euismod odio venenatis non. Cras sed augue at ipsum pulvinar tristique a sit amet quam. Donec tempor molestie mi vel fringilla. Etiam commodo orci ut est hendrerit pretium. Vivamus mollis non arcu nec bibendum. Phasellus posuere viverra tortor. Etiam at lorem magna. Nunc pellentesque lacus at libero ullamcorper, a malesuada augue vulputate. Ut vitae est et nulla tincidunt elementum sed a ante. Donec egestas enim at auctor iaculis. Vestibulum a elementum libero. Vivamus eget elementum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie sem mauris, vel euismod odio venenatis non. Cras sed augue at ipsum pulvinar tristique a sit amet quam. Donec tempor molestie mi vel fringilla. Etiam commodo orci ut est hendrerit pretium. Vivamus mollis non arcu nec bibendum. Phasellus posuere viverra tortor. Etiam at lorem magna. Nunc pellentesque lacus at libero ullamcorper, a malesuada augue vulputate. Ut vitae est et nulla tincidunt elementum sed a ante. Donec egestas enim at auctor iaculis. Vestibulum a elementum libero. Vivamus eget elementum leo.</textarea>
</div>
Edit: After checking your ideal appearance I realized you want the overflow of the scrollbar to be hidden, so you can define overflow: hidden on textarea container and get rid of padding by setting it to padding: 0
The initial answer from M.A Shahbazi came closest to solving the question and then did. The answer from Artur helped too. Some of the CSS in that answer is off because you come into an issue with the <textarea> not having the same height as its container. Below is the CSS I settled on for anyone who comes across this question in the future and would like to see the final approach. I accepted the answer from M.A Shahbazi because it was closest and needed only a few adjustments. The main ones being the actual sizing, they needed to all have the same size in order to match up. And look more like this:
than this:
.textarea-container {
width: 100%;
min-width: 100%;
max-width: 100%;
min-height: 200px;
max-height: 200px;
margin-bottom: 10px;
background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900cc);
background-origin: border-box;
background-clip: padding-box, border-box;
border: solid 5px transparent;
border-radius: 30px;
padding: 0;
overflow: hidden;
}
textarea {
width: 100%;
min-width: 100%;
max-width: 100%;
min-height: 200px;
max-height: 200px;
padding: 15px;
resize: none;
display: inline-block;
outline: none;
border: none;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
font-size: 15px;
}
<div class="textarea-container">
<textarea></textarea>
</div>
textarea {
width: 40%;
min-width: 40%;
max-width: 40%;
min-height: 120px;
max-height: 120px;
padding: 10px;
resize: none;
display: inline-block;
outline: none;
box-sizing: border-box;
border: solid 5px transparent;
border-radius: 30px;
background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
background-origin: border-box;
background-clip: padding-box, border-box;
font-family: 'Roboto', sans-serif;
font-size: 15px;
}
.box-content {
height: 120px;
width: 40%;
overflow: auto;
border-radius: 29px;
}
div.disabled {
overflow-x: hidden; //horizontal
overflow-y: scroll; //vertical
}
You can also customize your scrollbar
/* Scrollbar styles */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
border: 1px solid yellowgreen;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: yellowgreen;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #88ba1c;
}
Just wrap your textarea within a div and give some style on into div. Also remove the rows attribute from the textarea. To see the result check my codepen link here.
div {
border: solid 5px transparent;
border-radius: 30px;
width: 40%;
min-width: 40%;
max-width: 40%;
height:120px;
box-sizing: border-box;
max-height:120px;
background: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
background-origin: border-box;
background-clip: padding-box, border-box;
overflow:hidden;
}
textarea {
height:100%;
width:100%;
padding:10px;
resize: none;
display: inline-block;
outline: none;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
font-size: 15px;
border:none;
}
I think the only solution would be to wrap your textarea in container and apply your styles on the container:
div {
width: 40%;
min-height: 120px;
max-height: 120px;
padding: 20px;
display: inline-block;
outline: none;
box-sizing: border-box;
border: solid 5px transparent;
border-radius: 30px;
background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
background-origin: border-box;
background-clip: padding-box, border-box;
font-family: 'Roboto', sans-serif;
font-size: 15px;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
position: absolute;
}
textarea {
position: relative;
flex: 1 0 auto;
margin: -20px;
padding: 20px;
width: 100%;
resize: none;
}
<div>
<textarea name="message" id="message" required>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie sem mauris, vel euismod odio venenatis non. Cras sed augue at ipsum pulvinar tristique a sit amet quam. Donec tempor molestie mi vel fringilla. Etiam commodo orci ut est hendrerit pretium. Vivamus mollis non arcu nec bibendum. Phasellus posuere viverra tortor. Etiam at lorem magna. Nunc pellentesque lacus at libero ullamcorper, a malesuada augue vulputate. Ut vitae est et nulla tincidunt elementum sed a ante. Donec egestas enim at auctor iaculis. Vestibulum a elementum libero. Vivamus eget elementum leo.</textarea>
</div>
I'm trying to create a website where the first part is a video, on top of it is a navigation bar and description sentence. The second part is a div with a picture and a lorem ipsum paragraph. But the two-part is mushed together. Do you know why?
The first part is the video-container div. It contains a video, a navigation bar and some introductory words
The second part is the intro div which has an image and a paragraph side by side
<style>
html,
body {
border: 1px solid blue;
min-height:100%;
padding:0;
margin:0;}
* {
font-family: 'Playfair Display', serif;
margin: 0;
padding: 0;
border: 0;
outline: 0;
margin-top: -5px;
}
.nav {
border: 1px solid red;
margin-right: 30px;
display: flex;
align-items: center;
justify-content: space-between;
}
.nav li {
list-style-type: none;
}
.nav li a {
text-decoration: none;
font-size: 23px;
font-weight: 600;
color: #C71585;
letter-spacing: 0.03em;
}
.nav img {
width: 150px;
}
video {
width: 100%;
position: absolute;
object-fit: cover;
background-size: cover;
top: 0px;
left: 0px;
min-width: 100%;
min-height: 100%;
z-index: -1;
box-sizing: content-box;
}
.video-container {
position: relative;
height: 100%;
border: 1px solid yellow;
}
.content {
border: 1px solid yellow;
position: absolute;
left: 50px;
top: 150px;
margin: 10px;
padding: 5px 20px;
font-size: 20px;
overflow: none;
}
.content h1 {
font-size: 100px;
color: #C71585;
}
#myBtn {
margin-left: 20px;
margin-top: 40px;
border: 1px solid #C71585;
font-size: 26px;
font-weight: 800;
color: #e827a0;
padding: 15px 60px;
background-color: transparent;
transition: 0.2s ease-in;
}
#myBtn:hover {
background-color: rgba(199, 21, 133);
color: white;
}
.intro {
overflow: none;
margin-top: 30px;
display: flex;
justify-content: space-around;
align-items: center;
}
.intro img {
width: 500px;
}
.intro-text {
width: 30%;
}
</style>
</head>
<body>
<div class="video-container">
<video autoplay muted loop id="video">
<source src="video.mp4" type="video/mp4">
</video>
<div class="nav">
<img src="logo.png" alt="logo">
<li>About me</li>
<li>My Portfolio</li>
<li>My resume</li>
<li>Contact me</li>
</div>
<div class="content">
<h1>Avid learner and</h1>
<h1>Constant striver</h1>
<button id="myBtn">Who am I</button>
</div>
</div>
<div class='intro'>
<img src="01.jpeg" alt="">
<div class="intro-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pellentesque ex a felis laoreet, ut bibendum sem eleifend. Quisque egestas sem sed velit molestie tincidunt. Phasellus at pellentesque odio. Phasellus sem leo, hendrerit et massa vehicula, iaculis cursus erat. Vestibulum et viverra nisi, sit amet condimentum sem. Duis gravida faucibus nisl nec pharetra. Curabitur convallis risus enim, nec semper lorem cursus varius. Quisque feugiat vitae dui non ultricies. Integer ipsum quam, dictum et quam nec, imperdiet euismod nulla. Nam bibendum sagittis orci, eget tincidunt risus luctus nec. Quisque lacus urna, tincidunt vel lobortis in, suscipit sit amet nunc. Fusce ultrices erat a nunc dignissim hendrerit. Maecenas sed pharetra quam, vitae suscipit nunc. Aenean molestie dui aliquet augue eleifend, quis congue ligula laoreet. Ut quis est pellentesque, fringilla odio ac, tincidunt nibh.
</div>
</div>
</body>
You can make use of css flex property, in your case please add
.flex-container {
display: flex;
flex-wrap: wrap;
}
under your style tags and assign this class to intro class div as <div class='intro flex-container'>, will this worked for you?
you can easily wrap the .video-container and .intro divs with a div tag and give it style display flex and make sure you add flex wrap also.
Then just give your video and intro containers width 100%
This is what i want to achieve ^ (this is the view on an iphone5 320x568)
But when i resize the window (to iphone 6 375x667 ) i get this
HTML:
<div id="container">
<div class="slicedimage">
<div class="textboxtransparant">
<h2>Since 1928</h2>
<div class="divider"></div>
<br/>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna.
</p>
<i class="fa fa-angle-down fa-3x" aria-hidden="true"></i>
</div>
<div class="transparantblack"></div>
</div>
<div class="slicedimage">
<div class="textboxblack">
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non
</p>
</div>
<div class="blacktransparant"></div>
<div class ="line"></div>
</div>
CSS:
body {
margin: 0;
padding: 0;
font-size: 16px;
/*font-family: Georgia;*/
font-family: sans-serif;
max-width: 640px;
color: black;
}
#container {
display: block;
height:900px;
width: 100%;
position: relative;
top: 50px;
margin: 0;
color: white;
text-align: center;
}
.slicedimage {
background-image:url('http://i.stack.imgur.com/yEQ6k.jpg');
width:100%;
}
.textboxblack {
background-color:black;
}
.line {
position: absolute;
width:1px;
height: 50px;
bottom: 80px; /*half the height*/
left: 50%;
border-left: 1px solid white;
}
.transparantblack {
height: 100px;
width: 100%;
background: linear-gradient(to bottom right, rgba(255, 255, 255, 0) 49.9%, rgba(0, 0, 0, 1) 50.1%);
}
.blacktransparant {
height: 100px;
width: 100%;
background: linear-gradient(to top left, rgba(255, 255, 255, 0) 49.9%, rgba(0, 0, 0, 1) 50.1%);
}
.blackgray {
height:300px;
width:100%;
background:linear-gradient(341deg, #8a8a8a 0%, #8a8a8a 31.9%, #000 32.1%, #000 100%);
}
updated the post and since stack overflow is asking me to add more information since my post is mostly code. Yeah u get the point, lets see if this is enough. "information"
Your goal was to keep the white line under the text, in the middle of the blacktransparent element.
To achieve this you need to make from the line element, a child of the blacktransparant div:
<div class="blacktransparant">
<div class="line"></div>
</div>
and set the blacktransparant to be relative:
.blacktransparant {
height: 100px;
width: 100%;
background: linear-gradient(to top left, rgba(255, 255, 255, 0) 49.9%, rgba(0, 0, 0, 1) 50.1%);
/* Add this */
position: relative;
}
After this you only have to set the arrow in the right place relatively to the blacktransparant div:
.line {
position: absolute;
width: 1px;
height: 50px;
/* bottom: 80px; Change to 25px */
bottom: 25px;
left: 50%;
border-left: 1px solid white;
}
I am seeing something strange in both firefox and chrome when I increase
the zoom level inside these browsers, although I see nothing wrong with
my CSS.
Here is the whole story:
I have a right-floated top-level div containing three right-floated right.
The three inner divs have all box-model measurements in pixels which add
up to the width of the enclosing container. Everything looks fine when
the browser size is 100%, but when I start making the browser smaller
with CTRL+scrollwheel or CTRL+minus the rightmost margin shrinks
down too fast and eventually becomes zero, forcing my rightmost
floated inner div to fall down below the other two!
I can't make sense out of this, almost seems like some integer division
is being performed incorrectly in the browser code, but alas firefox and
chrome both display the same result.
Here is the example (just zoom out with CTRL-minus to see what I mean):
Click Here to View What I Mean on Example Site
Just to narrow things down a bit, the tags of interest are the following:
div#mainContent
div#contentLeft
div#contentCenter
div#contentRight
I've searched stackoverflow for an answer and found the following
posts which seem related to my question but was not able to apply
them to the problem I am experiencing:
http://
stackoverflow.com/questions/6955313/div-moves-incorrectly-on-browser-resize
http://
stackoverflow.com/questions/18246882/divs-move-when-resizing-page
http://
stackoverflow.com/questions/17637231/moving-an-image-when-browser-resizes
http://
stackoverflow.com/questions/5316380/how-to-stop-divs-moving-when-the-browser-is-resized
I've duplicated the html and css code below for your convenience:
Here is the HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pinco</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<div class="logo">
<a href="http://pinco.com">
<img class="logo" src="images/PincoLogo5.png" alt="Pinco" />
</a>
</div>
<div class="titolo">
<h1>Benvenuti!</h1>
<h2>Siete arrivati al sito pinco.</h2>
</div>
<nav>
<ul class="menu">
<li>Menù Qui</li>
<li>Menù Quo</li>
<li>Menù Qua</li>
</ul>
</nav>
</header>
<div id="mainContent">
<div id="contentLeft">
<section>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempor turpis est, nec varius est pharetra scelerisque. Sed eu pellentesque purus, at cursus nisi. In bibendum tristique nunc eu mattis. Nulla pretium tincidunt ipsum, non imperdiet metus tincidunt ac. In et lobortis elit, nec lobortis purus. Cras ac viverra risus. Proin dapibus tortor justo, a vulputate ipsum lacinia sed. In hac habitasse platea dictumst. Phasellus sit amet malesuada velit. Fusce diam neque, cursus id dui ac, blandit vehicula tortor.
Phasellus interdum ipsum eu leo condimentum, in dignissim erat tincidunt. Ut fermentum consectetur tellus, dignissim volutpat orci suscipit ac. Praesent scelerisque urna metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis pulvinar, sem a sodales eleifend, odio elit blandit risus, a dapibus ligula orci non augue. Nullam vitae cursus tortor, eget malesuada lectus. Nulla facilisi. Cras pharetra nisi sit amet orci dignissim, a eleifend odio hendrerit.
</p>
</article>
</section>
</div>
<div id="contentCenter">
<section>
<article>
<p>
Maecenas vitae purus at orci euismod pretium. Nam gravida gravida bibendum. Donec nec dolor vel magna consequat laoreet in a urna. Phasellus cursus ultrices lorem ut sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus purus felis, ornare quis ante vel, commodo scelerisque tortor. Integer vel facilisis mauris.
</p>
<img src="images/auto1.jpg" width="272" height="272" />
<p>
In urna purus, fringilla a urna a, ultrices convallis orci. Duis mattis sit amet leo sed luctus. Donec nec sem non nunc mattis semper quis vitae enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse dictum porta quam, vel lobortis enim bibendum et. Donec iaculis tortor id metus interdum, hendrerit tincidunt orci tempor. Sed dignissim cursus mattis.
</p>
</article>
</section>
</div>
<div id="contentRight">
<section>
<article>
<img src="images/auto2.jpg" width="272" height="272" />
<img src="images/auto3.jpg" width="272" height="272" />
<p>
Cras eu quam lobortis, sodales felis ultricies, rhoncus neque. Aenean nisi eros, blandit ac lacus sit amet, vulputate sodales mi. Nunc eget purus ultricies, aliquam quam sit amet, porttitor velit. In imperdiet justo in quam tristique, eget semper nisi pellentesque. Cras fringilla eros enim, in euismod nisl imperdiet ac.
Fusce tempor justo vitae faucibus luctus.
</p>
</article>
</section>
</div>
</div>
<footer>
<div class="footerText">
<p>
Copyright © Pinco
<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br />Fusce ornare turpis orci, nec egestas leo feugiat ac.
<br />Morbi eget sem facilisis, laoreet erat ut, tristique odio. Proin sollicitudin quis nisi id consequat.
</p>
</div>
<div class="footerLogo">
<img class="footerLogo" src="images/auto4.jpg" width="80" height="80" />
</div>
</footer>
</div>
</body>
</html>
and here is the CSS:
/* CSS Document */
* { margin: 0; border: 0; padding: 0; }
body { background: #8B0000; /* darkred */; }
body { margin: 0; border: 0; padding: 0; }
div#wrapper { margin: 0 auto; width: 960px; height: 100%; background: #FFC0CB /* pink */; }
header { position: relative; background: #005b97; height: 140px; }
header div.logo { float: left; width: 360px; height: 140px; }
header div.logo img.logo { width: 360px; height: 140px; }
header div.titolo { float: left; padding: 12px 0 0 35px; color: black; }
header div.titolo h1 { font-size: 36px; font-weight: bold; }
header div.titolo h2 { font-size: 24px; font-style: italic; font-weight: bold; color: white;}
header nav { position: absolute; right: 0; bottom: 0; }
header ul.menu { background: black; }
header ul.menu li { display: inline-block; padding: 3px 15px; font-weight: bold; }
div#mainContent { float: left; width: 100%; /* width: 960px; *//* height: 860px; */ padding: 30px 0; text-align: justify; }
div#mainContent img { margin: 12px 0; }
div#contentLeft { height: 900px; float: left; margin-left: 12px; border: 1px solid black; padding: 15px; width: 272px; background: #ccc; }
div#contentCenter { height: 900px; float: left; margin-left: 12px; border: 1px solid transparent; padding: 15px; width: 272px; background: #E00; }
div#contentRight { height: 900px; float: left; margin-left: 12px; border: 1px solid black; padding: 15px; width: 272px; background: #ccc; }
footer { clear: both; padding: 12px; background: #306; color: white; height: 80px; font-style: italic; font-weight: bold; }
footer div.footerText { float: left; }
footer div.footerLogo { float: right; }
a { color: white; text-decoration: none; }
EDIT 1:
I've checked all measurements again and carefully plugged in numbers until they
satisfied the following equation for the three uniform columns in the main area
with uniform collapsed margin areas on all sides:
TEXT_AREA * 3 + MARGIN * 4 + BORDER * 6 = 960px (the width of the
wrapper)
TEXT_AREA = WIDTH + 2 * PADDING
BORDER = 1
subject to the margin and padding set to reasonable values of course,
and here are some numbers which seemed OK which solve these constraints:
TEXT_AREA = 290px
MARGIN = 15px
BORDER = 1px
PADDING = 15px
WIDTH = 268px
which translates to the following:
div#mainContent { float: left; width: 960px; padding: 15px 0; text-align: justify; }
div#contentLeft { height: 900px; float: left; margin: 0 0 0 15px; border: 1px solid black; padding: 15px; width: 268px; background: #ccc; }
div#contentCenter { height: 900px; float: left; margin: 0 0 0 15px; border: 1px solid transparent; padding: 15px; width: 268px; background: #E00; }
div#contentRight { height: 900px; float: left; margin: 0 15px 0 15px; border: 1px solid black; padding: 15px; width: 268px; background: #ccc; }
However even now that everything is uniform, I still get the problem that when I zoom
out the rightmost column falls down below the others. One solution is to do the following:
div#contentRight { height: 900px; float: left; margin: 0 0 /* 15px */ 0 15px; border: 1px solid black; padding: 15px; width: 268px; background: #ccc; }
so that now the right column has no right margin, but the visual result is the same.
Now, when I zoom out, the rightmost column does not fall down, but its right margin
is so small compared to the others, so really, there is still a small problem.
Edit 2:
OK, I've done some more searching and found an even better solution. The solution
consists in having the margins in between the div column elements the same and having
the left and right margin adjust automatically. In order to achieve this, I had to
do away with floats, and use "display: inline-block" which IMHO is much more suitable
than floats and was designed for the purpose at hand:
div#mainContent { padding: 15px 0; width: 960px; text-align: center; }
div#contentLeft { display: inline-block; vertical-align: top; height: 900px; margin: 0 0 0 0/*15px*/; border: 1px solid black; padding: 15px; width: 268px; background: #ccc; }
div#contentCenter { display: inline-block; vertical-align: top; height: 900px; margin: 0 0 0 15px; border: 1px solid transparent; padding: 15px; width: 268px; background: #E00; }
div#contentRight { display: inline-block; vertical-align: top; height: 900px; margin: 0 0/* 15px */ 0 15px; border: 1px solid black; padding: 15px; width: 268px; background: #ccc; }
div#mainContent section { text-align: justify; }
Now, at a normal zoom level all left margins will be 15px plus the last element's right
margin which will also be 15px. On the other hand, if I zoom out, there is some pixel
rounding going on, but the rounding is applied more or less equally on both sides,
which is somewhat better. This works in Firefox.
Edit 3:
Alas, I've tried reducing the in-between margins a bit, which makes the problem
go away with Chrome, but one of the div elements still drops down in IE10.
div#mainContent { padding: 15px 0; text-align: center; }
div#contentLeft { display: inline-block; vertical-align: top; height: 900px; margin: 0 0 0 0/* 20px increased from 15px */; border: 1px solid black; padding: 15px; width: 268px; background: #ccc; overflow: hidden; }
div#contentCenter { display: inline-block; vertical-align: top; height: 900px; margin: 0 0 0 10px/* reduced from 15px */; border: 1px solid transparent; padding: 15px; width: 268px; background: #E00; overflow: hidden; }
div#contentRight { display: inline-block; vertical-align: top; height: 900px; margin: 0 0/* 20px increased from 15px */ 0 10px/* reduced from 15px */; border: 1px solid black; padding: 15px; width: 268px; background: #ccc; overflow: hidden; }
div#mainContent section { text-align: justify; }
Edit 4:
I've come up with a solution which works in Firefox, Chrome, and IE10.
Basically, I've created three div wrappers around the three columns
and taken measurements again ensuring all measurements are symmetric.
Here is the source code:
HTML File:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pinco</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<div class="logo">
<a href="http://pinco.com">
<img class="logo" src="images/PincoLogo5.png" alt="Pinco" />
</a>
</div>
<div class="titolo">
<h1>Benvenuti!</h1>
<h2>Siete arrivati al sito pinco.</h2>
</div>
<nav>
<ul class="menu">
<li>Menù Qui</li>
<li>Menù Quo</li>
<li>Menù Qua</li>
</ul>
</nav>
</header>
<div id="mainContent">
<div id="wrapperLeft">
<div id="contentLeft">
<section>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempor turpis est, nec varius est pharetra scelerisque. Sed eu pellentesque purus, at cursus nisi. In bibendum tristique nunc eu mattis. Nulla pretium tincidunt ipsum, non imperdiet metus tincidunt ac. In et lobortis elit, nec lobortis purus. Cras ac viverra risus. Proin dapibus tortor justo, a vulputate ipsum lacinia sed. In hac habitasse platea dictumst. Phasellus sit amet malesuada velit. Fusce diam neque, cursus id dui ac, blandit vehicula tortor.
Phasellus interdum ipsum eu leo condimentum, in dignissim erat tincidunt. Ut fermentum consectetur tellus, dignissim volutpat orci suscipit ac. Praesent scelerisque urna metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis pulvinar, sem a sodales eleifend, odio elit blandit risus, a dapibus ligula orci non augue. Nullam vitae cursus tortor, eget malesuada lectus. Nulla facilisi. Cras pharetra nisi sit amet orci dignissim, a eleifend odio hendrerit.
</p>
</article>
</section>
</div>
</div>
<div id="wrapperCenter">
<div id="contentCenter">
<section>
<article>
<p>
Maecenas vitae purus at orci euismod pretium. Nam gravida gravida bibendum. Donec nec dolor vel magna consequat laoreet in a urna. Phasellus cursus ultrices lorem ut sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus purus felis, ornare quis ante vel, commodo scelerisque tortor. Integer vel facilisis mauris.
</p>
<img src="images/auto1.jpg" alt="Auto 1" width="268" height="268" />
<p>
In urna purus, fringilla a urna a, ultrices convallis orci. Duis mattis sit amet leo sed luctus. Donec nec sem non nunc mattis semper quis vitae enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
</article>
</section>
</div>
</div>
<div id="wrapperRight">
<div id="contentRight">
<section>
<article>
<img src="images/auto2.jpg" alt="Auto 2" width="268" height="268" style="margin-top: 0" />
<img src="images/auto3.jpg" alt="Auto 3" width="268" height="268" style="margin-top: 0" />
<p>
Cras eu quam lobortis, sodales felis ultricies, rhoncus neque. Aenean nisi eros, blandit ac lacus sit amet, vulputate sodales mi. Nunc eget purus ultricies, aliquam quam sit amet, porttitor velit. In imperdiet justo in quam tristique, eget semper nisi pellentesque. Cras fringilla eros enim, in euismod nisl imperdiet ac.
Fusce tempor justo vitae faucibus luctus.
</p>
</article>
</section>
</div>
</div>
</div>
<footer>
<img class="footerLogo" src="images/auto4.jpg" alt="Auto 4" width="80" height="80" />
<p class="footerText">
Copyright © Pinco Inc.
<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br />Fusce ornare turpis orci, nec egestas leo feugiat ac.
<br />Morbi eget sem facilisis, laoreet erat ut, tristique odio. Proin sollicitudin quis nisi id consequat.
</p>
</footer>
</div>
</body>
</html>
CSS File:
/* CSS Document */
*, body, article, secton, p { margin: 0; border: 0; padding: 0; }
body { background: #8B0000; /* darkred */; }
body { margin: 0; border: 0; padding: 0; }
div#wrapper { margin: 0 auto; width: 960px; height: 100%; background: #FFC0CB /* pink */; }
header { position: relative; background: #005b97; height: 140px; }
header div.logo { float: left; width: 360px; height: 140px; }
header div.logo img.logo { width: 360px; height: 140px; }
header div.titolo { float: left; padding: 12px 0 0 35px; color: black; }
header div.titolo h1 { font-size: 36px; font-weight: bold; }
header div.titolo h2 { font-size: 24px; font-style: italic; font-weight: bold; color: white;}
header nav { position: absolute; right: 0; bottom: 0; }
header ul.menu { background: black; }
header ul.menu li { display: inline-block; padding: 3px 15px; font-weight: bold; }
div#mainContent { float: left; padding: 15px 0; height: 900px; }
#wrapperLeft { float: left; margin-left: 15px; width: 305px; }
#wrapperCenter { float: left; margin: 0 15px 0 15px; width: 290px; }
#wrapperRight { float: left; margin-right: 15px; width: 305px; }
div#contentLeft { border: 1px solid black; padding: 15px; width: 273px; height: 868px; background: #ccc; overflow: hidden; }
div#contentCenter { border: 1px solid transparent; padding: 15px; width: 258px; height: 868px; background: #E00; overflow: hidden; }
div#contentRight { border: 1px solid black; padding: 15px; width: 273px; height: 868px; background: #ccc; overflow: hidden; }
div#mainContent section { text-align: justify; }
div#mainContent img { margin: 12px 0; }
footer { clear: both; padding: 12px; background: #306; color: white; height: 80px; font-size: 12px; font-style: italic; font-weight: bold; overflow: hidden; }
footer img.footerLogo { float: right; }
a { color: white; text-decoration: none; }
This is probably caused by sub-pixel rounding.
As you zoom, your browser may calculate pixel values with fractions of pixels. As a result of rounding these values up or down, pixel-perfect layouts can break. (Different browsers handle this in different ways.)
I had decent luck converting your pixel values to percentage values.
Here are the values that worked for me:
div#contentLeft,
div#contentCenter,
div#contentRight {
margin-left: 1.1%;
padding: 1.56%;
width: 28.3%;
}
Edit:
Here's another method, which essentially centers the three boxes in div#mainContent rather than spacing them so tightly with margins. It allows them a little more room to flex when zoomed.
I removed the margin-left from div#contentLeft and added the following CSS to center the three boxes:
div#wrapper {
overflow:hidden; /* ADDED THIS TO AVOID HORIZONTAL SCROLL */
}
div#mainContent {
position: relative; /* ADDED THIS */
left: 50%; /* ADDED THIS */
float: left;
padding: 30px 0px;
text-align: justify;
}
div#contentLeft {
position: relative; /* ADDED THIS */
left: -50%; /* ADDED THIS */
background: none repeat scroll 0% 0% #CCCCCC;
border: 1px solid black;
float: left;
height: 900px;
padding: 15px;
width: 272px;
/* margin-left:12px; REMOVED THIS */
}
div#contentCenter {
position: relative; /* ADDED THIS */
left: -50%; /* ADDED THIS */
background: none repeat scroll 0% 0% #EE0000;
border: 1px solid transparent;
float: left;
height: 900px;
margin-left: 12px;
padding: 15px;
width: 272px;
}
div#contentRight {
position: relative; /* ADDED THIS */
left: -50%; /* ADDED THIS */
background: none repeat scroll 0% 0% #CCCCCC;
border: 1px solid black;
float: left;
height: 900px;
margin-left: 12px;
padding: 15px;
width: 272px;
}
The boxes remain floated on one row even when Firefox is zoomed all the way out.