I build a simple page with popup links. Works fine on desktop.
I don't know how to solve an issue in a right way, i mean, i can find a crappy solution but i would like to know the correct one. On cell phone when clicking back from the popup image, its return to somewhere on the middle of the main page, not on the top of the page. This is an online sample to try:
online page
html, a {text-decoration:none;}
div {margin:0 auto 10px auto; height:200px; width:200px}
h1 {font: normal 90px Helvetica, Sans-Serif;
letter-spacing: 0.5px;
line-height:1px;
position: relative;
top:100px;
text-align: center;
margin: 0;
left:0;
right:0;
font-weight: 800;
color:#000000}
.popup {
position: absolute;
padding-top:30px;
width: 100%;
height: 100%;
display: none;
text-align:center;
z-index: 200;
opacity:1;
}
.popup:target {
display: block;
-webkit-animation-name: fadein 0,2s;
animation-name: fadein;
animation-duration: 0.2s;
}
.popup img {
padding: 4px;
width: 80%;
z-index: 120;
border: solid 1px gray;
cursor: pointer;
background-color:#FFFFFF;
}
#media only screen and (max-width: 540px) {
div {margin:0 auto 10px auto; height:200px; width:auto}
}
<body bgcolor="gray">
<div class="button" style="background-color:#049EA4;"><h1>01</h1>
</div>
<div style="background-color: #F1FB00"><h1>02</h1>
</div>
<div style="background-color: #1779F0;"><h1>03</h1>
</div>
<div style="background-color: #FF00CF;"><h1>04</h1>
</div>
<div style="background-color: #FFA200;"><h1>05</h1>
</div>
<div style="background-color: #0042FF;"><h1>06</h1>
</div>
<div style="background-color: #A01CF0;"><h1>07</h1>
</div>
<div style="background-color: #0DF186;"><h1>08</h1>
</div>
<div id="01" class="popup"><img src="http://www.ikea.com/gb/en/images/products/pekann%C3%B6t-plant-pot-rattan__0132102_pe286857_s4.jpg" alt="01"></div>
<div id="02" class="popup"><img src="http://www.ikea.com/gb/en/images/products/or%C3%A4dd-plant-pot-in-outdoor-beige__0108864_pe258535_s4.jpg" alt="02"></div>
<div id="03" class="popup"><img src="http://www.ikea.com/gb/en/images/products/socker-plant-pot-in-outdoor-galvanised__0107648_pe257427_s4.jpg" alt="03"></div>
<div id="04" class="popup"><img src="http://www.ikea.com/us/en/images/products/huson-plant-pot__12045_PE089408_S4.JPG" alt="04"></div>
<div id="05" class="popup"><img src="http://www.ikea.com/gb/en/images/products/ingef%C3%A4ra-plant-pot-with-saucer-outdoor-terracotta__0313254_pe513840_s4.jpg" alt="05"></div>
<div id="06" class="popup"><img src="http://www.ikea.com/us/en/images/products/ragkorn-plant-pot__0134053_PE289885_S4.JPG" alt="06"></div>
<div id="07" class="popup"><img src="http://www.ikea.com/gb/en/images/products/skurar-plant-pot-in-outdoor-off-white__0114580_pe267097_s4.jpg" alt="07"></div>
<div id="08" class="popup"><img src="http://www.ikea.com/us/en/images/products/hasselnot-plant-pot__0119553_PE275934_S4.JPG" alt="08"></div>
Thanks
It's because your image is popping up at the bottom of your page, so when you close the image, you're looking at the bottom of the page.
To make your popup appear at the top of the page, add top: 0; to your .popup class:
.popup {
position: absolute;
top: 0;
padding-top:30px;
width: 100%;
height: 100%;
display: none;
text-align:center;
bgcolor:yellow;
z-index: 200;
opacity:1;
}
Related
I have two images with round corners that act as buttons. When the mouse pointer hovers over those images, the image dims and a text appears. The problem is that the text line has an effective area larger than the image display size. I want to make the text to be effective just in image boundaries. How can I fix this issue?
I have used this HTML/CSS code:
<!DOCTYPE html>
<html lang="fa">
<head>
<title>]Information System</title>
<style>
#main-image{
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
max-height: auto;
}
h1{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color:floralwhite;
user-select: none;
}
.sub-image{
border-radius: 5%;
}
.container{
float: left;
width: 20%;
padding: 5%;
}
.image-text{
opacity: 0;
transition: 0.5s;
}
.sub-image:hover {
opacity: 0.3;
transition: 0.5s;
}
.sub:hover .image-text{
opacity: 1;
transition: 0.5s;
}
.row::after{
clear: both;
}
.container{
position: relative;
text-align: center;
}
.container .image-text{
position: absolute;
left: 0;
right: 0;
top: 60%;
text-align: center;
color: cornsilk;
}
</style>
</head>
<body bgcolor="black">
<div>
<img id="main-image" src="Images/IT.jpg" width="1600" alt="Intro">
</div>
<hr>
<div class="row">
<div class="container">
<a href="https:www.google.com">
<div class="sub">
<img class="sub-image" src="Images/repair.jpg" width="300">
<div class="image-text">
<h1>Failures</h1>
</div>
</div>
</a>
</div>
<div class="container">
<a href="https:www.google.com">
<div class="sub">
<img class="sub-image" src="Images/Equipment.jpg" width="300">
<div class="image-text">
<h1>Equipments</h1>
</div>
</div>
</a>
</div>
</div>
</body>
</html>
You can add the below css. This will ensure the h1 is positined relative to the sub class and any overflow will be hidden. You can remove the text-overflow ellipsis if you don't want to show that there is more text
.sub{
position: relative;
}
.image-text h1{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
To blur background even on text hover use parent selector of .sub instead of .sub-image like below
.sub:hover .sub-image {
opacity: 0.3;
transition: 0.5s;
}
I need a small help regarding simple html and css inside a grid.
like to attach a image which i actually want to achieve
#rectangle {
width: 100%;
height: 40px;
background: #8DB23F;
}
<div class="row">
<div class="col-md-12" id="rectangle"><span id="first" style="background-color:white;color:#8DB23F;font-size:40px;padding:7px 0px 2px 1px;border-color:white;margin-left: -15px;"><strong> JAW CRUSHER </strong></span></div>
</div>
I have achieved this as time arround please help me fix this issue (not responsive)
This a suggestion and it will work on plane background color and single line text. Just make a try.
.row {
width: 100%;
height: 40px;
background: #8DB23F;
}
.row strong{
line-height: 40px;
background: white;
display: inline-block;
}
<div class="row">
<strong> JAW CRUSHER </strong>
</div>
i think this will help you achieve the required design
<div class="row">
<div class="col-md-12" id="rectangle"><span id="first"><strong> JAW CRUSHER </strong></span></div>
</div>
<style>
#rectangle{
width:100%;
height:auto;
background:#8DB23F;
}
#first{
background-color:white;
color:#8DB23F;
font-size:40px;
padding:7px 0px 2px 1px;
border-color:white;
margin-left: -15px;
}
#media screen and (max-width: 480px) {
#first {
font-size:20px;
}
}
</style>
#rectangle {
width: 100%;
display:block;
height:40px;
background-color: red;
}
strong {
background-color: #fFF;
}
p {
flex: 1 0 auto;
margin-right:10px;
font-size:30px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-12" style="display:flex;align-items: baseline;">
<p ><strong> JAW CRUSHER </strong></p>
<div id="rectangle"></div>
</div>
</div>
#Box {
width: 100%;
height: auto;
background: #8DB23F;
}
#name {
background-color: white;
color: #8DB23F;
font-size: 40px;
padding: 10px 0px 3px 3px;
border-color: white;
margin-left: -15px;
}
#media screen and (max-width: 480px) {
#Box {
height: 100%;
}
#name {
font-size: 37px;
}
}
<div class="row">
<div class="col-md-12" id="Box"><span id="name"><strong> JAW CRUSHER </strong></span></div>
</div>
I want the webdsn-drop to be behind the #navbuttons-container but I can't get it to work. For some reason #navbuttons-container div is behind it #webdsn-drop and I want these layers reversed.
body {
background-color: #0f0f0f;
width: 980px;
margin: 0 auto;
}
/*-----NAVIGATION-BAR-----*/
#navbuttons-container {
background-color: #303030;
width: 100%;
overflow: auto;
position: fixed;
left: 0px;
top: 0px;
overflow: hidden;
padding: 0;
z-index: 10;
}
#web-name {
color: #f7f7f7;
font-family: 'calibri light';
padding: 4.5px 0 0 10px;
float: left;
font-size: 30px;
margin: 0 auto;
letter-spacing: 10px;
}
#navigation {
max-width: 980px;
min-width: 854px;
margin: 0 auto;
}
.navbuttons {
float: right;
font-size: 20px;
font-family: 'calibri';
display: flex;
}
.navbuttons a {
color: #f7f7f7;
text-decoration: none;
padding: 12.5px 20px;
background-color: #303030;
transition: background-color 0.5s ease;
}
.navbuttons a:hover {
background-color: #5b5b5b;
transition: background-color 0.5s ease;
}
#webdsn-drop {
position: fixed;
left: 0px;
background-color: red;
width: 100%;
z-index: 9;
}
<div id="navbuttons-container">
<div id="navigation">
<h1 id="web-name">PORTFOLIO</h1>
<div class="navbuttons-container">
<div class="navbuttons">
Logo Design
<div id="webdsn-drop">
<h1 class="subname">
<h1>
</div>
</div>
<div class="navbuttons">
Art & Misc.
<div id="webdsn-drop">
<h1 class="subname">
<h1>
</div>
</div>
<div class="navbuttons">
Posters & Flyers
<div id="webdsn-drop">
<h1 class="subname">
<h1>
</div>
</div>
<div id="webdsn-menu" class="navbuttons">
Website Design
<div id="webdsn-drop">
<h1 class="subname">WEBSITE DESIGN
<h1>
</div>
</div>
</div>
</div>
</div>
Apply z-index: -1; to .webdsn-drop- since it's a child element of #navbuttons-container, you need to use a negative z-index in order to move it behind the parent.
So I want to add a new part of a website. well its hard to explain... So look at this.
CSS:
.menu-side{
background: #333;
border-right: 1px solid #000;
color: #fff;
position: fixed;
top: 0;
left: -231px;
width: 210px;
height: 100%;
padding: 10px;
}
.menu-side-open{
left:0px;
}
.menu{
overflow-x: hidden;
position: relative;
left: 0px;
}
.menu-open {
left:231px;
}
.menu, .menu-side{
transition: 900ms;
}
.bar {
height: 7px;
width: 25px;
background-color: black;
margin: 2px;
border-radius: 20px;
}
.listing{
text-align: center;
}
.list {
padding: 2px;
color: white;
text-decoration: none;
width: 233px;
}
.list img{
position: absolute;
}
.box:hover {
background-color: gray;
}
body {
background-image: url('download.jpeg')
}
Html:
<header>
<a href="#" class="menu-toggle">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</a>
<nav class="menu-side">
<div class="listing">
<div class="box"><a class="list" href="/"><h1>Home</h1></a> </div>
<div class="box"><a class="list" href="/Photos/"><h1>Photos</h1></a></div>
<div class="box"><a class="list" href="/Store/"><img src='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxQHEgkUBwgWFgkVFxcbGRgYGSMWHBAeGiQYIiUWHyQfHyosJCYxJxwXIzQtKywsLjEuGCs/OjMsOSg3OjcBCgoKDg0OGxAQGy8kHSQ3LDI3LysvLiwsLi0uNyw0NS83NCw0NCwrNTIsLSwsLDQ0LDQtNCwsLC8yLDctLCwsN//AABEIAEEAQAMBEQACEQEDEQH/xAAcAAEBAQACAwEAAAAAAAAAAAAABwYBCAIDBQT/xAA2EAABAwIBCQQIBwAAAAAAAAABAAIDBBEFBgcSEyExQWFiFEJRsSIjMkORocHRJDVxdIGz4f/EABsBAQACAwEBAAAAAAAAAAAAAAAFBgEDBAcC/8QALhEAAQMDAgUDAwQDAAAAAAAAAAECAwQFERIhIjFBUWFxscFCoeFSgdHwEyMy/9oADAMBAAIRAxEAPwD1VebauweGR9RJFKxnCNzi4Dxs5gvb4qLnpFRNTS6W29xvckMm3ZV9jMArgLKeQK+QeQKGSnZvsttLV02MS+lujkPHpd9CpKkqvoeVK9WbGZ4E9U+UKWpMqQQBAEBLc4eQ2r1lTgsXo75Ixw62/UKNqqX62Fus15ziCdfRfhSaAqOLWarJTJft7opMWvHh+k0C+wzk7mN+66qelV65dyIW53ZtO3RFu/28qfgxbDCJMQkw+kcMOjkLdLeGW2Wv+q1TRYcqtTZDso6tHRxtlcn+RyZx3N1m+y21urpsYl9Zujee90nmuykqs8Dyv3qzaczwJt1T5KQpIqgQBACL79yAlecPIfVaypweL1e+SMcOofZRtVS442Fvs15ziCZd+i/Blcmsa1NTh7sarXmjh0tEG7tXcHd/q1wTq57UeuyHdcKBrYJHQM43YyaOso5co4o3x1nZ8OcbQwjSOs0jbWSaPieJ2bV0va6VvAuG+5EwzQ0U3+1qvkTmv6fCeiGHqYHUj3tmaRI0kfDiFEOarVwpcI5GyNRzeSlNzfZbdo1dPjEvrtzHnv8ASefmpOkqs8DypXqzaMzwJt1Tt5KMpEqoQBAcEXvcbEBKs4eQ/Z9ZU4PF6re9g7vUFGVVLjjaXCzXjViCZd+i/BlMNyhkibSRsIbURnRin0rGFryLtcLWc3jt8F8xVOERvX7HZV2tr5HyKvAu6p1ynZTU5R4ZFXtl1dbpmnY2ONsY03Svdtu4+J2m3ALfUQI5M55e5FWyvdE9G6dnrlVXZERO398GHqqKWhfIyqgc2dli4cWczbdwUW6NzVwpbop45Wo5ioqL9ymZvst+1aumxiT8RuY8+86Tz81JUlVq4Hcyp3qzaMzwJt1Tt59CiKQKsEAQHBGlcOGxAi4JPnDyH7IZKjCIrwHa9g7nUOSjKqmxxNLjZrxrRIJl36L38GTwbG6inYymw2pbHG9/tWDS0usPa4Baoah6Joam69SQrbdTvetRLnDU5J4PfXYuKaJ1PQXL3gdoledN8zh3AT3Ad3iszTI1unm5ea/BrpKJ0kqTO4WNzoanL1X1Pitda1jt8lwk6dmFZTyUIAgCA4c3SBDhcH5oZRcboSTOHkP2IyVGExXpTtewdzqHJRlTTaeNhcrPeElRIJl36L38E+by3KPUsp5Ar5MnZtWU8mCAIAgCA4c0PBDhdp+aGUVUXKEhzhZEHDTJUYTHejO17B7rqHLyUXVU2nibyLpZrwkyJDMvF0Xv+TAgrgLIdnVYzyYIAgCAIAgOHNDwQ8Xad4PFDKKqLlCDZycMiwGubFRbI5YxIG8GkueC0cvRv/KiKqn0LlvIvVmua1EeiX/pNs9/yXpS5RAgCAIAgCAICDZ+fzHD/wBuz+yVc05N2rl+/wDB/9k='><h1>Store</h1></a></div>
</div>
</nav>
</header>
Sorry about the long img src, well ive looked aroung and i found one thing but it didnt work for me. But what i am trying to accomplish is the image in the top right corner. so it would be like an actual banner. I did the position: absolute; but Is there something else? Should i Move the img tag?
I have two html files: index and portfolio. They use the same stylesheet. In index two divs extend to the full width of the container. However in portfolio the div only extends as long as the <h6>. I cannot figure out what is going on and how this could possibly be happening.
.container {
padding-top: 35px;
padding-left:18px;
padding-right:18px;
display:inline-block;
font-size: 0px;
overflow: hidden;
}
.spacer {
height: 2px;
}
h6 {
position:relative;
font-family:"code_boldregular";
font-size:18px;
margin: 0px;
top: 17.5px;
text-align:center;
}
#link1 {
position:relative;
height: 52.5px;
background-color: #545454;
width: 100%;
}
#link2 {
height: 52.5px;
background-color: #545454;
width: 100%;
}
<div class="container">
<div class="spacer"></div>
<div id="navlinks2">
<div id="link1" class="smalllinks"><a id="homeLNK" href="index.html"><h6>Home</h6></a>
</div>
<div class="spacer"></div>
<div id="link2" class="smalllinks"><h6>Portfolio</h6>
</div>
</div>
<div class="spacer"></div>
</div>