The Problem:
I'm trying to set my masthead's height equal to the viewport height and vertically center the nested content using the table/table-cell method. When I set the height value of the masthead's parent div (the main element) to 100%, the footer repositions just below the masthead because the main element's height is limited to the viewport height, even with a clearfix.
Potential solutions that I'd like to avoid:
Moving the masthead content before the main content (Possible SEO
impact?)
Moving the masthead content into the header (Using CI framework, not an option)
Using vh units / JavaScript / jQuery (I want 100% browser compatibility, ideally)
I'd greatly appreciate any help or insight into this issue that you can offer. If there isn't a pure CSS solution that meets the above criteria, I'll select the most browser-friendly solution.
Code Snippet Demoing the Issue:
.clearfix:after,
.clearfix:before {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
*, :after, :before, html {
box-sizing: border-box;
}
* {
margin:0;
padding:0;
}
html, body, .wrapper, main, .masthead, .masthead .section-content {
height:100%;
}
body {
background-color:#dddddd;
}
.section-content {
background-color:#eeeeee;
}
header {
position:fixed;
top:0;
left:0;
right:0;
}
header, footer {
height:61px;
line-height:61px;
background-color:white;
}
nav, .section-content, footer div {
width:75%;
margin-left:auto;
margin-right:auto;
}
li {
display:inline-block;
}
main {
padding-top:61px;
}
section {
padding-top:1rem;
padding-bottom:1rem;
}
h1, h3, p {
padding-bottom:1rem;
}
.centered-wrapper {
display:table;
height:100%;
}
.centered-content {
display:table-cell;
vertical-align:middle;
}
<body>
<div class="wrapper">
<header>
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</nav>
</header>
<main class="clearfix">
<section class="masthead">
<div class="section-content">
<div class="centered-wrapper">
<div class="centered-content">
<h1>
Heading 1
</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget elit vel ex hendrerit consequat et eu risus. Vivamus at enim ante. Proin condimentum mollis congue. Vivamus porttitor convallis massa at vulputate. Proin tincidunt a urna ut malesuada. Curabitur risus diam, dignissim nec tellus sed, maximus condimentum metus. Morbi nec accumsan magna, nec fermentum purus.</p>
</div>
</div>
</div>
</section>
<section>
<div class="section-content">
<h3>
Section Header
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget elit vel ex hendrerit consequat et eu risus. Vivamus at enim ante. Proin condimentum mollis congue. Vivamus porttitor convallis massa at vulputate. Proin tincidunt a urna ut malesuada. Curabitur risus diam, dignissim nec tellus sed, maximus condimentum metus. Morbi nec accumsan magna, nec fermentum purus. Sed rhoncus, mi ac egestas elementum, diam neque interdum arcu, non varius ligula lectus molestie dui. In aliquet nec magna sit amet hendrerit. Donec vehicula, nisl eget ullamcorper eleifend, ante ex accumsan odio, porttitor aliquet sem velit non elit. Vestibulum efficitur molestie ipsum, id pellentesque odio. Nulla accumsan ligula neque, id pharetra elit molestie sed. Sed sit amet eros et nisi efficitur dapibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget elit vel ex hendrerit consequat et eu risus. Vivamus at enim ante. Proin condimentum mollis congue. Vivamus porttitor convallis massa at vulputate. Proin tincidunt a urna ut malesuada. Curabitur risus diam, dignissim nec tellus sed, maximus condimentum metus. Morbi nec accumsan magna, nec fermentum purus. Sed rhoncus, mi ac egestas elementum, diam neque interdum arcu, non varius ligula lectus molestie dui. In aliquet nec magna sit amet hendrerit. Donec vehicula, nisl eget ullamcorper eleifend, ante ex accumsan odio, porttitor aliquet sem velit non elit. Vestibulum efficitur molestie ipsum, id pellentesque odio. Nulla accumsan ligula neque, id pharetra elit molestie sed. Sed sit amet eros et nisi efficitur dapibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget elit vel ex hendrerit consequat et eu risus. Vivamus at enim ante. Proin condimentum mollis congue. Vivamus porttitor convallis massa at vulputate. Proin tincidunt a urna ut malesuada. Curabitur risus diam, dignissim nec tellus sed, maximus condimentum metus. Morbi nec accumsan magna, nec fermentum purus. Sed rhoncus, mi ac egestas elementum, diam neque interdum arcu, non varius ligula lectus molestie dui. In aliquet nec magna sit amet hendrerit. Donec vehicula, nisl eget ullamcorper eleifend, ante ex accumsan odio, porttitor aliquet sem velit non elit. Vestibulum efficitur molestie ipsum, id pellentesque odio. Nulla accumsan ligula neque, id pharetra elit molestie sed. Sed sit amet eros et nisi efficitur dapibus.</p>
</div>
</section>
</main>
<footer>
<div>
<p>
© Tyler Fuller
</p>
</div>
</footer>
</div>
</body>
This seems to be a common problem for many people. I'm afraid one of the best solutions at the moment is to use vh units with this javascript 'buggyfill' until iOS Safari fixes their browser.
I know you said you don't want a vh or JavaScript solution, but you did say you want 100% browser compatibility. Unfortunately we can't have our cake and eat it, too. Case in point: Modernizr.
That being said, don't be afraid to use that buggyfill I linked to. It's very easy to use. Here's a demo CodePen: https://codepen.io/krabbypattified/pen/ZKaKJw/
A webpage without the "buggyfill": http://lab.gasteroprod.com/vub/index-ios-issue.html
Same webpage with the "buggyfill": http://s.codepen.io/krabbypattified/debug/ZKaKJw/YvkgOPPypyok
(feel free to visit those links on iOS Safari)
The vh solution for your website is simple. Just remove the height from the main element and add a height: 100vh to the .masthead.
Related
Considering that components such as dialogs, modals, tooltips, etc. should be of higher stacking index than any other elements in an HTML page, I placed these components in an immediate sibling of root element where all the other elements are placed. React developers will quickly recognize this and they'll know that I'm trying to use React Portals. You can visualize it here:
<body>
<div id="root">
// ----- other elements -----
<div id="supposed-parent" />
// ----- other elements -----
</div>
<div id="dialog-container">
<div id="supposed-child" />
</div>
</body>
So, how can I position #supposed-child next or beside #supposed-parent? Any help would be appreciated.
I don't think this is possible with a pure css. But with a little script we can achieve this. Take the offset-left and top of the supposed-parent and apply the same to the supposed-child. The child should be absolute positioned element. Check the below sample and It hope this will be useful for you.
Even though the supposed-child(yellow box) is independent of the supposed-parent, It will be always align with the top-left of the supposed-parent.
function offsetCalculate(){
var parentTop = $('#supposed-parent').offset();
var parentLeft = $('#supposed-parent').offset();
$('#supposed-child').css({
'top':parentTop.top,
'left': parentLeft.left
});
}
$(document).ready(function () {
offsetCalculate();
});
$(window).resize(function(){
offsetCalculate();
});
#supposed-child{
position: absolute;
background: yellow;
border-radius: 5px;
padding: 10px;
z-index: 999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="root">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor libero, euismod et nisl eu, imperdiet elementum neque. Praesent aliquet non tellus sed blandit. Ut vitae velit eget turpis ornare convallis. Quisque nec felis eget mi vestibulum luctus eu non dui.</h1>
<div id="supposed-parent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor libero, euismod et nisl eu, imperdiet elementum neque. Praesent aliquet non tellus sed blandit. Ut vitae velit eget turpis ornare convallis. Quisque nec felis eget mi vestibulum luctus eu non dui. Pellentesque eget commodo tellus. Curabitur a dolor est. Integer dapibus lectus nec mi luctus, ac ornare ex auctor. Donec vel nisi nulla. Mauris maximus egestas nunc ut egestas. Suspendisse id leo nec elit consectetur interdum. Ut purus nibh, tristique quis est vel, ultrices blandit nibh. Aenean nibh justo, mattis sed vulputate quis, efficitur eu mauris. Sed vel vulputate metus, et dictum arcu. In ornare nisl vitae purus elementum, quis egestas dolor volutpat. In velit nisi, posuere in urna non, feugiat luctus enim.
</div>
</div>
<div id="dialog-container">
<div id="supposed-child" >This is a popup</div>
</div>
I'm just playing around with creating a website, excuse the messy code, quite new to this game.
Basically I'm trying to section a website with each sections content either going to the left or right, alternating.
As you can see I've managed to do the one to the left (Section2), however I can't seem to do the one on the right (Section3). The nav bar is also fixed but isn't showing on the JSFiddle. I'm also wondering why my text displays fine on my 1920x1080 monitor, but on my 1366x768 laptop, it overflows out of the div, bear in mind that the backgrounds of each section will be will eventually be an image, so I can't repeat it.
I've uploaded a JSFiddle as I was getting confused with what I had to do to upload code here, hope it is not a problem.
I appreciate your help, and again sorry for the incredible messy code!
<section id="screen1">
<div class="hLogo">Title</div>
<nav>
<ul>
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
<li>
6
</li>
</ul>
<img class="ad" src="css/asc.jpg" />
</nav>
</section>
<section id="screen2">
<div class="content left nobg">
<div class="scrTitle">About</div>
<p class="scrContent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros nisi, consequat sit amet sodales vitae, molestie eu elit. Nullam gravida laoreet nulla sit amet pretium. Vivamus nisi est, imperdiet a venenatis vel, porttitor vitae dui. Vivamus laoreet tortor in diam interdum, ac dapibus ante pretium. Vivamus gravida leo sit amet placerat lobortis. Sed odio arcu, tempus non gravida ut, egestas ut velit. Ut vitae enim fringilla, consequat massa quis, interdum sem. Donec vel sollicitudin urna. Suspendisse eget mi neque. Phasellus adipiscing nunc vitae nulla molestie tempor. Curabitur porttitor pretium augue, sit amet ornare metus.</p>
</div>
</section>
<section id="screen3">
<div class="content right nobg">
<div class="scrTitle">About</div>
<p class="scrContent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros nisi, consequat sit amet sodales vitae, molestie eu elit. Nullam gravida laoreet nulla sit amet pretium. Vivamus nisi est, imperdiet a venenatis vel, porttitor vitae dui. Vivamus laoreet tortor in diam interdum, ac dapibus ante pretium. Vivamus gravida leo sit amet placerat lobortis. Sed odio arcu, tempus non gravida ut, egestas ut velit. Ut vitae enim fringilla, consequat massa quis, interdum sem. Donec vel sollicitudin urna. Suspendisse eget mi neque. Phasellus adipiscing nunc vitae nulla molestie tempor. Curabitur porttitor pretium augue, sit amet ornare metus.</p>
</div>
</section>
To fix your problem with section 3 not going to the right, You can just add this bit of code to your CSS:
.scrContent2 {
font-size: 75%;
overflow: hidden;
width: 20%;
float: right;
}
This means that your HTML will need changing for section 3 as follows:
<p class="scrContent2">
Here is a jsfiddle of this.. http://jsfiddle.net/jw5du15v/5/
Try like this: DEMO
CSS:
.right {
margin-right: 10%;
text-align:right;
float:right;
}
.left {
margin-left: 10%;
float: left;
text-align:left:
}
HTML:
<div class="content nobg">
<div class="scrTitle left">About</div>
<p class="scrContent right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros nisi, consequat sit amet sodales vitae, molestie eu elit. Nullam gravida laoreet nulla sit amet pretium. Vivamus nisi est, imperdiet a venenatis vel, porttitor vitae dui. Vivamus laoreet tortor in diam interdum, ac dapibus ante pretium. Vivamus gravida leo sit amet placerat lobortis. Sed odio arcu, tempus non gravida ut, egestas ut velit. Ut vitae enim fringilla, consequat massa quis, interdum sem. Donec vel sollicitudin urna. Suspendisse eget mi neque. Phasellus adipiscing nunc vitae nulla molestie tempor. Curabitur porttitor pretium augue, sit amet ornare metus.</p>
</div>
Use CSS to float your webpages to left and Right.
Try this
.content left nobg {
float:left;
}
.content right nobg {
float:right;
}
I have been trying to achieve a sticky navbar in my project, but somehow its not working. I can't get what's wrong here (PS: it doesn't even show up in my fiddle but does show in local files I'm building. )
Have been using twitter bootstrap 3.x. What might possibly be going wrong? A little help would be much appreciated.
Here's the code I'm implementing:
HTML:
<div class="container-fluid">
<h3>this is a title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie posuere justo id condimentum. Morbi eu massa non enim varius lobortis vitae id massa. Aliquam congue consectetur nisi, sit amet tempus nunc mattis at. Aliquam non eleifend quam, ac accumsan urna. Nullam porta metus lacus, aliquam pretium purus rhoncus et. Donec in congue mi. Integer eu massa tincidunt, convallis diam in, ultrices lacus. Nulla bibendum metus sed enim faucibus, vel egestas tortor sollicitudin. Proin bibendum condimentum enim, ac luctus augue gravida et. Proin pretium tortor sed turpis gravida molestie. In hac habitasse platea dictumst.</p>
</div>
<div id="navi" class="navbar navbar-inverse visible-md visible-lg" role="navigation">
<ul class="nav navbar-nav">
<li>Home
</li>
<li class="active">About me
</li>
<li>Resume
</li>
<li>Contact
</li>
</ul>
</div>
<p>lol Proin auctor turpis ac elit pharetra laoreet. Cras consequat mauris ut condimentum vulputate. Nunc faucibus viverra suscipit. Sed sit amet ante interdum libero malesuada adipiscing sed at erat. Praesent et tristique lorem. Vestibulum lobortis laoreet tortor eget pellentesque. Nam commodo nibh libero, in elementum mi lobortis ut. this is a title Pellentesque interdum, quam sit amet sagittis porttitor, nunc lorem aliquam lorem, varius laoreet lectus diam vel mi. Fusce ut justo a neque vestibulum aliquam ac at ante. Phasellus porttitor mollis semper. Cras ultricies augue augue, non consequat nisi laoreet et. Donec sapien erat, molestie in faucibus ut, dapibus id risus. Morbi nec lorem nulla. Suspendisse potenti. Ut congue purus vel tincidunt facilisis. Cras condimentum lorem a purus lacinia dignissim. Curabitur convallis, leo ut vestibulum feugiat, ante urna ullamcorper ipsum, et aliquam justo sem ac urna. Praesent rhoncus risus nec dignissim ornare. Sed nec tellus nibh. Nulla in mauris ac lorem mollis ultricies id et mauris.</p>
The CSS:
.fixed {
position: fixed;
top: 0;
height: 50px;
z-index: 180;
}
The jQuery
$(document).ready(function(){
$(window).bind('scroll', function() {
var navHeight = $( window ).height() - 50;
if ($(window).scrollTop() > navHeight) {
$('#navi').addClass('fixed');
}
else {
$('#navi').removeClass('fixed');
}
});
});
The Fiddle Link
Thanks in advance
Add the following code to your css
#navi{
display: block!important;
}
It is because somehow bootstrap is making your nav display:none
Working Code
.visible-md and .visible-lg are hiding your nav bar, because with .visible-md and .visible-lg, your element will only be visible in desktop and large devices (desktops) and in jsfiddle, the viewport is small.
You can do the following to show your nav, but it won't be required if your site opens in parent frame. See your old fiddle in full screen result here: http://jsfiddle.net/x84PJ/5/embedded/result/ Your nav is visible here.
#navi { display: block !important;} /* use this only for jsfiddle result output, else your nav will break on medium and small devices*/
and also fix your jQuery code
$('nav').removeClass('fixed');
should be
$('#navi').removeClass('fixed');
For more detail on navbar try this: http://getbootstrap.com/examples/navbar/
I'm using http://tympanus.net/Development/PageTransitions/ for my main pages, the code below is used within a single page to showcase other different content info. All pages coded are in one index file.
The code below is used to switch between divs.
I tried using simple javascript onclick to make the pages fadeIn/fadeOut but it couldn't work.
jQuery:
<script type="text/javascript">
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i = 0; i < sel.length; i++) {
sel[i].style.display = 'none';
}
document.getElementById('container' + idInfo).style.display = 'block';
}
$("#fade").click(function () {
$('#container1').fadeOut('slow');
$('#container2').fadeIn('slow');
});
</script>
CSS:
<style type="text/css">
#container1, #container2, #container3 {
display:none;
width:100%;
height:auto;
}
</style>
HTML:
<img src="img/thumbnail1.png" /><br>click to see content 1
<img src="img/thumbnail2.png" /><br>click to see content 2
<img src="img/thumbnail3.png" /><br>click to see content 3
<div id="container1">content1</div>
<div id="container2">content2</div>
<div id="container3">content3</div>
Just need the .onclick fade effect to work after clicking on the link.
Many thanks in advance!
I think that this is what you are aiming for:
Online Demo
HTML:
<div class="links">
click to see content 1
click to see content 2
click to see content 3
</div>
<div class="content-divs">
<div>content0</div>
<div>content1</div>
<div>content2</div>
</div>
JavaScript:
$(".links a").click(function () {
var id = $(this).data('toggle');
showDiv(id);
});
function showDiv(id) {
// hide all other
var divs = $('.content-divs');
divs.children().each(function(index) {
$(this).hide();
});
// fade the correct one in.
divs.children('div:nth-child('+id+')').fadeIn();
}
Same css.
Since you are already using jQuery, why not use all it's functions?
You could do that with onclick="showDiv(id)", but jsfiddle does not work with that, so .data('toggle') is a nice workaround.
It seems you may be making this a little bit more complicated then it needs to be, try this out:
<script type="text/javascript">
$(document).ready(function(){
var curr = 1
$('.fader').click(function(){
var next_attr = $(this).data('num');
if(curr != next_attr){
$('div[data-num="'+curr+'"]').hide(1000, function(){
$('div[data-num="'+next_attr+'"]').show(1000);
});
curr = next_attr
}
});
});
</script>
Here is the html
<div class="links">
<a class=".fader" data-num="1">Show Container 1</a>
<a class=".fader" data-num="2">Show Container 2</a>
<a class=".fader" data-num="3">Show Container 3</a>
</div>
<div class="containers">
<div id="container1" data-num="1">Container 1</div>
<div id="container2" data-num="2">Container 2</div>
<div id="container3" data-num="3">Container 3</div>
</div>
and here is the css
#container2, #container3{
display:none;
width:100%;
height:auto;
}
that should give you the ability to switch between the 3 containers by clicking the links corresponding to them. I used a data attribute to link the containers to there links. When a link is clicked it looks for div with the same data-num and fades out the current one once its faded out it fades in the new one and sets the curr variable.
You can actually do this in pure CSS. (Not supported for IE 8-)
http://jsbin.com/eVeNeSO/1/edit
CSS:
body {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);
background-color: #001;
}
/* Header Styling and Positioning */
#container ul {
list-style:none;
margin: 2em 0;
padding: 0;
text-align: center;
font-size: 1.5em;
}
#container li {
display: inline;
margin: 0 1em;
}
#container li a {
margin: 0 1em;
color: #09b;
text-decoration: none;
background: #333;
padding: .6em;
border-radius: 25em;
}
#container li a:hover {
color: #099;
background: #444;
}
#container li a:active {
color: #066;
background: #222;
}
/* Content Area */
.content div {
width: 50%;
margin: 2em auto;
padding: 1em;
background: #333;
border: 1em solid #555;
color: #fff;
}
/* hide unselected targets */
.content div:not(:target) {
display: none;
}
/* display selected target */
:target {
display: inherit;
}
HTML:
<article id="container">
<ul>
<li>About</li>
<li>Contact</li>
<li>Services</li>
</ul>
<div class="content">
<div id="about">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at feugiat odio. Proin sit amet eros ac diam tempus tempor. Fusce gravida ut nisi in consectetur. Sed hendrerit sapien id metus adipiscing, id vehicula lacus fermentum. Proin mollis facilisis erat, eu sollicitudin diam scelerisque ut. Phasellus non mollis nisl. Vestibulum ac mi quis metus mollis fermentum. Donec pharetra consequat lacinia. Vestibulum porta tortor purus, non fermentum turpis congue eget. Nulla varius augue dolor, at pellentesque diam volutpat in. Vestibulum vitae ligula eu eros tristique accumsan. Mauris sagittis iaculis lorem id egestas. Suspendisse potenti. Cras faucibus dolor turpis, ac ultrices dolor rhoncus a.
<p>Etiam aliquam magna vitae hendrerit accumsan. Nam venenatis risus a tempor semper. Nullam ac est nec dolor pellentesque laoreet ac ac nisi. Ut sit amet magna nunc. Vestibulum orci ipsum, pretium nec venenatis vel, lacinia et magna. Proin dignissim dui ligula, eget pretium nisl ultrices eu. Etiam sit amet nunc non nisl scelerisque dignissim a sed sapien.</p>
<p>Quisque auctor sit amet mi sed porta. Fusce nec erat eros. Suspendisse et diam sit amet quam pretium sollicitudin quis nec enim. Nam fermentum risus dui, non volutpat dolor pellentesque nec. Quisque interdum, neque eu feugiat hendrerit, risus augue malesuada mauris, non vestibulum ante erat quis purus. Nunc scelerisque sapien vel leo bibendum, vel dapibus ipsum ultricies. Cras commodo lacus quis nunc eleifend iaculis. Nam adipiscing ipsum non justo ultrices, sit amet vestibulum urna vehicula. Praesent porttitor neque et dictum euismod. Aliquam erat volutpat. Nam adipiscing, neque ut dictum ultricies, dui odio aliquet dui, ac rhoncus neque nulla a enim.</p>
</div>
<div id="contact">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut purus leo, varius pellentesque vestibulum at, lobortis quis est. Suspendisse mattis leo vel eros faucibus adipiscing. Phasellus sed nisl eu lectus blandit dignissim vel id nibh. Donec rutrum felis urna, sed elementum urna venenatis quis. Praesent vel tortor sed felis sodales lobortis eget eget nulla. Aliquam bibendum elit eu nunc facilisis, varius tempor lectus mattis. Aenean sed aliquet orci. Aliquam viverra molestie ultrices.
<p>Nullam luctus imperdiet risus, vel convallis massa interdum id. In ultricies pulvinar libero vitae sodales. Fusce eleifend varius tincidunt. Nulla sed blandit nibh. Ut sollicitudin, metus et sagittis tincidunt, nisl felis ultricies ante, eu dapibus massa odio sed nunc. Pellentesque semper eros dui, ac mollis nunc dictum non. Quisque ultrices sapien at velit pellentesque, at lacinia est commodo. Morbi commodo in neque eu tempor. Curabitur eu mattis diam, eu tristique mauris.</p>
<p>Suspendisse sit amet lacus rutrum, faucibus augue vitae, euismod nibh. Mauris aliquet nisi in nibh aliquam, et ullamcorper turpis mattis. Vestibulum ut hendrerit libero, eu ultricies odio. Etiam sodales vehicula dignissim. Vestibulum libero tellus, luctus sed imperdiet quis, malesuada sed nunc. In aliquet pellentesque erat pellentesque fringilla. Aenean egestas ipsum eu nunc auctor, nec vestibulum est varius. Integer convallis, orci sit amet sagittis hendrerit, purus ligula dictum dolor, in lobortis ligula lacus pulvinar lorem. Sed pulvinar porttitor egestas. Duis ac ante ipsum. Donec sem odio, sollicitudin in fermentum egestas, gravida sed diam. Nam condimentum augue ut ligula dapibus sodales. Donec blandit sem non cursus aliquam.</p>
</div>
<div id="services">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus posuere porta suscipit. In ac purus quis lectus blandit rutrum eu vitae nisi. Nunc vel ante at enim imperdiet ultrices et non erat. Vestibulum sagittis facilisis nulla. Ut quis turpis sit amet enim volutpat tincidunt. Vivamus vel ornare neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis tincidunt mi et ipsum cursus, vitae tincidunt ipsum fringilla. Integer eu mollis elit, in tincidunt neque.
<p>Maecenas ac est gravida, iaculis mauris vitae, tempus enim. Mauris ut nisi dapibus, commodo massa sed, iaculis augue. Cras sit amet leo libero. Mauris ac dui lorem. Aenean velit risus, ornare molestie neque ac, feugiat cursus tellus. Duis commodo lacinia felis, vitae aliquam mauris consectetur cursus. Donec arcu orci, sollicitudin eu lacus id, ultricies sollicitudin ligula. Vivamus ac egestas ipsum. Duis aliquam suscipit tristique. Vestibulum aliquet bibendum arcu, in adipiscing arcu sagittis ut. Aenean in leo risus. Morbi vitae nibh in eros accumsan consequat in ac lacus. Maecenas pretium mattis justo non euismod. Sed vel velit sollicitudin, posuere mi nec, dictum lectus.</p>
<p>Nullam nisl nisi, dignissim ultrices cursus id, aliquet vel purus. Praesent velit purus, pharetra id eros id, viverra ultricies velit. Phasellus sed lacinia neque, at dictum odio. Mauris eget accumsan augue, ac imperdiet magna. Proin commodo sem id purus vulputate mollis. Nunc a dignissim urna. Nam facilisis, lectus sit amet blandit egestas, velit tortor imperdiet massa, eu elementum lorem dolor nec diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus sit amet nisl turpis. Nulla vel nulla ut odio feugiat ultrices. Ut id consequat sem.</p>
</div>
</div>
</article>
I want an overall scrollbar on the rightmost but it will only scroll a div within the Window and everything else stays static. Is this a css thing or a java script thing? I appreciate any help I can get. Thanks.
does either overflow: auto or overflow: scroll help? Referencing the spec might help explain more.
it's a css thing. make everthing elses' position fixed
Try using the css property "position:fixed" on the things you don't want to move and let everything else be normal.
Try out the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css" media="screen">
.maincontent{
width:300px;
margin:30px 100px;
}
.static1{
position:fixed;
top:10px;
left:100px;
width:300px;
height:20px;
background:red;
}
.static2{
position:fixed;
top:10px;
right: 30px;
width:100px;
height:40px;
background:green;
}
.static3{
position:fixed;
top: 300px;
left: 30px;
width:100px;
height:40px;
background:blue;
}
</style>
</head>
<body>
<div class="maincontent">
<h2>this is my main content that I want to scroll</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In commodo mi nec sapien feugiat sit amet fermentum odio pretium. Nulla et velit risus. Aenean lectus sem, semper vel interdum ut, elementum ac tortor. Suspendisse aliquam lectus quis elit adipiscing dignissim. Nullam turpis dui, tincidunt quis egestas id, auctor quis purus. Morbi ac augue eu diam tempus venenatis tempor ut orci. Curabitur nec massa eget est porttitor euismod. Nam elementum tempus mauris. Duis eleifend lorem sed odio vestibulum tincidunt. Vestibulum nisl massa, imperdiet quis egestas nec, molestie sed ipsum.</p>
<p>In quis ornare felis. Vivamus a neque mi. Sed ac mi id nunc porta commodo. Quisque ipsum tellus, elementum a aliquam ut, convallis vitae leo. Aenean pulvinar, tellus in interdum vehicula, sapien eros sodales felis, sed tincidunt justo arcu id ipsum. Integer lacus risus, scelerisque sed pharetra sed, vehicula in enim. Morbi vitae urna neque. Phasellus enim metus, cursus ac rutrum nec, porttitor non ipsum. Suspendisse tempor vestibulum sapien, non lobortis magna vestibulum at. Nulla hendrerit adipiscing massa eu faucibus. Donec est ligula, luctus eu semper pretium, facilisis a tortor. Suspendisse malesuada vulputate est in lacinia. Fusce cursus cursus ipsum sit amet porta.</p>
<p>In in ligula at urna varius tristique. Mauris vitae tellus vel est vestibulum porta. Nulla feugiat ipsum rhoncus turpis elementum sed aliquam tortor volutpat. Mauris mauris sem, consectetur sed fringilla a, feugiat eu nunc. Proin a nibh orci. Praesent gravida rutrum sodales. Quisque eget dui ac massa vestibulum vestibulum non id purus. Praesent velit purus, commodo at scelerisque vitae, pretium sit amet lacus. Praesent faucibus lacus quis turpis condimentum sit amet tincidunt augue tempor. Nunc scelerisque ultricies lorem in gravida. Curabitur est turpis, feugiat vel auctor non, convallis id elit. Morbi arcu orci, vulputate non cursus id, tincidunt ac lectus. Vivamus sed dui mauris, quis lobortis diam. Maecenas auctor arcu eu turpis rhoncus feugiat. Curabitur nisi quam, auctor non porta eu, hendrerit eu eros.</p>
<div class="static1">
static content 1
</div>
<div class="static2">
static content 2
</div>
<div class="static3">
static content 3
</div>
</body>
</html>