I'd like to have a header and then three images side-by-side.
When in small screens, the images should occupy all the width and be placed vertically one after another.
For each image, when the mouse is over it, some text should be overlayed.
For mobile and touch screens, I don't know how that text could be shown, but would like to have it shown in some way.
Each of the images should point to another html page (not shown in my example.
What I managed to do until now is:
<!DOCTYPE html>
<html>
<head>
<style>
html {
font-family: helvetica, arial, sans-serif;
}
.cabecalho {
width:70%;
height:200px;
text-align:center;
margin:70px;
margin-top:10px;
}
.cabecalho p{
line-height: 10px; /* within paragraph */
margin-bottom: 4px; /* between paragraphs */
}
.corpo {
width:60%;
height:500px;
}
* {
box-sizing: border-box;
}
.img__description_layer {
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(204, 204, 204, 0.6);
color: #111;
visibility: hidden;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
pad: 8px;
height: 300px;
width: 200px;
/* transition effect. not necessary */
transition: opacity .2s, visibility .2s;
}
.img__description {
transition: .2s;
transform: translateY(1em);
}
.img__wrap:hover .img__description {
transform: translateY(0);
}
.img__wrap:hover .img__description_layer {
visibility: visible;
opacity: 1;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 500px) {
.column {
width: 100%;
}
}
</style>
</style>
</head>
<body>
<div class="cabecalho">
<header>
</header>
</div>
<main>
<div class="row">
<div class="column">
<div class="img__wrap">
<img class="img__img" alt="alttext" align="middle" src="http://placehold.it/257x200.jpg" width="300" height="200" style="width:100%">
<div class="img__description_layer">
<p class="img__description">Some paragraph</p>
</div>
</div>
</div>
<div class="column">
<div class="img__wrap">
<img class="img__img" alt="alttext" align="middle" src="http://placehold.it/257x200.jpg" width="300" height="200" style="width=100%">
<div class="img__description_layer">
<p class="img__description">Some paragraph</p>
</div>
</div>
</div>
<div class="column">
<div class="img__wrap">
<img class="img__img" alt="alttext" align="middle" src="http://placehold.it/257x200.jpg" width="300" height="200" style="width=100%">
<div class="img__description_layer">
<p class="img__description">Some paragraph</p>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
I'd appreciate some help on this.
I have a bxslider containg a video as first slide, than three slides of images .How i can auto slide in bxslider when video ends?
<ul class="bxslider" style="width: 615%; position: relative; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">
<li class="bx-clone" style="float: left; list-style: outside none none; position: relative; width: 1298px; z-index: 0; display: none;">
<li style="float: left; list-style: outside none none; position: relative; width: 1298px; z-index: 50; display: block;">
<li style="float: left; list-style: outside none none; position: relative; width: 1298px; z-index: 0; display: none;">
<li style="float: left; list-style: outside none none; position: relative; width: 1298px; z-index: 0; display: none;">
<li style="float: left; list-style: outside none none; position: relative; width: 1298px; z-index: 0; display: none;">
<li class="bx-clone" style="float: left; list-style: outside none none; position: relative; width: 1298px; z-index: 50; display: block;">
</ul>
$('.bxslider').bxSlider({
adaptiveHeight: true,
mode: 'fade',
pause: 3000,
});
Used the video event ended and the bxSlider method goToNextSlide(). As a bonus, I used .each() so that it's capable of supporting multiple videos and I also added a function enabling user to click anywhere on the video to pause/play.
Note: There is a video at the end and the beginning.
SNIPPET
var bx = $(".bx").bxSlider({
pager: false,
nextText: '',
prevText: ''
});
//Each .vid...
$('.vid').each(function(i) {
//This is the regular vanilla 'this'.(optional/required for next function)
var self = this;
//Click on the video element to play or pause.(optional)
$(this).on('click', function() {
(self.paused) ? self.play(): self.pause();
});
//When this video ends, go to next slide
$(this).on('ended', function() {
bx.goToNextSlide();
});
});
/* This centers the img and video */
img,
video {
display: block;
margin: 0px auto;
cursor: pointer;
min-height: 180px;
}
.bx-viewport {
min-height: 90vh !important;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Multi BxSlider</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
</head>
<body>
<ul class="bx">
<li data-idx="0">
<video id="vid0" class="vid" src="http://media6000.dropshots.com/photos/1381926/20170326/005609.mp4" controls width='320' height='180' autoplay="autoplay" ></video>
</li>
<li data-idx="1">
<img src="//dummyimage.com/320x180/000/fff.png&text=2">
</li>
<li data-idx="2">
<img src="//dummyimage.com/320x180/000/fc0.png&text=3">
</li>
<li data-idx="3">
<img src="//dummyimage.com/320x180/000/0ff.png&text=4">
</li>
<li data-idx="4">
<video id="vid4" class="vid" src="http://media6000.dropshots.com/photos/1381926/20170326/005612.mp4" controls width='320' height='180' autoplay="autoplay" ></video>
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/g/bxslider#4.2.12(jquery.bxslider.min.js+vendor/jquery.fitvids.js)"></script>
</body>
</html>
Can someone please take a look at my code and see what I am doing wrong...
I'm a beginner jquery person and
I tried reading all the forum post and implementing them my self and I still get errors... this is taking me two days and I'm about to kill my laptop
thanks so much in advance,
~ grace
$(document).ready(function() {
//parent. on click anchor
$('.tab').on('click', '.clk', function(event) {
event.stopPropagation();
//Find the child by traversing
$(this).closest('.clk').find('.reveal').slideToggle();
//Show the child
});
});
body {
width: 350px;
margin: 0 auto;
}
h1 {
font-size: 1em;
color: #FF7F50;
}
.tbCont {
/* width: 100%;float:left; this works too*/
overflow: hidden;
border: 1px solid red;
text-align: center;
}
ul {
padding-left: 0;
}
li {
list-style: none;
display: inline-block;
zoom: 1;
width: 90%;
}
.cHolder {
display: none;
}
/*hides related content*/
.reveal {
width: 100%;
background-color: pink;
display: inline-block;
zoom: 1;
border-bottom: 2px solid #aaa;
}
.reveal span {
float: left;
width: 40%;
margin: 10px;
}
.reveal img {
float: right;
width: 40%;
height: 40%;
margin: 10px;
background-color: #fff;
}
a {
width: 100%;
text-align: left;
border-style: none;
border-bottom: 2px solid #aaa;
background-color: white;
font-size: 2em;
color: #aaa;
display: block;
text-decoration: none;
}
a:hover {
color: orange;
border-bottom: 2px solid orange;
}
a:active {
color: #7FFFD4;
border-bottom: 2px solid #7FFFD4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<div class="tbCont">
<h1>Title</h1>
<ul class="tab">
<li>
Tab Title
<ul class="cHolder">
<li class="reveal">
<span>copy here Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>
<img/>
</li>
</ul>
</li>
<li>
Tab Title
<ul class="cHolder">
<li class="reveal">
<span>copy here.</span>
<img/>
</li>
</ul>
</li>
<li>
Tab Title
<ul class="cHolder">
<li class="reveal">
<span>copy here</span>
<img/>
</li>
</ul>
</li>
<li>
Tab Title
<ul class="cHolder">
<li class="reveal">
<span>copy here</span>
<img/>
</li>
</ul>
</li>
<li>
Tab Title
<ul class="cHolder">
<li class="reveal">
<span>copy here</span>
<img/>
</li>
</ul>
</li>
</ul>
</div>
<!-- End your code here -->
</body>
</html>
I tried to correct in this fiddle, look if this helps :
http://jsfiddle.net/h9u2g6bu/
Notice display:none should be applied to what you want to toggle, i.e. .cHolder .reveal instead of .cHolder :
.cHolder .reveal {
display: none;
}
Right, so I have made a navigation bar and I want to add images before each link, I know I can use a.header:before but I need different images for each link, a house for home, spanner for spec and so on. What is the simplest way of doing this? Is there a way without creating a div for each one and styling them individually?
For a preview of the page so far with the nav - http://zimxtrial.ukbigbuy.com/
One more thing - here is part of the css:
#header-nav {
background-color: #FFFFFF;
height: 80px; height: 8.0rem;
width: 100%;
position: absolute;
top: 50px;
}
.header-nav-center {
height: 80px; height: 8.0rem;
text-align: center;
position: relative;
top: 0px;
width: 500px; width: 50.0rem;
margin-left: auto;
margin-right: auto;
}
.header-nav-center ul {
margin: 0;
}
.header-nav-center ul li {
list-style: none;
margin: 0 35px 0 0;
display: inline;
}
a.header {
line-height: 80px; line-height: 8.0rem;
font-size: 17px; font-size: 1.7rem;
}
And HTML:
<div id="home">
<div id="header-nav">
<div id="hr-nav-top-container">
<hr class="nav" />
</div>
<div id="logo"></div>
<div class="header-nav-center">
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li><a class="header" href="#features">Features</a>
</li>
<li><a class="header" href="#specification">Specification</a>
</li>
<li><a class="header" href="#contact-us">Contact Us</a>
</li>
</ul>
</div>
<div id="pre-order"></div>
<div id="hr-nav-bottom-container">
<hr class="nav" />
</div>
</div>
</div>
Can I add something like:
a.header.home:before {
background: url('../images/home-logo.png') center center no-repeat;
}
Not that exactly but something like it?
You could make ids for each link and add the ids to the desired link img
I'm really really new to HTML/CSS, but somehow decided to plunge head on to using 960 Grid System, which I found helpful. I know some says it's unsemantic, but I've been involved and at the end, tangled in the problem stated above. I've tried a few codes like overflow: hidden, overflow: auto, display: block, etc that I found on other pages and pages on stack overflow, but the error still there.
I would really appreciate anyone's help at this site.
These are the html of the site:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content=
"text/html; charset=us-ascii">
<meta http-equiv="content-type" content=
"text/html; charset=us-ascii">
<base>
<title>
najibahabakar.com
</title>
<link rel="stylesheet" href="style.css" type="text/css"
media="screen">
<link rel="stylesheet" href="960.css" type="text/css" media=
"screen">
<link rel="stylesheet" href="text.css" type="text/css" media=
"screen">
</head>
<body>
<div class="container_12">
<div id="topgrafik">
<div class="prefix_6">
<ul id="nav" class="nav">
<li>Laman Depan
</li>
<li>Mengenai
</li>
<li>Mimpi
</li>
<li>Hubungi
</li>
</ul>
</div>
<div class="clear"></div>
<div class="grid_3 prefix_1" id="tgfocus">
<img class="frame" src="images/mengkuang.jpg" alt=
"tikar mengkuang!">
</div>
<div class="clear"></div>
<div class="center">
<div class="grid_4">
<h5>
Buku, Sastera, Diri
</h5>
</div>
<div class="grid_4">
<h5>
Galeri
</h5>
</div>
<div class="grid_4">
<h5>
Web Design
</h5>
</div>
</div>
</div>
<div class="clear"></div>
<div id="middlebody">
<div class="left">
<div class="grid_2 prefix_1">
<p id="date">
31 DISEMBER 2009
</p>
<p>
Buku, kemuncak peradaban
</p>
<hr>
<p id="date">
31 DISEMBER 2009
</p>
<p>
Cemas bila buku bertambah!
</p>
<hr>
<p id="date">
31 DISEMBER 2009
</p>
<p>
Janji tak terpenuh
</p>
</div>
<div class="grid_4 prefix_1">
<p>
Di sini galeri imej, mungkin juga hasil-hasil kerja
Photoshop & Inkscape
</p>
<hr>
</div>
<div class="grid_2 prefix_1">
<p id="date">
31 DISEMBER 2009
</p>
<p>
Hasil pertama
</p>
<hr>
</div>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
And the css:
html {
background: url('images/bground.jpg') repeat;
color: #333333;
}
body,h1,h2,h3,h4,h5,h6 {
padding: 0;
margin: 0;
}
/*----------NAVIGATION--------------------*/
#nav li {
list-style-type: none;
display: inline;
}
ul.nav {
margin-top: 2px;
}
/*----------------GENERAL CLASSES------------*/
.center {
text-align: center;
align: center;
padding-left: 10px;
}
.left {
text-align: left;
font-size: 95%;
padding-left: 15px;
}
#date {
font-size: 85%;
}
/*-----------------BACKGROUND-----------------*/
#topgrafik {
background: url('images/topgrafik.jpg') center top;
height: 426px;
width: 993px;
float: left;
position: relative;
}
#middlebody {
background: url('images/kandungan2.jpg') center bottom repeat-y;
height: 408px;
width: 993px;
float: left;
position: relative;
}
#footer {
background: url('images/footer.jpg') center bottom;
background-repeat: no-repeat;
height: 228px;
width: 993px;
float: left;
position: relative;
}
/*---------------CONTENT LAYOUT---------------------*/
#tgfocus {
margin-top: 80px;
margin-bottom: 40px;
position: relative;
min-height: 205px;
}
/*------------------IMAGES AND THUMBNAIL GALLERY-----------*/
.frame {
padding: 10px;
border: 1px solid #333300;
height: 190px;
width: 150px;
background-color: #eaede0;
position: absolute;
}
.align-right {
float:right;
margin: 0 0 15px 15px;
}
.align-left {
float:left; margin: 0 15px 15px 0;
}
Plus the 960 Grid System CSS (for easy reference):
.container_12,.container_16{margin-left:auto;margin-right:auto;width:960px}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16{display:inline;float:left;position:relative;margin-left:10px;margin-right:10px}.container_12 .grid_3,.container_16 .grid_4{width:220px}.container_12 .grid_6,.container_16 .grid_8{width:460px}.container_12 .grid_9,.container_16 .grid_12{width:700px}.container_12 .grid_12,.container_16 .grid_16{width:940px}.alpha{margin-left:0}.omega{margin-right:0}.container_12 .grid_1{width:60px}.container_12 .grid_2{width:140px}.container_12 .grid_4{width:300px}.container_12 .grid_5{width:380px}.container_12 .grid_7{width:540px}.container_12 .grid_8{width:620px}.container_12 .grid_10{width:780px}.container_12 .grid_11{width:860px}.container_16 .grid_1{width:40px}.container_16 .grid_2{width:100px}.container_16 .grid_3{width:160px}.container_16 .grid_5{width:280px}.container_16 .grid_6{width:340px}.container_16 .grid_7{width:400px}.container_16 .grid_9{width:520px}.container_16 .grid_10{width:580px}.container_16 .grid_11{width:640px}.container_16 .grid_13{width:760px}.container_16 .grid_14{width:820px}.container_16 .grid_15{width:880px}.container_12 .prefix_3,.container_16 .prefix_4{padding-left:240px}.container_12 .prefix_6,.container_16 .prefix_8{padding-left:480px}.container_12 .prefix_9,.container_16 .prefix_12{padding-left:720px}.container_12 .prefix_1{padding-left:80px}.container_12 .prefix_2{padding-left:160px}.container_12 .prefix_4{padding-left:320px}.container_12 .prefix_5{padding-left:400px}.container_12 .prefix_7{padding-left:560px}.container_12 .prefix_8{padding-left:640px}.container_12 .prefix_10{padding-left:800px}.container_12 .prefix_11{padding-left:880px}.container_16 .prefix_1{padding-left:60px}.container_16 .prefix_2{padding-left:120px}.container_16 .prefix_3{padding-left:180px}.container_16 .prefix_5{padding-left:300px}.container_16 .prefix_6{padding-left:360px}.container_16 .prefix_7{padding-left:420px}.container_16 .prefix_9{padding-left:540px}.container_16 .prefix_10{padding-left:600px}.container_16 .prefix_11{padding-left:660px}.container_16 .prefix_13{padding-left:780px}.container_16 .prefix_14{padding-left:840px}.container_16 .prefix_15{padding-left:900px}.container_12 .suffix_3,.container_16 .suffix_4{padding-right:240px}.container_12 .suffix_6,.container_16 .suffix_8{padding-right:480px}.container_12 .suffix_9,.container_16 .suffix_12{padding-right:720px}.container_12 .suffix_1{padding-right:80px}.container_12 .suffix_2{padding-right:160px}.container_12 .suffix_4{padding-right:320px}.container_12 .suffix_5{padding-right:400px}.container_12 .suffix_7{padding-right:560px}.container_12 .suffix_8{padding-right:640px}.container_12 .suffix_10{padding-right:800px}.container_12 .suffix_11{padding-right:880px}.container_16 .suffix_1{padding-right:60px}.container_16 .suffix_2{padding-right:120px}.container_16 .suffix_3{padding-right:180px}.container_16 .suffix_5{padding-right:300px}.container_16 .suffix_6{padding-right:360px}.container_16 .suffix_7{padding-right:420px}.container_16 .suffix_9{padding-right:540px}.container_16 .suffix_10{padding-right:600px}.container_16 .suffix_11{padding-right:660px}.container_16 .suffix_13{padding-right:780px}.container_16 .suffix_14{padding-right:840px}.container_16 .suffix_15{padding-right:900px}.container_12 .push_3,.container_16 .push_4{left:240px}.container_12 .push_6,.container_16 .push_8{left:480px}.container_12 .push_9,.container_16 .push_12{left:720px}.container_12 .push_1{left:80px}.container_12 .push_2{left:160px}.container_12 .push_4{left:320px}.container_12 .push_5{left:400px}.container_12 .push_7{left:560px}.container_12 .push_8{left:640px}.container_12 .push_10{left:800px}.container_12 .push_11{left:880px}.container_16 .push_1{left:60px}.container_16 .push_2{left:120px}.container_16 .push_3{left:180px}.container_16 .push_5{left:300px}.container_16 .push_6{left:360px}.container_16 .push_7{left:420px}.container_16 .push_9{left:540px}.container_16 .push_10{left:600px}.container_16 .push_11{left:660px}.container_16 .push_13{left:780px}.container_16 .push_14{left:840px}.container_16 .push_15{left:900px}.container_12 .pull_3,.container_16 .pull_4{left:-240px}.container_12 .pull_6,.container_16 .pull_8{left:-480px}.container_12 .pull_9,.container_16 .pull_12{left:-720px}.container_12 .pull_1{left:-80px}.container_12 .pull_2{left:-160px}.container_12 .pull_4{left:-320px}.container_12 .pull_5{left:-400px}.container_12 .pull_7{left:-560px}.container_12 .pull_8{left:-640px}.container_12 .pull_10{left:-800px}.container_12 .pull_11{left:-880px}.container_16 .pull_1{left:-60px}.container_16 .pull_2{left:-120px}.container_16 .pull_3{left:-180px}.container_16 .pull_5{left:-300px}.container_16 .pull_6{left:-360px}.container_16 .pull_7{left:-420px}.container_16 .pull_9{left:-540px}.container_16 .pull_10{left:-600px}.container_16 .pull_11{left:-660px}.container_16 .pull_13{left:-780px}.container_16 .pull_14{left:-840px}.container_16 .pull_15{left:-900px}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}
All the background images in three divs #topgrafik, #middlebody and #footer disappear in IE.
Please help and thank you in advance.
I think the problem is the last slash in the image paths:
./images/footer.jpg/
I am not sure, but maybe, the dot may cause problems, too. You could describe a relative path just like this
images/footer.jpg
Have you tried removing the trailing slash in the image url?
Like this:
background: url('images/topgrafik.jpg') center top;