This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 3 years ago.
I am a new learner and can you tell me my bad habits with my code and why this space between image and "Ford" text never closes.
<!DOCTYPE html>
<html>
<title>FiyaskoCar|En Pahalı Arabalar</title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 100%;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.container:hover .overlay {
width: 100%;
}
.text {
color: white;
font-size: 60px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
white-space: nowrap;
}
figure
{
display: flex;
flex-flow: column;
max-width: 323px;
margin: auto;
}
a
{
text-decoration:none;
}
table {
border-spacing: 90px 0;
}
figcaption {
background-color: #222;
color: #fff;
font: italic smaller sans-serif;
padding: 5px;
text-align: center;
}
.special
{
width: 299px; height: 166px;
}
</style>
</head>
<body bgcolor="#6B0808" text-color="white" >
<font size = "6">
<center> <img src=logo.png align="middle" height="140" width="140"/> </center>
<hr width="500">
<center>
<p style="background-color:hsla(9, 100%, 64%, 0.5);"><font face = "Comic sans MS" size="5">Fiyasko<span style="color:red">Car</span>
Burada her şey ÇOK PAHALI!!!
</p></font>
<table>
<tr>
<figure>
<td>
<div class="container">
<a href = homepage.html><img src=fordcar.png class="special">
<div class="overlay">
<div class="text">Ford</div>
</div>
</div>
<figcaption>Ford</figcaption></a>
</td>
<td> <div class="container">
<a href = homepage.html><img src=volkswagencar.png class="special">
<div class="overlay">
<div class="text">Volkswagen</div>
</div>
</div>
<figcaption>Volkswagen</figcaption> </td></a>
<td> <div class="container">
<a href = homepage.html><img src=bmwcar.jpg class="special">
<div class="overlay">
<div class="text">BMW</div>
</div>
</div>
<figcaption>BMW</figcaption>
</td></a>
</figure>
</table>
</font>
<hr>
</body>
</html>
This issue happens because the img tag CSS style is not set to display block
img,
img.special
{
display: block;
}
the code above will solve the issue for you.
Related
Ok, I'm trying to make a menu. There is the side menu that is going to have certain elements and the top menu that is going to have other elements. I have a problem when I apply the positio:absolute and then a right:0px to align the icons and the name to the right it goes off screen because my body has a margin-left: 280px
let menuToggleButton = document.getElementById('menu_toggle_button');
let side_menu = document.getElementById('side_menu');
let body = document.getElementById('body');
menuToggleButton.addEventListener('click', function() {
side_menu.classList.toggle('resize-side-menu');
body.classList.toggle('resize-body');
});
*{
margin: 0px;
padding: 0px;
}
body{
display: flex;
}
.side-menu{
position: fixed;
display: inline-flex;
background: #ff000061;
width: 280px;
height: 100vh;
transition: .5s;
}
.resize-side-menu{
width: 50px;
transition: .5s;
}
.body{
display: inline-flex;
width: 100%;
height: 60px;
margin-left: 280px;
background: blue;
height: 2000px;
transition: .5s;
}
.resize-body{
margin-left: 50px;
transition: .5s;
}
.body .content-body{
display: block;
width: 100%;
height: 100%;
}
.body .content-body .header{
width: 100%;
height: 50px;
display: block;
position: fixed;
}
.content-items-header{
display: flex;
align-items: center;
background: brown;
position: relative;
height: 50px;
}
.body .content-body .header .content-items-header .content-search-input{
background: white;
color: rgb(0, 0, 0);
border: 2px solid blue;
}
.body .content-body .header .content-items-header .icons-content{
position:absolute;
right:0px;
}
<!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.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.0/css/all.min.css">
</head>
<body>
<div class="side-menu" id="side_menu">
</div>
<div class="body" id="body">
<div class="content-body">
<div class="header">
<div class="content-items-header">
<button class="fad fa-bars" id="menu_toggle_button">open</button>
<div class="content-search-input">
<input type="text" class="search" id="search">
<i class="fad fa-search"></i>
</div>
<div class="icons-content">
<i class="fas fa-bell"></i>
<i class="fas fa-envelope"></i>
<i class="fas fa-cog"></i>
<img src="brain.jpg" alt="" height="35px" width="35px">
<span>Aldahir Ruiz Valdez</span>
</div>
</div>
</div>
<div class="workspace">
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
I need them to always be aligned to the right but without leaving the screen
try overflow: hidden; or overflow: auto depending on what you want to achieve. overflow: hidden; will hide all the overflow, and overflow: auto will add a scroll bar if it is needed.
I changed the width of .body and .header to calc(100% - 280px), when pressing the button the width is changed to calc(100% - 50px). I also added a transition: .5s; for changing the width on the .header so it looks smooth (you'll see what I mean when you remove the transition). Hope this is the result you're looking for!
let menuToggleButton = document.getElementById('menu_toggle_button');
let side_menu = document.getElementById('side_menu');
let body = document.getElementById('body');
let header = document.querySelector('.header');
menuToggleButton.addEventListener('click', function() {
side_menu.classList.toggle('resize-side-menu');
body.classList.toggle('resize-body');
header.classList.toggle('resize-header');
});
* {
padding: 0;
margin: 0;
}
body{
display: flex;
}
.side-menu{
position: fixed;
display: inline-flex;
background: #ff000061;
width: 280px;
height: 100vh;
transition: .5s;
}
.resize-side-menu{
width: 50px;
transition: .5s;
}
.body {
width: calc(100% - 280px);
display: inline-flex;
height: 60px;
margin-left: 280px;
background: blue;
height: 2000px;
transition: .5s;
}
.resize-body{
margin-left: 50px;
transition: .5s;
width: calc(100% - 50px);
}
.body .content-body{
display: block;
width: 100%;
height: 100%;
}
.body .content-body .header{
width: calc(100% - 280px);
transition: .5s;
height: 50px;
display: block;
position: fixed;
}
.body .content-body .header.resize-header {
width: calc(100% - 50px);
transition: .5s;
}
.content-items-header{
display: flex;
align-items: center;
background: brown;
position: relative;
height: 50px;
}
.body .content-body .header .content-items-header .content-search-input{
background: white;
color: rgb(0, 0, 0);
border: 2px solid blue;
}
.body .content-body .header .content-items-header .icons-content{
position:absolute;
right:0px;
}
<div class="side-menu" id="side_menu">
</div>
<div class="body" id="body">
<div class="content-body">
<div class="header">
<div class="content-items-header">
<button class="fad fa-bars" id="menu_toggle_button">open</button>
<div class="content-search-input">
<input type="text" class="search" id="search">
<i class="fad fa-search"></i>
</div>
<div class="icons-content">
<i class="fas fa-bell"></i>
<i class="fas fa-envelope"></i>
<i class="fas fa-cog"></i>
<img src="brain.jpg" alt="" height="35px" width="35px">
<span>Aldahir Ruiz Valdez</span>
</div>
</div>
</div>
<div class="workspace">
</div>
</div>
</div>
I am currently working on an interactive simulation with an image as a background. Like this:
<body>
<div>
<img><img>
<button><button>
<!-- etc.. -->
<div>
<body>
Is it possible to make the buttons stick to the image when resizing the window. I've already tried things like setting the positions with a percentage instead of pixels etc. But nothing seems to work.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 100%;
max-width: 400px;
}
.container img {
width: 100%;
height: auto;
}
.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btn:hover {
background-color: black;
}
</style>
</head>
<body>
<h2>Button on Image</h2>
<p>Add a button to an image:</p>
<div class="container">
<img src="img_snow.jpg" alt="Snow" style="width:100%">
<button class="btn">Button</button>
</div>
</body>
</html>
I was creating a website and am stuck because I keep resizing the screen and trying to make it mobile friendly. However, there are two sections that I cannot seem to fix. I cannot remember how I got the first three sections to stop moving while I resized the screen. I was wondering if I could get some help.
My website is shivaniahuja.com
If you look at the contact me page and the footer and try to resize them you will see the problem. Please let me know if you can help and I can attach my code if needed.
*{
margin: 0;
padding: 0;
}
#main{
width: 100%;
height: 100vh;
background-image: url(../imgs/Background.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
display: flex;
}
img{
width: 15%;
height: 100%;
}
#first-name{
display: inline-block;
font-family: 'Roboto', sans-serif;
font-size: 14px;
color: #2f3338;
padding-left: 2%;
font-size: 2vmin;
}
nav{
width: 100%;
height: 10vh;
background-color: #FFFFFF;
line-height: 80px;
z-index: 1;
position: fixed;
}
nav ul li{
list-style-type: none;
display: inline-block;
}
nav ul{
float: right;
margin-right: 20px;
}
nav ul li a{
text-decoration: none;
font-family: 'Roboto', sans-serif;
font-size: 2vmin;
color: #2f3338;
padding: 20px;
}
nav ul li a:hover{
color: #3377CC;
}
#main p{
position: absolute;
top: -1000px;
text-align: center;
color: white;
font-size: 50px;
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
section{
width: 100%;
text-align: center;
padding-top: 7%;
}
html{
scroll-behavior: smooth;
overflow-x: hidden;
}
section#about-me #p2{
width: 40%;
position: relative;
height: 40%;
float: right;
top: 40%;
margin-top: 3%;
right: 10%;
line-height: 200%;
font-family: 'Libre Franklin', sans-serif;
text-align: justify;
font-size: 2.2vmin;
}
section#about-me{
height: 60vh;
}
section#photography{
height: 110vh;
background-color: #F5F5F5;
}
section#experience{
height: 280vh;
background-color: #F5F5F5;
}
section#contact{
}
#contact-header{
font-size: 2.5vmin;
top: 20%;
}
section#about-me #pic{
width: 40%;
height: 40%;
position: absolute;
right: 55%;
margin-top: 2%
}
#contact-div{
position: relative;
top: 50%;
}
section#blog{
width: 100%;
padding-top: 8.5%;
}
.navs::before,
.navs::after {
display: inline-block;
content: "";
border-top: 2px solid black;
width: 5%;
margin: 0 1rem;
transform: translateY(-0.5rem);
}
h2{
position: relative;
top: -200;
}
#title{
position: absolute;
top: 50%;
font-size: 10vmin;
color: white;
left: 35%;
}
span{
position: absolute;
top: 60%;
font-size: 300%;
color: white;
left: 35%;
display: inline-block;
}
span:before{
content: 'HTML';
animation: animate infinite 8s;
position: relative;
left: 50%;
font-size: 6vmin;
}
#keyframes animate{
0%{
content: 'ENGINEER';
}
25%{
content: 'ENGINEER';
}
50%{
content: 'DEVELOPER';
}
75%{
content: 'DEVELOPER';
}
100%{
content: 'ANALYST';
}
}
.pic-and-text{
width: 18%;
height: 22%;
border-radius: 15%
}
section#experience #pic01{
left: -20%;
margin-top: 2%;
margin-bottom: 5%;
position: relative;
}
section#experience #berkeley-name{
position: relative;
font-size: 3vmin;
left: 5%;
top: 0%;
color: #3377CC;
font-family: 'Roboto', sans-serif;
}
section#experience #berkeley-major{
position: relative;
font-size: 16px;
bottom: 200px;
left: 78px;
color: #5E9515;
font-weight: bold;
font-family: 'Roboto', sans-serif;
}
section#experience #berkeley-location{
position: relative;
font-size: 16px;
bottom: 195px;
right: 65px;
font-weight: bold;
font-family: 'Roboto', sans-serif;
}
section#experience #berkeley-description{
position: relative;
bottom: 180px;
height: 40px;
width: 600px;
right: -610px;
font-family: 'Libre Franklin', sans-serif;
line-height: 30px;
font-size: 2vmin;
}
section#blog #full-blog{
position: relative;
top: -40px;
}
section#blog .blog-description{
font-size: 20px;
font-family: 'Libre Franklin', sans-serif;
line-height: 30px;
}
#pic001{
width: 17.5%;
}
#pic002{
width: 17.5%;
}
#pic003{
width: 17.5%;
}
.header{
font-size: 3.5vmin;
}
.blog-pics{
margin-left: .5%;
margin-top: 1%
}
section#blog #blog-description01{
margin-top: 15px;
}
#photography-paragraph{
font-size: 2.5vmin;
font-family: 'Libre Franklin', sans-serif;
margin-bottom: 2vh;
margin-top: 2vh;
}
.polaroid {
cursor:pointer;
margin:10px;
border: 1px solid #cccccc78;
background-color: #ffffff;
padding: 7%;
box-shadow: 4px 6px 4px #00000012;
text-align: center;
font-family: 'Caveat','Arial', sans-serif;
}
.polaroid .square {
background:black;
}
.polaroid .picture {
width:100%;
padding-top: 100%;
background-position: center;
background-size:cover;
opacity:0;
}
.polaroid.developed .square {
animation: flash 1.5s;
background:black;
}
.polaroid.developed .picture {
animation: fade-in 3s;
opacity:1;
}
.polaroid .labelName {
text-align: center;
font-size: 24px;
line-height:26px;
}
.polaroid-gallery {
display:-ms-grid;
display:grid;
-ms-grid-columns: 25% 25% 25% 25%;
grid-template-columns: 23% 23% 23% 23%;
margin-left: 5%
}
/* Adjust CSS Grid for Microsoft Edge */
.polaroid:nth-child(1) {
-ms-grid-row: 1;
-ms-grid-column:1;
}
.polaroid:nth-child(2) {
-ms-grid-row: 1;
-ms-grid-column:2;
}
.polaroid:nth-child(3) {
-ms-grid-row: 1;
-ms-grid-column:3;
}
.polaroid:nth-child(4) {
-ms-grid-row: 1;
-ms-grid-column:4;
}
.polaroid:nth-child(5) {
-ms-grid-row: 2;
-ms-grid-column:1;
}
#keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
#keyframes flash {
2% {
background:black;
opacity: 0.5;
}
5% {
background:white;
opacity:1;
}
50% {
background:white;
opacity:.5
}
}
#footer{
background-color: #000000;
width: 100%;
padding-top: 2vh;
color: white;
padding-left: 1%;
}
#footer-paragraph{
position: relative;
top: 60%;
}
#import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
a, a:hover {
text-decoration: none;
}
.socialbtns, .socialbtns ul, .socialbtns li {
margin: 0;
padding: 5px;
}
.socialbtns li {
list-style: none outside none;
display: inline-block;
}
.socialbtns .fa {
width: 40px;
height: 28px;
color: #000;
background-color: #FFF;
border: 1px solid #000;
padding-top: 12px;
border-radius: 22px;
-moz-border-radius: 22px;
-webkit-border-radius: 22px;
-o-border-radius: 22px;
}
.socialbtns .fa:hover {
color: #FFF;
background-color: #000;
border: 1px solid #000;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght#600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Libre+Franklin:wght#200&display=swap" rel="stylesheet">
<link rel="stylesheet" href ="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<h1 id="title"> SHIVANI AHUJA</h1>
<span></span>
<body>
<div class ="container">
<div id="main">
<nav>
<div id= "first-name"> SHIVANI AHUJA </div>
<ul>
<li> ABOUT ME </li>
<li> EXPERIENCE</li>
<li> BLOG POSTS</li>
<li> PHOTOGRAPHY</li>
<li> CONTACT </li>
</ul>
</nav>
</div>
<section id="about-me">
<h1 class="navs" class="header"> ABOUT ME</h1>
<img src="assets/imgs/paris-2017-home.jpeg" id="pic">
<div id="p2div">
<p id="p2"> Hey! My name is Shivani and I am an undergraduate student at UC Berkeley studying Computer Science. I'm super passionate about Artificial Intelligence and Natural Language Processing. Haha, I sound like a nerd right now, but I really love what I do! I've spent tons of hours curating images and watching HTML and CSS tutorials on Youtube to finally create this masterpiece that lies in front of you. The process of creating this website was fun, yet undeniably frustrating. After creating my first website from scratch, I plan to create many more and teach others how to recreate this process!</p>
</div>
</section>
<section id="experience">
<h1 class="navs"> HERE'S WHAT I'VE DONE SO FAR</h1>
<div class= "experience-squares" id="experience-square">
<img src="assets/imgs/coming.png" class="pic-and-text" id="pic01">
<p id="berkeley-name"> Creator and iOS Developer, Summer 2020</p>
<p id="berkeley-major"> IBS Application </p>
<p id="berkeley-location"> Hayward, CA</p>
<p id="berkeley-description"> Currently,</p>
</div>
</div>
</section>
<section id="blog">
<div id=full-blog>
<h1 class="navs" class="header">BLOG</h1>
<p class="blog-description" id= "blog-description01"> I write about women in tech, hiking, and some of my personal experiences.</p>
<p class="blog-description" id= "blog-description02"> Here are three of my recent posts:</p>
<div id="pictures">
<img src="assets/imgs/paris-2017-home.jpeg" id="pic001" class="blog-pics">
<img src="assets/imgs/paris-2017-home.jpeg" id="pic002" class="blog-pics">
<img src="assets/imgs/paris-2017-home.jpeg" id="pic003" class="blog-pics">
</div>
</div>
</section>
<section id="photography">
<h1 class="navs" class="header">PHOTOGRAPHY</h1>
<p id="photography-paragraph"> Creating memorabilia is an art. An art that has allowed me to capture the emotions, smiles, and happiness of every individual depcited in this gallery.</p>
<div class="polaroid-gallery">
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/sunflower.JPG')"></div>
</div>
<div class="labelName">SunFlowers</div>
<div class="labelText">Berkeley, CA</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/pic-with-mom.png')"></div>
</div>
<div class="labelName">Mommy's Girl</div>
<div class="labelText">Ludhiana, PB</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/sailboat.jpg')"></div>
</div>
<div class="labelName">Sailboat</div>
<div class="labelText">Santa Cruz, CA</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/glasses-aesthetic.JPG')"></div>
</div>
<div class="labelName">Foolin' Around</div>
<div class="labelText">Berkeley, CA</div>
</div>
</div>
<link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">
<div class="polaroid-gallery">
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/flowers.jpg')"></div>
</div>
<div class="labelName">Orchid Bush</div>
<div class="labelText">Hayward, CA</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/graduation.jpg')"></div>
</div>
<div class="labelName"> Besties 4 Life!</div>
<div class="labelText">Hayward, CA</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/background.jpg')"></div>
</div>
<div class="labelName">Pink Sky</div>
<div class="labelText">Lake Tahoe, CA</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/cousins.PNG')"></div>
</div>
<div class="labelName">Three Idiots</div>
<div class="labelText">Ludhiana, PB</div>
</div>
<link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">
</section>
<div id="wrap">
<section id="contact">
<h1 class="navs" class="contact-header">CONTACT</h1>
<p id="contact-paragraph">If you have any inquiries or questions, please feel free to contact me on these social media
sites. I look forward to hearing from you! </p>
<br/>
<div align="center" class="socialbtns">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</section>
<section id="footer">
<p id="footer-paragraph"> Copyright #2020 Shivani Ahuja. All Rights Reserved.
</section>
</div>
</body>
</html>
I found one inconsistency were you wrapped up your div tag...
This often leads to buggy layouts just for not closing tags properly.
<div id="wrap">
<section id="contact">
<!-- your HTML code -->
<div align="center" class="socialbtns">
<!-- your HTML code -->
</div>
</div><!-- REMOVE THIS! did you want to finish div#wrap here ? -->
</section>
<section id="footer">
<p id="footer-paragraph"> Copyright #2020 Shivani Ahuja. All Rights Reserved.
</section>
</div><!-- or did you want to finish div#wrap here ? -->
To make the whole site responsive put a <meta> tag like the one below before and after the <body> tags.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Next, set out your HTML like this:
<div id="wrap">
<section id="contact">
<!-- Code here -->
<div align="center" class="socialbtns">
<!-- Your Code Here -->
</div>
</section>
<section id="footer">
<p id="footer-paragraph"> Copyright #2020 Shivani Ahuja. All Rights Reserved.
</section>
</div>
And of course use the <meta> tags I mentioned
Add position relative to .polaroid-gallery
.polaroid-gallery {
display: -ms-grid;
display: grid;
-ms-grid-columns: 25% 25% 25% 25%;
grid-template-columns: 40% 40% 40% 36%;
margin-left: 5%;
position: absolute;
}
nav {
width: 100%;
/* height: 10vh; */ i remove this for the menu dont resize to much
background-color: #FFFFFF;
line-height: 80px;
z-index: 1;
position: fixed;
}
section#contact {
margin-bottom: 2vh;
font-size: 2.5vmin;
border: 3px solid red; /* to test */
background: black; /* to test */
}
i recommend you check the structure of your html, and relative sizes to responsive design
I'm trying to fix a button over a specific spot in an image. Is there any way to merge the button with a specific part of an image? This is what I have so far
I have the button exactly where I want it but when the browser is stretched or zoomed in, the button doesn't stay.
Here's the JSFiddle of what I have
https://jsfiddle.net/vkfLywna/1/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: absolute;
width: 100%;
max-width: 400px;
}
.container img {
width: 200%;
height: auto;
}
.container .btn {
position: relative;
top: -330px;
left: 96px;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 6px;
padding: 4px 10spx;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btn:hover {
background-color: black;
}
</style>
</head>
<body>
<div class="container">
<img src="doc.png.png" alt="img" style="width:100%">
<button class="btn">Button</button>
</div>
</body>
</html>
Wrap the img and the button with a div and position them accordingly:
.img-container {
border: solid red 1px;
display: inline-block;
position: relative;
}
.img-container button {
position: absolute;
top: 50px;
left: 50px;
}
<div class="img-container">
<img src="http://via.placeholder.com/350x150">
<button>Click here</button>
</div>
the .container has to be position:relative and .btn position:absolute. Than you can positionate the button with top and left in the container, use % instead of px to stay responsive.
you don't need transform for this.
.container {
position:relative;
width:100%;
}
.container img {
width:100%;
height:auto;
}
.container button {
position:absolute;
top:20%;
left:20%;
}
<div class="container">
<img src="https://dummyimage.com/600x400/ff00ff/fff">
<button>
Click
</button>
</div>
I have been trying to find some sample code or help on a way to have a vertical menu bar down the left hand side of the page that displays an icon and on hover of the image the menu will expand and overlay the background of the body and display what the icon represents.
I have a little demo here that I found and I like alot, but this is abit more advanced but the basic idea can be seen.
http://codecanyon.net/item/jquery-wahmenu/full_screen_preview/5533383
As you can see when you hover over some of the icons a small box will overlay the body and this is what I am trying to achieve.
check out the code at this url http://jsbin.com/yiyenadi/1/ .
As you can see I did not animate it because this would take more time but it can be done.
Please message me back if you need more help. And please comment your views back.
[EDIT]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>side bar</title>
<script type="text/javascript">
<style type="text/css">
body {
margin:0px;
background-color: rgb(255, 0, 214);
}
#side_bar_container {
width:50px;
background-color: #555C66;
height: 100%;
position:absolute;
transition:.5s;
}
.line_container{
height:50px;
background-color: #555C66;
padding-top: 4px;
padding-bottom: 4px;
border-bottom: 2px solid rgba(0, 0, 0, 0.18);
overflow: hidden;
position: relative;
}
#line_container1{
border-top: 2px solid rgba(0, 0, 0, 0.18)
}
.line_image{
width: 50px;
height: 50px;
float: left;
border-radius: 16px;
color: white;
}
.line_text{
margin-top: 16px;/*depends on other values*/
font-size:18px;
width:300px;
height:50px;
float: left;
color: black;
font-family: sans-serif;
position: relative;
z-index: -3px;
}
#logo {
width:50px;
height:50px;
margin-top: 5px;
margin-bottom: 5px;
border-radius: 50%;
}
.sidebar_loader{
width: 300px;
height: 100%;
display: ; /*very very important*/
z-index: -3;
position: absolute; /*works with fixed - absolute is experimantal*/
left: 50px;
top: 0px;
background-color: rgb(69,75,83);
display: none;
transition: .5s;
}
#texter {
font-family: sans-serif;
color: white;
padding: 10px;
}
/*the power starts here*/
#line_container1:hover{
background-color: rgb(69,75,83);
}
#line_container2:hover{
background-color: rgb(69,75,83);
}
#line_container3:hover{
background-color: rgb(69,75,83);
}
#line_container4:hover{
background-color: rgb(69,75,83);
}
#sidebar_loader1:hover < #line_container1 {
background-color: red;
}
/*more*/
#line_container1:hover ~ #sidebar_loader1 {
z-index: -2;
}
#line_container2:hover ~ #sidebar_loader2 {
z-index: -2;
}
#line_container3:hover ~ #sidebar_loader3 {
z-index: 2;
}
#line_container4:hover ~ #sidebar_loader3 {
z-index: 2;
}
</style>
</head>
<body>
<div id="side_bar_container">
<div style="width:50px;height:50px;margin-left:auto;margin-right:auto;background-color:black;" id="logo" onmouseover="document.getElementById('sidebar_loader1').style.display='none';"></div>
<div class="line_container" id="line_container1" onmouseover="document.getElementById('sidebar_loader1').style.display='block';document.getElementById('sidebar_loader2').style.display='none';document.getElementById('sidebar_loader2').style.display='none';" onmouseout="">
<img src="http://www.maxwellmcmahon.com/img/source.png" alt="IMAGE" class="line_image">
<span class="line_text">
HTML5/JAVASCRIPT CODES
</span>
</div>
<div class="sidebar_loader" id="sidebar_loader1" onmouseover="document.getElementById('line_container1').style.background='rgb(69,75,83)';" onmouseout="document.getElementById('sidebar_loader1').style.display='none';document.getElementById('line_container1').style.background=''">
<span id="texter">TEST for 1</span>
</div>
<div class="line_container" id="line_container2" onmouseover="document.getElementById('sidebar_loader2').style.display='block';document.getElementById('sidebar_loader3').style.display='none';document.getElementById('sidebar_loader1').style.display='none';" onmouseout="">
<img src="1.png" alt="IMAGE" class="line_image" id="line_image">
<span class="line_text">
VIDEOS
</span>
</div>
<div class="sidebar_loader" id="sidebar_loader2" onmouseover="document.getElementById('line_container2').style.background='rgb(69,75,83)';" onmouseout="document.getElementById('sidebar_loader2').style.display='none';document.getElementById('line_container2').style.background=''">
<span id="texter">TEST for 2</span>
</div>
<div class="line_container" id="line_container3" onmouseover="document.getElementById('sidebar_loader3').style.display='block';document.getElementById('sidebar_loader4').style.display='none';document.getElementById('sidebar_loader2').style.display='none';" onmouseout="">
<img src="http://www.ejprescott.com/media/icons/tools-equipment.png" alt="IMAGE" class="line_image">
<span class="line_text">
SETTINGS
</span>
</div>
<div class="sidebar_loader" id="sidebar_loader3" onmouseover="document.getElementById('line_container3').style.background='rgb(69,75,83)';" onmouseout="document.getElementById('sidebar_loader3').style.display='none';document.getElementById('line_container3').style.background=''">
<span id="texter">TEST for 3</span>
</div>
<div class="line_container" id="line_container4" onmouseover="document.getElementById('sidebar_loader4').style.display='block';document.getElementById('sidebar_loader3').style.display='none';document.getElementById('sidebar_loader3').style.display='none';" onmouseout="">
<img src="https://cdn2.iconfinder.com/data/icons/freecns-cumulus/16/519591-089_Speechbubble2-128.png" alt="IMAGE" class="line_image">
<span class="line_text">
Forum
</span>
</div>
<div class="sidebar_loader" id="sidebar_loader4" onmouseover="document.getElementById('line_container4').style.background='rgb(69,75,83)';" onmouseout="document.getElementById('sidebar_loader4').style.display='none';document.getElementById('line_container4').style.background='';">
<span id="texter">TEST for 4</span>
</div>
<button onclick="document.getElementById('side_bar_container').style.display='none';" onmouseover="document.getElementById('sidebar_loader4').style.display='none';" title="close this navigation pane" style="width:50px;">X</button>
Try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>side bar</title>
<script type="text/javascript">
<style type="text/css">
body {
margin:0px;
background-color: rgb(255, 0, 214);
}
#side_bar_container {
width:50px;
background-color: #555C66;
height: 100%;
position:absolute;
transition:.5s;
}
.line_container{
height:50px;
background-color: #555C66;
padding-top: 4px;
padding-bottom: 4px;
border-bottom: 2px solid rgba(0, 0, 0, 0.18);
overflow: hidden;
position: relative;
}
#line_container1{
border-top: 2px solid rgba(0, 0, 0, 0.18)
}
.line_image{
width: 50px;
height: 50px;
float: left;
border-radius: 16px;
color: white;
}
.line_text{
margin-top: 16px;/*depends on other values*/
font-size:18px;
width:300px;
height:50px;
float: left;
color: black;
font-family: sans-serif;
position: relative;
z-index: -3px;
}
#logo {
width:50px;
height:50px;
margin-top: 5px;
margin-bottom: 5px;
border-radius: 50%;
}
.sidebar_loader{
width: 300px;
height: 100%;
display: ; /*very very important*/
z-index: -3;
position: absolute; /*works with fixed - absolute is experimantal*/
left: 50px;
top: 0px;
background-color: rgb(69,75,83);
display: none;
transition: .5s;
}
#texter {
font-family: sans-serif;
color: white;
padding: 10px;
}
/*the power starts here*/
#line_container1:hover{
background-color: rgb(69,75,83);
}
#line_container2:hover{
background-color: rgb(69,75,83);
}
#line_container3:hover{
background-color: rgb(69,75,83);
}
#line_container4:hover{
background-color: rgb(69,75,83);
}
#sidebar_loader1:hover < #line_container1 {
background-color: red;
}
/*more*/
#line_container1:hover ~ #sidebar_loader1 {
z-index: -2;
}
#line_container2:hover ~ #sidebar_loader2 {
z-index: -2;
}
#line_container3:hover ~ #sidebar_loader3 {
z-index: 2;
}
#line_container4:hover ~ #sidebar_loader3 {
z-index: 2;
}
</style>
</head>
<body>
<div id="side_bar_container">
<div style="width:50px;height:50px;margin-left:auto;margin-right:auto;background-color:black;" id="logo" onmouseover="document.getElementById('sidebar_loader1').style.display='none';"></div>
<div class="line_container" id="line_container1" onmouseover="document.getElementById('sidebar_loader1').style.display='block';document.getElementById('sidebar_loader2').style.display='none';document.getElementById('sidebar_loader2').style.display='none';" onmouseout="">
<img src="http://www.maxwellmcmahon.com/img/source.png" alt="IMAGE" class="line_image">
<span class="line_text">
HTML5/JAVASCRIPT CODES
</span>
</div>
<div class="sidebar_loader" id="sidebar_loader1" onmouseover="document.getElementById('line_container1').style.background='rgb(69,75,83)';" onmouseout="document.getElementById('sidebar_loader1').style.display='none';document.getElementById('line_container1').style.background=''">
<span id="texter">TEST for 1</span>
</div>
<div class="line_container" id="line_container2" onmouseover="document.getElementById('sidebar_loader2').style.display='block';document.getElementById('sidebar_loader3').style.display='none';document.getElementById('sidebar_loader1').style.display='none';" onmouseout="">
<img src="1.png" alt="IMAGE" class="line_image" id="line_image">
<span class="line_text">
VIDEOS
</span>
</div>
<div class="sidebar_loader" id="sidebar_loader2" onmouseover="document.getElementById('line_container2').style.background='rgb(69,75,83)';" onmouseout="document.getElementById('sidebar_loader2').style.display='none';document.getElementById('line_container2').style.background=''">
<span id="texter">TEST for 2</span>
</div>
<div class="line_container" id="line_container3" onmouseover="document.getElementById('sidebar_loader3').style.display='block';document.getElementById('sidebar_loader4').style.display='none';document.getElementById('sidebar_loader2').style.display='none';" onmouseout="">
<img src="http://www.ejprescott.com/media/icons/tools-equipment.png" alt="IMAGE" class="line_image">
<span class="line_text">
SETTINGS
</span>
</div>
<div class="sidebar_loader" id="sidebar_loader3" onmouseover="document.getElementById('line_container3').style.background='rgb(69,75,83)';" onmouseout="document.getElementById('sidebar_loader3').style.display='none';document.getElementById('line_container3').style.background=''">
<span id="texter">TEST for 3</span>
</div>
<div class="line_container" id="line_container4" onmouseover="document.getElementById('sidebar_loader4').style.display='block';document.getElementById('sidebar_loader3').style.display='none';document.getElementById('sidebar_loader3').style.display='none';" onmouseout="">
<img src="https://cdn2.iconfinder.com/data/icons/freecns-cumulus/16/519591-089_Speechbubble2-128.png" alt="IMAGE" class="line_image">
<span class="line_text">
Forum
</span>
</div>
<div class="sidebar_loader" id="sidebar_loader4" onmouseover="document.getElementById('line_container4').style.background='rgb(69,75,83)';" onmouseout="document.getElementById('sidebar_loader4').style.display='none';document.getElementById('line_container4').style.background='';">
<span id="texter">TEST for 4</span>
</div>
<button onclick="document.getElementById('side_bar_container').style.display='none';" onmouseover="document.getElementById('sidebar_loader4').style.display='none';" title="close this navigation pane" style="width:50px;">X</button>
You can see a demo here: http://jsbin.com/zoguqezu/1. Click the edit button in the top right hand corner to see the code and edit it.