We Keep Coding

Modals not showing properly

Im doing some modals for a web but they don't show properly on my PC. I played with this code (https://codepen.io/joshuaward/pen/jYZXGo) to do it, adding the information that I would use and changing the font and all went good but when I transfered it to Sublime Text and save it, this is what looks like.
modals
JAVASCRIPT:
const buttons = document.querySelectorAll(`button[data-modal-trigger]`);
for(let button of buttons) {
modalEvent(button);
}
function modalEvent(button) {
button.addEventListener('click', () => {
const trigger = button.getAttribute('data-modal-trigger');
const modal = document.querySelector(`[data-modal=${trigger}]`);
const contentWrapper = modal.querySelector('.content-wrapper');
const close = modal.querySelector('.close');
close.addEventListener('click', () => modal.classList.remove('open'));
modal.addEventListener('click', () => modal.classList.remove('open'));
contentWrapper.addEventListener('click', (e) => e.stopPropagation());
modal.classList.toggle('open');
});
}
I just added a google font (and changed font family in CSS file) + added charset utf-8 (because the information is in spanish) in the top of the original code in the HTML file.

Hi the problem is the code from where you are copying the stuff is using the SCSS
https://codepen.io/joshuaward/pen/jYZXGo
You need to convert or compile the SCSS to CSS
using this link https://www.cssportal.com/scss-to-css/
Below code is for converted CSS from SCSS and working fine.
const buttons = document.querySelectorAll(`button[data-modal-trigger]`);
for(let button of buttons) {
modalEvent(button);
}
function modalEvent(button) {
button.addEventListener('click', () => {
const trigger = button.getAttribute('data-modal-trigger');
const modal = document.querySelector(`[data-modal=${trigger}]`);
const contentWrapper = modal.querySelector('.content-wrapper');
const close = modal.querySelector('.close');
close.addEventListener('click', () => modal.classList.remove('open'));
modal.addEventListener('click', () => modal.classList.remove('open'));
contentWrapper.addEventListener('click', (e) => e.stopPropagation());
modal.classList.toggle('open');
});
}
*, *:before, *:after {
box-sizing: border-box;
outline: none;
}
html {
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
font-smooth: auto;
font-weight: 300;
line-height: 1.5;
color: #444;
background-color: slategray;
}
button {
cursor: pointer;
}
body {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
}
.trigger {
margin: 0 0.75rem;
padding: 0.625rem 1.25rem;
border: none;
border-radius: 0.25rem;
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.12), 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.24);
transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
font-size: 0.875rem;
font-weight: 300;
}
.trigger i {
margin-right: 0.3125rem;
}
.trigger:hover {
box-shadow: 0 0.875rem 1.75rem rgba(0, 0, 0, 0.25), 0 0.625rem 0.625rem rgba(0, 0, 0, 0.22);
}
.modal {
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
height: 0vh;
background-color: transparent;
overflow: hidden;
transition: background-color 0.25s ease;
z-index: 9999;
}
.modal.open {
position: fixed;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
transition: background-color 0.25s;
}
.modal.open > .content-wrapper {
transform: scale(1);
}
.modal .content-wrapper {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
width: 50%;
margin: 0;
padding: 2.5rem;
background-color: white;
border-radius: 0.3125rem;
box-shadow: 0 0 2.5rem rgba(0, 0, 0, 0.5);
transform: scale(0);
transition: transform 0.25s;
transition-delay: 0.15s;
}
.modal .content-wrapper .close {
position: absolute;
top: 0.5rem;
right: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border: none;
background-color: transparent;
font-size: 1.5rem;
transition: 0.25s linear;
}
.modal .content-wrapper .close:before, .modal .content-wrapper .close:after {
position: absolute;
content: '';
width: 1.25rem;
height: 0.125rem;
background-color: black;
}
.modal .content-wrapper .close:before {
transform: rotate(-45deg);
}
.modal .content-wrapper .close:after {
transform: rotate(45deg);
}
.modal .content-wrapper .close:hover {
transform: rotate(360deg);
}
.modal .content-wrapper .close:hover:before, .modal .content-wrapper .close:hover:after {
background-color: tomato;
}
.modal .content-wrapper .modal-header {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
margin: 0;
padding: 0 0 1.25rem;
}
.modal .content-wrapper .modal-header h2 {
font-size: 1.5rem;
font-weight: bold;
}
.modal .content-wrapper .content {
position: relative;
display: flex;
}
.modal .content-wrapper .content p {
font-size: 0.875rem;
line-height: 1.75;
}
.modal .content-wrapper .modal-footer {
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
margin: 0;
padding: 1.875rem 0 0;
}
.modal .content-wrapper .modal-footer .action {
position: relative;
margin-left: 0.625rem;
padding: 0.625rem 1.25rem;
border: none;
background-color: slategray;
border-radius: 0.25rem;
color: white;
font-size: 0.87rem;
font-weight: 300;
overflow: hidden;
z-index: 1;
}
.modal .content-wrapper .modal-footer .action:before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: rgba(255, 255, 255, 0.2);
transition: width 0.25s;
z-index: 0;
}
.modal .content-wrapper .modal-footer .action:first-child {
background-color: #2ecc71;
}
.modal .content-wrapper .modal-footer .action:last-child {
background-color: #e74c3c;
}
.modal .content-wrapper .modal-footer .action:hover:before {
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<button data-modal-trigger="trigger-1" class="trigger">
<i class="fa fa-fire" aria-hidden="true"></i>
Modal 1
</button>
<button data-modal-trigger="trigger-2" class="trigger">
<i class="fa fa-fire" aria-hidden="true"></i>
Modal 2
</button>
<button data-modal-trigger="trigger-3" class="trigger">
<i class="fa fa-fire" aria-hidden="true"></i>
Modal 3
</button>
<div data-modal="trigger-1" class="modal">
<article class="content-wrapper">
<button class="close"></button>
<header class="modal-header">
<h2>This is a modal 1</h2>
</header>
<div class="content">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.</p>
</div>
<footer class="modal-footer">
<button class="action">Accept</button>
<button class="action">Decline</button>
</footer>
</article>
</div>
<div data-modal="trigger-2" class="modal">
<article class="content-wrapper">
<button class="close"></button>
<header class="modal-header">
<h2>This is a modal 2</h2>
</header>
<div class="content">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.</p>
</div>
<footer class="modal-footer">
<button class="action">Accept</button>
<button class="action">Decline</button>
</footer>
</article>
</div>
<div data-modal="trigger-3" class="modal">
<article class="content-wrapper">
<button class="close"></button>
<header class="modal-header">
<h2>This is a modal 3</h2>
</header>
<div class="content">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.</p>
</div>
<footer class="modal-footer">
<button class="action">Accept</button>
<button class="action">Decline</button>
</footer>
</article>
</div>

I think you missed add CSS file link or put the SCSS code if you using only HTMl then use css not scss
I try with your code in subline it's work fine
Here i upload link in W3Schoolenter link description here

Parallax effect - force text block to behave like background-attachment: fixed

I'm attempting to create a simple parallax effect where each 100vh section scrolls up to reveal the next section (new background color, background image, and text block) while keeping the text block fixed relative to its parent container.
I've put together a static example of what I'm trying to achieve using screenshots of each section: static example. Of course I'd like the content to be dynamic rather than flat images.
Here's a simple version of my code thus far:
body {
margin: 0;
padding: 0;
}
h2 {
font-size: 48px;
}
p {
font-size: 18px;
}
section {
min-height: 100vh;
width: 100%;
text-align: center;
position: relative;
background-attachment: fixed !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}
section.first {
background: url(https://picsum.photos/1920/500/?image=1057);
}
section.first .content {
background-color: rgba(74, 180, 220, .85);
}
section.second {
background: url(https://picsum.photos/1920/500/?image=1067);
}
section.second .content {
background-color: rgba(103, 198, 180, .85)
}
section.third {
background: url(https://picsum.photos/1920/500/?image=1033);
}
section.third .content {
background-color: rgba(5, 123, 188, .85);
}
section.fourth {
background: url(https://picsum.photos/1920/500?image=1063);
}
section.fourth .content {
background-color: rgba(187, 216, 100, .85)
}
.content {
position: relative;
height: 100vh;
width: 100%;
padding: 50px 0;
}
.copy {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-family: 'Noto Serif', serif;
font-weight: 300;
}
.button {
border: 2px solid #fff;
border-radius: 3px;
padding: 15px 25px;
display: inline-block;
width: auto;
font-family: 'Assistant', sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
transition: .2s ease all;
}
.button:hover {
background: #fff;
color: #333;
cursor: pointer;
}
<body>
<section class="first">
<div class="content">
<div class="copy">
<h2>Header 1 </h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="second">
<div class="content">
<div class="copy">
<h2>Header 2</h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="third">
<div class="content">
<div class="copy">
<h2>Header 3</h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="fourth">
<div class="content">
<div class="copy">
<h2>Call to action</h2>
<a class="button">Button</a>
</div>
</div>
</section>
</body>
The parallax effect is achieved using CSS background-attachment: fixed and works just fine; the trouble is with the text blocks. I'd like to keep them "pinned" in place and centered within their section. If they are set to position: fixed they of course overlap each other and all show up in the first section. If they are set to any other position attribute, they will simply scroll like any other element.
Now, I realize that setting an element's position to fixed means it can no longer be relative to its parent element; it escapes the flow so to speak, but I'm trying to determine if there's a way to achieve the effect with some advanced CSS or even a JS alternative.
I've tried numerous HTML/CSS combinations (wrappers within wrappers, etc.) and I've also attempted various javascript solutions such as rellax, jarallax, and ScrollMagic, but everything I've come across is far too robust for my needs. I've searched around for the better part of the day hoping to find an example of what I'm attempting, but no luck.

In a previous question I did a similar effect with image and using some JS so am going to use the same technique to reproduce this using content as I don't think there is a pure CSS solution. So the idea is to simulate the fixed position by using absolute position and adjusting the top property dynamically on scroll.
Here is an example where I also adjusted some of the CSS to make it easier. I will also rely on CSS variables to make the JS code very light so we can manage everything with CSS.
window.onscroll = function() {
var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
document.documentElement.style.setProperty('--scroll-var', scroll + "px");
}
:root {
--scroll-var: 0px
}
body {
margin: 0;
padding: 0;
}
h2 {
font-size: 48px;
}
p {
font-size: 18px;
}
section {
min-height: 100vh;
width: 100%;
text-align: center;
overflow: hidden;
background-attachment: fixed !important;
background-size: cover !important;
background-repeat: no-repeat !important;
position: relative; /*Mandatory for the overflow effect*/
height: 100vh;
}
section.first {
background: linear-gradient(rgba(74, 180, 220, .85), rgba(74, 180, 220, .85)), url(https://picsum.photos/1920/500/?image=1057);
}
section.first .content {
/* the first section so top start from 0*/
top: calc((0 * 100vh) + var(--scroll-var));
}
section.second {
background: linear-gradient(rgba(103, 198, 180, .85), rgba(103, 198, 180, .85)), url(https://picsum.photos/1920/500/?image=1067);
}
section.second .content {
/* the second section so we need to remove the height of top section
to have the same position so -100vh and we do the same for the other sections
*/
top: calc((-1 * 100vh) + var(--scroll-var));
}
section.third {
background: linear-gradient(rgba(5, 123, 188, .85), rgba(5, 123, 188, .85)), url(https://picsum.photos/1920/500/?image=1033);
}
section.third .content {
top: calc((-2 * 100vh) + var(--scroll-var));
}
section.fourth {
background: linear-gradient(rgba(187, 216, 100, .85), rgba(187, 216, 100, .85)), url(https://picsum.photos/1920/500?image=1063);
}
section.fourth .content {
top: calc((-3 * 100vh) + var(--scroll-var));
}
.content {
position: absolute;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.copy {
color: #fff;
font-family: 'Noto Serif', serif;
font-weight: 300;
max-width: 300px;
}
.button {
border: 2px solid #fff;
border-radius: 3px;
padding: 15px 25px;
display: inline-block;
width: auto;
font-family: 'Assistant', sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
transition: .2s ease all;
}
.button:hover {
background: #fff;
color: #333;
cursor: pointer;
}
<body>
<section class="first">
<div class="content">
<div class="copy">
<h2>Header 1 </h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="second">
<div class="content">
<div class="copy">
<h2>Header 2</h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="third">
<div class="content">
<div class="copy">
<h2>Header 3</h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="fourth">
<div class="content">
<div class="copy">
<h2>Call to action</h2>
<a class="button">Button</a>
</div>
</div>
</section>
</body>

I have put up a little snippet, that works. But you need to figure out the exact math behind positioning yourself. And of course take care of the details
$( document ).ready(function() {
$(document).scroll(function() {
// get the position of my first slide, so I know where did I move
var rect = $(".first")[0].getBoundingClientRect();
// get height of viewport
var screenHeight = $( window ).height();
// setting offset for every .copy element on page, so they share
// the same offset from top (are on top of each other)
// Now you just need to figure out exact math here
$(".copy").offset({ top: screenHeight*1.5-rect.bottom});
});
});
body {
margin: 0;
padding: 0;
}
h2 {
font-size: 48px;
}
p {
font-size: 18px;
}
section {
min-height: 100vh;
width: 100%;
text-align: center;
position: relative;
background-attachment: fixed !important;
background-size: cover !important;
background-repeat: no-repeat !important;
/* added overflow hidden, so that my boxes don't flow out of the slide */
overflow: hidden;
}
section.first {
background: url(https://picsum.photos/1920/500/?image=1057);
}
section.first .content {
background-color: rgba(74, 180, 220, .85);
}
section.second {
background: url(https://picsum.photos/1920/500/?image=1067);
}
section.second .content {
background-color: rgba(103, 198, 180, .85)
}
section.third {
background: url(https://picsum.photos/1920/500/?image=1033);
}
section.third .content {
background-color: rgba(5, 123, 188, .85);
}
section.fourth {
background: url(https://picsum.photos/1920/500?image=1063);
}
section.fourth .content {
background-color: rgba(187, 216, 100, .85)
}
.content {
position: relative;
height: 100vh;
width: 100%;
padding: 50px 0;
}
.copy {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-family: 'Noto Serif', serif;
font-weight: 300;
}
.button {
border: 2px solid #fff;
border-radius: 3px;
padding: 15px 25px;
display: inline-block;
width: auto;
font-family: 'Assistant', sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
transition: .2s ease all;
}
.button:hover {
background: #fff;
color: #333;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<section class="first">
<div class="content">
<div class="copy">
<h2>Header 1 </h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="second">
<div class="content">
<div class="copy">
<h2>Header 2</h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="third">
<div class="content">
<div class="copy">
<h2>Header 3</h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="fourth">
<div class="content">
<div class="copy">
<h2>Call to action</h2>
<a class="button">Button</a>
</div>
</div>
</section>
</body>

How to link href to a TAB?

I'm using this example CODE.
I have a page with links using href.
And I intend to add links to another page. When clicked on these links, automatically opening the TAB on the secound page, is it possible?
First page with Links:
TAB1
TAB2
Secound page with TABS
Licenciaturas
<ul class="navi">
<li><a class="menu2" href="#tab1">Eng Inf</a></li>
<li><a class="menu3" href="#tab2">Eng Quimic</a></li>
<li><a class="menu4" href="#tab3">Eng Civil</a></li>
</ul>
<br><br>
Mestrados
<ul class="navi">
<li><a class="menu2" href="#tab10">Mestrado 1</a></li>
<li><a class="menu3" href="#tab11">Mestrado 2</a></li>
<li><a class="menu4" href="#tab12">Mestrado 3</a></li>
<li><a class="menu5" href="#tab13">Mestrado 4</a></li>
<li><a class="menu6" href="#tab14">Mestrado 5</a></li>
</ul>
<div id='tab1'>
TEXTO LICENCIATURA 1
</div>
<div id='tab2'>
TEXTO LICENCIATURA 2
</div>
<div id='tab10'>
TEXTO Mestrado 1
</div>
<div id='tab11'>
TEXTO Mestrado 2
</div>
$('ul.prov').on('click', 'a', function (e) {
//Change content displayed
$($("ul.prov a.active")[0].hash).hide();
$(this.hash).show();
//Change active item
$("ul.prov a.active").removeClass("active");
$(this).addClass("active");
e.preventDefault();
});
//Hide all content divs except first one
$("ul.prov a").each(function(index){
if(index != 0)
$(this.hash).hide();
else
$(this).addClass("active");
});
$('a').click(function(){
$("#tabs").tabs("option", "active", parseInt(this.id));
});

Please find the link below
http://jsfiddle.net/priyank_s/5x3yp6Lb/
you just need to use html and css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS3 tabs</title>
<link rel="stylesheet" type="text/css" media="all" href="tabs.css" />
</head>
<style>body
{
font-family: "Segoe UI", arial, helvetica, freesans, sans-serif;
font-size: 90%;
color: #333;
background-color: #e5eaff;
margin: 10px;
z-index: 0;
}
h1
{
font-size: 1.5em;
font-weight: normal;
margin: 0;
}
h2
{
font-size: 1.3em;
font-weight: normal;
margin: 2em 0 0 0;
}
p
{
margin: 0.6em 0;
}
p.tabnav
{
font-size: 1.1em;
text-transform: uppercase;
text-align: right;
}
p.tabnav a
{
text-decoration: none;
color: #999;
}
article.tabs
{
position: relative;
display: block;
width: 40em;
height: 15em;
margin: 2em auto;
}
article.tabs section
{
position: absolute;
display: block;
top: 1.8em;
left: 0;
height: 12em;
padding: 10px 20px;
background-color: #ddd;
border-radius: 5px;
box-shadow: 0 3px 3px rgba(0,0,0,0.1);
z-index: 0;
}
article.tabs section:first-child
{
z-index: 1;
}
article.tabs section h2
{
position: absolute;
font-size: 1em;
font-weight: normal;
width: 120px;
height: 1.8em;
top: -1.8em;
left: 10px;
padding: 0;
margin: 0;
color: #999;
background-color: #ddd;
border-radius: 5px 5px 0 0;
}
article.tabs section:nth-child(2) h2
{
left: 132px;
}
article.tabs section:nth-child(3) h2
{
left: 254px;
}
article.tabs section h2 a
{
display: block;
width: 100%;
line-height: 1.8em;
text-align: center;
text-decoration: none;
color: inherit;
outline: 0 none;
}
article.tabs section,
article.tabs section h2
{
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
article.tabs section:target,
article.tabs section:target h2
{
color: #333;
background-color: #fff;
z-index: 2;
}</style>
<body>
<article class="tabs">
<section id="tab1">
<h2>Tab 1</h2>
<p>This content appears on tab 1.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia elit nec mi ornare et viverra massa pharetra. Phasellus mollis, massa sed suscipit pharetra, nunc tellus sagittis nunc, et tempus dui lorem a ipsum.</p>
<p class="tabnav">next ➧</p>
</section>
<section id="tab2">
<h2>Tab 2</h2>
<p>This content appears on tab 2.</p>
<p>Fusce ullamcorper orci vel turpis vestibulum eu congue nisl euismod. Maecenas euismod, orci non tempus fermentum, leo metus lacinia lacus, nec ultrices quam ligula ac leo. Quisque tortor neque, vulputate quis ultricies ut, rhoncus mollis metus.</p>
<p class="tabnav">next ➧</p>
</section>
<section id="tab3">
<h2>Tab 3</h2>
<p>This content appears on tab 3.</p>
<p>Sed et diam eu ipsum scelerisque laoreet quis in nibh. Proin sodales augue lectus. Maecenas a lorem a mi congue pharetra. Sed sed risus in nisi venenatis condimentum. Donec ac consectetur arcu. Integer urna neque, rutrum at pretium eu.</p>
<p class="tabnav">next ➧</p>
</section>
</article>
</body>
</html>

Resizing divs depending on information inside

I have a container where I want to hold information (which would be updated regularly). But sometimes, I might want this information to be long or short, and for this I cant have a fixed height on my container, so depending on the amount of text/information it should resize. Here's my script.
HTML:
<html>
<head>
<title>LoL Champs</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
<link href='http://fonts.googleapis.com/css?family=Sansita+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Belleza' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- NAVIGATION -->
<div id="nav-bar">
<div id="nav-bar-title">LoL Champs</div>
<ul>
<li>Champs</li>
<li>Info</li>
<li>Guides</li>
<li>Model Viewer</li>
<li>Lists</li>
</ul>
</div>
<!-- END NAVIGATION -->
<div id="main-body">
<div id="nav-body-divider"></div>
<p id="home-body-title">News</p>
<!-- News Container -->
<div id="news-container">
</div>
</div>
</body>
</html>
And CSS:
/** MAIN PAGE CONFIG CSS **/
html, body {
width: 100%;
height: 100%;
margin: 0 auto;
max-width: 1920px;
max-height: 1050px;
font-size: 100%;
}
html {
background: url(../images/JinxBG.jpg) 0 0 fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
p {
color: white;
}
a:link {color: inherit;}
a:visited {color: inherit;}
a:active {color: inherit;}
a {text-decoration: none;}
/** MAIN CSS **/
/**NAVIGATION**/
#nav-bar {
width: 100%;
height: 10%;
background-color: #A62D2D;
position: fixed;
box-shadow: 0px 2px 9px black;
font-size: 100%;
max-height: 10%;
max-width: 100%;
}
#nav-bar-title {
font-family: 'Sansita One';
color: #262424;
position: absolute;
width: 20%;
height: 100%;
left: 0.3%;
font-size: 1.8em;
max-width: 16%;
margin-top: 1.2%;
}
#nav-bar ul {
list-style-type: none;
color: #2E2C2C;
font-family: 'Belleza';
font-size: 1.5em;
position: absolute;
top: 0;
max-width: 100%;
max-height: 100%;
left: 15%;
line-height: 0%;
margin-top: 0;
margin-bottom: 10%;
top: 50%;
}
#nav-bar li {
margin-right: 45px;
display: inline;
height: 100%;
-webkit-transition: color 0.5s ease;
}
#nav-bar li:hover {
color: #C7C7C7;
-webkit-transition: color 0.5s ease;
}
/** END NAVIGATION **/
/** MAIN TEXT BODY **/
#nav-body-divider {
width: 100%;
height: 1px;
background: #B55050;
}
#main-body {
max-width: 100%;
max-height: 90%;
background: #A62D2D;
width: 70%;
height: 100%;
margin: auto;
position: relative;
top: 10%;
}
/** MAIN BODY NEWS **/
#home-body-title {
font-size: 2.4em;
font-family: Belleza;
color: #C98A5D;
position: relative;
left: 3%;
top: 0%;
}
#news-container {
width: 45%;
height: 40%;
background: #CF4040;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
position: relative;
left: 3%;
}
I want to resize news-container so that it adapts to the amount of stuff in it, but resize it only on height. The width should stay the same. Also, if the div will be bigger, how can I move the objects that will be below that div to accommodate further down on the page and make space for the big container?
Cheers, Nick

You should never set a height on anything. Always let the content grow naturally. http://jsfiddle.net/LQkj3/
<div id="news-container">
<p>
This is the news section! height will automatically grow depending on the amount of data! you should NEVER control height with pixels or percentage! always let the content grow it automatically.
</p>
</div>
<style>
#news-container { width: 45%; background: #CF4040; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; position: relative; left: 3%; padding: .5em 1em; }
</style>
...Unless of course you need a scrollable container (like #griegs suggested). ;)
Then you could put a max-width: 10em; or something to that effect.

<div style="width:200px; border: 1px solid black; max-height: 400px; overflow: scroll">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et iaculis dui, id dapibus nibh. Phasellus sollicitudin urna non elementum aliquam. Vivamus nec aliquet quam. Mauris eget sollicitudin tellus, at dictum tellus. Donec sed porttitor quam, in suscipit nisl. Praesent vestibulum auctor turpis quis vulputate. Quisque eget erat vel tellus pretium bibendum. Mauris feugiat urna nec pharetra bibendum. Integer consectetur nisl cursus aliquam rhoncus. Mauris vulputate pulvinar commodo. Mauris placerat enim erat, a dignissim metus laoreet quis. Aenean nec ipsum neque. Proin adipiscing tellus ut nisi rutrum tempus. Aliquam erat volutpat. In dignissim consectetur tellus sit amet sagittis. Nam ac quam id nunc adipiscing commodo.
</div>
Remove the overflow and the max-height if these are not important to you. I put them in to demonstrate that pure css should be all you need.
As the div grows, the elements below it will be pushed down so long as they are not positioned absolute or floated etc.

Coloring of tabs with Dynamics

I have a question, (Below) I am trying to make the links to the two tabs that rollup accordion style to shade the one that isn't selected. I have accomplished this but now I need to darken to two links once they are both closed.
Could you point me in the right direction?
WDH
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<!-- <script type="text/javascript" src="../../../jQ_161/jquery-1.6.1.js"></script> -->
<script type="text/javascript">
$(document).ready(function(){
$(".divOneDropdown").show();
$(".clickOnePara").click(function() {
$(".divOneDropdown").slideToggle(777);
if ( $(".divTwoDropdown").css("display") != "none" ) {
$(".divTwoDropdown").slideUp(777);
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".clickTwoPara").click(function() {
$(".divTwoDropdown").slideToggle(777);
if ( $(".divOneDropdown").css("display") != "none" ) {
$(".divOneDropdown").slideUp(777);
}
});
});
</script>
<script type="text/javascript">
function flickColor1() {
document.getElementById("dropButtonTxt1").style.color="white";
document.getElementById("dropButtonTxt2").style.color="gray";
}
function flickColor2() {
document.getElementById("dropButtonTxt2").style.color="white";
document.getElementById("dropButtonTxt1").style.color="gray";
}
</script>
<style type="text/css">
.divOneDropdown, .clickOnePara {
background: none repeat scroll 0 0 transparent;
cursor: pointer;
margin: 0;
padding: 5px;
position: relative;
text-align: center;
top: 5px;
}
.clickOnePara{
background-color: transparent;
width: 200px;
float: left;
}
.divTwoDropdown, .clickTwoPara {
background: none repeat scroll 0 0 transparent;
cursor: pointer;
margin: 0;
padding: 5px;
position: relative;
text-align: center;
top: 5px;
}
.clickTwoPara{
background-color: transparent;
width: 200px;
float: left;
left: 4px;
}
.divOneDropdown {
display: none;
height: 260px;
top: 28px;
overflow: hidden;
}
.divTwoDropdown {
display: none;
height: 260px;
top: 28px;
overflow: hidden;
}
#contained{
/*border: black solid 2px;*/
width: 800px;
height: 700px;
position: relative;
margin: auto;
}
#topNavs{
position: relative;
left: 0px;
/*width: 100%;*/
padding-bottom: 0px;
}
#contentDrops{
padding-top: 20px;
}
/* Below is the Dropdown Nav Styles */
#dropButtons{
}
#dropNavButton1{
height: 31px;
left: 121px;
padding-left: 37px;
position: absolute;
width: 504px;
z-index: 5;
}
#dropNavButton1 a {
display: block;
height: 31px;
width: 248px;
background: url(Work/Sprites/ProcedureAndRecover.png) 0 0 no-repeat;
text-decoration: none;
}
#dropNavButton1 a:hover {
background-position: -252px 0;
color: #FFFFFF;
}
#dropNavButton1 a:active {
background-position: 0px 0;
color: #DDDDDD;
}
/* a:link - - unvisited link */
/* a:visited - - visited link */
/* a:hover - - mouse over link */
/* a:active - - selected link */
#dropNavButton2{
height: 31px;
left: 376px;
padding-left: 37px;
position: absolute;
width: 503px;
z-index: 5;
}
#dropNavButton2 a {
display: block;
height: 31px;
width: 248px;
background: url(Work/Sprites/SafetyAndEffects.png) 0 0 no-repeat;
text-decoration: none;
}
#dropNavButton2 a:hover {
background-position: -252px 0;
}
#dropNavButton2 a:active {
background-position: 0px 0;
color: #DDDDDD;
}
/* a:link - - unvisited link */
/* a:visited - - visited link */
/* a:hover - - mouse over link */
/* a:active - - selected link */
#dropButtonTxt1{
font-size: 16px;
font-family: 'LaneB';
padding-left: 0px;
padding-top: 6px;
}
#dropButtonTxt2{
font-size: 16px;
font-family: 'LaneB';
padding-left: 0px;
padding-top: 6px;
}
/* Photo Gallery - Text not associated with above sprite */
#dropNavButton1 a:link{
color: #FFFFFF;
}
#dropNavButton1 a:visited{
color: #FFFFFF;
}
/* Contact - Text not associated with above sprite */
#dropNavButton2 a:link{
color: #FFFFFF;
}
#dropNavButton2 a:visited{
color: #FFFFFF;
}
/* a:link - - unvisited link */
/* a:visited - - visited link */
/* a:hover - - mouse over link */
/* a:active - - selected link */
/* Dropdown Nav Styles END */
/* Complimentary Consultation Button - START */
.compConsult{
background: url("Work/Images/ComplimentaryConsultation.png") no-repeat scroll 0 0 transparent;
background-color: #000000;
height: 38px;
left: 33%;
padding-left: 0;
position: relative;
width: 262px;
z-index: 5;
}
.compConsult a {
display: block;
height: 31px;
width: 248px;
text-decoration: none;
}
.compConsult a:hover {
background-position: -252px 0;
color: #FFFFFF;
}
.compConsult a:active {
background-position: -504px 0;
color: #DDDDDD;
}
/* a:link - - unvisited link */
/* a:visited - - visited link */
/* a:hover - - mouse over link */
/* a:active - - selected link */
.compConsult a:link{
color: #FFFFFF;
}
.compConsult a:visited{
color: #FFFFFF;
}
/* a:link - - unvisited link */
/* a:visited - - visited link */
/* a:hover - - mouse over link */
/* a:active - - selected link */
.compConsultTxt{
font-family: 'LaneB';
font-size: 18px;
padding-top: 6px;
position: absolute;
right: 16px;
width: 230px;
}
/* Complimentary Consultation Button - END */
</style>
</head>
<body>
<div id="contained">
<div id="topNavs">
<div id="dropNavButton1">
<p class="clickOnePara"><span id="dropButtonTxt1">PROCEDURE AND RECOVERY</span></p>
</div>
<div id="dropNavButton2">
<p class="clickTwoPara"><span id="dropButtonTxt2">SAFETY AND SIDE EFFECTS</span></p>
</div>
</div>
<div id="contentDrops">
<div class="divOneDropdown">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam justo est,
consequat vel rutrum ut, venenatis sit amet erat. In placerat tellus nunc,
et placerat arcu. Phasellus dignissim leo sed dolor dapibus quis auctor dui
vestibulum. Sed elit enim, congue et laoreet a, molestie in neque. Fusce
ullamcorper sapien ut tellus dictum id sollicitudin nunc congue.
Pellentesque posuere ultrices aliquam. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Aliquam laoreet lectus
et libero luctus mattis. Sed ac laoreet odio. Mauris nec cursus dui.
Curabitur tincidunt pretium quam, a iaculis velit porta nec.
</p>
<div class="compConsult">
<span class="compConsultTxt">Complimentary Consultation</span>
</div>
<p>
Curabitur dignissim leo sed dolor dapibus quis auctor dui
vestibulum.
<br /><br />
Sed ac laoreet odio. Mauris nec cursus dui.
</p>
</div>
<div class="divTwoDropdown">
<p>
Phasellus dignissim leo sed dolor dapibus quis auctor dui
vestibulum. Sed elit enim, congue et laoreet a, molestie in neque. Fusce
ullamcorper sapien ut tellus dictum id sollicitudin nunc congue.
Pellentesque posuere ultrices aliquam. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas.
</p>
<div class="compConsult">
<span class="compConsultTxt">Complimentary Consultation</span>
</div>
<p>
Sed elit enim, congue et laoreet a, molestie in neque.
<br /><br />
In placerat tellus nunc, et placerat arcu.
</p>
</div>
</div>
</div>
</body>
</html>

I believe I understand what you are asking for. Give this a shot:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".divOneDropdown").show();
$(".divTwoDropdown").hide();
ChangeColor()
$(".clickOnePara").click(function () {
$(".divOneDropdown").slideToggle(777,
function () {
ChangeColor();
}
);
$(".divTwoDropdown").hide();
});
$(".clickTwoPara").click(function () {
$(".divTwoDropdown").slideToggle(777,
function () {
ChangeColor();
}
);
$(".divOneDropdown").hide();
});
});
function ChangeColor() {
if ($('.divOneDropdown').is(':visible')) {
document.getElementById("dropButtonTxt1").style.color = "white";
document.getElementById("dropButtonTxt2").style.color = "gray";
}
else if ($('.divTwoDropdown').is(':visible')) {
document.getElementById("dropButtonTxt1").style.color = "gray";
document.getElementById("dropButtonTxt2").style.color = "white";
}
else {
document.getElementById("dropButtonTxt1").style.color = "gray";
document.getElementById("dropButtonTxt2").style.color = "gray";
}
}
</script>
<style type="text/css">
.divOneDropdown, .clickOnePara {
background: none repeat scroll 0 0 transparent;
cursor: pointer;
margin: 0;
padding: 5px;
position: relative;
text-align: center;
top: 5px;
}
#contained { background-color: lightgray; }
.clickOnePara{
background-color: transparent;
width: 200px;
float: left;
}
.divTwoDropdown, .clickTwoPara {
background: none repeat scroll 0 0 transparent;
cursor: pointer;
margin: 0;
padding: 5px;
position: relative;
text-align: center;
top: 5px;
}
.clickTwoPara{
background-color: transparent;
width: 200px;
float: left;
left: 4px;
}
.divOneDropdown {
display: none;
height: 260px;
top: 28px;
overflow: hidden;
}
.divTwoDropdown {
display: none;
height: 260px;
top: 28px;
overflow: hidden;
}
#contained{
/*border: black solid 2px;*/
width: 800px;
height: 700px;
position: relative;
margin: auto;
}
#topNavs{
position: relative;
left: 0px;
/*width: 100%;*/
padding-bottom: 0px;
}
#contentDrops{
padding-top: 20px;
}
/* Below is the Dropdown Nav Styles */
#dropButtons{
}
#dropNavButton1{
height: 31px;
left: 121px;
padding-left: 37px;
position: absolute;
width: 504px;
z-index: 5;
}
#dropNavButton1 a {
display: block;
height: 31px;
width: 248px;
background: url(Work/Sprites/ProcedureAndRecover.png) 0 0 no-repeat;
text-decoration: none;
}
#dropNavButton1 a:hover {
background-position: -252px 0;
color: #FFFFFF;
}
#dropNavButton1 a:active {
background-position: 0px 0;
color: #DDDDDD;
}
/* a:link - - unvisited link */
/* a:visited - - visited link */
/* a:hover - - mouse over link */
/* a:active - - selected link */
#dropNavButton2{
height: 31px;
left: 376px;
padding-left: 37px;
position: absolute;
width: 503px;
z-index: 5;
}
#dropNavButton2 a {
display: block;
height: 31px;
width: 248px;
background: url(Work/Sprites/SafetyAndEffects.png) 0 0 no-repeat;
text-decoration: none;
}
#dropNavButton2 a:hover {
background-position: -252px 0;
}
#dropNavButton2 a:active {
background-position: 0px 0;
color: #DDDDDD;
}
/* a:link - - unvisited link */
/* a:visited - - visited link */
/* a:hover - - mouse over link */
/* a:active - - selected link */
#dropButtonTxt1{
font-size: 16px;
font-family: 'LaneB';
padding-left: 0px;
padding-top: 6px;
}
#dropButtonTxt2{
font-size: 16px;
font-family: 'LaneB';
padding-left: 0px;
padding-top: 6px;
}
/* Photo Gallery - Text not associated with above sprite */
#dropNavButton1 a:link{
color: #FFFFFF;
}
#dropNavButton1 a:visited{
color: #FFFFFF;
}
/* Contact - Text not associated with above sprite */
#dropNavButton2 a:link{
color: #FFFFFF;
}
#dropNavButton2 a:visited{
color: #FFFFFF;
}
/* a:link - - unvisited link */
/* a:visited - - visited link */
/* a:hover - - mouse over link */
/* a:active - - selected link */
/* Dropdown Nav Styles END */
/* Complimentary Consultation Button - START */
.compConsult{
background: url("Work/Images/ComplimentaryConsultation.png") no-repeat scroll 0 0 transparent;
background-color: #000000;
height: 38px;
left: 33%;
padding-left: 0;
position: relative;
width: 262px;
z-index: 5;
}
.compConsult a {
display: block;
height: 31px;
width: 248px;
text-decoration: none;
}
.compConsult a:hover {
background-position: -252px 0;
color: #FFFFFF;
}
.compConsult a:active {
background-position: -504px 0;
color: #DDDDDD;
}
/* a:link - - unvisited link */
/* a:visited - - visited link */
/* a:hover - - mouse over link */
/* a:active - - selected link */
.compConsult a:link{
color: #FFFFFF;
}
.compConsult a:visited{
color: #FFFFFF;
}
/* a:link - - unvisited link */
/* a:visited - - visited link */
/* a:hover - - mouse over link */
/* a:active - - selected link */
.compConsultTxt{
font-family: 'LaneB';
font-size: 18px;
padding-top: 6px;
position: absolute;
right: 16px;
width: 230px;
}
/* Complimentary Consultation Button - END */
</style>
</head>
<body>
<div id="contained">
<div id="topNavs">
<div id="dropNavButton1">
<p class="clickOnePara">PROCEDURE AND RECOVERY</span></p>
</div>
<div id="dropNavButton2">
<p class="clickTwoPara">SAFETY AND SIDE EFFECTS</span></p>
</div>
</div>
<div id="contentDrops">
<div class="divOneDropdown">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam justo est,
consequat vel rutrum ut, venenatis sit amet erat. In placerat tellus nunc,
et placerat arcu. Phasellus dignissim leo sed dolor dapibus quis auctor dui
vestibulum. Sed elit enim, congue et laoreet a, molestie in neque. Fusce
ullamcorper sapien ut tellus dictum id sollicitudin nunc congue.
Pellentesque posuere ultrices aliquam. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Aliquam laoreet lectus
et libero luctus mattis. Sed ac laoreet odio. Mauris nec cursus dui.
Curabitur tincidunt pretium quam, a iaculis velit porta nec.
</p>
<div class="compConsult">
<span class="compConsultTxt">Complimentary Consultation</span>
</div>
<p>
Curabitur dignissim leo sed dolor dapibus quis auctor dui
vestibulum.
<br /><br />
Sed ac laoreet odio. Mauris nec cursus dui.
</p>
</div>
<div class="divTwoDropdown">
<p>
Phasellus dignissim leo sed dolor dapibus quis auctor dui
vestibulum. Sed elit enim, congue et laoreet a, molestie in neque. Fusce
ullamcorper sapien ut tellus dictum id sollicitudin nunc congue.
Pellentesque posuere ultrices aliquam. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas.
</p>
<div class="compConsult">
<span class="compConsultTxt">Complimentary Consultation</span>
</div>
<p>
Sed elit enim, congue et laoreet a, molestie in neque.
<br /><br />
In placerat tellus nunc, et placerat arcu.
</p>
</div>
</div>
</div>
</body>
</html>