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 want to add a description after every picture that is displayed and I only want it to appear when the image is selected. Adding a paragraph doesn't seem to work, nothing appears.
Here is my html and css - I am not allowed to use any javascript
#gallery {
width: 1000px;
overflow: hidden;
position: relative;
z-index: 1;
margin: 100px auto;
}
#bar {
list-style: none;
padding: 0;
margin: 0;
float: left;
display: inline;
}
#bar li {
padding: 0;
margin: 0;
float: left;
clear: both;
}
#bar li a img {
display: block;
border: none;
}
#bar li a {
display: block;
}
#big {
width: 800px;
height: 600px;
overflow: hidden;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<title>Image Gallery</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="gallery">
<ul id="bar">
<li><img alt="" src="rsz_autumn.jpg" /> </li>
<li><img alt="" src="rsz_lake.jpg" /></li>
<li><img alt="" src="rsz_mountain.jpg" /></li>
<li><img alt="" src="rsz_mountainlake.jpg" /></li>
<li><img alt="" src="rsz_path.jpg" /></li>
<li><img alt="" src="rsz_sea.jpg" /></li>
<li><img alt="" src="rsz_sky.jpg" /></li>
<li><img alt="" src="rsz_sun.jpg" /></li>
<li><img alt="" src="rsz_trail.jpg" /></li>
</ul>
<div id="big">
<div><a name="pic1"></a> <img alt="" src="autumn.jpg" /><p>A picture about autumn.</p></div>
<div><a name="pic2"></a><img alt="" src="lake.jpg" /></div>
<div><a name="pic3"></a><img alt="" src="mountain.jpg" /></div>
<div><a name="pic4"></a><img alt="" src="mountainlake.jpg" /></div>
<div><a name="pic5"></a><img alt="" src="path.jpg" /></div>
<div><a name="pic6"></a><img alt="" src="sea.jpg" /></div>
<div><a name="pic7"></a><img alt="" src="sky.jpeg" /></div>
<div><a name="pic8"></a><img alt="" src="sun.jpg" /></div>
<div><a name="pic9"></a><img alt="" src="trail.jpg" /></div>
</div>
</div>
</body>
</html>
Using a css hack with limitation, see breakdown
Add an input checkbox for each image element
Add a label for each input box
Hide the input box
When the user clicks the label, the input box is check
As a result of the box being checked, we can use the :checked pseudo to apply a style to our sibling elemnent. In this case it may be a caption
See snippet below
#gallery {
width: 1000px;
overflow: hidden;
position: relative;
z-index: 1;
}
a {
pointer-events: none
}
#bar {
list-style: none;
padding: 0;
margin: 0;
float: left;
display: inline;
}
input {
display: none;
}
input:checked~.text {
opacity:1;
}
.text {
opacity:0;
}
#bar li {
padding: 0;
margin: 0;
float: left;
clear: both;
}
#bar li a img {
display: block;
border: none;
}
#bar li a {
display: block;
}
#big {
width: 800px;
height: 600px;
overflow: hidden;
float: left;
}
<div id="gallery">
<ul id="bar">
<li>
<input type="checkbox" id="rad1">
<label for="rad1">
<img alt="" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTzvF_fKLwUk_0nbMnHMJYw4sIiU78lMhMOLTlqvhJ8XrGkqhL_jw" /> </label>
<div class="text">
<h1>This is a caption</h1>
</div>
</li>
<br>
<br><br><br><br><br><br><br><br><br><br><br>
<div id="pic1"></div>
</ul>
</div>
You have to control your code. However, I think you can use :hover selector. Please see this example adding this css: .gallery .desc {visibility:hidden;} .gallery:hover .desc {visibility:visible;}. You can add also a transition effect. I hope I was of any help.
Related
I want my logo on the left side and navigation bar on the right side.
I tried img outside nav class and it did align to left but i want nav and my logo together. How do i do this? Thank you.
Here is my Code:
.img {
text-align: left;
background-position: left;
}
.nav {
border-bottom: 1px solid lightgray;
text-align: right;
line-height: 70px;
height: 70px;
}
<div class="nav">
<img src="images/logo.png" alt="" height="40px" width="80px" style="margin-left: 5px; text-align: left;">
<label for="toggle"> ☰ </label>
<input type="checkbox" id="toggle">
<div class="menu">
Home
Gallery
Contact
Share
Useless
</div>
</div>
Try writing the attached code, it will surely work but if it doesn't let me know in the comments, I will try my best to help you.
In this code I have have made a new <div> and added float:left; to it and removed some inline and internal CSS.
Your code was not getting the job done because you have added opposite properties to parent (.nav) element and child (menu) element.
.img {
float: left;
}
.nav {
border-bottom: 1px solid lightgray;
line-height: 70px;
height: 70px;
}
.menu{
float: right;
}
<!DOCTYPE html>
<html>
<head>
<title>Nav</title>
</head>
<body>
<div class="nav">
<div class="img">
<img src="images/logo.png" alt="" height="40px" width="80px" style="margin-left: 5px;">
<label for="toggle"> ☰ </label>
<input type="checkbox" id="toggle">
</div>
<div class="menu">
Home
Gallery
Contact
Share
Useless
</div>
</div>
</body>
</html>
just use float to align content left or right
.img {
float: left;
}
.nav {
border-bottom: 1px solid lightgray;
line-height: 70px;
height: 70px;
}
.menu{
float: right;
}
<!DOCTYPE html>
<html>
<head>
<title>Nav</title>
</head>
<body>
<div class="nav">
<div class="img">
<img src="images/logo.png" alt="" height="40px" width="80px" style="margin-left: 5px;">
<label for="toggle"> ☰ </label>
<input type="checkbox" id="toggle">
</div>
<div class="menu">
Home
Gallery
Contact
Share
Useless
</div>
</div>
</body>
</html>
Here's a good solution. The checkbox (#toggle), I think, will be hidden by default.
.img {
text-align: left;
background-position: left;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid lightgray;
text-align: right;
line-height: 70px;
height: 70px;
}
.nav label {
margin-right: auto;
}
#toggle {
display: none;
}
<div class="nav">
<img src="images/logo.png" alt="" height="40px" width="80px" style="margin-left: 5px; text-align: left;">
<label for="toggle"> ☰ </label>
<input type="checkbox" id="toggle">
<div class="menu">
Home
Gallery
Contact
Share
Useless
</div>
</div>
Does anyone know how I can remove the space between the top of my menu and the bottom of the image on top of the page. I tried to do it with margin and padding. But that didn't work.
This is a picture of the result I get now
#charset "UTF-8";
body {
background-color: #ADF1F5;
}
html,
body {
margin: 0;
padding: 0;
}
#Anouk {
text-align: center;
margin: 0 auto;
padding: 0;
}
#header {
height: 80px;
background: #000000;
}
li {
display: block;
float: left;
}
li a {
color: #FFFFFF;
height: 80px;
}
#contact {
float: right;
}
<div id="Anouk">
<img src="logo/Hout.png" width="1000px" alt="Logo" />
</div>
<div id="header">
<div id="menu">
<!--Home-->
<li id="home">
<a href="index.html">
<img src="Iconen/Home.png" height="80px" alt="home" onmouseover="this.src='Iconen/Home2.png'" onmouseout="this.src='Iconen/Home.png'" />
</a>
</li>
<!--Over Mij-->
<li id="over">
<a href="over.html">
<img src="Iconen/Over.png" height="80px" alt="home" onmouseover="this.src='Iconen/Over2.png'" onmouseout="this.src='Iconen/Over.png'" />
</a>
</li>
<!--Portfolio-->
<li id="portfolio">
<a href="portfolio.html">
<img src="Iconen/Portfolio.png" height="80px" alt="home" onmouseover="this.src='Iconen/Portfolio2.png'" onmouseout="this.src='Iconen/Portfolio.png'" />
</a>
</li>
<!--Contact-->
<li id="contact">
<a href="contact.html">
<img src="Iconen/Contact.png" height="80px" alt="home" onmouseover="this.src='Iconen/Contact2.png'" onmouseout="this.src='Iconen/Contact.png'" />
</a>
</li>
</div>
</div>
Try to add display:block to your top most image.
#Anouk img{
display: block;
}
Here is a solution: https://jsfiddle.net/egjbmp1u/
For your #header style you need to add:
position: relative;
float: left;
width: 100%;
Also, #Anouk style should look like this:
#Anouk {
display: flex;
text-align: center;
padding: 0;
}
#Anouk img {
margin: 0 auto;
}
I am using Tiny Scrollbar Plugin to make a tiny horizontal scrollbar to display a bunch of images inside a div in a non breaking single in reduced window size of 768 px with the help of Media Queries . When I run the above code and reduce my window size to 768 px, I got my images displaying in a single line but unfortunately i not getting any horizontal scrollbar to scroll images. I don't know where i'm doing wrong. Can anyone tell how to get a tiny horizontal scroll bar
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="Scripts/jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.10.3.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.tinyscrollbar.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#scrollbar1').tinyscrollbar({ axis: 'y' });
});
</script>
<style>
.overview
{
white-space: nowrap;
}
#scrollbar1
{
width: 100%;
margin: 20px 0 10px;
}
#scrollbar1 .viewport
{
width: 100%;
height: 200px;
overflow: hidden;
position: relative;
}
#scrollbar1 .overview
{
list-style: none;
position: absolute;
left: 0;
top: 0;
padding: 0;
margin: 0;
width: 100%;
}
#scrollbar1 .scrollbar
{
position: relative;
background-position: 0 0;
float: right;
width: 15px;
}
#scrollbar1 .track
{
background: height: 100%;
width: 15px;
position: relative;
}
#scrollbar1 .thumb
{
background-color: #e0d8b8;
border-radius: 4px;
height: 20px;
width: 8px;
cursor: pointer;
overflow: hidden;
position: absolute;
top: 0;
left: -5px;
}
#scrollbar1 .thumb .end
{
background-color: #e0d8b8;
border-radius: 4px;
overflow: hidden;
height: 20px;
width: 8px;
}
#scrollbar1 .disable
{
display: none;
}
#media screen and (max-width: 768px)
{
.overview
{
white-space: nowrap;
display: inline;
}
}
</style>
</head>
<body>
<div id="scrollbar1">
<div class="scrollbar">
<div class="track">
<div class="thumb">
<div class="end">
</div>
</div>
</div>
</div>
<div class="viewport">
<div class="overview">
<img src="Comic.jpg" alt="" />
<img src="Comic.jpg" alt="" />
<img src="Comic.jpg" alt="" />
<img src="Comic.jpg" alt="" />
<img src="Comic.jpg" alt="" />
<img src="Comic.jpg" alt="" />
<img src="Comic.jpg" alt="" />
<img src="Comic.jpg" alt="" />
<img src="Comic.jpg" alt="" />
<img src="Comic.jpg" alt="" />
<img src="Comic.jpg" alt="" />
<img src="Comic.jpg" alt="" />
<img src="Comic.jpg" alt="" />
<img src="Comic.jpg" alt="" />
<img src="Comic.jpg" alt="" />
<img src="Comic.jpg" alt="" />
<img src="Comic.jpg" alt="" />
<img src="Comic.jpg" alt="" />
</div>
</div>
</div>
</body>
</html>
I would suggest switching to bxslider, if you don't mind.
Here is a simple example. (Ignore white borders around the images). You should look at the options page, this slider is highly configurable.
The only disadventage for you is lack of horizontal scrolling bar. But the slider is fully responsive, so there is no need to write media-queries etc.
But, backing to your code, try to reload tinyscrollbar on window resize. If the widths change because of media queries, it's a must.
$(window).resize(function() {
// reload your tinnyscrollbar again
});
I have the last link on the top navbar "image4" that appears on all the footer. So where ever I mouse over on the footer the hyperlink of the last <li> item wants to trigger.
For some reason it looks like image4 link goes all the way down to the footer. If I remove the image4 <li> item, image3 is then the new link that can be triggered from anywhere in the footer.
How do i solve this?
My code is as follows:
HTML:
</head>
<body>
<div id="wrapper">
<div id="nav">
<ul>
<li><a href="http://www.com/" target="blank" class="image1"><img alt="#" src="image1.png" /></li>
<li><a href="http://www.com/" target="blank" class="image2"><img alt="#" src="image2.png" /></li>
<li><a href="http://www.com/" target="blank" class="image3"><img alt="#" src="image3.png" /></li>
<li><a href="http://www.com/" target="blank" class="image4"><img alt="#" src="image4.png" /></li>
</ul>
</div><!-- end of the nav -->
<div id="content">
<img alt="#" class="image5" src="image5.png" />
<img alt="#" class="image6" src="image6.png" />
</div><!-- end of the content -->
</div><!-- end of the wrapper -->
</body>
<footer>
<img class="logo" alt="#" src="logo.png" />
<p>© 2012<?php echo date('Y'); ?> logo studio. All rights reserved.</p>
</footer>
</html>
CSS:
*{
margin: 0px;
padding: 0px;
}
body {
margin: 0px;
background: url('images/bg.png') repeat-x;
background-color: #ffffeb;
}
#nav {
float: left;
width: 1024px;
height: 732px;
display: block;
margin: 5px 0 0 200px;
}
ul {
list-style: none;
width: 420px;
margin: 0 auto;
}
li {
float: left;
}
.image5 {
position: absolute;
top: 0px;
left: 200px;
z-index: -1;
}
.image6 {
position: absolute;
top: 375px;
left: 200px;
z-index: -1;
}
footer {
height: 30px;
position: relative;
top: 715px;
}
.logo {
position: absolute;
left: 230px;
top: 0px;
}
p {
font-family: helvetica, arial, sans serif;
font-size: 12px;
color: #aaaaaa;
text-decoration: none;
position: absolute;
left: 940px;
top: 0px;
padding: 5px;
}
<head>
</head>
<body>
<div id="wrapper">
<div id="nav">
<ul>
<li><img alt="#" src="image1.png" /> </li>
<li><img alt="#" src="image2.png" /></li>
<li><img alt="#" src="image3.png" /></li>
<li><img alt="#" src="image4.png" /></li>
</ul>
</div><!-- end of the nav -->
<div id="content">
<img alt="#" class="image5" src="image5.png" />
<img alt="#" class="image6" src="image6.png" />
</div><!-- end of the content -->
<footer>
<img class="logo" alt="#" src="logo.png" />
<p>© 2012<?php echo date('Y'); ?> logo studio. All rights reserved.</p>
</footer>
</div><!-- end of the wrapper -->
</body>
</html>
the footer tag (and almost every other tag) should go inside the body tag.
<html>
<head>
<!--allows: meta, title, script and style -->
</head>
<body>
<!--allows every other tag, including script, style, li, ul, ol, b, i, u, hr, h1-h5, table, etc...... -->
</body>
</html>
other than that, i dont' see a reason your image4 graphic should be appearing in the footer =S
You forgot the '/' in the closing tag for <a>. The close tag should look like </a>.
I have a nice challenge for you. Here you have the next code (live example: http://inturnets.com/test/test.html):
<!DOCTYPE html><html><head><title></title>
<style type="text/css">* {
margin: 0;
padding: 0;}a, a:hover {
text-decoration: none;
}
.grid {
width: 984px;
margin: 0 auto;
list-style: none;
height: 666px;
}
.grid li {
float: left;
position: relative;
}
.small + .small {
position: relative;
clear: left;
}
.large, .large a {
width: 393px;
height: 222px;
}
.small, .small a {
width: 198px;
height: 111px;
}
.small a, .large a {
display: block;
cursor: pointer;
color: #fff;
}
.overlay {
background: #000;
width: 100%;
height: 22px;
color: #fff;
opacity: 0;
position: absolute;
top: 0;
}
</style>
</head>
<body>
<ul class="grid">
<li class="item small"><div class="overlay">Title 1</div><img src="img/squares.png" border="0" width="198" height="111" /></li>
<li class="item small"><div class="overlay">Title 2</div><img src="img/space.png" border="0" width="198" height="111" /></li>
<li class="item large"><div class="overlay">Title 3</div><img src="img/arch.png" border="0" width="393" height="222" /></li>
<li class="item large"><div class="overlay">Title 4</div><img src="img/tree.png" border="0" width="393" height="222" /></li>
<li class="item large"><div class="overlay">Title 5</div><img src="img/arch.png" border="0" width="393" height="222" /></li>
<li class="item large"><div class="overlay">Title 6</div><img src="img/tree.png" border="0" width="393" height="222" /></li>
<li class="item small"><div class="overlay">Title 7</div><img src="img/squares.png" border="0" width="198" height="111" /></li>
<li class="item small"><div class="overlay">Title 8</div><img src="img/space.png" border="0" width="198" height="111" /></li>
<li class="item large"><div class="overlay">Title 9</div><img src="img/tree.png" border="0" width="393" height="222" /></li>
<li class="item small"><div class="overlay">Title 10</div><img src="img/squares.png" border="0" width="198" height="111" /></li>
<li class="item small"><div class="overlay">Title 11</div><img src="img/space.png" border="0" width="198" height="111" /></li>
<li class="item large"><div class="overlay">Title 12</div><img src="img/arch.png" border="0" width="393" height="222" /></li>
</ul>
</body>
</html>
Tasks:
one single list (ok)
simple float:left for the LI's (ok)
align the cells like on the next picture (not yet done)
Tips:
as you see the second .small class has position relative
you don't need anything special on the second small one
you need to do some other things
so you then need to push the item back into it's correct position
and then you need to fix the empty space it leaves
#hun i Try from my side may be that's help you:
.small + .small {
position: relative;
margin-left:-198px;
margin-top:111px
}
I'm not sure how to do it using floats.
Here's a solution using display: inline-block instead.
The only difference I can see between the display of my code and your goal picture is that the order of the two small images on the right is inverted.
However, I'm not going to try to fix it, because the order of images in your goal picture is wrong (or so I think):
Your source code has:
Image 6 - img/tree.png
Image 7 - img/squares.png
Image 8 - img/space.png
But in your goal picture, space is on top of squares, which is inconsistent with the other instances of the "two small images".
Without further ado:
The changes:
I removed the whitespace between the <li> tags. You could workaround having to do this.
New CSS:
.grid li {
position: relative;
display: inline-block;
vertical-align: top;
*display: inline;
zoom: 1
}
.small + .small {
position: relative;
clear: left;
top: 111px;
margin-left: -198px
}
I included the hacks required to make display: inline-block work in IE7.
Tested in IE7/8, and recent versions of: Chrome, Firefox, Safari, Opera.
I have created a working demo.
I stripped your appearing title divs, a bit shortened the HTML, and kept everything to a minimum, so the final CSS looks like this:
ul,li { margin: 0; padding: 0; }
a, a:hover { text-decoration: none; }
.grid { width: 984px; margin: 0 auto; list-style: none; height: 666px; }
.grid li { float: left; position: relative; }
.small + .small { margin: 111px 0 0 -198px; }
.large, .large a, .large img { width: 393px; height: 222px; }
.small, .small a, .small img { width: 198px; height: 111px; }
.item a { display: block; cursor: pointer; color: #fff; }
From this base, it seems to be safe to add those title divs and stuff.
Tested only on Firefox, but I don't really see a reason why it would not work on other browsers (tell me if I'm wrong). Well, except the + selector, but it was in your original CSS either.