So I have an application where I display user data, the div containing this data has an auto width attribute so text won't split into multiple lines. But now I have a problem because this div also contains a block of text. which obviously should be longer than one rule. This results in that the div becomes really wide. which I don't want. I am looking for a solution to make CSS ignore this specific block of text. Is there anyone who knows a solution?
This is the containing div
#GenerateInfo{
overflow: scroll;
position: fixed;
top: 0;
bottom: 0;
right: 76%;
margin: auto;
width: auto;
height: 65%;
padding: 0;
z-index: 100;
font-size: 20px;
text-align: left;
-webkit-box-shadow: 6px 18px 30px 0px rgba(0,0,0,0.36);
-moz-box-shadow: 6px 18px 30px 0px rgba(0,0,0,0.36);
box-shadow: 6px 18px 30px 0px rgba(0,0,0,0.36);
}
HTML:
<div id="GenerateInfo" class="card">
<div class="card-body">
<h3>Information</h3><strong>name:</strong>
<br>Name
<hr>
<strong>Email:</strong><br>email#hotmail.nl<hr>
<strong>message:</strong>
<br>
<span class="limit">rem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam u</span>
</div>
</div>
sorry for the Dutch language in images.
this is what it should look like (even if it has a long message):
This is what it looks like:
Related
The ::before selector doesn't extend vertically in a fixed element.
Is there a way to make the background fill the whole height? Now, when a user scrolls, the ::before elemeent stops as soon as the user has scrolled outside the viewport.
Preferably a non-javascript way.
Thanks in advance.
NB: I'm using SASS, feel free to provide an answer in SCSS or just plain CSS.
Full code: https://jsfiddle.net/u7fvb2nq/
Snippet:
.outer
position: fixed
&::before
content: ''
position: absolute
left: 0
top: 0
bottom: 0
right: 0
background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.3))
You can use position fixed for :before pseudo element.
.outer{
position: fixed;
background: url('https://images.unsplash.com/photo-1473830394358-91588751b241?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60');
width: 100%;
height: 100%;
overflow-y: auto;
padding: 30px;
}
.outer:before{
content: '';
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background-image: linear-gradient(rgba(255, 255, 255, 0.5) , rgba(255, 255, 255, 0.4));
}
.outer p{
color: #fff;
font-family: sans-serif;
max-width: 400px;
font-size: 2rem;
}
<div class="outer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu dignissim felis, sit amet ultricies justo. Praesent consequat at nulla nec eleifend. Sed convallis, metus non pellentesque elementum, nunc arcu condimentum leo, sit amet pellentesque turpis augue ac sapien. Phasellus facilisis lacinia mauris at consectetur. Morbi sapien augue, condimentum vel erat vitae, semper rutrum erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum porttitor pharetra faucibus. Donec lobortis massa id dui porta aliquam. Integer eu velit lacinia, cursus libero in, vulputate ligula. Ut ut vestibulum nunc. Nulla facilisi. In turpis augue, luctus pellentesque nibh vel, ullamcorper feugiat orci. Mauris ut metus nec mauris venenatis viverra ut eu mi. Integer quis sem sed tortor dignissim lobortis et at dui. Proin pretium id lectus non semper.dfsdf</p>
</div>
I'm encountering a problem when trying to pad a div with overflow: hidden with two child divs where the content overflows the bottom of the padding if the parent doesn't have a height set, despite a max-height being set. On top of that, using overflow: hidden on the child div causes it to act like it's display: inline-block where the content doesn't flow around its sibling that's float: left. Below is my example case.
Descriptive picture of example case
So my two main questions are, is there a way to achieve the child div (.content) growing until it reaches the max-height of the parent without overshooting, primarily so that the child div will be hidden by the parent's padding? And is overflow: hidden on .content supposed to cause .content to behave oddly when the text wraps or is that a bug?
.wrapper {
max-height: 150px;
/* height: 150px; /* Required for .content to get correct height. Why isn't max-height sufficient? */
overflow: hidden;
padding: 25px;
border: 1px solid #000;
}
.left {
float: left;
border: 1px solid #000;
}
.content {
/* height: 100%; /* Doesn't do anything if the parent has no height set. */
max-height: 150px; /* Resolves not being able to inherit the parent's height. */
overflow: hidden; /* <- Required to hide overflow text but causes odd text wrapping behavior. */
}
<div class="wrapper">
<div class="left">
Left
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam quam sit amet neque ullamcorper varius. Aliquam porta, nulla a accumsan laoreet, ipsum nibh rhoncus lectus, sit amet placerat nibh felis ut leo. Nam in turpis at felis rutrum euismod a a sem. Donec efficitur lorem non vehicula luctus. Nulla pulvinar ultrices blandit. Donec ipsum arcu, tempus nec vulputate quis, porta nec sapien. Curabitur pellentesque, felis ut suscipit sodales, risus arcu consequat odio, vel porta ligula leo et quam. Praesent quam nisi, eleifend non viverra non, molestie nec nulla. Curabitur vel scelerisque dui, facilisis tempus enim. Etiam ac scelerisque dui. Etiam pretium tortor ac dictum eleifend. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam ornare malesuada risus, sed iaculis tellus lacinia vitae. Vivamus ut rhoncus nisl. Pellentesque vel sapien diam. Duis id felis massa.
</div>
</div>
Edit:
I've realized I could move the max-height amount to the child div, but the text still wraps strangely due to the overflow: hidden rule. I want to believe that this is a bug, but I am not certain.
Try This:
.wrapper {
overflow: auto;
padding: 25px;
border: 1px solid #000;
}
.left {
float: left;
border: 1px solid #000;
}
.content {
display: block;
overflow: auto;
/* Required but causes inline-block behavior? */
}
::-webkit-scrollbar {
width: 0px;
background: transparent; /* make scrollbar transparent */
}
<div class="wrapper">
<div class="left">
Left
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam quam sit amet neque ullamcorper varius. Aliquam porta, nulla a accumsan laoreet, ipsum nibh rhoncus lectus, sit amet placerat nibh felis ut leo. Nam in turpis at felis rutrum euismod a a sem. Donec efficitur lorem non vehicula luctus. Nulla pulvinar ultrices blandit. Donec ipsum arcu, tempus nec vulputate quis, porta nec sapien. Curabitur pellentesque, felis ut suscipit sodales, risus arcu consequat odio, vel porta ligula leo et quam. Praesent quam nisi, eleifend non viverra non, molestie nec nulla. Curabitur vel scelerisque dui, facilisis tempus enim. Etiam ac scelerisque dui. Etiam pretium tortor ac dictum eleifend. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam ornare malesuada risus, sed iaculis tellus lacinia vitae. Vivamus ut rhoncus nisl. Pellentesque vel sapien diam. Duis id felis massa.
</div>
</div>
I have a css problem like this:
I have 3 divs, imagine they're all stacked in a column (like table with 3 rows) and the top one and the bottom one has height: 100px; and position: absolute; for example and they're like header and footer, they always stick to the top and the bottom of my form.
The height of the whole form can vary depending on other elements in the form, so I need my middle div to be just between the other 2 divs, and if it doesn't fit with it's content, to scroll.
(For example header and footer are 100px height, the form is just 500px height and the text in middle div is very very long) <- at the moment the middle div expands and streches the whole form.
I've tried many things to solve this with positioning, marging, padding of the elements, but still no success... Can anyone help me? Thanks!
You can do it this way: jsFiddle
CSS
.header, .footer {
background-color: green;
height: 100px;
width: 100%;
}
.form {
height: 300px;
position: relative;
}
.content {
position: absolute;
top: 100px;
bottom: 100px;
overflow-y: scroll;
}
.footer {
position: absolute;
bottom: 0px;
}
What's wrong with just a little bit of JS as simple as this?
var form_height=300, footer_height=100, header_height=100;
document.getElementById('content').style.height=form_height - header_height - footer_height +'px';
Just adding that your code works:
http://jsfiddle.net/n8sZ7/23/
HTML
<div class="form">
<div class="header"></div>
<div id="content" class="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc
</div>
<div class="footer"></div>
</div>
CSS
.header, .footer {
background-color: green;
height: 100px;
}
.form {
height: 300px;
}
.content {
overflow-y: scroll; <!-- I want this to fit between header and footer (in this example to get 100px of height) without using any javascript -->
}
I set up this fiddle to show how all browsers render the red pieces.
Strangely, IE7 renders that fine (on its own).
However, I have a shadow effect on a new site (that works the same as the red strips) that works on Firefox, Safari & IE8.
I swear I have used this same method countless times before and it has worked in IE7.
Here is how it looks in IE7. The strips don't grow to the correct height (using IE's developer tools showed me that). They are not just not repeating the background image.
(source: alexanderdickson.com)
The site is also available here to view. I am using IE8's compatibility view, which I realise isn't strictly a 1:1 of IE7, but I according to NetRender, this also happens on IE7.
Can someone please kindly tell me what I am doing wrong?
Thanks!
<div id="main">
<p>
Donec laoreet ullamcorper iaculis. Fusce sed dolor vel mi varius dictum. Phasellus vulputate vehicula odio et pulvinar. Cras pulvinar, magna quis cursus tempus; dolor diam tempus magna; a varius magna velit aliquet libero. Donec auctor pulvinar ornare. Fusce fringilla velit fermentum elit ornare quis porttitor justo vestibulum. Sed feugiat leo in tellus elementum venenatis. Praesent enim lacus, luctus ac porta vitae, iaculis eu arcu! Praesent commodo eleifend lacus, non fringilla orci commodo non. Praesent varius adipiscing purus, et accumsan orci porta nec? Cras imperdiet blandit dapibus. Curabitur dolor magna, imperdiet at euismod non, pharetra in turpis. Integer aliquam neque a justo imperdiet fermentum. Aenean et vulputate orci. Aliquam volutpat, sapien sed sollicitudin porta, risus massa gravida nibh; pharetra vulputate nisl orci ac nibh? Fusce vehicula tristique magna ut suscipit. Morbi imperdiet diam quis nibh sagittis consequat.
</p>
<p>
Nunc tempus iaculis justo quis ultrices. Nulla diam orci, euismod sed mattis id, condimentum ac est. Maecenas sodales egestas massa hendrerit ultrices. Fusce ut ante id leo placerat pellentesque. Mauris ante dolor, porta quis blandit vel; tincidunt sed sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum, nunc vitae posuere suscipit, leo leo dictum nunc, vel laoreet eros dolor ac lacus. Duis at nibh nec lectus commodo vehicula sit amet sed sem. Sed eu massa orci! Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam tellus nibh, lacinia sed imperdiet nec, vestibulum ut nunc. Donec fermentum placerat felis, porta lacinia erat pellentesque vel. In eu ornare ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>
Praesent fringilla mattis lobortis? Sed id porttitor massa! Pellentesque sodales felis et lacus tincidunt sit amet adipiscing arcu aliquam. Proin ullamcorper elementum urna nec mollis. Etiam convallis elementum massa in egestas! Ut pharetra mauris nec mi auctor posuere. Fusce a velit quis tellus accumsan blandit et sit amet odio. In hac habitasse platea dictumst. Nullam nunc orci; pulvinar ac lacinia id, tincidunt at dolor. Curabitur facilisis volutpat sagittis. Maecenas luctus rutrum ante et tincidunt. Nulla non dapibus dui. Proin consectetur pellentesque nunc, ac convallis enim venenatis ut. Aliquam a interdum nibh. Curabitur tristique ipsum ornare ante semper eget luctus nulla volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse non est sem. Nulla sodales, metus sit amet ullamcorper mollis, velit velit tempus odio, at tristique diam lorem non risus. Suspendisse dictum lorem laoreet metus euismod gravida. Nullam dapibus magna nisi.
</p>
<div id="shadow-left"></div>
<div id="shadow-right"></div>
</div>
html {
width: 100%;
height:100%;
}
div#main {
width: 100px;
min-height: 100%;
margin: 0 auto;
position: relative;
}
#shadow-left,
#shadow-right {
width: 30px;
height: 100%;
position: absolute;
top: 0;
background: red;
}
#shadow-left {
left: -30px;
}
#shadow-right {
right: -30px;
}
I'm not sure why you would apply your shadows in this manner though. How I usually do it is have a wider container (including the widths of the left/right shadows) aligned center (in this case, it's your #mainContainer div, then set a y-repeating background (that is the shadow - just a couple of pixels high will do). I will then specify another div within this container, smaller width, center aligned, that will contain all the text.
Edit: Just noticed your fiddle. I think it may not work in this case due to css conflicts, possible from the osCommerce stylesheet? I'll try to look deeper..hmm
EDIT2: Okay I've traced it to this particular code in stylesheet.css
#login-link,
#logout-link {
position: absolute;
bottom: -20px;
right: 50px;
background: #333;
padding: 5px;
text-decoration: none;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
z-index: 100;
font-weight: bold;
}
Login to GolfBallBusters
It's your absolute positioning of this element that's causing the problem. Removing the styling fixes your shadow problems. :)
EDIT FIX:
This should fix it. Or at least it does on my stripped down version of your site layout.
Change #user and #login-link to the following:
#user {
float: right;
color: #f90;
position: relative; /* addition */
}
#login-link,
#logout-link {
position: absolute;
top: 31px; /* addition */
/*bottom: -20px; REMOVED */
right: 50px;
height: 15px; /* addition */
white-space: nowrap; /* addition */
background: #333;
padding: 5px;
text-decoration: none;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
z-index: 100;
font-weight: bold;
}
FIX2:
Change
#user-options .bottom-shadow {
display: block;
width: 100%;
height: 7px;
position: absolute;
bottom: -7px;
#bottom: -5px;
left: 0;
background: url(images/layout/shadow-bottom.png) repeat-x;
z-index: 50;
}
TO
.bottom-shadow {
width: 100%;
height: 7px;
margin-top: -10px;
background: url(images/layout/shadow-bottom.png) repeat-x;
}
And your HTML layout should be:
<div id="user-options">
<div id="choose-your-country">
<p>Choose your country > </p>
</div>
<div id="user"></div>
<div id="current-locale">Golf Ball Busters - AU</div>
<br class="clear">
</div>
<div class="bottom-shadow"></div>
Noticed I change bottom-shadow into a div element and moved it out of <div id="user-options">.
try giving #mainContainer height: 100%
I made an image to easier explain what Im after:
Image Illustration http://bayimg.com/image/eabahaaci.jpg
Ive read some other questions on the subject but Im not sure the solutions will work for me because my div needs to be expandable and grow as more content is added.
Does anyone know how to accomplish this in a simple way?
#body {background: transparent url(background/image.png) 0 0 repeat-y;
}
#content-wrap {width: 60%;
margin: 0 auto;
background: transparent url(partially/transparent/60percent-opaque.png) 0 0 repeat;
}
#main-content {width: 90%;
margin: 1em auto 0 auto;
background-color: #fff;
}
#footer {width: 90%;
margin: 1em auto 0 auto;
background-color: #fff;
}
This sets a partially-transparent .png image as the background for the #content-wrap section, with a solid color background for the divs (I've used #main-content and #footer, but they've got the same style so you could just use #content-wrap div and shorten the css a little.
<div id="content-wrap">
<!-- this is the outer wrapping div -->
<div id="main-content">
<!-- this I'm assuming is the main content portion -->
</div>
<div id="footer">
<!-- the name explains my assumption, I think... -->
</div>
</div>
body {
background: #fff url(http://i.stack.imgur.com/9uIxu.png) 0 0 repeat;
}
#content-wrap {
width: 60%;
margin: 1em auto;
padding: 1em 0;
background-color: rgba(0, 0, 0, 0.3);
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
}
#content-wrap div {
width: 90%;
margin: 1em auto;
background-color: #fff;
}
#content-wrap div p {
margin: 1em 0;
}
<div id="content-wrap">
<div id="main-content">
<p>I presume the main content will sit here...</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean
vulputate eleifend tellus.</p>
<p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.
Curabitur ullamcorper ultricies nisi.</p>
<p>Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.
Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit
cursus nunc,</p>
</div>
<div id="footer">
<p>This'd be the footer. And so on...</p>
</div>
</div>
...if you know that your audience will be using FF3.x (and probably webkit based browsers), you could use background-color: rgba(0,0,0, 0.6); to define the background-colour (red=0, green=0, blue=0, alpha=0.4 or 40% opaque (or 60% transparent) -the values being between 0 (entirely transparent) and 1 (entirely opaque).)
Using the rgba for colour prevents problems from using opacity to make the parent div transparent, while trying to make the children visible. But it's got limited use because of browser adoption, of course...
A working demo is over at my site: http://www.davidrhysthomas.co.uk/so/transparent.html
You will need an 1px high image slice for the transperncy
and one for the rounded corders at the bottom
.background{
background:url(/image/path);
}
.wrapper{
background:url(/image/path/trans.png) repeat-y;
width:500px;
position:relative;
}
.wrapper .bottom{
background:url(path/to/image) no-repeat;
position:absolute;
bottom:0;
left:0;
height:20px;
}
.inner{
background:#fff;
margin:10px;
}
I have made the widths and margins up. You should put in the right sizes yourself