How do i position a centered text or logo (picture 2) at the bottom of the viewport similar to a footer? When the dropdownmenue (picture 3) opens the logo or text should move accordingly to the new height.
So the div below point 5 should dynamically change its height or get out of site in case.
I tried several solutions i googled prior but somehow all did not work like i wanted it to be.
If you know the height of the footer, then you could use min-height, absolute positioning and padding-bottom. However I'm going to assume the more difficult case in which you don't know the height.
<style>
* {box-sizing:border-box;}
.wrapper {min-height:100vh;display:flex;flex-direction:column;}
.main {flex:1 0 auto;}
.footer {background-color:yellow;padding:16px;font-weight:bold;flex:0 0 auto;}
</style>
<div class="wrapper">
<div class="main">
<h1>
Main
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In aliquet, nibh id placerat viverra, justo purus semper dolor, at lacinia eros mauris eu libero. In finibus a urna dapibus tempus. Aenean ipsum urna, tempor at lectus non, blandit feugiat quam. Donec sed ante orci. Integer laoreet est erat, a feugiat leo posuere sed. Mauris sit amet metus finibus, dapibus nunc ut, molestie erat. Nullam rhoncus sagittis lacus id finibus. Etiam sollicitudin nibh dui, a mollis nisl pharetra vitae. Suspendisse nec laoreet ipsum. Fusce sit amet tempor sem. Vestibulum consequat est in nisl aliquam ornare. Aliquam erat volutpat.
</p>
<p>
Sed vulputate nisl ac est eleifend bibendum. Nullam cursus at ex sit amet dignissim. Sed blandit pretium venenatis. Phasellus at ullamcorper nibh. Aenean nec lectus semper, efficitur diam in, luctus nisi. Phasellus in ligula congue, cursus nunc et, luctus mi. Suspendisse a leo luctus, molestie elit sed, venenatis sem. Nullam lobortis ante nec dictum elementum. Praesent aliquam orci quis molestie consectetur. Aliquam ornare a ipsum dapibus pulvinar. Morbi aliquet posuere ligula, vel volutpat dolor pellentesque vel. Vivamus non euismod leo. Duis feugiat velit a est tincidunt pulvinar. Proin blandit malesuada pulvinar. Nunc ut elementum ex, non vehicula tortor.
</p>
</div>
<div class="footer">
Footer
</div>
</div>
Change the height of your browser up and down to see how this works - the principle is a vertical flexbox that's at least the height of the screen, and a footer that's always at the bottom because the main content grows to fill any spare space.
Related
I have a div that looks roughly like this
<div class="document-teaser" style="display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; text-overflow: ellipsis; -webkit-line-clamp: 7; width: 500px">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam auctor sollicitudin magna, ut lacinia nulla accumsan non. Pellentesque nulla risus, pellentesque nec tincidunt nec, commodo quis orci. Suspendisse gravida massa felis. Proin ac nisl id ante vehicula mollis nec a felis. Mauris lobortis tincidunt libero scelerisque faucibus. Morbi tempor nunc a porta pellentesque. Fusce scelerisque diam ac dapibus tristique. Suspendisse finibus maximus nunc, at faucibus lorem commodo nec.</p>
<p>Duis nec nibh feugiat, interdum eros ut, consectetur eros. Praesent eu pretium lectus, eget ornare odio. Duis at sollicitudin augue, at fermentum nibh. Donec ante erat, tristique sed venenatis vitae, suscipit a urna. Maecenas in cursus ipsum, ac fermentum augue. Nulla pretium urna justo, vulputate posuere ante tempor vel. Vestibulum ut ligula congue, gravida ex eget, cursus est.</p>
<p>Donec sed mi faucibus ligula venenatis cursus. Fusce faucibus, arcu vitae sagittis aliquet, dui justo accumsan nisl, eget condimentum lacus velit mattis tellus. Donec sed consectetur urna. In malesuada volutpat augue, quis scelerisque tortor porta quis. Vivamus est metus, vehicula at ultricies ac, ornare vel mi. Donec vel vestibulum ligula. Vivamus sit amet purus odio. Nunc ullamcorper auctor sapien id pellentesque. Phasellus varius ultrices lacinia. Donec a sem ut lacus dignissim bibendum. Cras auctor.</p>
</div>
The styles are added by vue-line-clamp and it works fine on desktop with all viewports.
As soon as I go to my phone, it starts acting up.
The styles are still on the parent, but it is working as if it's applied to all the children. Thus, all p tags get line-clamp to 7, all of them get ellipsis and all have overflow hidden. First of all, this makes all 3 P tags show (which isn't the case on desktop) and it seems like the last two p tags are mushed together so their text is overlapping.
Is the whole webkit box/line-clamp just incompatible with mobile phones or do I need to change something?
For future reference, try also limiting the max-height, in your case for a 7 line clamp, max-height: 8.75 rem might do it, as it did for me. This will also make it work not only on Safari iOS, but also IE, as line-clamp is not supported on IE.
I know float:left will allow text to flow around an image floated on the left.
And float:right will allow text to flow around an image floated on the right.
Is there a way to flow text around both a left and right image?
It's just as you said. You need to have one image with float:left and another with float:right. If both are placed before the text, they will each be at their respective top corners, horizontally aligned.
<img src="http://placehold.it/100x200" style="float:left;">
<img src="http://placehold.it/100x200" style="float:right;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra diam finibus arcu dictum, sed condimentum neque eleifend. Nullam non lobortis leo, a sollicitudin ipsum. Pellentesque gravida aliquet eros, in imperdiet eros dictum eu. Aenean vel pharetra libero. Nam vel risus sit amet tortor fermentum venenatis. Aenean efficitur, ante ac semper porta, turpis nunc dignissim risus, sed ullamcorper dolor lacus a felis. Sed vel nulla imperdiet, luctus tellus sed, pharetra sem. Nullam vehicula elit eget urna lobortis, at porta nunc tempor. In gravida aliquet rutrum. Cras at lacus ac felis egestas aliquet. Aenean viverra eu mauris a fermentum. Donec pharetra nisl ex, sit amet sodales orci lobortis id. Nullam lobortis dictum pharetra. Cras pellentesque rhoncus magna a ultricies. Quisque et vehicula risus, in porttitor ex. Quisque aliquet blandit velit ut gravida.
The structure of my image and paragraphs is as follows:
<p class="All-Book-Text">Maecenas iaculis, ipsum at tempor placerat, orci ligula aliquam enim, sit amet sagittis turpis enim sit amet lorem. Praesent dapibus pretium felis, et tempus nibh posuere a.</p>
<div class="_idGenObjectLayout-3">
<div id="_idContainer062" class="ObjExpOpt-Images">
<img class="_idGenObjectAttribute-1" src="image/animal.png" alt="" />
</div>
</div>
<p class="All-Book-Text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet elementum ex, a porttitor arcu vulputate vitae. Mauris ac finibus nisi. Etiam at tellus vitae quam pretium eleifend. Donec at dictum nisi, id condimentum dui. Donec in tortor ipsum. Etiam sit amet turpis vulputate, maximus erat in, lacinia leo. Cras placerat lobortis fermentum. Phasellus vulputate libero et pellentesque mattis. Aenean tristique ante egestas nibh aliquet, a sagittis sem aliquam. Aenean sit amet diam elementum, cursus arcu non, vehicula lorem. Sed vitae ante id augue consectetur euismod. Suspendisse ac metus ut tortor mollis semper eget eu mi. Vivamus eleifend leo at felis bibendum rutrum. Proin condimentum consectetur velit, at tristique elit accumsan vel.</p>
When the page renders, the text of the lower paragraph overlaps over the image. How can I prevent this and make sure that the distance between the image and the parapgraph is 5 px and no overlap occurs whatsoever. Thanks!
Here's a live demo with my problem http://jsfiddle.net/zvnjnxnf/
Everything looks ok here: JsFiddle
p {display: inline}
img {display: block}
first, you should remove all the style for All-Book-Text and _idGenObjectLayout-3
then add the following css :
._idGenObjectLayout-3{
padding : 5px;
}
I have the below html.What I am trying to do is center the contents of the p tag.The thing is that if I do a align on the div then it works but when I do it in the p tag it does not.Not good with css and want quick solution so asking u guys for help.
<html>
<head></head>
<body>
<div>
<p align="center" style="width:500px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor neque augue. Mauris a ante et libero tincidunt lacinia. Donec at lorem eu mi sagittis pretium. Donec sed ligula vel nunc placerat auctor quis vitae est. Nullam varius leo sed elit auctor rutrum. Pellentesque at erat quis nibh eleifend tincidunt sed feugiat est. Fusce dolor ante, imperdiet in congue ut, vulputate vitae nisi. Vivamus hendrerit felis a leo laoreet eget mollis purus tempus. Etiam fringilla est lacus. Praesent quis purus sem. Vestibulum interdum scelerisque consectetur. Nam nulla est, lacinia in eleifend eget, ultricies at est. Phasellus congue sollicitudin tellus, sit amet lobortis odio interdum et. Quisque turpis elit, feugiat in laoreet mollis, tempus et leo. Morbi eget viverra enim. Donec nec lacus dolor. Suspendisse tincidunt mi in enim gravida et fringilla lacus ultrices. Integer ac augue at nulla sollicitudin placerat. Morbi et ligula quis mauris consequat egestas vel et sapien. Ut ut justo a augue ullamcorper egestas ullamcorper vel nisl. Cras quam ligula, pharetra at pulvinar et, scelerisque vel erat. Donec scelerisque metus vitae libero accumsan quis suscipit urna pretium. Curabitur imperdiet, turpis a pulvinar adipiscing, nibh felis fringilla felis, nec consequat felis justo accumsan est.</p>
</div>
</body>
</html>
align is a deprecated attribute in HTML 5 .. instead give the <p> an explicit width and add:
margin: 0 auto; to center the entire element (top/bottom 0, left/right auto)
or
text-align: center; to center the elements text
Text is center aligned. I have tested it in latest IE, Chrome and Firefox.
You can try <p style="width:500px; text-align:center">
That's because the property align is meant for divs. Also, it is deprecated, there are better ways to style your paragraphs than that.
Here's a jsFiddle example.
CSS:
div {
width:100%;
}
p {
text-align:center;
}
HTML:
<div>
<p>Hello</p>
</div>
I've just checked your problem, and actually the text is centered in your p tag. I think you are trying to move your p tag in the center of the div,
and you can achieve that by
p
{
margin:0 auto;
}
here is also a fiddle
just an advice: a good practice is to separate your styles from your html, so move all your styling to a separate style sheet.
Try
<p style="width:500px;margin:auto">...</p>
I'm creating a webpage where the content div should fill all of the screen. At the moment it shrinks to the amount of content.
The footer should be 'sticky' and sit at the bottom of the screen (imagine there's hardly any content).
I've got the footer bit sorted, I'm just struggling with the height of the content div. How do I go about making the content div fill up the entire screen?
<html>
<head>
<style>
html, body {height:100%;margin:0;padding:0;}
#wrap {min-height:100%;}
header {
height:100px;
background:green;
}
#main {
background:yellow;
overflow:auto;
padding-bottom:50px;
}
#main {
font-size:28px;
overflow:none;
}
footer {
position:relative;
margin-top:-50px;
clear:both;
height:50px;
background:red;
}
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
</style>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="wrap">
<header>
This is the header
</header>
<div id="main">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a viverra mauris. Aenean eu facilisis enim. Cras laoreet diam at lorem euismod condimentum. Morbi diam nisi, eleifend id varius vitae, ultrices sed nunc. Aenean facilisis, arcu sed congue tempor, leo nisi convallis dolor, et malesuada velit tortor id neque. Nullam nec eros est, at hendrerit risus. Vivamus in sollicitudin elit. Vivamus id odio justo, eget condimentum elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis mauris massa, iaculis eu laoreet sit amet, suscipit nec dolor. Ut rutrum porttitor viverra. Proin convallis, turpis id varius varius, nisi nulla vulputate dolor, vitae mattis neque quam ac nulla. Fusce accumsan, urna nec vulputate imperdiet, tortor erat fringilla massa, nec convallis ligula risus vitae mauris. Vivamus sagittis pulvinar ipsum, bibendum congue purus gravida posuere.</p>
<!--
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non lorem id ante scelerisque malesuada id ut nibh. Duis massa erat, dictum hendrerit interdum ut, faucibus non lorem. Sed velit leo, pellentesque sit amet dapibus vel, vestibulum ac sem. Nulla a hendrerit risus. In sodales ultricies lorem at tempus. Fusce sed velit urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut mi nunc, et tristique ipsum. Cras lobortis augue eget enim sodales et sollicitudin turpis feugiat. Morbi a interdum felis. Donec porttitor nibh ut metus commodo et pulvinar dui pretium. Fusce pellentesque felis in metus vehicula feugiat.</p>
<p>
Duis suscipit nibh non leo venenatis tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce tincidunt sapien id purus tempus ac viverra sapien vulputate. Fusce eu tortor purus. Mauris sit amet diam a arcu hendrerit auctor. Mauris vel nunc nec leo gravida ullamcorper. Donec eu arcu nibh, eu feugiat lorem. Nunc euismod ligula nec est lobortis vehicula. Etiam feugiat lacus in nulla porttitor eu iaculis dui dictum. Nullam gravida enim in leo tempor euismod. Cras porttitor, neque at molestie egestas, metus nisl tincidunt lacus, non vestibulum metus sapien eu est. Mauris tempus mattis quam eu elementum. Curabitur tempor feugiat massa, sit amet tempor mauris fermentum ut. Nullam faucibus lobortis lectus, ac fermentum sapien venenatis eget.</p>
<p>
Nulla facilisi. Proin a lorem non justo gravida pharetra a at dolor. Phasellus vitae viverra purus. Nullam at tellus id orci ornare cursus. Maecenas velit ante, egestas eu auctor at, lacinia in massa. Morbi sit amet turpis a neque vestibulum pulvinar. Aliquam erat volutpat. Ut accumsan aliquet sodales. Praesent tortor turpis, vulputate quis bibendum eu, pharetra vestibulum nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, lorem ac consectetur volutpat, diam sem bibendum lectus, vitae sagittis eros odio eget urna. Sed ipsum nulla, interdum nec accumsan at, faucibus at est. Vivamus faucibus condimentum erat, id varius metus cursus non. Vestibulum ut justo fringilla enim pellentesque auctor pretium eget quam.</p>
<p>
Ut in urna quis turpis placerat volutpat. Integer vel tincidunt sem. Pellentesque semper venenatis vestibulum. Pellentesque pretium volutpat neque eu dignissim. Aenean consectetur, magna in hendrerit sodales, mauris libero ullamcorper lectus, in imperdiet enim odio quis sem. Donec sed tellus urna, non sodales massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus rutrum dolor nec sem gravida dignissim. Curabitur in ante leo. </p>
-->
</div>
</div>
<footer>
This is the footer
</footer>
</body>
</html>
Try to set the footer to
position: fixed
bottom: 0
left:0
This should do the trick positioning the footer sticky to the bottom. But if the body expands beyond the footer it could pose an issue.
It seems like you might already know this, but in order to make an element fit the height of the viewport, it, as well as every other ancestor element, needs to be 100% height.
You've already done this for body and html (which is good), but you need to do this for #wrap too. Min-height won't work for that. Then, you'll want to set your header to a percentage height too so that you can have the #main div fill up the rest of the viewport. Something like:
#wrap { height: 100%; }
header { height: 10%; }
#main { height: 90%; }
This should take care of filling up the viewport, since your html and body are already set to height: 100%;