I have a div with text on the right and a div with a menu on the right. Both wrapped up with a div to center it all. Ho can I make the div right follow the screen when the user makes scroll with the text? I mean that the div right keeps "fixed" in the same place but the user could make move and scroll the text.(This is not a classic fixed position. I'm not sure if I should call this something like a fixed relative to another div?)
HTML:
<div id="wrapper">
<div id="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque convallis adipiscing dolor, eget rutrum lectus malesuada id. Phasellus vulputate, lorem et convallis vulputate, enim nulla scelerisque nunc, vel auctor orci tellus eget diam. Praesent scelerisque, mauris a molestie lobortis, lectus nisi dignissim massa, eget tempor ante sem in nisi. Proin fermentum euismod ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin nec orci arcu. Nullam molestie consequat porttitor. Pellentesque sit amet nisl odio. Ut vel mi a eros commodo vehicula sagittis ut mi. Donec eu ante velit, vel ullamcorper arcu. Etiam eros sapien, lobortis a porttitor quis, congue vel velit. Nam et dui auctor augue interdum interdum.<br /><br />
</div>
<div id="right"></div>
</div><!-- final de contingut -->
CSS:
body {background-color: #f2f2f2;font-size: 13px;margin: 0;padding: 0;}
#wrapper {margin:0 auto;width:700px;height:900px;background-color:#fff;}
#right {
float:right;
width:200px;
height:500px;
right:0px;
border:solid thin #f00;
}
#text {
float:left;
width:400px;
padding:40px;
}
I have the example here: http://jsfiddle.net/u7xRX/1/
As per i understand may be you can use javascript for this. Write like this:
$(document).scroll(
function(){
var scrollOffset = $(window).scrollTop();
if(scrollOffset >= 100){
$('#right').css({position: 'fixed',top:'0', left:'650px'});
}
else{
$('#right').css({position: 'absolute',top:'100px', left:'650px'});
}
}
);
Check this http://jsfiddle.net/ZVrMF/1/
After a lot of time I could find a solution with just css. I think in fixed position if you don't give the right position it gets it from the parent div, in this case the wrapper. On the other side, I add a margin to position it on the right
http://jsfiddle.net/u7xRX/3/
body {background-color: #f2f2f2;font-size: 13px;margin: 0;padding: 0;}
#wrapper {position: relative; margin:0 auto;width:700px;height:900px;background-color:#fff;}
#right {
position: fixed;
top: 40px;
/* right:0px; important not give right position */
width:200px;
height:200px;
margin:0 0 0 500px; /* important to position it on the right */
background-color: red;
}
#text {
position: absolute;
left: 0px;
width:400px;
padding:40px;
}
Related
so I've been trying to make something move in the background of my website using canvas, like a object or just lines that randomly appear at slightly different speed and size. But my background is in the way of the canvas I think. Did I do something wrong, or is it in the way of my background? Im very new to coding, so please be patient with me. Thanks!
thanks
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
/*gare kleuren achtergrond*/
body {
background: white;
background: linear-gradient(90deg, #ee7752, #e73c7e, #23a6d5, #23d5ab, #33D7FF);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
height: 20px;
overflow: auto;
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/*witte div*/
#div1 {
width: 101.5%;
height: 1000px;
margin-left: -10px;
margin-right: 220px;
padding: 50px, 50px, 50px, 50px;
background-color:white;
border-radius: 100px 100px 0px 0px;
}
#div1 h1{
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
#div1 p{
color: black;
font-family: lucida console, monospace;
font-size: 50px;
text-align: center;
}
h1{
color: black;
font-family: lucida console, monospace;
font-size: 150px;
text-align: center;
margin-top: 300px;
}
.woord {
transition:0.5s;
border: 0px;
height: 550px;
margin-left: -10px;
margin-bottom: -22px;
}
li{
font-size: 30px;
font-family: lucida console, monospace;
display: inline;
text-align: center;
}
a{
transition: ease-in-out .2s;
}
a:link{
text-decoration: none;
color: black;
}
a:visited{
text-decoration: none;
color: black;
}
a:hover{
border: 1px solid;
zoom: 1.1;
}
.nav{
border:1px solid;
border-width:1px;
height: 64px;
list-style:none;
margin:0;
padding:0;
text-align:center;
box-sizing: border-box;
width: 1000px;
margin-left: 220px;
}
.nav li{
display:inline;
}
.nav a{
display:inline-block;
padding:10px;
}
Javascript
$(document).ready(function(){
$(window).scroll(function(){
if($(this).scrollTop() > 40){
$(".woord").css({"opacity" : "0"})
}
else {
$(".woord").css({"opacity" : "1"})
}
})
})
<html>
<head>
<title>Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="stylesheet.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="gaar.js"></script>
</head>
<body>
<div class="woord">
<h1>website</h1>
<canvas id="canvas" width="200" height="100"></canvas>
</div>
<div id="div1">
<h1>main</h1>
<ul class="nav">
<li>Biografie</li>
<li>fotos</li>
<li>heuristiek</li>
<li>buienradar</li>
<li>Contact</li>
</ul>
<p>hoi</p>
<p>dit is mijn website</br>over mijzelf </p>
</div>
</body>
</html>
(Edited once I realized I misread the original question)
So theBODY element is going to be the root of everything visible on your document, so you're not going to get anything "behind" that tag, since everything else is considered a child of it.
If you want something to be behind "everything," you give it a z-index of -1. That will place it behind everything thats got a z-index set, and everything that's got the default index of 0. Note that for z-index to have an effect, your element must have absolute, fixed, relative or sticky positioning applied.
and if you want it to be visible, ensure anything that appears in front of it is at least partially transparent.
.behind {
/* may also be absolute, sticky, or relative */
position: fixed;
/* Put this element behind anything with a higher z-index */
z-index: -1;
background-image: url(https://placekitten.com/408/287);
width: 400px;
height: 280px;
top: 1em;
left: 1em;
}
h1, p {
/* 100% opaque */
/*background-color: white;*/
/* 100% transparency */
/*background-color: transparent;*/
/* 50% transparency */
background-color: rgba(255, 255, 255, 0.5);
}
body {
background-color: rgba(255, 0, 0, 1);
/* Nothing is ever actually behind the BODY tag. */
}
<html>
<body>
<h1>Hello, world!</h1>
<div class="behind"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sodales vehicula nulla vitae eleifend. Donec facilisis ligula a lectus tincidunt sagittis. Morbi libero diam, mattis eget tristique ut, tincidunt ut orci. Curabitur vulputate libero at interdum
vulputate. Quisque tincidunt, sapien quis dapibus accumsan, nulla urna ultrices risus, vel facilisis orci ex id odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus finibus tincidunt sem quis
fermentum. Donec nec tellus eu dui auctor blandit. Aliquam erat volutpat. Donec malesuada diam orci, vitae pulvinar odio tincidunt id. Nam interdum, dolor eu consectetur suscipit, enim eros tempor orci, sit amet ullamcorper ipsum erat id risus. Integer
finibus nisl vel risus interdum maximus. Cras id nulla ut arcu lacinia aliquet sit amet at arcu. Vestibulum scelerisque velit imperdiet leo aliquet, ultricies accumsan turpis faucibus. Cras pulvinar tempus ipsum, et tempor sapien bibendum semper.
Morbi bibendum placerat nisl.</p>
<p>Etiam placerat libero neque, ac imperdiet orci rutrum auctor. Morbi nec commodo justo. Fusce diam lorem, molestie vitae tortor id, vulputate lobortis urna. Aliquam id mauris ligula. Ut posuere tellus ac laoreet pellentesque. Phasellus mollis, felis
sit amet bibendum condimentum, dui risus feugiat quam, ac porttitor dolor mi non mauris. Duis commodo imperdiet tortor, id consequat dolor. Nullam non ullamcorper tellus, eget aliquam nisl. Nunc sed purus eget elit efficitur ornare blandit ut nunc.
Nam finibus iaculis ante, ut suscipit massa venenatis sed. Nullam porta, arcu vitae eleifend gravida, diam orci vulputate magna, in lacinia odio odio non tellus. Duis pretium eget diam vitae auctor. Aliquam cursus urna leo, ac vehicula quam posuere
ac. Etiam in quam justo.</p>
<p>Nullam dictum gravida orci, quis mollis tortor placerat at. Mauris justo diam, iaculis quis maximus vitae, tincidunt et nisl. Nullam venenatis eros risus, a facilisis elit tincidunt dictum. Suspendisse mi elit, lacinia vel elit lobortis, gravida pharetra
dolor. Curabitur quis tincidunt diam. Nulla ligula eros, viverra eu nisi et, suscipit blandit sem. Nullam egestas ante vitae quam hendrerit, quis vestibulum nibh sodales. Quisque in dolor viverra, condimentum tortor ut, bibendum ante. Fusce commodo
mi vel fringilla vehicula. Aliquam mauris leo, feugiat eu varius nec, ornare vel nibh.</p>
</body>
</html>
I am fairly new to javascript in web design and can't seem to figure out even after quite a bit of research how to properly get my navigation menu to slidetoggle and push the content below it up and down. Ideally, if I could get some help on getting the menu to appear as wide as the container below it so things look even that would be great.
I don't have the slideToggle code in the jsfiddle, but here is one of the things i tried:
$("#menu-button").click(function() {
$("a").slideToggle(1000);
});
Here is the fiddle of the current setup of my code: https://jsfiddle.net/3uag19p1/18/
I updated for you the structure of html. You need to place #menu-button outside to make sure it always visible
<a id="menu-button" href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
<nav class="site-navigation" id="myTopnav">
Home
Business
Background
Info
Login
</nav>
And for the problem with slidetoggle and push the content below it up and down, you just use position: absolute. Don't add position for .site-navigation a. This will make the position go wrong.
.site-navigation {
position: absolute;
right: -100px;
top: 100px;
transition: all 0.3s;
width: 100px;
}
.site-navigation.responsive {
right: 51px;
}
Use overflow-x: hidden to hide the menu to make sure we don't have scroll to see this menu
#page {
height: 100%;
background-color: #1c222b;
overflow-x: hidden;
}
I added animation to make this go smoothly
Here is the fiddle
You should change the structure of the HTML to this:
<body id="page">
<div id="wrapper">
<header id="masthead">
<div class="container header-container">
<div class="site-branding">
<h1 class="site-title">
Logo
</h1>
</div>
<nav class="site-navigation" id="myTopnav">
Home
Business
Background
Info
Login
</nav>
<a id="menu-button" href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
</div>
</header>
<div id="content">
<main class="container content-padding">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sem nibh, porttitor quis interdum sed, eleifend non eros. Quisque vitae augue mi. Etiam eget ligula volutpat purus dictum porttitor. Cras eleifend quam sit amet venenatis finibus. Aliquam sagittis lacus quis aliquet consequat. Pellentesque sed placerat sem, eu auctor enim. Curabitur ante lorem, ornare eget bibendum vitae, posuere at tortor. Etiam sit amet neque in nulla molestie rutrum sed ac urna. Vivamus enim tellus, interdum a eleifend at, laoreet in nisl. Etiam condimentum, arcu id lobortis tempus, justo turpis varius nisi, a mollis nulla risus et augue. Donec rutrum, erat in aliquet eleifend, leo risus imperdiet velit, ut feugiat lacus nulla iaculis orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam eu odio sem. Aliquam id ullamcorper dolor, quis dapibus lacus. Fusce eu lorem ac ipsum condimentum pellentesque a et velit.</p>
</main>
</div>
</div>
</body>
Then style the menu button so that it appears on the right side of the page:
#menu-button {
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
}
To make the menu appear as wide as the container, make the width to 100%:
.site-navigation {
float: right;
width: 100%;
}
Preview it here: JSFiddle
I have a <div>. In it, there is a <p> that on the screen looks like the picture below
I need to have the horizontal rules under each line of the paragraph (horizontal rules marked in red in the picture). The most important thing is that the horizontal rules should take the whole width of the parent <div> so text-decoration: underline won't work here. I drew the lines using repeating linear gradient like this
p.text--underline {
line-height: 1.45;
background: repeating-linear-gradient(
to bottom,
transparent calc(1.5em - 1.5px),
black 1.5em,
transparent 1.5em,
transparent calc(3em - 1.5px)
);
box-shadow: inset 0 0.5em white;
}
But the problem is that the horizontal rules are visible in the browsers, but are not visible when printing. I need them to be visible on paper. How to do this?
You can wrap each word with <span> and draw lines with border of each word's :after. You will need to add some JavaScript if the text inside <p> is not fully under your control and you can't wrap words with spans on the server.
var p = document.querySelector('p');
var words = p.textContent.split(/\s+/gm);
p.classList.add('container');
p.innerHTML = words.map(function(w) {
return '<span class="word">' + w + '</span>';
}).join('\n');
.container {
position: relative;
}
.word:after {
content: '';
display: block;
position: absolute;
left: 0;
width: 100%;
border-bottom: 1px solid black;
}
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam blandit diam justo, in vulputate massa sodales egestas. Aenean luctus sapien eleifend ipsum venenatis, nec pharetra sem congue. Quisque nec sem leo. Donec posuere nibh ut nibh vehicula, ut hendrerit mi sollicitudin. Proin sed sapien vel sem ultrices euismod eget quis urna. Nulla facilisi. Sed eu mi ac nulla consequat lobortis ac ac elit. Mauris sit amet ante ac ante pulvinar ultricies a ut ante. Suspendisse metus nulla, porttitor et augue quis, consectetur fermentum lorem. Phasellus metus est, ultrices quis enim porta, facilisis cursus ante. Ut justo quam, suscipit nec facilisis eget, elementum ac lectus. Nulla at auctor ipsum.</p>
</div>
Plunker: https://plnkr.co/edit/tJfLhixTTJ53FVe10ugw?p=preview
I've tested in Chrome, Firefox and Safari, and it worked fine in all of them.
you should check this
You can make an HR that's printable without changing browser settings like this:
hr {
display: block;
height: 1px;
background: transparent;
width: 100%;
border: none;
border-top: solid 1px #aaa;
}
This is giving me a major headache. Here's my code:
This section of the page is laid out using a single .php file and some CSS + php to create 3 'panels' that display in a block element and navigate around as though they are 3 different pages, when really they're just different chunks of the page being moved. The navigation is 3 simple a href links with a span tag thrown in to contain the text. The problem is that I need to change the color of that span text when that particular "tab" is active. Note, I am not talking about the css function a:active or anything like that. I need the text to alternate between 3 separate colors. Color 1 for the no activity state: "product-reservation-btn-1" is this color unless > Color 2 is the :hover state, which is currently working, but finally Color 3 is the active state where "$css_step_2_tab" is the currently selected tab, the span text becomes Color 3 until another tab is selected. Any ideas? This is driving me nutty!
CSS:
#product-reservation-steps a span{
text-align:center;
color:#ffffff;
font-family: 'latoregular','arial','serif';
font-size:1.8em;
line-height:48px;
text-decoration:none;
color: #b6b7b7;
}
#product-reservation-steps a span:hover {
color: #f19c23;
}
#product-reservation-step-1-btn{
display:block;
position:absolute;
top:0;
left:5;
z-index:1;
width:300px;
height:48px;
text-align:center;
text-decoration:none;
}
#product-reservation-step-1-btn.active{
font-style: oblique;
}
#product-reservation-step-1-btn:hover{
text-decoration:none;
}
#product-reservation-step-2-btn{
display:block;
position:absolute;
top:0;
left: 320px;
z-index: 2;
width: 278px;
height:48px;
text-align:center;
text-decoration:none;
}
#product-reservation-step-2-btn.active{
font-style: oblique;
}
#product-reservation-step-2-btn:hover{
text-decoration:none;
}
#product-reservation-step-3-btn{
display:block;
position:absolute;
top:0;
left:573px;
z-index:1;
width:300px;
height:48px;
text-align:center;
text-decoration:none;
}
#product-reservation-step-3-btn.active{
font-style: oblique;
}
#product-reservation-step-3-btn:hover{
text-decoration:none;
}
HTML:
<!-- begin steps -->
<?php
// default step to open on load
$css_step_1_tab = '';
$css_step_2_tab = '';
$css_step_3_tab = '';
$css_step_1_panel = 'style="display:none;"';
$css_step_2_panel = 'style="display:none;"';
$css_step_3_panel = 'style="display:none;"';
switch($_GET["step"]){
case 3:
$css_step_3_tab = 'class="active"';
$css_step_3_panel = 'style="display:block;"';
break;
case 2:
$css_step_2_tab = 'class="active"';
$css_step_2_panel = 'style="display:block;"';
break;
case 1:
default:
$css_step_1_tab = 'class="active"';
$css_step_1_panel = 'style="display:block;"';
break;
}
?>
<div id="product-reservation-steps">
<a href="javascript:picturebooth_step(1);" id="product-reservation-step-1-btn" <?php echo $css_step_1_tab; ?>><span>Customize your booth</span></a>
<div id="arrow-left"><img src="<?php echo get_template_directory_uri(); ?>/images/arrow-right.png" /></div>
<a href="javascript:picturebooth_step(2);" id="product-reservation-step-2-btn" <?php echo $css_step_2_tab; ?>><span>Billing & Shipping</span></a>
<div id="arrow-right"><img src="<?php echo get_template_directory_uri(); ?>/images/arrow-right.png" /></div>
<a href="javascript:picturebooth_step(3);" id="product-reservation-step-3-btn" <?php echo $css_step_3_tab; ?>><span>Confirmation</span></a>
<div style="clear:both;"></div>
</div>
<!-- end steps -->
Javascript: This is all I can give you without giving away the company name and breaking my nda. This chunk adds the 'active' class to the id "product-reservation-step-btn" depending on which button is active. However, passing a simple css color: #8bcc3b; parameter to the element to change the text color. Nor does creating a #product-reservation-steps a span.active CSS chunk and passing it the color I want for the active state.
// reset tabs and divs
for(i=1 ; i<=total_steps ; i++){
$('#product-reservation-step-'+i).hide();
if($('#product-reservation-step-'+i+'-btn').hasClass("active")){
$('#product-reservation-step-'+i+'-btn').removeClass("active");
}
}
$('#product-reservation-step-'+step).fadeIn("fast");
$('#product-reservation-step-'+step+'-btn').addClass("active");
Any help, advice, or suggestions are deeply appreciated!
I have been messing around for ages to help you, so here is my fiddle, the one i worked on before this (heavily edited), was created to improve your UI and compact your html/css.
This is the new CSS, with some cool "prefix" selectors:
#product-reservation-steps a{
text-align:center;
font-family: 'latoregular','arial','serif';
font-size:1.8em;
line-height:48px;
text-decoration:none;
color: #b6b7b7;
}
#product-reservation-steps a:hover {
color: #f19c23;
}
[id^="product-reservation-step-"] {
/* could all this maybe go into '#product-reservation-steps a' ? */
display:block;
position:absolute;
top:0;
}
[id^="product-reservation-step-"].active{
/* this is how you select prefixes: */
/* element[attribute^="first part of the attribute value"] */
font-style: oblique;
color:red;
}
[id^="product-reservation-step-"]:hover{
text-decoration:none;
}
#product-reservation-step-1-btn{
left:5;
z-index:1;
width:300px;
}
#product-reservation-step-2-btn{
left: 320px;
z-index: 2;
width: 278px;
}
#product-reservation-step-3-btn{
left:573px;
z-index:1;
width:300px;
}
I edited the javascript, it may or may not help...
// reset tabs and divs
var prodres = '#product-reservation-step-';
var btn = '-btn';
for (i = 1; i <= total_steps; i++)
{
//$("a[class|='product-reservation-step-']").click(function()
//{
$(prodres + i + btn).hide();
if ($(prodres + i).hasClass("active"))
{
$(prodres + i + btn).removeClass("active");
}
else
{
$(prodres + step).fadeIn("fast");
$(prodres + step + btn).addClass("active");
//}
}
}
Try validating your script on the dirtymarkup site
this:
a[class|='product-reservation-step-']
is how you select objects by their prefix, thought it might help.
Also turned the refrences into variables, which should make things easier.
Also, have you tried using :focus ? This wont stay once the mouse is clicked somewhere else or the tab key is pressed though...
This is from W3Schools:
input:focus
{
background-color:yellow;
}
<p>Click inside the text fields to see a yellow background:</p>
<form>
First name: <input type="text" name="firstname" /><br>
Last name: <input type="text" name="lastname" />
</form>
Although this may not help, I made something similar this a while ago:
http://leeli.co.uk/bengoddard/demos/ovalistic/
This is from http://jqueryui.com/tabs/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
</body>
</html>
...May be your easiest solution...
Back again! Try this... alot simpler than I thought it'd be!
jQuery:
$('#menu li a').click(function(){
$('#menu li a').removeClass('selected'); // remove selected from any other item first
$(this).addClass('selected'); //add selected to the one just clicked.
});
CSS:
a {
font-size: 24px;
color: blue;
font-family: 'Open Sans';
}
a:hover {
font-weight: bolder;
color: blue;
}
a:link {
color: red;
}
a:visited {
color: grey;
}
a:active {
color: #90EE90;
transition: color .03s .0s linear;
}
.selected {
border: solid 1px #000;
color: orange;
}
.selected span {
color: #FF0;
}
http://jsfiddle.net/benji/9Qxdz/25/
http://jsfiddle.net/benji/xcbGh/8/
I want to have a div that contains two other divs, a top div and a bottom div. The top div should be aligned to the top and have a auto-height, which depends on the content of the top div. The bottom div should fill out the empty area of the parent div.
I would like to make the alignment only with the use of CSS. I don't want to calc any positions or sizes by myself.
I tried the following:
1) http://jsfiddle.net/2dUxa/
Problem: If the parent is resized the bottom-div should move some pixels downwards.
2) http://jsfiddle.net/Th4Mn/
Problem: If the parent is resized the bottom-div should become smaller.
A solution with the use of javascript might look like this: http://jsfiddle.net/2dUxa/7/
Is theire a solution without the use of javascript?
Well, how about this: http://jsfiddle.net/2dUxa/3/
I change both div to position: relative, and give the bottom a height: 100%.
Then, set the #main overflow: hidden;
Use this below markup and css..
This is with your code check this and below is my code
<div id="main">
<header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis congue auctor. Proin iaculis blandit erat, nec vestibulum orci ultricies eget. Suspendisse viverra posuere urna, eu eleifend leo imperdiet at. Nulla lobortis, erat elementum placerat sagittis, est tellus hendrerit quam, quis iaculis leo est et mi.</p>
</header>
<footer>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis congue auctor. Proin iaculis blandit erat, nec vestibulum orci ultricies eget. Suspendisse viverra posuere urna, eu eleifend leo imperdiet at. Nulla lobortis, erat elementum placerat sagittis, est tellus hendrerit quam, quis iaculis leo est et mi.</p>
</footer>
</div>
#main{
width:80%;
height:300px;
position:relative;
background:#ddd;
}
header{
width:100%;
height:auto;
position:absolute;
top:0;
left:0;
background:#aaa;
}
footer{
width:100%;
height:auto;
position:absolute;
bottom:0;
left:0;
background:#777;
}
Check here running code...