I have a menu on the left side of my page and the content on the rest of the page. I have a dark, textured background so I want a semi-transparent background for the leftmenu div and a semi-transparent background for the content div. However, it seems like the body div is overlapping the menu div and stacking its transparency and also making the content of the menu div transparent.
I would rather have a space between the two sections. Could someone take a look at my code and offer a suggestion?
I have some code listed below but take a look at the jsfiddle to get the full picture.
http://jsfiddle.net/5xmze/ (Note, the links should be the same color as the header)
CSS:
#body{
padding-left:2px;
width: 85%;
position: relative;
background-color:rgba(0,0,0,0.6);
}
#leftside {
float: left;
width: 15%;
height: 100%;
}
HTML:
<div><span id="leftside">
<ul class="leftmenu">
<li class="leftmenu">Home</li>
<li class="leftmenu">Projects</li>
<li class="leftmenu">Resume</li>
<li class="leftmenu">Contact</li>
</ul></span>
</div>
<div id="body">
Content here...
</div>
Here's what I'm attempting to accomplish:
The best way would be to put the menu, and the body into the same parent div, then float:left; the body so it shows up beside the menu.
Don't forget to set a width to both elements, because if #body's width is bigger than space available on the page, it will show up under the menu.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready( function(){
$(window).resize( function() {
var s = $("body").width();
$("body").css({ "min-width":s+"px" });
});
});
</script>
<style>
/* style.css */
body {
font-size: 1em;
background-image:url('http://i1358.photobucket.com/albums/q764/kenny_johnson5/blackorchid_zpsc8d78a87.png');
color:#FFF;
font-family:Arial;
width:85%;
margin-left:16%;
}
h1 {
font-family:Cambria,Serif;
color:#81E500;
text-align:center;
}
#top{
width: 85%;
position: relative;
}
#body{
padding-left:90px;
width: 85%;
position: relative;
background-color:rgba(0,0,0,0.6);
}
a {
color:#81E500;
font-family:Cambria,Serif;
font-size:1.5em;
}
#leftside {
float: left;
width: 15%;
height: 100%;
margin-left:-15%;
z-index:999;
}
ul.leftmenu {
list-style-type:none;
margin:0px;
padding:1px;
background-color:rgba(0,0,0,0.6);
border: 1px solid;
border-color:#000;
height:100%;
}
li.leftmenu {
padding:5px;
}
</style>
<html>
<div><div id="leftside">
<ul class="leftmenu">
<li class="leftmenu">Home</li>
<li class="leftmenu">Projects</li>
<li class="leftmenu">Resume</li>
<li class="leftmenu">Contact</li>
</ul></div>
</div>
<div id="body">
<div id="top">
<h1>Header</h1>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt erat sit amet dolor imperdiet dignissim. Nunc eu enim erat. Suspendisse commodo faucibus risus at facilisis. Phasellus tortor urna, fringilla sed blandit non, porta vel enim. Vivamus placerat, risus et molestie elementum, risus elit dignissim elit, non porttitor nisl tortor sed lorem. Maecenas scelerisque mattis massa, vel blandit erat blandit sed. Vivamus erat augue, varius ac aliquet non, commodo id massa. Maecenas sit amet est posuere turpis ultrices aliquam. Nulla feugiat ultrices diam vitae egestas. Phasellus risus augue, dapibus nec condimentum non, tempus eu massa. Etiam sodales sodales dolor eu convallis.
</p>
<p>
Aenean in dignissim metus. Suspendisse placerat pharetra justo, et tristique neque vestibulum non. Quisque malesuada scelerisque diam eget suscipit. Donec non sollicitudin justo. Etiam sit amet massa felis. Maecenas aliquet cursus tristique. Etiam sollicitudin augue in risus venenatis rhoncus. Pellentesque tellus diam, porttitor in dapibus eu, rutrum eu lectus. Vestibulum luctus hendrerit augue vitae interdum. Donec in turpis malesuada arcu tempor placerat. Aliquam eget nisl ipsum. Cras blandit elementum vulputate. Ut vulputate ullamcorper urna, quis congue mauris laoreet nec. Morbi vitae dui eros.
</p>
<p>
Phasellus rhoncus ultrices sem et dictum. Ut ut nisl eget eros porttitor commodo auctor vitae leo. Quisque sed nulla augue, vel venenatis augue. Pellentesque bibendum sodales lectus, quis malesuada risus consectetur a. Aliquam lobortis aliquet vulputate. Duis sed velit est, in venenatis est. Vivamus viverra lacinia sapien non sodales. Aenean eleifend quam diam, id gravida tellus. Praesent dui sem, volutpat eu blandit in, volutpat ornare nulla. Nunc sed eros dolor.
</p>
<p>
Quisque sit amet diam nisl, volutpat interdum arcu. Proin et justo lorem. Mauris vitae egestas lacus. Nullam ut laoreet turpis. Donec eget metus enim, id porta orci. Nam condimentum feugiat tempor. Nunc ultricies pellentesque euismod. In hac habitasse platea dictumst. Etiam fringilla bibendum sapien, eu vestibulum nisi imperdiet tempus. Duis tincidunt magna id sapien porta vel aliquam massa tincidunt. Maecenas ut metus id augue congue scelerisque id nec enim. Ut ac nibh est, et laoreet orci. Nulla fermentum laoreet augue, in vulputate risus varius vel. Sed ac nunc quis tortor scelerisque rutrum.
</p>
<p>
Nullam adipiscing ultricies lacus ac pretium. In hac habitasse platea dictumst. Nullam convallis libero non augue sollicitudin mattis. Nunc commodo pharetra magna, tempor sagittis sem vehicula nec. Quisque massa ligula, gravida nec fringilla quis, tempus vel dolor. Nam et sem bibendum mi consectetur tincidunt. Nam placerat venenatis odio sit amet imperdiet. Integer luctus quam quis quam lobortis aliquam. Cras dignissim semper erat, ac laoreet leo volutpat quis. </p>
</div>
</body>
</html>
Related
I want to do all the following by jQuery and my HTML as well as CSS is below.
The paragraphs start hidden.
The paragraphs show and hide when their headings are clicked.
This process should take 3 seconds.
Mousing over the paragraph will reverse the colours of the text and background.
Mousing out will switch the colours back to their original values
jQuery(document).ready(function () {
jQuery('.contentBox').css('display', 'none');//SELECT BY CLASS
$('h2').click(function(){
$(this).next('p').slideToggle();
});
});
body {
background: tan;
}
h1 {
margin-left: 150px;
}
h2 {
margin-bottom: 2px;
padding: 3px 0 2px 25px;
background: #D99E50;
}
p {
margin-top: 0;
padding-top: 0;
}
#mainContain {
background: #523C1E;
width: 80%;
margin: 0 auto;
padding: 30px 0;
}
.contentBox {
background: #524737;
/*Paragraph background color*/
padding: 15px;
color: #FFE5C3;
/*Paragraph font colour*/
}
/*Text Panel Styling*/
.panelContainer {
background: #523C1E;
width: 80%;
margin: 0 auto;
}
<!doctype html>
<html lang="en">
<head>
<!--ADD jQUERY FIRST!-->
<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="lab10-1-jquery.js"></script>
<link rel="stylesheet" href="lab10-1-jquery.css" />
<meta charset="utf-8" />
<title>jQuery FAQ Page</title>
</head>
<body>
<h1 id="headTitle">Frequently Asked Questions</h1>
<div id="mainContain">
<!--MAIN CONTENT CONTAINER-->
<div class="panelContainer">
<!-- 1ST PANEL-->
<h2 id="h21">Do I need a website?</h2>
<p class="contentBox">Morbi hendrerit accumsan orci, tristique aliquam nunc suscipit nec. Vestibulum
consequat ornare nunc, ac tristique urna cursus id. Cras eu viverra leo, vitae rhoncus dui. Vestibulum
rutrum neque ac risus eleifend luctus. Phasellus ultrices, enim quis dignissim tempus, nibh sem faucibus
nisi, at blandit velit massa in nunc. Praesent enim libero, blandit sed massa ut, imperdiet dictum odio.
Maecenas sagittis neque a est porta, at feugiat nulla tempor. Cras vitae tincidunt quam, non interdum
quam. Sed imperdiet lacus nibh, eget viverra eros porta ut. Nulla sed tellus velit. Nullam quam dolor,
malesuada eget bibendum a, lacinia ac ante.</p>
</div>
<div class="panelContainer">
<!-- 2ND PANEL-->
<h2>What is SEO?</h2>
<p class="contentBox">Aliquam felis orci, varius nec facilisis nec, eleifend ac ante. Donec ligula est,
dapibus sed volutpat sit amet, pellentesque id sem. Vestibulum imperdiet volutpat dignissim. Morbi
tincidunt lobortis libero et placerat. Pellentesque dignissim diam laoreet, ultricies ligula aliquam,
consectetur sapien. Praesent luctus orci in vulputate tincidunt. Aenean fermentum ante non elementum
convallis. Sed eget magna enim.</p>
</div>
<div class="panelContainer">
<!-- 3RD PANEL-->
<h2>What is a content management system?</h2>
<p class="contentBox">Morbi hendrerit accumsan orci, tristique aliquam nunc suscipit nec. Vestibulum
consequat ornare nunc, ac tristique urna cursus id. Cras eu viverra leo, vitae rhoncus dui. Vestibulum
rutrum neque ac risus eleifend luctus. Phasellus ultrices, enim quis dignissim tempus, nibh sem faucibus
nisi, at blandit velit massa in nunc. Praesent enim libero, blandit sed massa ut, imperdiet dictum odio.
Maecenas sagittis neque a est porta, at feugiat nulla tempor. Cras vitae tincidunt quam, non interdum
quam. Sed imperdiet lacus nibh, eget viverra eros porta ut. Nulla sed tellus velit. Nullam quam dolor,
malesuada eget bibendum a, lacinia ac ante.</p>
</div>
<div class="panelContainer">
<!-- 4TH PANEL-->
<h2>Do I need a blog?</h2>
<p class="contentBox">Aliquam felis orci, varius nec facilisis nec, eleifend ac ante. Donec ligula est,
dapibus sed volutpat sit amet, pellentesque id sem. Vestibulum imperdiet volutpat dignissim. Morbi
tincidunt lobortis libero et placerat. Pellentesque dignissim diam laoreet, ultricies ligula aliquam,
consectetur sapien. Praesent luctus orci in vulputate tincidunt. Aenean fermentum ante non elementum
convallis. Sed eget magna enim.</p>
</div>
</div>
<!--END mainContain-->
</body>
</html>
While you seem to have achieved points 1 and 2 already, the easiest way to achieve points 3-5 is as follows, with explanatory code in the comments:
jQuery(document).ready(function() {
jQuery('.contentBox').css('display', 'none');
$('h2').click(function() {
$(this).next('p')
// to address point 3: here we supply a 'duration' argument
// of 3000; this is in milliseconds, so this is equal to 3 seconds:
.slideToggle(3000);
});
});
// caching the values as CSS custom properties
// you wish to use as the color, and background-
// color, of the p.contentBox elements:
:root {
--color: #FFE5C3;
--bgColor: #524737;
}
body {
background: tan;
}
h1 {
margin-left: 150px;
}
h2 {
margin-bottom: 2px;
padding: 3px 0 2px 25px;
background: #D99E50;
}
p {
margin-top: 0;
padding-top: 0;
}
#mainContain {
background: #523C1E;
width: 80%;
margin: 0 auto;
padding: 30px 0;
}
.contentBox {
/* to address point 5 (and point 4), here we set
the default color of the element(s), using the
CSS var() function to supply thevalue held in
the named custom property: */
background-color: var(--bgColor);
/* And again: */
color: var(--color);
padding: 15px;
}
.contentBox:hover {
/* for point 4: here we do the same, yet again, but
reverse the properties, so the color is now set
to the color of the '--bgColor' custom property: */
color: var(--bgColor);
/* ...and the background-color is set to the value
of the '--color' custom property: */
background-color: var(--color);
}
/*Text Panel Styling*/
.panelContainer {
background: #523C1E;
width: 80%;
margin: 0 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="headTitle">Frequently Asked Questions</h1>
<div id="mainContain">
<!--MAIN CONTENT CONTAINER-->
<div class="panelContainer">
<!-- 1ST PANEL-->
<h2 id="h21">Do I need a website?</h2>
<p class="contentBox">Morbi hendrerit accumsan orci, tristique aliquam nunc suscipit nec. Vestibulum consequat ornare nunc, ac tristique urna cursus id. Cras eu viverra leo, vitae rhoncus dui. Vestibulum rutrum neque ac risus eleifend luctus. Phasellus ultrices, enim quis dignissim tempus, nibh sem faucibus nisi, at blandit velit massa in nunc. Praesent enim libero, blandit sed massa ut, imperdiet dictum odio. Maecenas sagittis neque a est porta, at feugiat nulla tempor. Cras vitae tincidunt quam, non interdum quam. Sed imperdiet lacus nibh, eget viverra eros porta ut. Nulla sed tellus velit. Nullam quam dolor, malesuada eget bibendum a, lacinia ac ante.</p>
</div>
<div class="panelContainer">
<!-- 2ND PANEL-->
<h2>What is SEO?</h2>
<p class="contentBox">Aliquam felis orci, varius nec facilisis nec, eleifend ac ante. Donec ligula est, dapibus sed volutpat sit amet, pellentesque id sem. Vestibulum imperdiet volutpat dignissim. Morbi tincidunt lobortis libero et placerat. Pellentesque dignissim diam laoreet, ultricies ligula aliquam, consectetur sapien. Praesent luctus orci in vulputate tincidunt. Aenean fermentum ante non elementum convallis. Sed eget magna enim.</p>
</div>
<div class="panelContainer">
<!-- 3RD PANEL-->
<h2>What is a content management system?</h2>
<p class="contentBox">Morbi hendrerit accumsan orci, tristique aliquam nunc suscipit nec. Vestibulum consequat ornare nunc, ac tristique urna cursus id. Cras eu viverra leo, vitae rhoncus dui. Vestibulum rutrum neque ac risus eleifend luctus. Phasellus ultrices, enim quis dignissim tempus, nibh sem faucibus nisi, at blandit velit massa in nunc. Praesent enim libero, blandit sed massa ut, imperdiet dictum odio. Maecenas sagittis neque a est porta, at feugiat nulla tempor. Cras vitae tincidunt quam, non interdum quam. Sed imperdiet lacus nibh, eget viverra eros porta ut. Nulla sed tellus velit. Nullam quam dolor, malesuada eget bibendum a, lacinia ac ante.</p>
</div>
<div class="panelContainer">
<!-- 4TH PANEL-->
<h2>Do I need a blog?</h2>
<p class="contentBox">Aliquam felis orci, varius nec facilisis nec, eleifend ac ante. Donec ligula est, dapibus sed volutpat sit amet, pellentesque id sem. Vestibulum imperdiet volutpat dignissim. Morbi tincidunt lobortis libero et placerat. Pellentesque dignissim diam laoreet, ultricies ligula aliquam, consectetur sapien. Praesent luctus orci in vulputate tincidunt. Aenean fermentum ante non elementum convallis. Sed eget magna enim.</p>
</div>
</div>
JS Fiddle.
It's worth noting that a 3000ms animation is slow, and may be perceived as a lack of responsiveness in your site. This may, or may not, be a problem for you but it's worth testing with your users. My personal inclination is to animate for around 0.4s (400ms), but my use-cases may not reflect your own.
References:
CSS:
:root.
CSS custom properties.
var().
jQuery:
slideToggle().
To have the slide toggle animation take 3 seconds provide an argument to slideToggle() which is the number of milliseconds the animation should take. In this case, 3000, but note that this is very slow. I'd suggest that you shouldn't make effects last longer than around 500ms.
To have the p styling change on mouse hover, use the :hover pseudo selector in your CSS.
In addition, it's better practice to always use CSS to hide content which should not be visible when the page loads. This is in order to avoid a FOUC, which can happen due to JS running after the DOM has fully loaded and been rendered to the screen.
jQuery($ => {
$('h2').on('click', e => $(e.target).next('p').slideToggle(3000));
});
body {
background: tan;
}
h1 {
margin-left: 150px;
}
h2 {
margin-bottom: 2px;
padding: 3px 0 2px 25px;
background: #D99E50;
}
p {
margin-top: 0;
padding-top: 0;
}
#mainContain {
background: #523C1E;
width: 80%;
margin: 0 auto;
padding: 30px 0;
}
.contentBox {
display: none;
background: #524737;
padding: 15px;
color: #FFE5C3;
}
.contentBox:hover {
background: #FFE5C3;
color: #524737;
}
.panelContainer {
background: #523C1E;
width: 80%;
margin: 0 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<h1 id="headTitle">Frequently Asked Questions</h1>
<div id="mainContain">
<div class="panelContainer">
<h2 id="h21">Do I need a website?</h2>
<p class="contentBox">Morbi hendrerit accumsan orci, tristique aliquam nunc suscipit nec. Vestibulum consequat ornare nunc, ac tristique urna cursus id. Cras eu viverra leo, vitae rhoncus dui. Vestibulum rutrum neque ac risus eleifend luctus. Phasellus ultrices, enim quis
dignissim tempus, nibh sem faucibus nisi, at blandit velit massa in nunc. Praesent enim libero, blandit sed massa ut, imperdiet dictum odio. Maecenas sagittis neque a est porta, at feugiat nulla tempor. Cras vitae tincidunt quam, non interdum quam.
Sed imperdiet lacus nibh, eget viverra eros porta ut. Nulla sed tellus velit. Nullam quam dolor, malesuada eget bibendum a, lacinia ac ante.</p>
</div>
<div class="panelContainer">
<h2>What is SEO?</h2>
<p class="contentBox">Aliquam felis orci, varius nec facilisis nec, eleifend ac ante. Donec ligula est, dapibus sed volutpat sit amet, pellentesque id sem. Vestibulum imperdiet volutpat dignissim. Morbi tincidunt lobortis libero et placerat. Pellentesque dignissim diam
laoreet, ultricies ligula aliquam, consectetur sapien. Praesent luctus orci in vulputate tincidunt. Aenean fermentum ante non elementum convallis. Sed eget magna enim.</p>
</div>
<div class="panelContainer">
<h2>What is a content management system?</h2>
<p class="contentBox">Morbi hendrerit accumsan orci, tristique aliquam nunc suscipit nec. Vestibulum consequat ornare nunc, ac tristique urna cursus id. Cras eu viverra leo, vitae rhoncus dui. Vestibulum rutrum neque ac risus eleifend luctus. Phasellus ultrices, enim quis
dignissim tempus, nibh sem faucibus nisi, at blandit velit massa in nunc. Praesent enim libero, blandit sed massa ut, imperdiet dictum odio. Maecenas sagittis neque a est porta, at feugiat nulla tempor. Cras vitae tincidunt quam, non interdum quam.
Sed imperdiet lacus nibh, eget viverra eros porta ut. Nulla sed tellus velit. Nullam quam dolor, malesuada eget bibendum a, lacinia ac ante.</p>
</div>
<div class="panelContainer">
<h2>Do I need a blog?</h2>
<p class="contentBox">Aliquam felis orci, varius nec facilisis nec, eleifend ac ante. Donec ligula est, dapibus sed volutpat sit amet, pellentesque id sem. Vestibulum imperdiet volutpat dignissim. Morbi tincidunt lobortis libero et placerat. Pellentesque dignissim diam
laoreet, ultricies ligula aliquam, consectetur sapien. Praesent luctus orci in vulputate tincidunt. Aenean fermentum ante non elementum convallis. Sed eget magna enim.</p>
</div>
</div>
Here is the solution based on your all requirements:
$(document).ready(function () {
$(".contentBox").css("display","none");
//click event
$("h2").click(function () {
$(this).next(".contentBox").slideToggle(3000);
});
//hover effect
$(".contentBox").hover(
function () {
$(this).addClass("textHovered");
},
function () {
$(this).removeClass("textHovered");
}
);
});
body {
background: tan;
}
h1 {
margin-left: 150px;
}
h2 {
margin-bottom: 2px;
padding: 3px 0 2px 25px;
background: #D99E50;
}
p {
margin-top: 0;
padding-top: 0;
}
#mainContain {
background: #523C1E;
width: 80%;
margin: 0 auto;
padding: 30px 0;
}
.contentBox {
display: none;
background: #524737;
padding: 15px;
color: #FFE5C3;
}
.textHovered {
background: #FFE5C3;
color: #524737;
}
.panelContainer {
background: #523C1E;
width: 80%;
margin: 0 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<h1 id="headTitle">Frequently Asked Questions</h1>
<div id="mainContain">
<div class="panelContainer">
<h2 id="h21">Do I need a website?</h2>
<p class="contentBox">Morbi hendrerit accumsan orci, tristique aliquam nunc suscipit nec. Vestibulum consequat ornare nunc, ac tristique urna cursus id. Cras eu viverra leo, vitae rhoncus dui. Vestibulum rutrum neque ac risus eleifend luctus. Phasellus ultrices, enim quis
dignissim tempus, nibh sem faucibus nisi, at blandit velit massa in nunc. Praesent enim libero, blandit sed massa ut, imperdiet dictum odio. Maecenas sagittis neque a est porta, at feugiat nulla tempor. Cras vitae tincidunt quam, non interdum quam.
Sed imperdiet lacus nibh, eget viverra eros porta ut. Nulla sed tellus velit. Nullam quam dolor, malesuada eget bibendum a, lacinia ac ante.</p>
</div>
<div class="panelContainer">
<h2>What is SEO?</h2>
<p class="contentBox">Aliquam felis orci, varius nec facilisis nec, eleifend ac ante. Donec ligula est, dapibus sed volutpat sit amet, pellentesque id sem. Vestibulum imperdiet volutpat dignissim. Morbi tincidunt lobortis libero et placerat. Pellentesque dignissim diam
laoreet, ultricies ligula aliquam, consectetur sapien. Praesent luctus orci in vulputate tincidunt. Aenean fermentum ante non elementum convallis. Sed eget magna enim.</p>
</div>
<div class="panelContainer">
<h2>What is a content management system?</h2>
<p class="contentBox">Morbi hendrerit accumsan orci, tristique aliquam nunc suscipit nec. Vestibulum consequat ornare nunc, ac tristique urna cursus id. Cras eu viverra leo, vitae rhoncus dui. Vestibulum rutrum neque ac risus eleifend luctus. Phasellus ultrices, enim quis
dignissim tempus, nibh sem faucibus nisi, at blandit velit massa in nunc. Praesent enim libero, blandit sed massa ut, imperdiet dictum odio. Maecenas sagittis neque a est porta, at feugiat nulla tempor. Cras vitae tincidunt quam, non interdum quam.
Sed imperdiet lacus nibh, eget viverra eros porta ut. Nulla sed tellus velit. Nullam quam dolor, malesuada eget bibendum a, lacinia ac ante.</p>
</div>
<div class="panelContainer">
<h2>Do I need a blog?</h2>
<p class="contentBox">Aliquam felis orci, varius nec facilisis nec, eleifend ac ante. Donec ligula est, dapibus sed volutpat sit amet, pellentesque id sem. Vestibulum imperdiet volutpat dignissim. Morbi tincidunt lobortis libero et placerat. Pellentesque dignissim diam
laoreet, ultricies ligula aliquam, consectetur sapien. Praesent luctus orci in vulputate tincidunt. Aenean fermentum ante non elementum convallis. Sed eget magna enim.</p>
</div>
</div>
You can initially keep make paragraph hide by Hide() function in jquery and then by clicking on each heading use slidetoggle function for paragraph and use Next() to show paragraph of clicked heading.
to change background and font color, jusr use hover function and in that make background to font-color and vice versa.
For better interactivity if you wanted one paragraph to hide on click of another paragraph you can apply a slideUp to every paragraph and then open the required div.
$('h2').click(function () {
$('.contentBox').slideUp(3000);
$(this).next('.contentBox').slideDown(3000);
});
Not sure what is your error. I find an error when I Run code snippet:
Error: {
"message": "Uncaught ReferenceError: jQuery is not defined",
"filename": "https://stacksnippets.net/js",
"lineno": 117,
"colno": 9
}
If that is your issue, you can check the jquery files in your local or use:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
To meet your request, you can try
jQuery(document).ready(function () {
$(".contentBox").hide();
$("h2").click(function(){
$(this).next(".contentBox").fadeToggle(3000);
});
$("p").hover(
function(){
$('p').css('background', '#FFE5C3');
$('p').css('color', '#524737');
},
function(){
$('p').css('background', '#FFE5C3');
$('p').css('color', '#524737');
}
);
});
I have a fixed header at the top of my page, but when I scroll up the content text stays on top of my header. I want the content to go behind the header.
I have tried adjusting the margins and using z-index, but nothing has worked thus far.
.header {
position: fixed;
border-bottom: 1px solid #000000;
width: 90%;
z-index: 1000;
}
.main {
position: relative;
top: 140px;
z-index: 1;
}
<header class="header">
<img src="">
</header>
<div class="main">
<h1>Hello World!</h1>
</div>
Your code is working as intended. However, you forgot to set the background color of your header which means it is transparent.
I did a few modifications to your snippet to make it a bit more obvious from the snippet but the important CSS is the background colour.
.header {
position: fixed;
border-bottom: 1px solid #000000;
width: 90%;
z-index: 1000;
background: #fff;
top: 0; left: 0; right: 0;
width: 100%;
height: 50px;
}
.main {
position: relative;
top: 140px;
z-index: 1;
}
<header class="header">
<img src="">
</header>
<div class="main">
<h1>Hello World!</h1>
<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mattis tellus at magna vulputate, sed tempus arcu finibus. Fusce cursus aliquam posuere. Cras sodales dolor vitae massa eleifend bibendum. Nunc pulvinar dui quis hendrerit pulvinar. Nam interdum, justo non tristique hendrerit, leo nibh posuere diam, sed facilisis est mauris id libero. Suspendisse eget lectus augue. Fusce eget justo ut enim convallis ornare. Maecenas tincidunt dui non lectus elementum rhoncus. Nam sed porttitor turpis. Fusce sit amet urna quis tellus tempus tempus vehicula id tortor. Maecenas tincidunt sit amet eros a ultrices.
</p>
<p>
Vivamus pharetra eget tortor ac imperdiet. Nulla vitae mauris a mauris convallis ultricies at non arcu. Sed blandit turpis quis purus dapibus ornare. Cras ultricies dignissim lorem, sed viverra leo elementum eget. Ut condimentum a nunc in auctor. Pellentesque quis tortor blandit, tincidunt sem et, vestibulum sem. Pellentesque tincidunt ligula ac lectus suscipit dictum. Integer ante ex, pulvinar sit amet laoreet ac, lacinia vel nisl.
</p>
<p>
Cras lacinia at nibh ac placerat. Donec ut molestie felis. Quisque non rutrum diam, a laoreet risus. Maecenas vitae cursus massa, ut ultricies ante. Donec sed sem vel lorem luctus consequat. Integer efficitur pulvinar nulla sed malesuada. Curabitur sollicitudin, libero sit amet cursus pharetra, massa risus auctor neque, vel luctus nulla massa sit amet erat. Quisque at vestibulum nulla. Vestibulum porttitor augue nec placerat scelerisque. Nulla sed augue ac est venenatis viverra vitae non enim. Nulla facilisi. Ut tincidunt est nec volutpat vulputate.
</p>
<p>
Aenean quam risus, ornare et lacus eu, ultricies lobortis metus. Sed ut eleifend nisl. Vestibulum sed odio lobortis, eleifend ex ac, lacinia dui. Nullam sagittis varius sollicitudin. Vestibulum vel nisi diam. Aliquam nulla dolor, porta id ultricies eu, vulputate nec ipsum. Suspendisse porta lectus in augue egestas dictum. Nullam felis sapien, pulvinar quis felis non, ultrices accumsan dolor. Curabitur at diam mollis, porttitor orci ut, posuere nulla. Suspendisse nec sapien eros. Sed sit amet cursus est. Etiam ut lectus ut purus dictum ornare vitae eget lacus. Quisque rhoncus auctor sollicitudin. Nulla feugiat est sit amet tristique hendrerit.
</p>
<p>
Praesent vel enim vel est tincidunt aliquet. Nullam feugiat odio id ante consectetur commodo. Nam sagittis accumsan enim, non faucibus lacus lobortis sit amet. Aliquam tellus dui, volutpat sed gravida sit amet, tincidunt nec diam. Ut rhoncus facilisis tortor, et eleifend sem sagittis id. Maecenas sed odio felis. Donec eu iaculis metus. Integer dignissim volutpat lectus, id ultricies nisl hendrerit sit amet. Donec egestas gravida felis. Aenean blandit iaculis elit, nec luctus tortor luctus ut.
</p></div>
</div>
I am making a website in which I have a fixed position menu bar on the left side, a fixed position menu on the top and a scrolling area on the right for the main content of the page. The issue I am having is that the text scrolls over the top menu as such:
Before Scrolling:
After Scrolling
Here is my current code (home.php):
<style>
#heading{margin-top:50px;}
#left {
width: 20%;
height: 100%;
position: fixed;
margin-top:50px;
outline: 1px solid;
background-color:#D6EBEB
}
#right {
width: 80%;
height: auto;
padding-top:50px;
position: absolute;
right: 0;
}
</style>
<?php
//IncludeHeader
include_once 'includes/header.php';
?>
<div id="right">
<legend><h1 align="center" class="text-info" >Home Page</h1></legend>
<h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed ipsum porttitor, mollis diam sit amet, elementum enim. Nunc eleifend dui eu augue condimentum sollicitudin. Sed vel tristique lacus. Morbi rutrum dui at pellentesque blandit. Praesent congue, turpis eget luctus posuere, dui mi bibendum sem, vitae hendrerit purus lectus nec lorem. Cras non porttitor nulla. Praesent mollis nec urna ac laoreet. Curabitur at ipsum a ante iaculis fermentum. Sed ut sagittis velit, ac tincidunt purus. Suspendisse auctor mauris nibh, feugiat pretium felis ultrices quis. Sed rutrum finibus bibendum. Mauris sagittis leo at mollis efficitur. Cras eu finibus eros, nec accumsan lorem. Nulla consequat lacus quis massa sagittis egestas. Nam at orci pharetra, commodo nibh eget, venenatis dui. Donec orci tellus, egestas ut leo eget, accumsan hendrerit felis.
Sed ultrices, nisi vel mattis condimentum, nunc dui fringilla felis, at facilisis massa turpis eu lacus. Morbi lectus urna, vehicula in consectetur posuere, egestas sit amet mauris. Donec nisi leo, luctus id tristique non, ultrices quis purus. Cras quis convallis tortor, sit amet laoreet odio. Donec aliquet ipsum eu fringilla accumsan. Integer gravida orci in laoreet tristique. Maecenas scelerisque leo non felis malesuada, quis commodo mauris porttitor. Aliquam ut commodo risus. Integer condimentum ipsum id maximus pretium.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc non aliquam lorem, sit amet mollis tellus. Aenean vulputate quam nibh, vitae congue dolor lacinia ut. Nunc pharetra ligula turpis, vitae congue felis sollicitudin non. Duis ut justo sit amet nulla dictum commodo et non elit. Morbi varius metus massa, nec fermentum sapien blandit a. Curabitur at lectus sapien. Praesent at lectus nec nulla convallis efficitur blandit nec dui. Duis sed est placerat orci fringilla pellentesque commodo et sem. Sed viverra sem eget pretium ultricies. Duis a diam eget sapien tincidunt dignissim nec sed quam. In ultricies tincidunt sapien id blandit. In ut justo non turpis commodo gravida. Phasellus auctor venenatis ante, interdum fermentum lacus venenatis sit amet. Vivamus nisl lorem, posuere a vulputate quis, placerat ut mi. Vestibulum facilisis bibendum nunc, vitae blandit purus.
Sed eget orci lectus. Sed egestas risus nibh, vel semper metus accumsan nec. Cras gravida diam vitae lorem vestibulum viverra. Vivamus mollis condimentum vehicula. Nullam mauris est, laoreet sit amet suscipit ac, interdum a massa. Suspendisse aliquam mollis arcu non malesuada. Quisque tellus erat, lacinia in augue vitae, mattis vulputate dolor. Donec ultricies vel augue non fermentum. Nulla et convallis urna, quis ultrices quam. Sed urna ipsum, porta sed dapibus sed, commodo eu lorem. Proin tempor neque ut nulla varius lacinia et id nunc. Nunc condimentum porta tellus eu suscipit. Ut convallis turpis sed diam gravida, a blandit tortor dictum.
In et aliquet justo. Proin id leo aliquet nibh elementum volutpat tincidunt malesuada est. In vehicula eleifend ante, at tincidunt nisl lobortis quis. Sed gravida scelerisque est egestas consequat. Curabitur fringilla, enim quis ornare laoreet, sapien nulla bibendum lacus, vel malesuada felis dui viverra enim. Praesent varius dictum nulla. Pellentesque eu gravida velit. Vivamus auctor arcu lectus, et placerat dolor molestie id. Aliquam leo lacus, consequat fermentum porta sed, imperdiet a nibh. Aliquam rutrum nunc sit amet lacus auctor, eu sollicitudin erat auctor. Nullam at rhoncus turpis. Aenean venenatis quam ut tellus gravida, vel suscipit tellus auctor.
Nulla facilisi. Aliquam id condimentum sapien, vel laoreet justo. Nullam erat odio, facilisis a velit eget, consequat laoreet velit. Vivamus dictum sit amet nibh finibus pharetra. Aliquam et nibh vitae massa scelerisque dapibus. Etiam ultrices, tellus eget dapibus scelerisque, augue dolor faucibus quam, sed gravida nunc eros ac dolor. Donec eu metus nec mauris lobortis condimentum sed ac libero. Nullam sit amet nulla euismod, pharetra libero nec, molestie sapien. Mauris gravida placerat est, vitae imperdiet orci lobortis in. Nulla vitae vehicula sem. Vestibulum nec sagittis mauris.
Nulla pharetra ligula nec arcu porta, vel elementum tortor malesuada. Vestibulum metus urna, egestas a viverra eu, convallis at ex. Donec elit elit, maximus ut odio at, tempus interdum erat. In pharetra commodo mi id vestibulum. Sed tristique dui ut elit lacinia feugiat. Quisque vitae ante rutrum ante luctus scelerisque. In hac habitasse platea dictumst. Quisque metus magna, lacinia a orci et, volutpat mattis nisi. </h4>
<br/>
</div>
Here is the header.php code:
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css">
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<?php /* Check for set Name */ if (!$fname) { $fname = 'Please Sign In'; } ?>
<Style>
#nav{ background-color: #222; position: fixed; width: 100%; top: 0; }
#nav ul{ list-style-type: none; padding: 0; margin: 0; text-align="right";}
#nav ul li{ display: inline-block; }
#nav ul li:hover{ background-color: #333; }
#nav ul li a,visited{ color: #CCC; display: block; padding: 15px; text-decoration: none; }
#nav-wrapper
{
width:100%;
margin: 0 auto;
padding-right:10px;
}
</Style>
<div id="nav">
<div id="nav-wrapper">
<ul>
<li style="color: white; text-align:left;">Home</li>
<li style="color: white; text-align:right;margin-left:85%;"><?php echo $fname;?></li>
</ul>
</div>
</div>
Thanks for any help or suggestions as to why this is happening and how it can be fixed!
You have applied the Right Column as absolute position but it should be static.
Try removing position:absolute and add like belw
#right {
width: 80%;
height: auto;
padding-top:50px;
float:right;
}
I'm struggling to get my div (#content) to full 100% height of the page, if I resize my browser, my div (.divAboutRight) stretches accordingly to accommodate the content but my wrapper div (#content) does not? I have an image (#logo) which is centered to it's parent (#content) which it is not doing when the parent doesn't fill 100%.
I'm sure I'm missing something really basic.
Any assistance or guidance would be appreciated.
<style>
html{margin:0; padding:0; width:100%; height:100%;}
body{height:100%;min-height:100%; margin:0; padding:0; width:100%; background-color:#fb9f32; color:#FFF;}
.head{width:100%; height:60px; background-color:#FFFFFF;}
#content{width:100%;height:100%;min-height: 100%; position:relative; border:1px solid red;}
#Back
{
position:absolute;
left:0;
background:url(../images/Back.png) no-repeat;
background-size: 100% 100%;
float:left;
min-width:55%;
height:59%;
border:1px solid green;
}
#logo
{
display:block;
position: absolute;
top: 50%;
left: 50%;
max-height: 132px;
max-width: 133px;
margin: -66.5px 0 0 -66px;
z-index:9999999;
}
.divAboutRight{width:35%; margin-right:5%; margin-top:3%;float:right; border:1px solid yellow;}
</style>
<body>
<div class="head">
<!-- Header Content -->
</div>
<div id="content">
<div id="Back">
<!-- absolute positioned -->
</div>
<!-- Fixed logo to be center of content wrapper -->
<img id="logo" width="133" height="132" src="images/logo.png"/>
<div class="divAboutRight">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id est leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et volutpat metus. Cras et ante in enim sollicitudin facilisis quis eget lacus. Donec a justo in lacus ornare porttitor feugiat sit amet velit. Nunc iaculis, tellus quis sollicitudin placerat, leo nulla viverra lectus, id semper massa arcu in purus. Vivamus dictum venenatis metus quis viverra. Donec euismod, mauris vel aliquam convallis, lectus diam scelerisque lacus, id adipiscing orci augue nec arcu. Nulla molestie est lobortis tempor consectetur. Curabitur convallis malesuada velit et volutpat. Morbi a commodo velit. Integer malesuada nunc augue, ac convallis justo sollicitudin a. Nam nulla urna, facilisis quis ullamcorper dictum, venenatis eu ante. Ut consectetur sit amet lacus sed posuere. Nunc facilisis est eu ultrices scelerisque.
Cras feugiat tincidunt justo, et eleifend felis pretium ac. Nulla ornare, massa eu tincidunt tristique, sapien enim congue nisl, id pellentesque nisl lorem vel dolor. Mauris imperdiet, diam ac aliquam convallis, eros ante rhoncus justo, non malesuada mi nulla non sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse potenti. Praesent sapien velit, sodales eget odio at, ullamcorper molestie nibh. Mauris iaculis posuere leo, non sollicitudin libero ullamcorper quis. Integer lobortis et eros vitae imperdiet. Ut ligula sem, tempor quis lobortis imperdiet, interdum ac nisl. Sed non lectus mauris.
Donec mattis lorem dolor, a feugiat neque dictum in. Nullam pharetra magna mi, quis hendrerit odio vestibulum id. Donec faucibus risus sed felis mattis pharetra vel a enim. Curabitur ultrices bibendum dapibus. Nulla sit amet metus mauris. Phasellus at tellus est. Mauris sagittis, eros quis laoreet sodales, tortor justo tempus dolor, et tincidunt dui tellus et erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque vitae pulvinar sapien. Praesent pellentesque metus sem, pellentesque ullamcorper augue pellentesque eu.
In neque lectus, ultricies ultrices nisi sed, commodo viverra justo. Cras quis neque vulputate, elementum ante non, pellentesque urna. Fusce id tempus magna. Fusce nec tortor id nulla pharetra sodales nec at tellus. Suspendisse gravida felis non turpis consequat, sit amet gravida risus ornare. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis elementum consequat mauris ut accumsan. Donec nec aliquet tortor. Donec turpis tellus, convallis at faucibus sed, volutpat ac turpis. Vestibulum consequat sapien mi, et ultricies libero convallis ultricies. Mauris placerat mollis elementum. Nulla molestie felis purus, sed hendrerit enim vehicula ac. Curabitur adipiscing fringilla ultricies. Nunc hendrerit libero non aliquet egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis dui a enim interdum aliquet.
Nulla sagittis ligula enim, in vulputate lectus tincidunt ac. Sed imperdiet gravida orci at semper. Proin mollis adipiscing neque, vitae convallis risus rutrum eget. Praesent augue neque, lacinia nec tincidunt sed, elementum non sem. Suspendisse a mi condimentum, pellentesque lorem id, tempor turpis. In tortor nibh, convallis egestas ornare scelerisque, semper non nisi. Pellentesque ullamcorper euismod malesuada. Curabitur condimentum arcu id lorem posuere tincidunt. Proin convallis, elit vel fringilla tincidunt, eros diam ullamcorper lacus, eget posuere tortor velit vestibulum lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras sit amet pellentesque lacus. Maecenas molestie augue id ipsum feugiat, non pulvinar mi eleifend. Aenean augue metus, tincidunt non pellentesque eu, tristique quis metus. In a neque viverra, commodo velit ut, pretium diam.
</div>
</div>
</body>
From what I can see, Your div #content does not cover the full height because you have a div .head with a height of 60px;
Yo can either float your .head div or make it's position:absolute;
You could also include the .head div iside the #content div like this:
<body>
<div id="content">
<div class="head">
<!-- Header Content -->
</div>
<div id="Back">
<!-- absolute positioned -->
</div>
<!-- Fixed logo to be center of content wrapper -->
<img id="logo" width="133" height="132" src="images/logo.png"/>
<div class="divAboutRight">
<!-- Dynamic Content -->
</div>
</div>
</body>
If you are OK supporting IE9+, here is the code:
<style>
#content{
.
.
height:calc(100% - 60px);
.
}
</style>
Calc is supported in all modern browsers now.
On the other hand, if you can't support calc, here is one more way:
<style>
.head {
... // rest of head's css
z-index: 2;
}
#content {
position: relative;
box-sizing('border-box');
height: 100%;
padding-top: 60px; // height equal to the header
margin-top: -60px; // this will offset your content up again
z-index: 1; // make the content go BEHIND the head
... // rest of the CSS
}
</style>
note: this will make the scrollbar start from behind the head, because the content will be under the head.
I'm trying to make a div fill the entire doc height, not just the viewpoint height. When 100% height is set on body, html and the div, the div will fill 100% of the viewpoint. However, when another div make the doc height go beyond the viewpoint, and the page is scrolled, the 100% height stayed at the original viewpoint height.
I've make the follow jsfiddle to demonstrate the problem:
http://jsfiddle.net/728CA/1/
Sorry if this is a repeat question, I have looked through many others questions and can't find an answer which works for my problem. I'm new to developing responsive sites, and I'd really appreciate some help.
css:
body, html {
height:100%;
}
#sidebar {
height:100%;
width:100px;
background:#FF00FF;
float:left;
}
#content {
width:200px;
float:left;
}
.clear {
clear:both;
html:
<div id="sidebar">
<nav>
Links
</nav>
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id magna iaculis, tincidunt lacus et, gravida sapien. Sed velit metus, congue ac porttitor ut, ornare euismod tortor. Fusce ultricies pulvinar ante, eget facilisis leo rutrum eu. Donec turpis dui, elementum tristique lectus vel, semper posuere nisi. Curabitur at adipiscing lectus. Duis consectetur, urna sit amet feugiat vestibulum, sapien massa facilisis lectus, vitae sagittis augue tellus et augue. Quisque vitae nisi at metus interdum mollis. Vivamus in nisi placerat, rutrum sapien varius, dapibus est. Integer pharetra enim sem, nec porttitor velit suscipit vitae. Ut suscipit, sapien eget placerat congue, justo elit sagittis arcu, a elementum dolor leo a ante. Suspendisse auctor laoreet orci, ut varius est consequat vitae. In eu libero at libero faucibus eleifend et id magna. Vivamus molestie mi eu massa aliquam, sit amet ullamcorper ante semper. Mauris dictum orci id ante porta euismod. Quisque in ultrices sapien. Ut euismod dui ac justo egestas suscipit.
Integer vitae pretium eros. Suspendisse sapien ipsum, feugiat sed lorem sed, vestibulum lacinia sapien. Proin quis risus at massa lobortis porta. Vestibulum pretium rhoncus dui quis volutpat. Nullam nulla erat, bibendum at mauris et, imperdiet cursus turpis. Cras quis tellus sed urna sagittis rutrum lobortis eu elit. Fusce volutpat venenatis augue a fermentum. Praesent luctus tortor felis, eget varius lacus mattis eu. Aliquam tempor, mi at venenatis ultrices, erat metus mattis risus, id convallis ante mauris quis ipsum. Pellentesque vitae sodales purus. Sed eu faucibus tellus. Nam ultricies lorem enim, vitae vestibulum risus hendrerit ac. Integer condimentum orci in arcu vehicula porta. Ut euismod tincidunt justo, ac feugiat massa. Sed id sollicitudin purus.
</div>
<div class="clear"></div>
Look at my update
jsfiddle
I've made a container with pink background and the content has white background.
<div id="container">
<div id="sidebar">
<nav>
Links
</nav>
</div>
<div id="content">
</div>
<div class="clear"></div>
</div>
CSS
#container {
min-height:100%;
background:#FF00FF;
width: 300px;
}
#sidebar {
width:100px;
float:left;
}
#content {
width:200px;
float:left;
background:#FFFFFF;
}