Formatting Text On Webpage - css

I am currently working on a personal webpage and wanted to know if there is a way to write CSS code to create a new line whenever text covers half the page. I googled a lot and only came up with pointless background tips and tricks (at least for this issue.) Any help would be appreciated. Thanks!

In it's simplest form:
<div style="width:50%;">
Content here....
</div>
http://jsfiddle.net/1y70e1ms/

By applying a width to the content's container, you can force the text to wrap at a certain point. Widths can be defined in absolute units, like pixels, but also in relative units, like percentages.
This does not technically insert a newline in the content. Inserting a literal "newline character" (\n) actually would not have a visual impact on the page, because all consecutive whitespace (newlines, tabs, spaces, etc.) in HTML is always condensed into a single space.
If you want to insert a break tag (<br>) at certain points in the HTML, you cannot do this with CSS. CSS is a set of presentation rules, not a method of modifying the HTML markup. JavaScript can modify the rendered DOM, which (while not technically modifying the markup directly), modifies the final rendered HTML that a browser loads.
If you want to modify all of the markup, you will need to do it manually before publishing, or write a script to modify all of the files as text before publishing.
p {
width: 50%;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum in turpis non egestas. Nunc feugiat fermentum mi, vel pulvinar libero condimentum vel. Ut nisi est, consectetur ut lectus nec, mattis interdum nibh. Etiam ut interdum est. Nulla
dictum ornare risus et scelerisque. In sodales a sem in aliquet. Donec at luctus orci, nec hendrerit tortor. Integer feugiat a metus ac sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam ac
erat ut sem congue aliquet. Ut tellus ligula, fringilla vel egestas ut, facilisis posuere urna. Praesent condimentum ipsum et sapien pretium bibendum. Praesent feugiat sem lacus, ut ultricies quam convallis quis. Cras malesuada nunc in velit iaculis,
vel tincidunt purus aliquet. Etiam tempus metus quis vulputate placerat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent posuere, erat ut sollicitudin accumsan, dui dui dapibus arcu, a tincidunt
ex neque vel lacus. Vestibulum pulvinar felis sit amet justo ultrices interdum. Vestibulum ultrices urna nec purus consectetur porta. Vestibulum id cursus turpis, eget iaculis erat. Proin efficitur pulvinar velit. Maecenas vel odio urna. Donec suscipit
placerat varius. Donec sapien ante, interdum et mauris id, egestas posuere lectus. Sed mauris nunc, finibus sed magna ac, consequat efficitur erat. Etiam dignissim velit ante, at bibendum urna cursus sit amet. Nullam suscipit blandit nulla vitae auctor.
Proin in tellus nibh. Praesent pellentesque sem nisl, at semper felis cursus a. Nullam tempor varius enim. Suspendisse pharetra at lectus sit amet maximus. 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. Proin elementum pellentesque mollis. Fusce commodo commodo urna, in euismod est ornare a. Integer dictum aliquet velit. Aliquam erat volutpat. Sed dictum ligula at elementum
placerat. Integer eget consequat turpis, a bibendum risus. Nulla facilisi. Ut ac malesuada eros, bibendum cursus leo. Fusce non lacinia erat. Aenean quis euismod nulla, nec auctor lectus. Integer varius, turpis et volutpat iaculis, lectus enim ullamcorper
libero, ut ullamcorper sem ligula in mi. Fusce elementum, dui ac posuere cursus, nunc felis lacinia mi, et egestas turpis tellus eu erat. Donec pulvinar nibh id massa tristique, et maximus velit efficitur. Nam ullamcorper, eros et mattis vestibulum,
diam ligula dapibus eros, id hendrerit eros lorem eget mauris. Nullam tincidunt sit amet mauris et tincidunt. Vivamus semper sem in hendrerit consequat. Aenean laoreet, justo non egestas tristique, ligula enim venenatis ex, sed lobortis magna risus
at nulla. Donec vulputate mi nec urna euismod, vel pellentesque lacus rutrum. Aliquam condimentum lacus risus, non faucibus nulla tempor in. Ut fermentum fringilla dignissim. In auctor, nisi ut convallis lobortis, risus magna convallis erat, sit amet
imperdiet sapien dui ac erat. Vestibulum congue ut lorem in auctor. Maecenas bibendum eros ut sem dictum finibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur eu justo quis diam mollis pretium
gravida sed felis.
</p>

Related

Sticky div banner after reaching top

I want to build the following UI behavior:
I have a responsive content followed by a new section, and that new section should have a background image than scrolls with the page, until reaching the top, and then freezes at the top.
I made a research and have found a few similar answers, but can't find anything specific for what I want.
I don't want to use a fixed background image resting at TOP LEFT, as I don't want the image to start at the top of the page.
This question has me off to a good start:
How can I make a div stick to the top of the screen once it's been scrolled to?
This fiddle also has parts of what I'm trying to do, but it's not there yet, and I'm stumped. (I've broken this code somehow, while trying to stumble along on my own. Pretend the big red box is the background image div.
http://fiddle.jshell.net/5y2b4xoL/
Essentially, the background image should not be fixed until it is scrolled to the top of the page, at which point it should become fixed.
Any help is appreciated.
you could use jQuery scroll() so when the scroll comes to your element it will make it stick by changing position,
see the following snippet:
$(window).scroll(function() {
var y_scroll_pos = window.pageYOffset;
var scroll_pos_test = 155;
// set to whatever you want it to be
if (y_scroll_pos > scroll_pos_test) {
$("#scroller").css("position", "fixed");
$("#scroller").css("top", "0");
} else {
$("#scroller").css("position", "relative");
$("#scroller").css("top", "auto");
}
});
body {
min-height: 1400px;
background:yellow;
margin: 0;
}
h1 {
margin-bottom: 100px;
}
#scroller {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Scroller demo</h1>
<div id="scroller-anchor"></div>
<div id="scroller">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non tortor eros, nec rhoncus nulla. In fringilla, dui vel vehicula luctus,
nunc arcu ultricies nisi, eu adipiscing sapien orci nec justo. Nulla facilisis gravida tempus. Nunc interdum, dolor sed euismod rutrum, odio
turpis rutrum odio, iaculis venenatis nunc sem eu dui. Nulla venenatis, leo quis porta luctus, ipsum ipsum tempus nunc, in fermentum arcu odio
non ipsum. Vivamus bibendum pulvinar sapien a cursus. Nullam lobortis nibh eget odio placerat hendrerit. In non leo turpis, quis posuere augue
</div>
. Mauris auctor commodo quam, quis vulputate orci tincidunt et. Nulla tellus lectus, rhoncus ut malesuada eget, auctor ac ligula. Suspendisse mollis
tempus interdum. Proin non velit in lectus elementum interdum eu eget velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. Nam lobortis, est ac elementum tincidunt, lacus dolor lacinia erat, eget ullamcorper augue justo in lectus. Aliquam eros felis,
fringilla sed cursus sit amet, consectetur nec tellus. Vestibulum ultricies auctor erat, ac facilisis felis fermentum id. Quisque sed rhoncus dolor.
Nullam hendrerit justo non lacus rutrum vitae pellentesque velit adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Phasellus pulvinar ultricies sapien, sed consectetur purus condimentum et. Nulla viverra accumsan condimentum. Ut sodales, lacus sed varius
porttitor, odio ipsum tristique odio, ac sollicitudin est urna at sem. Aliquam suscipit porta felis, sit amet aliquet justo ultricies ac. Proin a orci
et eros interdum dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean vehicula malesuada pretium.
Suspendisse potenti. Nullam at felis quam. Donec gravida mi et purus pretium vitae placerat lacus porttitor. Donec scelerisque pellentesque sollicitudin.
Nullam et lacinia urna. In velit magna, malesuada quis iaculis a, auctor at felis. Quisque hendrerit aliquam diam vel luctus. Vestibulum venenatis
sapien at libero mattis mattis. Etiam eu aliquet tellus. Cras malesuada ligula non urna auctor a pretium lorem placerat. Quisque pulvinar turpis
non nisi laoreet fringilla. Proin mollis enim id nisi egestas eget varius metus mattis. Nulla viverra dui quis velit gravida sodales. Nulla nec
nisi et ligula viverra eleifend. Aliquam ac lectus at nunc mattis volutpat. Suspendisse elit lorem, gravida nec lobortis non, venenatis nec odio.
Vestibulum et luctus sapien. Donec faucibus blandit urna, nec convallis metus aliquam suscipit. Curabitur fermentum purus ornare mauris auctor tristique.
Cras vel magna sit amet felis tempor dapibus nec id turpis. Duis eu tortor lorem. Nulla dapibus pellentesque enim lobortis feugiat. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi iaculis sem ut erat sodales non elementum elit bibendum. Duis ut mi tellus.
Integer consequat ligula mattis tortor aliquam ut hendrerit lacus tempus. Quisque suscipit magna nec nulla accumsan sit amet tempor nisi gravida. Mauris
pulvinar tortor id justo feugiat ultrices. Vestibulum vel ante orci, a venenatis tortor. Duis urna erat, imperdiet iaculis facilisis eu, convallis
et dolor. Suspendisse mauris ligula, luctus a pellentesque vitae, rhoncus eu lectus. Morbi eget leo sed magna varius pretium quis sit amet lectus
. Nunc sagittis molestie congue. Donec aliquet vestibulum dui, non placerat massa pharetra at. Maecenas ac massa elit, eget venenatis elit. Nullam
elementum aliquet nisi, eu luctus libero fringilla sed. Maecenas vitae mauris nisi, a egestas lectus. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Donec lobortis malesuada libero, a tempus tortor auctor et. Vestibulum iaculis eleifend neque, et
consequat augue adipiscing sit amet. Integer sodales dictum nibh et suscipit. In congue sollicitudin erat et imperdiet. Proin tellus enim, bibendum
a sollicitudin non, accumsan at nisl. Phasellus vulputate elementum ligula a volutpat. Etiam scelerisque sollicitudin massa id convallis. Duis bibendum
molestie tempus. Vivamus lacinia accumsan quam, at aliquam mauris ultrices at. Sed malesuada faucibus massa, lobortis pharetra diam accumsan a.
Curabitur dignissim nunc vitae erat laoreet a laoreet sem bibendum. Etiam eu varius erat. Integer porttitor porta tincidunt. Nam dictum tellus
bibendum tellus interdum ullamcorper. Phasellus justo lorem, semper in vehicula interdum, vestibulum ac purus. Integer hendrerit lectus at nisi luctus aliquet.
Donec consectetur nisi vel metus viverra porttitor vel non lectus. Proin eget enim sagittis ligula mattis posuere ut varius ligula. Mauris euismod
tempus sem nec pretium. Donec congue suscipit libero, id pretium dolor luctus sed. Donec sed metus id nulla tempor vulputate non vel nisl.
Vestibulum a turpis vitae leo commodo pulvinar eu vitae enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Columns with 'overflow: scroll' hiding content after certain point

I'm trying to create a CSS theme for a blog (which I cannot change the HTML of). I want to make the entries go in columns (of which there is no set number), and have a horizontal slide to be able to slide through the posts; the columns will be the same size and they will be filled.
Unfortunately, after writing out the code, I have found a strange bug - when I use overflow: scroll, some columns somehow get cut off. I have made an example of this here - after several columns, with more entries to go, the text starts getting cut off, even where there's more left.
What I've noticed is that it is not dependent on the number of columns - if the width of the columns is smaller, there will be more columns. The cutoff point seems to be arbitrarily determined, but I have no idea why or how.
Is there a way to fix this? I've searched a lot for a solution, but all I've found are questions about disappearing scroll bars, not disappearing content.
So far, I have only seen this in Chrome. I have tested it on Internet Explorer, Firefox, and Safari, and it works on all of those three, but not Google Chrome. This seems to only happen in some versions of Chrome - a Chromebook user reported that the CSS was, indeed, working on his device.
div #entries{
height: 60vh;
column-width: 40vw;
overflow-x: scroll;
}
<div id="container to keep in">
<div id="entries">
<div class="entry">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia scelerisque mauris, sit amet rutrum est. Donec placerat, arcu in feugiat fringilla, justo neque bibendum odio, feugiat efficitur ex turpis in nulla. Proin cursus rutrum nunc eget egestas. Quisque interdum ultrices orci in posuere. Integer enim nunc, euismod tempor blandit eu, molestie vitae libero. Morbi erat dolor, congue non arcu et, iaculis dictum orci. Curabitur id tellus et eros rutrum luctus vitae sed velit. Integer vestibulum quam arcu, ut malesuada eros rutrum nec. Etiam ullamcorper ultrices libero, vel euismod mauris mollis vitae. Vivamus et nisl eget nulla euismod bibendum id sed augue. Vestibulum ultricies non felis sollicitudin elementum. Fusce sed diam aliquet est volutpat placerat vitae sit amet ante.
Anean eget egestas dui. Curabitur tristique ullamcorper augue, sit amet tristique nibh dapibus non. In ut sodales felis, et dictum diam. Cras ornare libero vitae quam laoreet, et rutrum purus luctus. Aenean tincidunt elit vel nibh facilisis euismod. In tempor erat tellus, in convallis nisi lacinia in. Etiam pulvinar finibus elit sit amet tincidunt. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur ac fermentum nisl. Donec cursus purus at libero egestas volutpat. Nullam tincidunt lectus eu purus dignissim scelerisque.
</div>
<div class="entry">
Aliquam tempus nibh volutpat arcu semper pulvinar. Donec nec mauris nec metus dapibus auctor. Vestibulum eu tincidunt sem, sit amet auctor neque. Nulla ut enim diam. Donec est orci, pharetra id sapien eget, dictum blandit arcu. Suspendisse tempus consectetur aliquet. Donec eget consectetur enim, eu tincidunt diam. Morbi mi tellus, mattis eget velit ut, pretium scelerisque diam. Proin ut tortor hendrerit, elementum turpis sit amet, tempor mauris. Nunc semper ex quis augue vulputate, non molestie velit tincidunt. Maecenas faucibus augue dui, in condimentum lectus pellentesque eu.
</div>
<div class="entry">
Nulla eu ante nec lorem malesuada bibendum. Maecenas egestas mi et ornare mollis. Integer sed risus nulla. Aenean nunc nunc, pretium in elit vitae, semper maximus enim. Nulla dignissim vestibulum tellus sit amet fringilla. Nulla convallis, eros quis malesuada cursus, velit augue consequat eros, et tincidunt lacus mauris ut enim. Quisque facilisis magna facilisis eleifend maximus. In vel scelerisque turpis. Curabitur tempor libero diam, vitae pretium ex finibus sed.
Quisque dui justo, ultrices in velit in, vulputate sollicitudin turpis. Morbi sem velit, interdum a risus vitae, molestie sodales urna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec in lacus sapien. Sed mattis maximus dui, vitae rhoncus sapien sodales sed. Ut malesuada, urna et varius varius, mauris neque viverra diam, ut rhoncus sem magna ut purus. Phasellus vestibulum aliquet elit tempor mattis. Phasellus venenatis, velit a tempus viverra, nisl arcu mattis nibh, a molestie lectus ligula vel lacus.
</div>
</div>
</div>

Rmarkdown ioslides allowframebreaks alternative

Is there an equivalent of Beamer's allowframebreaks in Rmarkdown ioslides? This is key for automatically-generated BibTex bibliographies, which spill off the one slide allotted.
The following MWE illustrates the problem I'm trying to solve. The text runs off the page, and I'm looking for a way to automatically break it up into however many slides it takes to comfortably fit the content.
---
title: "Allowframebreaks in ioslides?"
output: ioslides_presentation
---
##
Duis diam ultricies mauris aptent enim velit consequat dolor Vivamus Praesent Nam. Duis Ut convallis leo sodales lacus blandit aliquam penatibus sed netus Ut. Dis id sed fringilla Praesent Suspendisse velit erat imperdiet vehicula ultricies eget adipiscing tellus. Montes maximus semper pulvinar Vivamus mollis non accumsan lacinia scelerisque efficitur ut dictum.
Vivamus euismod ultrices amet dis Aliquam Suspendisse sit faucibus nec nisi aptent orci aliquam. Porta arcu luctus tempor tempor facilisis Phasellus iaculis orci tincidunt faucibus tristique ad Morbi orci. Rhoncus Quisque ipsum Vivamus conubia purus adipiscing bibendum parturient parturient interdum egestas a. Blandit consequat volutpat hendrerit himenaeos Quisque Ut et non neque sagittis tincidunt augue In nascetur.
Nibh euismod consectetur augue feugiat adipiscing turpis sodales purus consequat iaculis diam sollicitudin. Luctus eget mollis pharetra dolor Cum eleifend vitae ligula suscipit Morbi efficitur Duis. Eget Nam eget dis dapibus himenaeos Pellentesque sed fermentum varius Lorem Donec. Malesuada nostra litora ante augue ligula mollis elementum Pellentesque at sociosqu lobortis sociis.
Taciti imperdiet est habitant mus in et nulla tincidunt venenatis Class Sed. Egestas ad Maecenas turpis interdum nulla enim felis Integer tortor nascetur ullamcorper cursus Curabitur. Nascetur auctor Vestibulum tincidunt augue efficitur justo posuere dictum nunc auctor pellentesque ex facilisis. Convallis montes Lorem aptent elementum consectetur enim non ante nascetur sit nulla. Posuere consequat rutrum Aenean libero Aliquam laoreet consectetur Cras ipsum Donec eget Morbi. Consectetur vehicula sociosqu massa Lorem mollis Duis fames hendrerit Praesent dignissim Proin enim.
Odio at Nam placerat parturient euismod Morbi facilisis enim Phasellus Maecenas aliquam ultrices condimentum. Sem metus massa lacinia rutrum pulvinar vel a eu purus scelerisque suscipit. Feugiat mi natoque imperdiet lectus egestas mi Etiam ullamcorper Vestibulum sit euismod. Vestibulum mus Praesent eleifend faucibus torquent vitae Etiam fermentum Nullam Cras et interdum amet. Fringilla tortor aptent Cum senectus Quisque auctor nunc nascetur arcu nec Lorem.
As it turns out, this question is a bit of a duplicate. One answer is here:
References page truncated in RMarkdown ioslides presentation
To quote the answer:
This isn't exactly what you're asking for, but it might be the best you can do. Insert the following inline CSS at the end of your document (i.e. just before where the references will be inserted), and instead of truncating them, it will add a scroll bar (the first part) and suppress the page number (the second part).
<style>
slides > slide { overflow: scroll; }
slides > slide:not(.nobackground):after {
content: '';
}
</style>
You won't be able to see all references at once, but at least you can scroll through them. (You can add this after the header on any long slide for the same effect.)
Original answer posted by user2554330

How to "fixed" menu only when it get to the top?

I want my top menu to be fixed and scroll with the page, but only when it get to the top of the screen.
Like here:
http://en.miui.com/forum.php
anybody knows how?
tnx :)
Either uses CSS' position:sticky with browser vendor prefixes or check the window's scrollTop when the element touches the top of the window and at the scrollTop or anything larger than it, fix the element with fixed positioning.
On scroll, when the scrollTop is less, give it relative positioning.
In jQuery:
$(window).on('scroll', function(){
// instead of 180 use the scrollTop when the element touches the top of the window
if($(window).scrollTop()>=180){
$(element).css('position', 'fixed');
}
else $(element).css('position', 'relative');
});
To check the number you want to use instead of 180, scroll to the point where the element touches the top, go into the developer console and type $(window).scrollTop() this should give you the number you are looking for.
HTML
<div class="navbar">Scroll Nav</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus purus lectus. Aenean vel feugiat quam. Ut placerat, tortor tincidunt malesuada faucibus, dolor justo tincidunt tortor, at aliquam risus nisi ac lorem. Quisque eu turpis in arcu iaculis ultrices. Morbi at viverra nibh, at dapibus ante. Vivamus ut justo nec urna bibendum tempus ut posuere diam. Cras sem ligula, semper eu arcu quis, condimentum pharetra nisi. Suspendisse vestibulum quis nibh at dictum. Morbi arcu quam, sollicitudin a ullamcorper vitae, mattis in nibh. Fusce id nisl elementum leo convallis sodales. Nam eget gravida lacus.</p>
<p>In metus ex, tristique nec ex vel, facilisis venenatis eros. Aliquam tempus, quam bibendum accumsan laoreet, risus odio vulputate nunc, sed varius felis enim in arcu. Fusce gravida ipsum tellus, in tristique purus pulvinar id. Praesent vulputate lorem tortor, vel tincidunt arcu accumsan ac. Cras molestie sem sem, et rutrum turpis semper sit amet. Aenean augue purus, imperdiet eget tempus vitae, suscipit eu odio. Etiam luctus est sit amet sapien faucibus, vel imperdiet ipsum sodales. Mauris viverra ut odio ut congue. Praesent vitae varius nunc. Pellentesque eleifend est sem, et fermentum nisl sagittis quis. Curabitur fermentum tempor aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Quisque aliquet lobortis magna sed laoreet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque bibendum, neque eu ornare eleifend, dui ligula euismod ipsum, a suscipit orci risus at justo. Curabitur posuere ante et massa varius, eu lacinia mauris vestibulum. Aenean consectetur nibh at augue tempor, sit amet luctus purus vestibulum. Ut efficitur, neque eget posuere feugiat, nulla diam molestie nisl, quis aliquet ante elit ac eros. Proin tristique felis risus, eget molestie felis pretium ut. Ut at lacus efficitur, feugiat ligula sed, tincidunt erat. Nam congue lacus dignissim dui eleifend mattis id ut ex. Duis vel consectetur urna. Nam vestibulum convallis risus faucibus ultricies. Aenean lorem dolor, vulputate quis porta sit amet, lacinia vitae ante. Proin commodo finibus vehicula. Cras purus eros, consectetur id libero eu, eleifend fringilla sem. Suspendisse potenti. Suspendisse potenti.</p>
<p>Maecenas accumsan iaculis diam id auctor. In congue, lectus eu fringilla suscipit, lectus nibh egestas elit, ac egestas erat neque sed risus. Nam convallis sem velit, id ornare lectus rhoncus ut. Integer nulla velit, imperdiet ac quam non, facilisis malesuada arcu. Vivamus ornare at elit ornare eleifend. Pellentesque vitae felis nec orci congue ultricies. Cras luctus odio nunc, sed euismod lectus egestas viverra. Aliquam volutpat molestie massa. Aenean sodales malesuada interdum. Phasellus semper pulvinar justo, non interdum sem consectetur in. Ut imperdiet mauris in dui luctus, nec hendrerit tortor pharetra. In hac habitasse platea dictumst. Suspendisse hendrerit, felis eu interdum ultricies, dolor metus fermentum massa, vitae iaculis felis nunc ut magna. Aenean ut ultrices orci. Suspendisse lectus turpis, dictum elementum sollicitudin vel, feugiat at dui. Suspendisse ut cursus sem.</p>
<p>Phasellus lacinia hendrerit commodo. Fusce hendrerit, purus in porttitor semper, metus tortor mollis sem, nec suscipit velit orci sed velit. Donec at leo bibendum erat imperdiet lobortis. Nullam dignissim sem sit amet mollis malesuada. Phasellus eu augue ultricies, euismod erat tristique, vulputate magna. Donec malesuada justo justo, ut egestas purus volutpat sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum vitae rhoncus risus. Fusce mattis leo eros, ut tristique turpis ornare eu. Duis egestas euismod nulla eget iaculis. Aenean dictum, nunc facilisis egestas rhoncus, est dolor cursus libero, eget imperdiet metus nunc vel augue. Morbi purus augue, condimentum eu ullamcorper ac, cursus at neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Donec eu tempus nisl. Sed aliquam urna sit amet efficitur ullamcorper. Proin commodo neque id felis laoreet, id pulvinar ligula eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi convallis, ex sit amet ullamcorper faucibus, odio augue luctus urna, et fermentum tortor velit ac magna. Nullam viverra magna at nisl fermentum, ac vulputate sem pellentesque. Donec in quam lectus. In a enim ultrices, dictum libero nec, consequat augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin vulputate, tortor id faucibus semper, sapien felis vestibulum mauris, a eleifend enim massa id lacus. Mauris convallis enim vel cursus commodo.</p>
<p>Nunc dignissim tincidunt gravida. Ut pretium ex vel massa tincidunt, vel volutpat enim eleifend. Aenean dictum a mi in posuere. Quisque sit amet eros nunc. In finibus nisl in enim porta pharetra. Vivamus gravida vehicula lacus sed suscipit. Pellentesque elementum molestie lacus ut venenatis. Nunc efficitur gravida arcu, a blandit mi dictum ac. Mauris orci elit, luctus et metus ac, rutrum ullamcorper ipsum. Quisque quam felis, aliquam a pharetra id, efficitur sit amet elit. Aliquam volutpat luctus felis vitae vulputate.</p>
<p>Maecenas rutrum sodales ipsum tincidunt ultricies. Curabitur consectetur sodales sem vulputate mattis. Sed ac erat eros. Etiam suscipit arcu eleifend feugiat cursus. Maecenas ac facilisis tortor. Nullam nec facilisis nibh, sed fermentum elit. Sed vitae leo dui. Sed porta fringilla nibh nec vehicula. Nam et laoreet sapien, vel gravida leo.</p>
<p>Aenean eget semper nibh, eu suscipit mauris. Quisque venenatis ex ut consectetur porttitor. Integer at tortor semper, congue quam id, pellentesque erat. Quisque varius nunc enim, sed iaculis ipsum dictum ut. Nullam consectetur dapibus facilisis. Fusce faucibus, velit non lacinia interdum, nibh erat gravida sem, at tristique velit mauris a sem. Praesent a ipsum maximus, posuere diam eu, tincidunt velit. Proin sit amet turpis a augue consequat viverra eu iaculis metus. Nunc fringilla, lectus a lobortis volutpat, turpis turpis finibus nulla, sed placerat risus tellus vel massa. Cras ultrices porta tortor. Suspendisse tempus dui augue, non pretium nisl ornare a. Donec eu tempor sem. In pharetra sem sed sem ornare, in dictum turpis convallis. Curabitur rutrum lobortis urna, eu fermentum ex rhoncus vitae. Pellentesque ut imperdiet urna, et placerat ex. In a rhoncus augue.</p>
<p>Pellentesque ornare venenatis ante, vel pellentesque magna dictum nec. Integer gravida suscipit metus quis facilisis. Etiam non rhoncus nisl. In mi enim, laoreet id augue eu, pretium eleifend lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse fringilla, mi vitae convallis malesuada, orci mi pretium mi, sit amet bibendum nulla erat ac elit. Morbi dignissim consequat luctus. In ante libero, sollicitudin sit amet auctor vitae, laoreet ac erat. Phasellus scelerisque faucibus ex at blandit. Integer at turpis volutpat, vehicula eros quis, mattis urna. Vivamus a nulla iaculis, posuere purus eu, finibus dui.</p>
</div>
JS
var num = 50;
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.navbar').addClass('no-scroll');
} else {
$('.navbar').removeClass('no-scroll');
}
});
CSS
.navbar {
background:#000;
color:#fff;
height:60px;
padding:10px;
position:absolute;
top:0px;
width:100%;
z-index:100;
}
.no-scroll {
position:fixed;
top:0;
}
.content {
position:relative;
top:100px;
z-index:0;
}
SEE FIDDLE
style normaly and add class or id for fixing to the top and style it.
now use jquery or javascript to get page Y offset and add fix class or id to the element..
$(document).ready(function(){
$(window).scroll(function(
if($(window).scrollTop() > 200px){
$('element').addClass('fixed');
}else{
$('element').removeClass('fixed');
}
));
})

Html table width [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I have a html table which is going out of page border if the table body conent is large.
When I set the width to 100% , still it is not fitting into the screen.
How to make the table to fit to screen.
<table width="100%">
The above code is not working if table body is large than the screen size
Don't put content in the cells which can't word wrap sufficiently to allow all the cells to be narrow enough for the table to fit in the space allocated to it.
You should probably set the table layout to fixed in CSS.
Take a look at this jsfiddle.
<table>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget tempor ligula, non ultricies lacus. Cras sed sapien nec tortor porttitor ornare quis et erat. Nunc molestie sodales sem, in volutpat leo ultrices sed. Ut vel orci magna. Nulla vitae mi venenatis, auctor nulla et, rutrum nibh. Phasellus sollicitudin, purus vitae mollis pretium, nibh leo ullamcorper ligula, vel porta libero metus nec mauris. Pellentesque quis tellus dui. Duis id justo libero. Fusce sagittis, metus ut vestibulum ullamcorper, ligula urna vulputate ipsum, vel condimentum orci enim nec nulla. Fusce viverra metus at porta suscipit. Praesent suscipit blandit cursus. Nulla dignissim sodales posuere. Etiam posuere porta sem.
Donec commodo ut est sit amet blandit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse non felis id nunc bibendum consequat ut quis orci. Ut mattis purus mi, quis dictum risus sollicitudin at. Pellentesque eu molestie metus. Donec aliquet nulla tellus, non rhoncus velit convallis imperdiet. Nam vitae ullamcorper nisi, ut condimentum eros.
Etiam mollis, augue quis suscipit cursus, mauris risus mollis tellus, sit amet tincidunt augue eros sed erat. Fusce mattis erat nec est molestie, at sodales nisl posuere. Nam quis tellus nisi. Proin pharetra sapien nec blandit sollicitudin. Donec et leo egestas, accumsan eros non, scelerisque magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi porta molestie diam, id mattis nisl suscipit sit amet. Suspendisse iaculis erat vel venenatis eleifend. Ut ipsum urna, vulputate vitae lacus vitae, aliquam adipiscing nisi. Sed molestie bibendum pretium. Morbi vel rutrum nulla, nec luctus elit. Nunc interdum aliquet adipiscing. Nam purus nisl, mollis nec porttitor et, mattis ut ipsum. Aliquam fermentum tristique tellus, aliquam mollis est pulvinar non. Nam cursus risus orci, non euismod nisl vestibulum pretium.
Nulla eleifend lacus eu eleifend consequat. Morbi dapibus diam in laoreet ullamcorper. Nulla commodo quam nisl, lacinia adipiscing purus mollis et. Ut eleifend aliquam felis sollicitudin congue. Nam facilisis lacus erat, a consequat eros laoreet nec. Mauris consequat sodales nulla sed accumsan. Maecenas condimentum ullamcorper felis, non aliquam lorem interdum vel. Nulla facilisi. In vehicula eros sit amet nulla lacinia malesuada eget sed neque. Sed ante mauris, ultrices vel tempus sit amet, aliquet in enim.
Fusce ultrices dui enim, id aliquam diam placerat non. Donec volutpat interdum nisl et rutrum. In vulputate porttitor nunc ac luctus. Mauris non vulputate nibh. Etiam ut lorem quis sem semper ultrices. Sed varius nunc ac eleifend hendrerit. Nam in vehicula nunc. Nulla ac diam ac magna malesuada facilisis in lobortis lacus. Cras cursus nec erat eget cursus. Maecenas ac mauris non augue vehicula porta et viverra sapien. Suspendisse consequat eu sapien vel sollicitudin. Morbi mollis sollicitudin hendrerit. Donec eu cursus mauris.</td>
</tr>
</table>
CSS:
table {
width: 100%;
table-layout: fixed;
}
td {
white-space: nowrap;
overflow: hidden;
}
As you can see, the cell contains a lot of text that I prevented from wrapping. The table is set to 100% width but without fixed layout, it still take as much width as it needs to fit its largest cell.
With fixed layout, it will remain 100% wide, whatever happens within its cells.
Try to comment and uncomment the following line in the stylesheet declaration, to witness the difference :
table-layout: fixed;

Resources