I need a simple image gallery so I decided to build it entirly on CSS, and tried to find something appropriate in the net.I found something very close to what I want, here are the applied CSS styles:
<html>
<head>
<title>Gallery</title>
<style type="text/css">
body {
margin: 0 auto;
padding: 0;
width: 500px;
color: #000000;
font: normal 80%/120% Georgia, "Times New Roman", Times, serif;
}
a
{
color: #000000;
}
.gallery {
list-style: none;
margin: 0;
padding: 0;
}
.gallery li {
margin: 10px;
padding: 0;
float: left;
position: relative;
width: 120px;
height: 100px;
}
.gallery img {
background: #fff;
border: solid 1px #ccc;
padding: 4px;
width: 110;
height: 90;
}
.gallery span {
width: 77px;
height: 27px;
display: block;
position: absolute;
top: -12px;
left: 50px;
background: url(images/tape.png) no-repeat;
}
.gallery a:hover img {border: 1px solid #0000ff; width:400; height:300; overflow: auto}
</style>
</head>
<body>
<ul class="gallery">
<li><span></span><img src="image/8.jpg" alt="image" /></li>
<li><span></span><img src="image/9.jpg" alt="image" /></li>
<li><span></span><img src="image/4.jpg" alt="image" /></li>
<li><span></span><img src="image/7.jpg" alt="image" /></li>
<li><span></span><img src="image/5.jpg" alt="image" /></li>
<li><span></span><img src="image/6.jpg" alt="image" /></li>
<li><span></span><img src="image/3.jpg" alt="image" /></li>
<li><span></span><img src="image/1.jpg" alt="image" /></li>
<li><span></span><img src="image/2.jpg" alt="image" /></li>
</ul>
</body>
</html>
In fact I don't even know why i need .gallery span{} (maybe some tips here) But the main problem is this:
Pic1:
This is how my gallery looks and I want it to look just like that, but when i a:hover and enlarge the image here's what happen
Pic2:
and to make it clear one more picture
Pic3:
What I need, and want to accomplish is all enlarged images to appear like this:
Pic4:
but obviously in front of the thumbnails.Any help please.
Thanks
Leron
Add position: relative; to your body style, remove position: relative; from .gallery li, and add position: absolute; top: 0; left: 0; to .gallery a:hover img.
Your final CSS being:
<style type="text/css">
body {
margin: 0 auto;
padding: 0;
width: 500px;
color: #000000;
font: normal 80%/120% Georgia, "Times New Roman", Times, serif;
position: relative;
}
a
{
color: #000000;
}
.gallery {
list-style: none;
margin: 0;
padding: 0;
}
.gallery li {
margin: 10px;
padding: 0;
float: left;
width: 120px;
height: 100px;
}
.gallery img {
background: #fff;
border: solid 1px #ccc;
padding: 4px;
width: 110;
height: 90;
}
.gallery span {
width: 77px;
height: 27px;
display: block;
position: absolute;
top: -12px;
left: 50px;
background: url(images/tape.png) no-repeat;
}
.gallery a:hover img {border: 1px solid #0000ff; width:400; height:300; overflow: auto; position: absolute; top: 0; left: 0;}
</style>
You need to use the z-index property:
.gallery a:hover img {
....
z-index: 10;
}
Related
i am trying to create a CSS Animation for a vertical line going upwards - the line should be within a specific div
I have used gsap - i have used as well ypercent field, however the line starts from below the FirstScene div while i need it to be contained within the FirstScene div
gsap.fromTo(".vertical-line",{ yPercent:10 }, {yPercent:0,duration: 5});
* {
margin: 0;
padding: 0
}
.topnav {
position: sticky;
top: 0;
font-size: x-large;
background-color: black;
position: -webkit-sticky;
overflow: hidden;
z-index: 1;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
}
li {
float: right;
padding: 8px;
color: white;
display: inline;
}
linkStyle {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li i {
color: white;
text-decoration: none;
}
li a {
color: white;
text-decoration: none;
}
#li-left {
float: left;
}
body {
margin: 0px;
height: 100%;
}
.FirstScene {
background-color: black;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
.line {
left: 50%;
top: 50%;
width=10px;
height: 50%;
position: absolute;
}
.vertical-line {
border-left: 6px solid blue;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<div class="topnav">
<ul>
<li id="li-left">
<Link to="/" class="linkStyle"> MINA IBRAHIM
</Link>
</li>
<li>
<a href="https://github.com/ibrahimmina">
<i class="fa-brands fa-github"></i>
</a>
</li>
<li>
<a href="https://www.linkedin.com/in/minasamyibrahim/">
<i class="fa-brands fa-linkedin"></i>
</a>
</li>
<li>
.email()
</li>
<li>
<Link to="/about" class="linkStyle"> .about()
</Link>
</li>
</ul>
</div>
<body>
<section class="FirstScene">
<div class="line">
<div class="vertical-line">
</div>
</div>
</section>
</body>
Please use the bellow css for the Vertical Line Going Upwards animations
.FirstScene{
background-color: black;
position:absolute;
top:0px;
right:0px;
bottom:0px;
left:0px;
}
.vertical-line{
border-left: 6px solid blue;
animation-name: line;
animation-duration: 5s;
animation-iteration-count: 1;
left: 0;
height: 50%;
width: 10px;
position: absolute;
bottom: 0;
right: 0;
margin: 0 auto;
}
#keyframes line{
0%{
height: 0px;
}
100%{
height: 50%;
}
}
I'm having trouble with my styling. This is my code:
<html>
<head>
<style>
#import url('https://fonts.googleapis.com/css?family=Roboto');
html,
body {
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
#header {
height: 100px;
background-color: lightgrey;
text-align: center;
}
#menu {
height: 30px;
background-color: #B81F00;
}
#menu a {
text-decoration: none;
color: white;
text-align: center;
width: 15vw;
line-height: 0;
display: inline-block;
/*border: black solid 1px;*/
height: 30px;
padding-left: 10px;
padding-right: 10px;
}
#menu a:hover {
background-color: white;
color: #7B1700;
}
#media only screen and (min-device-width: 320px) and (max-device-width: 600px) {
#menu a {
background-color: #B81F00;
float: center;
display: block;
width: 100%;
margin-top: 20px;
font-size: 20px;
line-height: 20px;
margin: 0;
padding: 0;
}
#menu {
position: relative;
padding-top: 0;
margin-top: 0;
height: auto;
}
}
}
</style>
</head>
<body>
<div id="header">
</div>
<div id="menu">
<a href="#">
<p>Section1</p>
</a>
<a href="#">
<p>Section2</p>
</a>
<a href="#">
<p>Section3</p>
</a>
<a href="#">
<p>Section4</p>
</a>
</div>
</body>
</html>
Now, when I open it in mobile viewpoint, I get this:
As you can see, there is a little whitespace between those two elements, but I can't figure out what caused this.
The P elements have a margin, you should remove it. Use padding instead.
#menu a p {
padding: 1em;
margin: 0;
}
If you want to center the content of the P perfectly try to use flex-box.
For some odd reason, bottom-border works when I set the property to the "li" element, not for the defined "class" name (li-navclass). This presents a problem because I don't want the bottom border to be applied to the footer-links.
What I've tried:
-expanding the menu height
-bottom border, top-border
-different ways to write the property
Would greatly appreciate help on this. Thanks in advance!
.container {
position: absolute;
background:url('../images/bgpic.png');
background-repeat: no-repeat;
background-size: cover;
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
.wrapper {
position: relative;
margin: auto;
padding: auto;
height: 655px;
width: 900px;
}
.titlehdr {
margin: 0px;
padding: 0px;
display: inline-block;
width: 897px;
height: 110px;
}
.title-div {
display: inline-block;
position: relative;
height: 100%;
width: 90px;
margin: 0px;
padding: 0px;
}
.title {
position: relative;
top: 40px;
margin: 0px;
padding: 0px;
font-size: 70px;
color: white;
font-family: Mesquite Std;
letter-spacing: 1.2px;
}
.barandgrill-div {
display: inline-block;
vertical-align: bottom;
}
.barandgrill-text {
margin: 0px;
padding: 0px;
font-family: Arial;
font-weight: bold;
}
/*---------------Nav Menu----------------*/
.menu {
padding-left: 0px;
margin-left: 0px;
font-size: 15px;
}
.nav-container {
text-align: center;
display: block;
top: 100px;
margin: 0px;
padding: 0px;
width: 900px;
height: 40px;
background-color: #901423;
border-style: solid;
border-width: 1px;
border-color: #111111;
}
.menu {
display: inline-block;
text-align: center;
margin: auto;
padding: auto;
list-style-type: none;
overflow: hidden;
font-color: #000000;
}
.li-navclass {
border-bottom: 1px solid #000;
}
li {
display: inline-block;
position: relative;
padding: 0 1em;
font-size: 150%;
}
.nav-text {
color: #ffffff;
font-weight: bold;
opacity: .3;
}
.nav-container ul a {
text-decoration: none;
word-spacing: 200px;
margin: 0px;
padding: 0px;
font-size: 20px;
font-family: Segoe Script;
}
/*---------------Content----------------*/
.content {
display: block;
width: 900px;
height: 500px;
border-style: solid;
border-width: 1px;
background-color: #111111;
opacity: 0.6;
}
/*---------------Footer------------------*/
.foot {
text-decoration: none;
list-style-type: none;
display: block;
position: relative;
text-align: center;
font-size: 12px;
}
.ftr-button {
position: relative;
top: -5px;
list-style: none;
text-decoration: none;
color: rgb(147, 104, 55);
}
.ftr-links {
text-decoration: none;
list-style-type: none;
}
.vert-line {
height: 13px;
border-right: 1px solid #909090;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sticky Navigation Tutorial</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" media="screen, projection" href="css/screen.css"/>
</head>
<body>
<div class="container">
<div class="wrapper">
<!--Title-->
<div class="titlehdr">
<div class="title-div">
<p class="title">Donatelo's</p>
</div>
<div class="barandgrill-div">
<p class="barandgrill-text">Mediterranean Bar and Grill</p>
</div>
</div>
<!--Navigation Menu-->
<div class="nav-container">
<ul class="menu">
<li class="li-navclass">Story</li>
<li class="li-navclass">Menu</li>
<li class="li-navclass">Gallery</li>
<li class="li-navclass">Catering</li>
<li class="li-navclass">Contact</li>
</ul>
</div>
<!--Grey Box-->
<div class="content">
<div id="sidebar">
<div id="scroller">
</div>
</div>
</div>
<!--footer-->
<div class="foot">
<ul class="ftr-links">
<li class="vert-line">Story</li>
<li class="vert-line">Menu</li>
<li class="vert-line">Gallery</li>
<li class="vert-line">Catering</li>
<li class="vert-line">Contact</li>
</ul>
<p class="copyright">Copyright © 2015 Agabi Mediterranean Restaurant</p>
</div>
</div>
</body>
<script>
$(document).ready(function(){
$(".nav-text").mouseover(function() {
$( this ).css( "opacity", ".8" );
});
$(".nav-text").mouseout(function() {
$(this).css( "opacity", ".2");
});
$(".ftr-button").mouseover(function() {
$(this).css("color", "rgb(132, 131, 129)");
});
$(".ftr-button").mouseout(function() {
$(this).css("color", "rgb(147, 104, 55)");
});
$(".nav-text").click(function() {
$(this).css("opacity", ".8");
});
});
</script>
</html>
Add style to :after
.li-navclass:after {
border-bottom: 1px solid #000;
bottom: 0;
content: "";
display: block;
left: 0;
position: absolute;
right: 0;
}
I'm creating an image grid. it works fine outside contentwrap but when in contenwrap all the images flow outside the contentwrap. whats wrong with my code? I'm facing one more problem is image caption. I'm unable to add caption to images.
#contentwrap {
width: 850px;
float: left;
margin: 0 auto;
}
#content {
background: #FFFFFF;
border-radius: 10px;
border: 1px solid #ebebeb;
margin: 5px;
}
ul#grid {
list-style: none;
margin: 0 0 0;
width: 550px;
}
#grid li {
float: left;
margin: 0 0 10px 5px;
}
.portfolio {
padding: 0px;
margin-left: 0; margin-right: 0; margin-top:0;
width: 513px;
font-family: arial, serif;
text-align: center;
}
#grid li a:hover img {
opacity:0.3; filter:alpha(opacity=30);
}
#grid li img {
background-color: white;
padding: 7px; margin: 0;
border: 1px dotted #58595b;
width: 120px;
height: 98px;
}
#grid li a {
display: block;
}
HTML:
<div id="contentwrap">
<div id="content">
<div class="portfolio">
<ul id="grid">
<li><img src="image.jpg"></li>
<li><img src="image.jpg"></li>
<li><img src="image.jpg"></li>
</ul>
</div>
</div>
</div>
Here is working
JsFiddle
simple add
height:auto;
overflow:auto;
to class = MyBox
So my CSS layout was all fine until I wanted to add some into the content area of my web page.
What I'm trying to add into the content section is a wrapper box which contains a graph on the left and a bunch of little info boxes on the right, and potentially an info area underneath those two with 100% width of the content box.
But as soon as I add that in, it pushes my User Info div down below Content. =/ So I guess what's asking is how to create containers of divs within my content section that won't affect things like my sidebar?
Here's my code:
<div id="wrapper">
<div id="header"> </div><!-- #header-->
<div id="nav"> </div>
<div id="middle">
<div id="container">
<div id="content"><!-- content -->
<div id='containerGraph'>
<div id='sngAnimals'></div>
<div id='graph'><img src='./lib/pChart2.1.1/examples/chartAnimalKillsPerDay.php' width='x' height='y' id='graphImg'/></div>
<div id='bottomCont'></div></div>
</div><!-- #content-->
</div><!-- #container-->
<div class="sidebar" id="sideLeft">
User info
</div><!-- .sidebar#sideLeft -->
</div><!-- #middle-->
</div><!-- #wrapper -->
And the css:
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
width: 100%;
height: 100%;
background-image:url('/mcimages/bg.png');
}
#wrapper {
width: 1000px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
color: white;
}
/* Middle
-----------------------------------------------------------------------------*/
#middle {
width: 100%;
padding: 0 0 100px;
height: 1%;
position: relative;
}
#middle:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
height: 0;
}
#container {
width: 100%;
float: left;
overflow: hidden;
margin-top: 10px;
margin-bottom: 10px;
}
#content {
padding: 10px 0 10px 195px;
background: #666666;
}
#containerGraph {
border-style:solid;
border-width:5px;
width: 75%;
position:relative;
}
#graph {
width: 249px;
height: 210px;
border-style:solid;
border-width:5px;
position: relative;
float:left;
}
#sngAnimals {
width:50%;
height: 210px;
border-style:solid;
border-width:5px;
position: relative;
float:right;
}
#bottomCont{
position: relative;
clear:both;
}
}
/* Sidebar Left
-----------------------------------------------------------------------------*/
#sideLeft {
float: left;
width: 175px;
margin-left: -100%;
position: relative;
margin-top: 10px;
padding-left: 5px;
padding-top: 10px;
border-right-style: solid;
border-right-color: black;
border-right-width: 1px;
}
#friend {
float: left;
background: #B5AAFF;
border:1px solid;
position: relative;
top:5px;
left:0px;
margin-left:10px;
width:175px;
height:175px;
}
You didn't close a div and your CSS had errors as well:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="A short description." />
<meta name="keywords" content="put, keywords, here" />
<title>CraftLink</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>
<body>
<div id="wrapper">
<div id="header">HEADER CONTENT</div><!-- #header-->
<div id="nav">
Nav item 1
Nav item 2
Nav item 3
Nav item 4
</div>
<div id="middle">
<div id="container">
<div class="sidebar" id="sideLeft">USER INFO GOES HERE.</div><!-- .sidebar#sideLeft -->
<div id="content"><!-- content -->
<div id='containerGraph'>
<div id='sngAnimals'></div>
<div id='graph'><img src='./lib/pChart2.1.1/examples/chartAnimalKillsPerDay.php' width='x' height='y' id='graphImg'/></div>
<div id='bottomCont'></div>
</div>
</div><!-- #content-->
</div><!-- #container-->
</div><!-- #middle-->
</div><!-- #wrapper -->
<!-- #footer -->
<div id="footer">
<h1>Footer Stuff</h1>
</div>
</body>
</html>
The CSS:
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
width: 100%;
height: 100%;
background-image:url('/mcimages/bg.png');
}
a {
color: white;
outline: none;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
p {
margin: 0 0 18px
}
img {
border: none;
}
input {
vertical-align: middle;
}
#wrapper {
width: 1000px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
color: white;
}
/* Header
-----------------------------------------------------------------------------*/
#header {
height: 100px;
background: #999999;
text-align: center;
font-size: 200%;
}
#nav {
height: 25px;
background: #555555;
text-align: center;
}
/* Middle
-----------------------------------------------------------------------------*/
#middle {
width: 100%;
padding: 0 0 100px;
height: 1%;
position: relative;
}
#middle:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
height: 0;
}
#container {
width: 100%;
float: left;
overflow: hidden;
margin-top: 10px;
margin-bottom: 10px;
}
#content {
padding: 10px 0 10px 195px;
background: #666666;
}
#containerGraph {
border-style:solid;
border-width:5px;
width: 75%;
position:relative;
}
#graph {
width: 249px;
height: 210px;
border-style:solid;
border-width:5px;
position: relative;
float:left;
}
#sngAnimals {
width:50%;
height: 210px;
border-style:solid;
border-width:5px;
position: relative;
float:right;
}
#bottomCont{
position: relative;
clear:both;
}
/* Sidebar Left
-----------------------------------------------------------------------------*/
#sideLeft {
float: left;
width: 175px;
position: relative;
margin-top: 10px;
padding-left: 5px;
padding-top: 10px;
border-right-style: solid;
border-right-color: black;
border-right-width: 1px;
}
#friend {
float: left;
background: #B5AAFF;
border:1px solid;
position: relative;
top:5px;
left:0px;
margin-left:10px;
width:175px;
height:175px;
}
/* Footer
-----------------------------------------------------------------------------*/
#footer {
width: 1000px;
margin: -100px auto 0;
height: 100px;
background: #BFF08E;
}
/* Progress bar
----------------------------------------------------------------------------*/
.meter-wrap{
position: relative;
}
.meter-wrap, .meter-value, .meter-text {
/* The width and height of your image */
width: 155px; height: 30px;
}
.meter-wrap, .meter-value {
background: #3D352A url(/path/to/your-image.png) top left no-repeat;
}
.meter-text {
position: absolute;
top:0; left:0;
padding-top: 5px;
color: #fff;
text-align: center;
width: 100%;
}