I have been doing a course online on web-development, the instructor showed us an implementation of slideshow using jquery. I followed every step as instructed, but when I open my browser the images seem to not appear on the slideshow and I don't know if the slideshow box is working.
Here's the link to the jquery tool for the tabs-slideshow:
http://jquerytools.github.io/demos/tabs/slideshow.html
My Questions are:
1.Where have I gone wrong in the code which is preventing the proper working display of the slideshow images and the slideshow box?
2.What is br class="clearing" and .clearing {
clear:both;} (css file 2) doing exactly?
Thank you in advance.
This is my HTML code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>Killersites CSS layout Example</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/slideshow.css" rel="stylesheet" type="text/css">
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
[endif]-->
<!-- enable the jquery -->
<script language="javascript">
// What is $(document).ready ? See: http://flowplayer.org/tools/documentation/basics.html#document_ready
$(function() {
$(".slidetabs").tabs(".images > div", {
//enable the "cross-fading" effect
effect:'fade',
fadeOutSpeed: "slow",
// start from the befinning after the last tab
rotate: true
//use the slideshow plugin. It accepts its own configuration
}).slideshow();
});
</script>
</head>
<body>
<content>
<header>
Home
<h1>Killersites Training</h1>
<p>Creating Killersites Since 1998</p>
</header>
<!-- Container for the slides-->
<header class="images">
<!-- First sliding image-->
<div>
<img src="images/killerfrog.jpg" width="940" height="250" alt="image1" title="image1">
</div>
<!-- Second sliding image-->
<div>
<img src="images/killerfrog2.jpg" width="940" height="250" alt="image2" title="image2">
</div>
<!-- Third sliding image-->
<div>
<img src="images/killerfrog3.jpg" width="940" height="250" alt="image3" title="image3">
</div>
</header>
<!-- The tabs -->
<div class="slidetabs">
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>News</li>
<li>Products</li>
<li>Services</li>
<li>Clients</li>
<li>Employment</li>
<li>Contact</li>
</ul>
</nav>
<article>
<h2>Lorem ipsum</h2>
<p>dolor sit amet consectetur adipiscing elit. Nulla id nulla risus, vitae consequat dui. Quisque vehicula tellus sed nisl feugiat adipiscing ut in neque. Nullam id sapien eget diam ullamcorper tempus a pharetra enim. Nam at ligula ligula. Maecenas turpis nunc, suscipit et viverra in, cursus eget tortor. Aenean mollis adipiscing est. Cras elementum blandit tincidunt. Aliquam at semper lacus. Etiam hendrerit lacinia mauris, vel fermentum risus venenatis ultrices. Aenean fringilla est interdum metus tempor facilisis ultrices a metus. Sed sit amet tortor sit amet nulla molestie vestibulum. Praesent id sem a libero fermentum volutpat. Maecenas pharetra neque eu leo interdum hendrerit. Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus. Integer molestie turpis id est ultricies vel commodo magna viverra. Nunc gravida fermentum placerat. Duis lorem augue, tincidunt blandit vehicula quis, aliquam nec tellus.</p>
<h3>A Sub Headline</h3>
<p>dolor sit amet consectetur adipiscing elit. Nulla id nulla risus, vitae consequat dui. Quisque vehicula tellus sed nisl feugiat adipiscing ut in neque. Nullam id sapien eget diam ullamcorper tempus a pharetra enim. Nam at ligula ligula. Maecenas turpis nunc, suscipit et viverra in, cursus eget tortor. Aenean mollis adipiscing est. Cras elementum blandit tincidunt. Aliquam at semper lacus. Etiam hendrerit lacinia mauris, vel fermentum risus venenatis ultrices. </p>
<h3>Another Sub Headline</h3>
<p>dolor sit amet consectetur adipiscing elit. Nulla id nulla risus, vitae consequat dui. Quisque vehicula tellus sed nisl feugiat adipiscing ut in neque. Nullam id sapien eget diam ullamcorper tempus a pharetra enim. Nam at ligula ligula. Maecenas turpis nunc, suscipit et viverra in, cursus eget tortor. Aenean mollis adipiscing est. Cras elementum blandit tincidunt. Aliquam at semper lacus. Etiam hendrerit lacinia mauris, vel fermentum risus venenatis ultrices.Sed sit amet tortor sit amet nulla molestie vestibulum. Praesent id sem a libero fermentum volutpat. Maecenas pharetra neque eu leo interdum hendrerit. Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus. Integer molestie turpis id est ultricies vel commodo magna viverra. Nunc gravida fermentum placerat. Duis lorem augue, tincidunt blandit vehicula quis, aliquam nec tellus. </p>
<section class="leftfloat">
<h3>nested left section</h3>
<p>Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus. Integer molestie turpis id est ultricies vel commodo magna viverra. Nunc gravida fermentum placerat. Duis lorem augue, tincidunt blandit vehicula quis, aliquam nec tellus.</p>
</section>
<section class="rightfloat">
<h3>nested right section</h3>
<p>Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus. Integer molestie turpis id est ultricies vel commodo magna viverra. Nunc gravida fermentum placerat. Duis lorem augue, tincidunt blandit vehicula quis, aliquam nec tellus.</p>
</section>
<h3>Another Sub Headline</h3>
<p>dolor sit amet consectetur adipiscing elit. Nulla id nulla risus, vitae consequat dui. Quisque vehicula tellus sed nisl feugiat adipiscing ut in neque. Nullam id sapien eget diam ullamcorper tempus a pharetra enim. Nam at ligula ligula. Maecenas turpis nunc, suscipit et viverra in, cursus eget tortor. Aenean mollis adipiscing est. Cras elementum blandit tincidunt. Aliquam at semper lacus. Etiam hendrerit lacinia mauris, vel fermentum risus venenatis ultrices.Sed sit amet tortor sit amet nulla molestie vestibulum. Praesent id sem a libero fermentum volutpat. Maecenas pharetra neque eu leo interdum hendrerit. Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus. Integer molestie turpis id est ultricies vel commodo magna viverra. Nunc gravida fermentum placerat. Duis lorem augue, tincidunt blandit vehicula quis, aliquam nec tellus. </p>
</article>
<footer>
<section class="first">
<p>©2011 killersites Corp</p>
</section>
<section>
<h3>nested footer section</h3>
<p>Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus.</p>
</section>
<section>
<h3>nested footer section</h3>
<p>Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus.</p>
</section>
<section>
<h3>nested footer section</h3>
<p>Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus.</p>
</section>
<br class="clearing">
</footer>
</content>
</body>
</html>
The css file1:
#charset "UTF-8";
/* slideshow css */
/* container for slides */
.images {
background:#fff url(../images/h300.png) repeat-x;
position:relative;
height:250px;
width:940px;
float:left;
cursor:pointer;
}
/* single slide */
.images div {
display:none;
position:absolute;
top:0;
left:0;
height:250px;
font-size:12px;
}
/* header */
.images h3 {
font-size:22px;
font-weight:normal;
margin:0 0 20px 0;
color:#456;
}
/* tabs (those little circles below slides) */
.slidetabs {
position:absolute;
top:365px;
right:20px;
/*clear:both;
margin-left:330px;*/
}
/* single tab */
.slidetabs a {
width:8px;
height:8px;
float:left;
margin:3px;
background:url(../images/navigator.png) 0 0 no-repeat;
display:block;
font-size:1px;
}
/* mouseover state */
.slidetabs a:hover {
background-position:0 -8px;
}
/* active state (current page state) */
.slidetabs a.current {
background-position:0 -16px;
}
The CSS File 2:
#charset "UTF-8";
*{
margin:0px;
padding:0px;
}
/*html5 display rule */
address, article, aside, canvas, content, details, figcaption, figure, footer, header, hgroup, nav, menu, section, summary {
display:block;
}
#font-face {
font-family: 'ChunkFiveRoman';
src: url('../fonts/chunkfive-webfont.eot');
src: url('../fonts/chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/chunkfive-webfont.woff') format('woff'),
url('../fonts/chunkfive-webfont.ttf') format('truetype'),
url('../fonts/chunkfive-webfont.svg#ChunkFiveRoman') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'sinkin_sans400_regular';
src: url('../fonts/sinkinsans-400regular-webfont.woff2') format('woff2'),
url('../fonts/sinkinsans-400regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
background-color: #353535;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
background-image: url(../images/dots.png);
}
h1, h2, h3 {
font-family: 'sinkin_sans400_regular','ChunkFiveRoman', Georgia, "Times New Roman", Times, serif;
}
content{
width:940px;
margin-top:20px;
margin-right:auto;
margin-bottom:20px;
margin-left:auto;
position:relative;
background-color:#f2f3ed;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}
header {
border-bottom-color: #CCC;
border-bottom-width: 1px;
border-bottom-style: solid;
}
header h1 {
padding:20px 20px 20px 97px;
color:#353535;
font-size:42px;
/* css3 transition */
-webkit-transition:all .5s;
-o-transition-property:all;
-o-transition-duration:.5s;
-moz-transition-property:all;
-moz-transition-duration:.5s;
transition-property:all;
transition-duration:.5s;
}
header h1:hover{
text-shadow: 2px 2px 2px #888;
-webkit-text-shadow:2px 2px 2px #888; /* safari */
}
header p {
color:#353535;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
position: absolute;
right: 0px;
top: 33px;
background-color:#f2f3ed;
padding:10px;
/* rounded corners */
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
/* 2d skew trasnform */
transform:skew(-20deg,0deg);
-ms-transform:skew(-20deg,0deg); /* IE 9 */
-moz-transform:skew(-20deg,0deg); /* Firefox */
-webkit-transform:skew(-20deg,0deg); /* Safari and Chrome */
-o-transform:skew(-20deg,0deg); /* Opera */
/* css3 transition */
-webkit-transition:all .5s;
-o-transition-property:all;
-o-transition-duration:.5s;
-moz-transition-property:all;
-moz-transition-duration:.5s;
transition-property:all;
transition-duration:.5s;
}
header p:hover {
color:#f2f3ed;
background-color:#353535;
background-image: url(../images/dots.png);
}
#logo {
position: absolute;
top: 12px;
left: 20px;
background: url(../images/logo_small.png) no-repeat;
width: 61px;
height: 62px;
text-indent:-9999px;
/* css3 transition */
-webkit-transition:all 1s;
-o-transition-property:all;
-o-transition-duration:1s;
-moz-transition-property:all;
-moz-transition-duration:1s;
transition-property:all;
transition-duration:1s;
}
#logo:hover {
transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
header#anim {
height:250px;
}
nav {
float:left;
width:200px;
}
nav li{
list-style-type:none;
}
nav li a{
font-family:Georgia, "Times New Roman", Times, serif;
text-decoration:none;
display:block;
padding-top:10px;
padding-right:20px;
padding-bottom:10px;
padding-left:20px;
font-size:18px;
/* css3 transition */
-webkit-transition:all .5s;
-o-transition-property:all;
-o-transition-duration:.5s;
-moz-transition-property:all;
-moz-transition-duration:.5s;
transition-property:all;
transition-duration:.5s;
}
nav li a:link{
color:#333;
}
nav li a:visited{
color:#333;
}
nav li a:hover{
font-family:Georgia, "Times New Roman", Times, serif;
color:#FFF;
background-color:#353535;
box-shadow: 0px 0px 5px #888;
-webkit-box-shadow:0px 0px 5px #888; /* safari */
background-image: url(../images/dots.png);
}
nav li a:active{
color:#333;
background-color:#666;
}
article {
width:739px;
float:right;
border-left-color: #CCC;
border-left-width: 1px;
border-left-style: solid;
box-shadow: 0px 0px 5px #888;
-webkit-box-shadow:0px 0px 5px #888; /* safari */
}
article h2, h3, p {
margin-left:20px;
margin-right:20px;
padding-top:10px;
}
article p {
padding-top:4px;
padding-bottom:20px;
line-height:18px;
}
article h2{
color:#353535;
font-size:28px;
text-transform: capitalize;
}
article h3{
color:#353535;
font-size:20px;
text-transform: capitalize;
}
article .leftfloat{
width:50%;
float:left;
}
article .rightfloat{
width:50%;
float:right;
}
footer {
border-top-color: #CCC;
border-top-width: 1px;
border-top-style: solid;
clear:both;
background-color: #407a01;
background-image: url(../images/bg_gradient.png);
border-bottom-right-radius:25px;
border-bottom-left-radius:25px;
-moz-border-bottom-right-radius:25px;
-moz-border-bottom-left-radius:25px;
}
footer section.first {
float:left;
width:200px;
padding-top:10px;
padding-bottom:20px;
}
footer section.first p {
color:#f2f3ed;
}
footer section {
float:left;
width:246px;
padding-top:10px;
padding-bottom:20px;
color:#96C;
}
footer section h3 {
font-family:Georgia, "Times New Roman", Times, serif;
color:#f2f3ed;
font-size:16px;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #F2F3ED;
padding-bottom: 0px;
text-transform: capitalize;
font-weight:normal;
}
footer section p {
color:#333;
font-size:10px;
line-height:16px;
}
.clearing {
clear:both;
}
Here is an example of a working slideshow.
I'm getting this from this example at w3schools. There are surely better examples out there than the one at w3schools, but this at least works.
Note the only change I made was to the images, which are now using "https://via.placeholder.com/350x150" as their source.
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://via.placeholder.com/350x150" style="width:100%">
<div class="text">Caption Text #One</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="https://via.placeholder.com/350x150" style="width:100%">
<div class="text">Caption #Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="https://via.placeholder.com/350x150" style="width:100%">
<div class="text">Caption #Three</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
Regarding your question about what the CSS clear attribute does:
The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them. The clear property applies to both floating and non-floating elements.
via: https://developer.mozilla.org/en-US/docs/Web/CSS/clear
Note the clear:both; example in the above link, and compare it to other clear options, like left, right, and none.
Related
It's ancient, but there are still some people who use InsaneJournal (an offshoot of Danga Interactive's LiveJournal), myself included.
I'm trying to add some very basic content organizers; specifically, CSS-only (InsaneJournal prevents the use of jQuery) tabs and a modal window. But I cannot get them to work. I've tested the code snippets in JSFiddle, and they work fine (I'll include the snippets below, too), which makes me think there is something in the pre-made layout I'm using which prevents the snippets from working as expected.
Can anyone offer any insight? The website is here and these are the snippets:
Modal Window:
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity: 1;
pointer-events: auto;
}
.modalDialog>div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
<h1>Open Modal</h1>
<div id="openModal" class="modalDialog">
<div> X
<h2>Modal Window</h2>
<p>This is a modal window.</p>
</div>
</div>
CSS Tabs:
.tabs {
color: #333;
font-family: arial, sans-serif;
margin: auto;
font-size: 1em;
width: 80%;
}
.tabs ul.tab-nav {
display: table;
border-spacing: 2px;
list-style: none;
margin: 0;
padding: 0;
width: 100%
}
.tabs ul.tab-nav li {
display: table-cell;
}
.tabs ul.tab-nav li a {
padding: 10px;
background-color: #ccc;
color: #333;
display: block;
font-size: 1.214em;
font-weight: bold;
margin: 2px 0;
padding: 10px;
text-decoration: none;
}
.tabs ul.tab-nav li a:hover {
background-color: #ddd;
}
.tabs section article {
display: none;
padding: 0 5px 0 10px;
}
.tabs section:target article {
display: block;
}
<div class="tabs">
<h1>CSS-only Tabs (POC)</h1>
<ul class="tab-nav">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<section id="option1">
<article>
<h2>Heading 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut lacus vel eros maximus pharetra. Nullam mattis posuere eros, ac pellentesque felis lobortis id. Fusce sed varius mauris. Integer ut pulvinar metus. Vestibulum ?obortis non enim
quis pulvinar. Maecenas et pulvinar mi. Pellentesque gravida eleifend nisl vitae efficitur. Curabitur sit amet convallis elit, sit amet ultrices enim. Integer vitae erat sit amet mi viverra gravida.</p>
</article>
</section>
<section id="option2">
<article>
<h2>Heading 2</h2>
<p>Aenean eu mauris sagittis magna fringilla rhoncus. Mauris ornare felis at rutrum condimentum. Fusce in fermentum ipsum. Duis et dignissim orci, at venenatis urna. Etiam condimentum malesuada placerat. In sollicitudin justo fermentum velit facilisis
aliquam. Duis psuere, neque iaculis dignissim scelerisque, dolor orci vulputate dui, et pulvinar dui ante pharetra ipsum.</p>
</article>
</section>
<section id="option3">
<article>
<h2>Heading 3</h2>
<p>Duis lectus magna, tristique quis tristique ac, eleifend nec sapien. Quisque vel eros nec tortor efficitur malesuada. Suspendisse malesuada, erat eu posuere finibus, velit tellus placerat mauris, id pharetra nunc velit et nisi. Phasellus non diam
sapien. Ut tellus est, tristique sit amet arcu eget, egestas porta sapien. Sed maximus, turpis ut tempor imperdiet, sem nisi lobortis enim, vel ultrices elit turpis eu nisi. Morbi efficitur luctus justo, eget ultrices lorem luctus ac. Quisque
id augue risus. Cras sagittis dapibus sapien vehicula auctor. Nullam iaculis ipsum leo, sed ornare arcu placerat sit amet. Aenean aliquet dictum ligula non rhoncus. Duis lacinia, nisl sed porttitor scelerisque, ex ex viverra massa, sit amet ullamcorper
sem nulla sit amet urna.</p>
</article>
</section>
</div>
These are pasted directly from the code I'm using on my blog. As you can see, they operate (here, in Codepen, in jsFiddle, everywhere) as expected.
I do not see why (or what) would prevent these really very simple codes from operating as they ought to. Can anyone tell me what is going on here? Or point me in the right direction? Or even offer a means of circumventing what's going on here? I'll take any kind of help.
Thank you for your time, and I apologize if this is very simplistic. I'm not very advanced at all (as if that isn't obvious).
EDIT As pointed out by Mehravish Temkar, the div ids are not showing up in the page even after they've been entered. Does anyone know what is removing them from the code? And, for that matter (and just out of curiosity), why they would be removed?
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I'm working on a small project and I have encountered a problem. In the bgContainer class there are two bits of text and they have a margin between them, however I don't want any margin and I can't tell where the margin is coming from. According to chrome, the margin is 200px on the header text but, as far as I am aware, no where in my css have I set that to be the case. I'm also using bootstrap 4 beta 2. Any help appreciated, thanks.
padding/margin
#charset "UTF-8";
.sidenav {
height: 100%;
width: 0;
position: fixed;
overflow-y: auto;
z-index: 1;
top: 0;
left: 0;
font-family: 'Helvetica Neue', Gotham, Helvetica, Arial, 'sans-serif';
font-weight: 200;
font-size: 1em;
background-color: #e9ecef;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.sidenav .sidebar-header {
font-family: "Bebas Neue";
font-size: 2em;
font-weight: 600;
padding: 0 20px;
}
.sidenav ul.components {
padding: 10px 0;
}
.sidenav ul p {
color: #fff;
padding: 5px 10px;
}
.sidenav ul li a {
color: #5C5C5C;
text-decoration: none;
padding: 5px 10px;
display: block;
}
.sidenav ul li a:hover {
color: #5C5C5C;
background: #fff;
transform: scale(1.01);
}
.sidenav ul li.active {
color: #e9ecef;
}
.sidenav ul li.current > a {
color: #e9ecef;
background-color: #5C5C5C;
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #D0D0D0;
}
a[data-toggle="collapse"] {
position: relative;
}
a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
content: '\f0d7';
display: block;
position: absolute;
right: 20px;
top: 7px;
font-family: FontAwesome;
font-size: 0.8em;
font-style: normal;
font-weight: normal;
}
a[aria-expanded="true"]::before {
content: '\f0d8';
}
#main {
transition: margin-left .5s;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
.navButton {
padding: 10px;
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 20px;
height: 3px;
background-color: #e9ecef;
margin: 3px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(0px, 8px) ;
transform: rotate(-45deg) translate(0px, 8px) ;
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(0px, -8px) ;
transform: rotate(45deg) translate(0px, -8px) ;
}
.bgConatiner {
padding: 20px;
vertical-align: middle;
height: 510px;
margin-top: 0px;
margin-bottom: 0px;
}
.header {
margin-top: 0px;
margin-bottom: 0px;
}
.header p {
font-weight: 400;
font-size: 200px;
font-family: "Bebas Neue";
color: #FFF;
}
.subheader {
margin-top: 0px;
margin-bottom: 0px;
}
.subheader p {
font-weight: 200;
font-size: 100px;
font-family: "Bebas Neue";
color: #FFF;
}
.bg {
width: 100%;
height: 550px;
background-image: url(../assets/header5.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: bottom;
background-attachment: fixed;
}
<!DOCTYPE html>
<html>
<head>
<!-- Meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="bg">
<div id="mainSidenav" class="sidenav">
<div class="sidebar-header">Solebooth</div>
<!--Sidenav Menu-->
<ul class="list-unstyled components">
<li> Sneakers
<ul class="collapse list-unstyled" id="subNav1">
<li>Adidas</li>
<li>Nike</li>
<li>Asics</li>
</ul>
</li>
<li> Clothing
<ul class="collapse list-unstyled" id="subNav2">
<li>Supreme</li>
<li>Bape</li>
<li>Palace</li>
</ul>
</li>
<li> Galley
<ul class="collapse list-unstyled" id="subNav3">
<li>#1</li>
<li>#2</li>
<li>#3</li>
</ul>
</li>
</ul>
</div>
<div id="main">
<nav class="navbar sticky-top">
<form>
<div class="navButton" onclick="navButton(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</form>
</nav>
<div class="bgConatiner">
<div class="header">
<p>SOLEBOOTH</p>
</div>
<div class="subheader">
<p>Sneakers. Streetwear.</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-1"></div>
<div class="col-10"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum, nunc sit amet egestas mollis, purus lorem rhoncus eros, sit amet molestie lectus nisl in augue. Morbi malesuada erat massa, eu aliquam risus tincidunt ut. Duis pellentesque vestibulum lacus. Nam sed tortor ullamcorper erat bibendum ullamcorper in in elit. Maecenas non est scelerisque, malesuada augue vitae, tristique diam. Maecenas luctus at ante in placerat. Suspendisse nec quam ornare ipsum vestibulum sodales in vitae lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum, nunc sit amet egestas mollis, purus lorem rhoncus eros, sit amet molestie lectus nisl in augue. Morbi malesuada erat massa, eu aliquam risus tincidunt ut. Duis pellentesque vestibulum lacus. Nam sed tortor ullamcorper erat bibendum ullamcorper in in elit. Maecenas non est scelerisque, malesuada augue vitae, tristique diam. Maecenas luctus at ante in placerat. Suspendisse nec quam ornare ipsum vestibulum sodales in vitae lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum, nunc sit amet egestas mollis, purus lorem rhoncus eros, sit amet molestie lectus nisl in augue. Morbi malesuada erat massa, eu aliquam risus tincidunt ut. Duis pellentesque vestibulum lacus. Nam sed tortor ullamcorper erat bibendum ullamcorper in in elit. Maecenas non est scelerisque, malesuada augue vitae, tristique diam. Maecenas luctus at ante in placerat. Suspendisse nec quam ornare ipsum vestibulum sodales in vitae lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum, nunc sit amet egestas mollis, purus lorem rhoncus eros, sit amet molestie lectus nisl in augue. Morbi malesuada erat massa, eu aliquam risus tincidunt ut. Duis pellentesque vestibulum lacus. Nam sed tortor ullamcorper erat bibendum ullamcorper in in elit. Maecenas non est scelerisque, malesuada augue vitae, tristique diam. Maecenas luctus at ante in placerat. Suspendisse nec quam ornare ipsum vestibulum sodales in vitae lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum, nunc sit amet egestas mollis, purus lorem rhoncus eros, sit amet molestie lectus nisl in augue. Morbi malesuada erat massa, eu aliquam risus tincidunt ut. Duis pellentesque vestibulum lacus. Nam sed tortor ullamcorper erat bibendum ullamcorper in in elit. Maecenas non est scelerisque, malesuada augue vitae, tristique diam. Maecenas luctus at ante in placerat. Suspendisse nec quam ornare ipsum vestibulum sodales in vitae lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum, nunc sit amet egestas mollis, purus lorem rhoncus eros, sit amet molestie lectus nisl in augue. Morbi malesuada erat massa, eu aliquam risus tincidunt ut. Duis pellentesque vestibulum lacus. Nam sed tortor ullamcorper erat bibendum ullamcorper in in elit. Maecenas non est scelerisque, malesuada augue vitae, tristique diam. Maecenas luctus at ante in placerat. Suspendisse nec quam ornare ipsum vestibulum sodales in vitae lacus. </div>
<div class="col-1"></div>
</div>
</div>
</div>
</div>
<script>
function openNav() {
document.getElementById("mainSidenav").style.width = "200px";
document.getElementById("main").style.marginLeft = "200px";
}
function closeNav() {
document.getElementById("mainSidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
function navButton(x) {
if(x.classList.contains("change")){
closeNav();
x.classList.remove("change");
}else{
openNav();
x.classList.add("change");
}
}
</script>
<!--JavaScript -->
<script src="https://use.fontawesome.com/fdfcf3c386.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
Try to apply
.subheader p, .header p {
margin: 0;
}
The reason why you see so much space around your p-s is that user-agent's (browser's) default styles are applied. For example, my browser (and yours as well, I suppose) applies:
p {
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
}
Em-s are relative to the font-size of the elements. Your <p>-s have font-sizes 100px and 200px. So, that's why you get those large margins. Also consider using things like reset.css or normalize.css to clear the user-agents' styles and reduce browser inconsistencies.
I need some help to hide the background color of my container div.
The main content area is structure in such a way that the article tags stack on top of each other and then after that the footer should take up whatever space is left.
I have tried to get rid of the space between the article tag and the footer while still keeping the margin. In order words I want to get rid of the blue line while.
Can someone give me a hint of how to achieve this?
#container {
background-color: #004bb8;
min-width: 320px;
max-width: 960px;
}
/*------Header-----*/
header {
background-color: lightsalmon;
border-bottom: solid #65ff09 2px;
}
h1, h2 {
font-family: "Impact";
margin: 0px;
padding: 0px;
color: darkred;
text-align: left;
text-transform: uppercase;
letter-spacing: 4px;
}
#image-container {
float: left;
width: 46%;
margin: 0 1% 0 1%;
padding: 1%;
}
#sitename{
float: left;
width: 46%;
margin: 0 1% 0 1%;
padding: 8% 1% 1% 1%;
}
header::after {
content: "";
display: block;
clear: left;
}
header img {
width: 250px;
margin: 0 auto;
}
header h1 {
font-family: "Abel", sans-serif;
text-transform: uppercase;
font-size: 1.5em;
padding: 10px 10px;
color: #f9db00;
}
header h2 {
font-family: "Abel", sans-serif;
text-transform: uppercase;
font-size: 0.8em;
padding: 10px 10px;
color: #ff2a86;
}
/*-------navigation------*/
nav {
width: 100%;
background-color:
}
nav ul li {}
nav ul li a {
display: block;
text-align: center;
border-radius: 5px;
padding: 0.5em;
margin: .3em;
border: 1px solid #fff;
background-color: #004bb8;
text-decoration: none;
color: #fff;
}
nav ul li.active a {
background-color: #b8005c;
}
nav ul li a:hover {
background-color: #f9db00;
color: #323C40
}
/*-------content------*/
#content {
min-height: 5em;
background-color: #fff;
}
#content article {
margin: 0 2%;
}
#content article.News, #content article.Tweets {
background-color: #ddd;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
article.News h2, article.Tweets h2 {
background-color: darkgray;
color: #fff;
padding: 0.5em;
font-size: 0.8em;
}
article.News h2 {background-color: #004bb8;}
article.Tweets h2 {background-color: #b8005c;}
article.News h3, article.Tweets h3 {
padding: 0.5em 0 0 1%;
font-size: 1.0em;
}
article.News h3 {color: #004bb8;}
article.Tweets h3 {color: #b8005c;}
article.News p, article.Tweets p {
color: #666;
font-size: 0.8em;
padding-left: 1%;
padding-right: 1%;
line-height: 120%;
}
#contents article.Tweets::after {
content: "";
display: block;
clear: left;
}
/*-------footer------*/
footer {
clear: both;
text-align: center;
padding: 1em;
background-color: #111;
color: #fff;
font-size: 0.6em;
}
/*---------IMAGES------------*/
figure.w100 {
overflow: hidden;
width: 100%;
}
figure.w33 {
width: 96%;
border: 1px solid #999;
margin: 0.3em 0 0.3em 2%;
}
figure.w33 img {
width: 100%;
}
figure.w100 img {
width: 100%;
}
#content figcaption {
text-align: center;
font-size: 0.6em;
color: #777;
padding: 0.3em;
}
<body>
<div id="wrapper">
<div id="container">
<header>
<div id="image-container">
<img src="img/logo.png" alt="logo">
</div>
<div id="sitename">
<h1>Responsive Design</h1>
<h2>Don't Settle for Less</h2>
</div>
</header>
<!--------Page Navigation Links -->
<nav>
<ul>
<li>Desktop Work Around</li>
<li class="active">Phone-Default</li>
<li>Tablet Enhancement</li>
<li>Reset CSS</li>
</ul>
</nav>
<!--------Page Content -->
<div id="content">
<figure class="w100">
<img src="img/lake.jpeg" alt="lake">
</figure>
<article>
<h2> Lorem Ipsum</h2>
<figure class="w33">
<img src="img/car.jpeg" alt="car">
<figcaption> what i wish to drive when i get super rich</figcaption>
</figure>
<p> Lorem ipsum dolor sit amet, posuere erat quis tellus, pede non maecenas convallis dapibus ut, ipsum arcu facilisi nunc mollis eu risus, fermentum volutpat maecenas convallis etiam, et eget ut aliquet phasellus sagittis metus. Nulla vel wisi a eu in. Diam sociis eros. Aliquet vitae commodo ante, rutrum praesent odio urna pellentesque. Metus viverra volutpat etiam lorem nesciunt, sapien pellentesque, massa nec. Nec congue aliquam a lobortis sed, dui imperdiet vestibulum magnis aenean sed sit, dignissim sem sodales.
</p>
</article>
<div class="row">
<article class="News">
<h2>News</h2>
<h3>A list apart finally goes responsive</h3>
<p> Lorem ipsum dolor sit amet, posuere erat quis tellus, pede non maecenas convallis dapibus ut, ipsum arcu facilisi nunc mollis eu risus, fermentum volutpat maecenas convallis etiam, et eget ut aliquet phasellus sagittis metus. Nulla vel wisi a eu in. Diam sociis eros. Aliquet vitae commodo ante, rutrum praesent odio urna pellentesque. Metus viverra volutpat etiam lorem nesciunt, sapien pellentesque, massa nec. Nec congue aliquam a lobortis sed, dui imperdiet vestibulum magnis aenean sed sit, dignissim sem sodales.
</p>
<h3>A list apart finally goes responsive</h3>
<p> Lorem ipsum dolor sit amet, posuere erat quis tellus, pede non maecenas convallis dapibus ut, ipsum arcu facilisi nunc mollis eu risus, fermentum volutpat maecenas convallis etiam, et eget ut aliquet phasellus sagittis metus. Nulla vel wisi a eu in. Diam sociis eros. Aliquet vitae commodo ante, rutrum praesent odio urna pellentesque. Metus viverra volutpat etiam lorem nesciunt, sapien pellentesque, massa nec. Nec congue aliquam a lobortis sed, dui imperdiet vestibulum magnis aenean sed sit, dignissim sem sodales.
</p>
</article>
<article class="Tweets">
<h2>Tweets</h2>
<h3>A list apart finally goes responsive</h3>
<p> Lorem ipsum dolor sit amet, posuere erat quis tellus, pede non maecenas convallis dapibus ut, ipsum arcu facilisi nunc mollis eu risus, fermentum volutpat maecenas convallis etiam, et eget ut aliquet phasellus sagittis metus. Nulla vel wisi a eu in. Diam sociis eros. Aliquet vitae commodo ante, rutrum praesent odio urna pellentesque. Metus viverra volutpat etiam lorem nesciunt, sapien pellentesque, massa nec. Nec congue aliquam a lobortis sed, dui imperdiet vestibulum magnis aenean sed sit, dignissim sem sodales.
</p>
<h3>A list apart finally goes responsive</h3>
<p> Lorem ipsum dolor sit amet, posuere erat quis tellus, pede non maecenas convallis dapibus ut, ipsum arcu facilisi nunc mollis eu risus, fermentum volutpat maecenas convallis etiam, et eget ut aliquet phasellus sagittis metus. Nulla vel wisi a eu in. Diam sociis eros. Aliquet vitae commodo ante, rutrum praesent odio urna pellentesque. Metus viverra volutpat etiam lorem nesciunt, sapien pellentesque, massa nec. Nec congue aliquam a lobortis sed, dui imperdiet vestibulum magnis aenean sed sit, dignissim sem sodales.
</p>
</article>
</div>
</div>
<!-----End of Content --->
<footer>
<p>© Buko Ogbobe Responsive Start File</p>
</footer>
</div> <!----end of Container ---->
</div> <!----end of Wrapper ---->
</body>
Here's two solutions, you can use :
footer {
margin-top:-13px;
}
or :
#content article.Tweets, article.Tweets p {
margin-bottom:0px;
}
This will fix the gap in between your footer and content.
I've written a basic HTML and CSS file using Bootstrap and it works fine on my work computer with Chrome version 27.0.1453.110, but when I try to open the file in Chrome on my personal Mac(don't know the Chrome version) it opens VERY slowly, and lags when scrolling(like almost doesn't scroll at all!). What could I have done wrong, or excluded from the coding? It's a simple test page, with a background image, nav bar, footer and some text.
/*
* Globals
*/
/* Links */
a,
a:focus,
a:hover {
color: #fff;
}
/* Custom default button */
.btn-default,
.btn-default:hover,
.btn-default:focus {
color: white;
font-size: 18px;
text-shadow: none; /* Prevent inheritence from `body` */
background-color: rgba(96,96,96.75);
border: 1px solid #fff;
}
/*
* Base structure
*/
html,
body {
height: 100%;
background: url(back1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
color: #fff;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
display: table;
margin-top: -10px;
width: 100%;
height: 120%; /* For at least Firefox */
min-height: 100%;
-webkit-box-shadow: inset 0 0 400px rgba(0,0,0,.6);
box-shadow: inset 0 0 400px rgba(0,0,0,.6);
}
.site-wrapper-inner {
display: table-cell;
vertical-align: top;
}
.cover-container {
margin-right: auto;
margin-left: auto;
}
/* Padding for spacing */
.inner {
padding: 30px;
}
/*
* Header
*/
.masthead-brand {
color: white;
font-size: 30px;
margin-top: -15px;
margin-bottom: 50px;
}
.masthead-nav > li {
display: inline-block;
margin-bottom: 30px;
}
.masthead-nav > li + li {
margin-left: 20px;
}
.masthead-nav > li > a {
padding-right: 0;
padding-left: 0;
font-size: 16px;
font-weight: bold;
color: #B8B8B8; /* IE8 proofing */
color: rgba(184,184,184.4);
border-bottom: 2px solid transparent;
}
.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
color: white;
background-color: transparent;
border-bottom-color: white;
border-bottom-color: rgba(255,255,255,1);
}
.masthead-nav > .active > a,
.masthead-nav > .active > a:hover,
.masthead-nav > .active > a:focus {
color: white;
border-bottom-color: rgba(255,255,255,1);
}
#media (min-width: 768px) {
.masthead-brand {
float: left;
}
.masthead-nav {
margin-top: -20px;
float: right;
}
}
/*
* Cover
*/
.cover {
color: black;
padding: 0 20px;
}
.cover .btn-lg {
border-radius: 4px;
padding: 10px 20px;
font-weight: bold;
}
.blockquote-reverse {
font-weight: bold;
color: white;
text-align: right;
}
.lead {
text-align: center;
}
/*
* Footer
*/
.mastfoot {
color: #999; /* IE8 proofing */
color: rgba(255,255,255,.5);
}
.mastfoot a {
text-decoration: none;
}
/*
* Affix and center
*/
#media (min-width: 768px) {
/* Pull out the header and footer */
.masthead {
position: fixed;
background: -webkit-linear-gradient(rgba(0,0,0,1), rgba(0,0,0,.9),rgba(0,0,0,.8),rgba(0,0,0,.8),rgba(54,54,54,.75), rgba(54,54,54,0)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(rgba(0,0,0,1), rgba(0,0,0,.9),rgba(0,0,0,.8),rgba(0,0,0,.8),rgba(54,54,54,.75), rgba(54,54,54,0)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(rgba(0,0,0,1), rgba(0,0,0,.9),rgba(0,0,0,.8),rgba(0,0,0,.8),rgba(54,54,54,.75), rgba(54,54,54,0)); /* For Firefox 3.6 to 15 */
background: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,.9),rgba(0,0,0,.8),rgba(0,0,0,.8),rgba(54,54,54,.75), rgba(54,54,54,0)); /* Standard syntax */
top: 0;
left: 0;
}
.mastfoot {
bottom: 0;
}
/* Start the vertical centering */
.site-wrapper-inner {
vertical-align: middle;
}
/* Handle the widths */
.masthead,
.mastfoot,
.cover-container {
width: 100%; /* Must be percentage or pixels for horizontal alignment */
}
}
#media (min-width: 992px) {
.masthead,
.mastfoot,
.cover-container {
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Cover Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="cover.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">Pith and Prose</h3>
<nav>
<ul class="nav masthead-nav">
<li class="active">Home</li>
<li>About</li>
<li>Blog</li>
<li style="margin-right: 13px">Contact</li>
</ul>
</nav>
</div>
</div>
<div class="inner cover">
<div class="container"><div class="row"><div class="col-sm-12" style="display: table; padding-top: 200px; width: 104%; height: 750px; margin-left: -20px">
<h1 class="cover-heading">Landing page.</h1>
<p class="lead">This is where everyone will "land" when they come to your page. We can put a little introduction to the whole blog and everything.</p>
<br/><br/><br/><blockquote class="blockquote-reverse"><p>"The business of life is the aquisition of memories...in the end, that is all there is."</p><footer><cite>Unknown</cite></footer><br/><br/>
<p class="lead">
Learn more
</p>
</div></div></div>
<div class="container"><div class="row"><div class="col-sm-12" style="display: table; padding: 30px 30px 100px; background-color: rgba(0,0,0,.8); width: 98%; height: 500px; margin-left: -20px">
<h1 class="cover-heading" style="color: white; font-weight: bold;">Latest Post</h1>
<p class="lead" style="color: white; font-weight: bold;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum orci nec risus pulvinar, nec mattis ipsum accumsan.
Nam faucibus, velit sed laoreet aliquam, mi dolor vestibulum orci, rutrum volutpat libero libero in justo. Praesent tincidunt,
lorem pretium pharetra congue, dolor arcu fermentum nibh, non finibus nisi metus auctor nisi. Nulla bibendum urna a lacus auctor, sit amet
vulputate lacus finibus. Morbi vel felis sit amet odio condimentum ullamcorper ac in mauris. Proin vitae vestibulum felis, ac ornare sapien.
Praesent sit amet mi elementum, porta turpis quis, varius nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse
commodo sed lectus id tempor. Vivamus ultrices ullamcorper augue vitae condimentum. Nulla gravida imperdiet molestie. Donec sed imperdiet
tellus. Nulla fringilla nunc vel ex fringilla semper.<br/><br/>Donec sit amet tincidunt dui. Suspendisse ex ex, luctus non imperdiet a, ornare
sed massa. Proin eget ultricies tellus. Quisque nec orci vel augue tristique tincidunt vel id ligula. Duis tincidunt placerat rhoncus. Aenean
eget ligula vel ligula hendrerit consequat. Suspendisse potenti. Aenean massa magna, volutpat sit amet ligula id, convallis fringilla ante.
Sed semper porttitor nisi, sit amet dignissim nulla lobortis a. Suspendisse hendrerit cursus sapien eu dignissim. Quisque pretium, nulla
ut malesuada luctus, enim sapien vulputate diam, efficitur maximus elit metus at lacus. Curabitur iaculis lobortis odio et porttitor. Sed
et congue ipsum.<br/><br/>Nulla ut dictum neque. Etiam placerat eros et mattis facilisis. Curabitur rutrum interdum est ornare suscipit. Nullam
mauris tortor, porta at cursus quis, finibus vel tortor. Nullam aliquam hendrerit nunc in tristique. Proin a leo risus. Maecenas interdum
pellentesque dui, rhoncus hendrerit massa scelerisque ut.<br/><br/>Nulla tempor congue tellus ac imperdiet. Ut facilisis erat eget porta bibendum.
Vivamus vitae nulla nec dolor laoreet finibus. Sed diam nibh, ornare nec maximus a, accumsan vitae diam. In convallis lobortis dolor a varius.
Sed a nisl in diam dapibus maximus ut sit amet mauris. Nulla tincidunt, nisl et dignissim mollis, sapien massa fermentum leo, volutpat porta
quam sem a erat. Pellentesque malesuada lectus sit amet dolor sollicitudin, vitae finibus magna molestie. Cras a ultrices libero. Etiam iaculis
sodales fringilla. Praesent commodo efficitur eros eu tincidunt. Ut ultricies aliquam tincidunt. Etiam feugiat elit in scelerisque vehicula.
Curabitur semper diam a erat finibus pretium.<br/><br/>Aenean sed est porttitor, bibendum lectus vehicula, facilisis lectus. Nam vehicula ligula
venenatis, lobortis lorem eu, fringilla nunc. Vestibulum ullamcorper sem vitae arcu suscipit iaculis. Etiam sodales nisl felis, nec tincidunt
arcu auctor nec. Sed suscipit hendrerit molestie. Vivamus finibus fermentum nunc non auctor. Mauris odio massa, dapibus quis fringilla in,
facilisis vel arcu. Nulla velit velit, tempor sit amet lacus quis, molestie condimentum sem. Vivamus a laoreet orci. Vestibulum dignissim ipsum
in quam placerat vulputate. Nullam malesuada et tortor vitae vestibulum. Aenean id mattis odio. Donec nec turpis lobortis, hendrerit nunc a,
vehicula odio. Pellentesque et ex ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div></div></div>
</div>
<div class="mastfoot">
<div class="inner">
<p>Built and designed for Pith and Prose, by Paraclete.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../assets/js/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
Box shadows take a long time to paint. It would probably be better to use a one-line image with background-repeat-y to get the inset shadow effect. That way Chrome knows it doesn't need to redraw the background and waste all that time calculating a huge area shadow effect. Alternately, the above link shows that just reducing the shadow blur radius can tremendously improve paint times.
I have some description text which is part of a paragraph but the wrapper box doesnt adjust in size to accomodate the text. I have tried height:auto; but it doesnt seem to do much.
If possible please show me an example with and without scrollbars. My main problem is that i cannot get the grey box to expand. If i were to have scroll bars i would want them on the p.desc.
Here is my jsfiddle:http://jsfiddle.net/XxDFb/29/
HTML
<div class="team-wrapper">
<div class="team-member-photo">
<img alt="pic" src="http://placehold.it/134x108">
</div>
<div class="team-member-social-network-links"> <a class="url" href="http://www.repeatpenguin.com" title="repeatpenguin.com" rel="me">Twitter</a> / <a class="url" href="http://www.repeatpenguin.com" title="repeatpenguin.com" rel="me">Facebook</a>
</div>
<div class="team-details">
<p class="name">Firstname Surname</p>
<p class="job-title">Job title</p>
<p class="email">Email Address</p>
<p class="tel">112-123-1232</p>
<p class="desc"><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis elementum neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non facilisis magna. Vestibulum mattis vitae lacus vitae hendrerit. Maecenas vel urna et quam egestas bibendum. Mauris aliquet tellus ante, sit amet malesuada urna tincidunt id. In dapibus erat vel metus aliquet rhoncus.</p><br />
<p>
Integer pharetra nunc id dapibus posuere. Aliquam auctor, felis id euismod dignissim, nulla diam condimentum dui, sit amet aliquam quam elit vel nisi. Ut erat ligula, eleifend vel facilisis vel, viverra ut dui. Suspendisse lacinia massa sed porttitor lacinia. Nunc vitae eros convallis dui dapibus aliquet. Donec cursus est eu dolor pulvinar eleifend. Nunc at sem et lorem tempus tincidunt eu ac nunc. Praesent scelerisque libero vel pharetra porttitor.</p>
</p>
</div>
</div>
CSS
div.team-wrapper {
background-color:#dedede;
padding:10px;
position:relative;
height:auto;
}
div.team-member-photo {
width:135px;
height:109px;
padding-top:20px;
padding-left:20px;
}
div.team-member-photo img {
background: none repeat scroll 0 0 #F1F1EF;
border: 1px solid #B2B4B2;
padding: 8px;
}
div.team-member-social-network-links {
width:135px;
height:109px;
padding-left:30px;
padding-top:20px;
}
div.team-details {
top: 7px;
left: 200px;
position: absolute;
border:1px solid RED;
width:560px;
margin-top:20px;
height:auto;
}
div.team-details p {
margin:0;
line-height:25px;
}
div.team-details p.name {
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
color: #4F688E;
font-weight:700;
font-size:18px;
text-transform:uppercase;
}
div.team-details p.job-title {
color: #626362;
font-weight:400;
font-size:18px;
font:italic 16px/18px Georgia, Palatino, "Times New Roman", Times, serif;
}
div.team-details p.email {
text-shadow:0 1px 1px rgba(255, 255, 255, 0.8);
color: #626362;
}
div.team-details p.tel {
color: black;
font-weight:400;
font-size:18px;
font:16px/18px Georgia, Palatino, "Times New Roman", Times, serif;
}
div.team-details p.desc {
padding-top:40px;
}
It does look like a position: absolute problem to me. Because .team-details is absolute, the parent doesn't have control over it anymore. I put this Fiddle together.
I changed .team-member-photo to .team-member-photo-social and moved the social links to live there. Next, I removed position: absolute and the styles that were attached to it.
From here the two divs can either be display: inline-block to allow for them to sit next to each and still have some margin, or float: left. Floated elements in the parent will cause a height issue, but I've added a class .cf (clearfix) to extend the height of the parent to end of the children.
I went with the float because some browsers (IE7 and below) won't read inline-block