I have a page where I'd like to have a row of circular images with text on them that can serve as links. I've figured out how to get this to work for the general case of a full sized webpage, but when I resize the width of the page, the text doesn't scale with the image because I have to use absolute positions. Here's the html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<a class= href="">
<img src="http://placehold.it/500x500" class="align-center img-responsive img-circle button-pic" />
<div class="button-caption">Button</div>
</a>
</div>
<div class="col-md-3">
<a class= href="">
<img src="http://placehold.it/500x500" class="align-center img-responsive img-circle button-pic" />
<div class="button-caption">Button</div>
</a>
</div>
<div class="col-md-3">
<a class= href="">
<img src="http://placehold.it/500x500" class="align-center img-responsive img-circle button-pic" />
<div class="button-caption">Button</div>
</a>
</div>
<div class="col-md-3">
<a class= href="">
<img src="http://placehold.it/500x500" class="align-center img-responsive img-circle button-pic" />
<div class="button-caption">Button</div>
</a>
</div>
</div>
</div>
</body>
</html>
Here's the main.css page...
body {
max-width: 900px;
margin: 0 auto;
}
.container {
width: 100%;
}
.button-pic {
opacity: 0.4;
position: relative;
}
.button-caption {
text-align: center;
position: absolute;
top: 87px;
left: 85px;
}
I'd like to find a way to not have to set the top and left positions of the button-caption since not all of my labels will be the same length. Anyone have advice to offer?
If you want your text position to remain consistent to the image you'll need to use percentages instead of setting a fixed amount of pixels for the position since the images are responsive.
See working Snippet.
.content {
max-width: 900px;
margin: auto;
}
.button-pic {
opacity: 0.4;
position: relative;
margin: auto;
}
.button-caption {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<a href="#">
<img src="http://placehold.it/500x500" class="img-responsive img-circle button-pic" />
<span class="button-caption">Just a Button</span>
</a>
</div>
<div class="col-md-3">
<a href="#">
<img src="http://placehold.it/500x500" class="img-responsive img-circle button-pic" />
<span class="button-caption">Button</span>
</a>
</div>
<div class="col-md-3">
<a href="#">
<img src="http://placehold.it/500x500" class="img-responsive img-circle button-pic" />
<span class="button-caption">Just a Really Very Pretty Long Label for a Button</span>
</a>
</div>
<div class="col-md-3">
<a href="#">
<img src="http://placehold.it/500x500" class="img-responsive img-circle button-pic" />
<span class="button-caption">A Button</span>
</a>
</div>
</div>
</div>
</div>
Related
Does anyone of you know how to create this gallery box and text (with the line) from the image?
Can you help me, please?
I want to learn how to create this gallery box and add a magnifier icon when I hover over the image.
I also want to open the image when I click on it, in full size if possible.
May you please help me with this?
Thank you all for trying to help me, I did this, and it's working. Although I didn't add a magnifier icon on hover.
<div id="portfolio">
<div class="container-fluid w-75">
<div class="row">
<h3 style="color: #bb9754;"> Spoljašnost zgrade </h3>
<hr style="background-color: #bb9754;">
<div class="col-lg-2 col-md-4 col-6 my-3">
<a class="portfolio-box" href="assets/img/portfolio/fullsize/1.jpg" title="Project Name">
<img class="img-fluid" src="https://via.placeholder.com/200x200" alt="..." />
</a>
</div>
</div>
</div>
</div>
Hope this helps:
.container {
width: "80vw";
margin: "0 auto";
}
.heading {
display: flex;
align-items: center;
}
.text {
flex-basis: 15%;
}
.divider {
content: "";
height: 4px;
background: #000;
width: 100%;
}
.gallery {
display: flex;
flex-wrap: wrap;
}
.gallery img {
height: 100px;
max-width: 100px;
margin: 20px;
}
<div class="container">
<div class="heading">
<div class="text">
TEXT
</div>
<div class="divider"></div>
</div>
<div class="gallery">
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
</div>
</div>
#title{
font-size:20px;
color:#A5A195;
display:flex;
justify-content:center;
}
#item{
display:flex;
flex-flow:row wrap;
}
.img{
width:150px;
border-radius:15px;
margin-right: 50px;
margin-top: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
</head>
<body>
<div id="title">
SPOLJASNJOST ZGRADE
</div>
<hr>
<div id="item">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
</div>
</body>
</html>
I wanted the social media icons to be visible without scrolling. This has worked before, is there a reason it's not? It doesn't seem to be the images taking up space.
I placed min-height:100vh on .container, HTML and body tag I didn't see any results. I changed the size height images and that also didn't get my desired result.
html {
height: 100%;
}
body {
background-color: #e2e2e2;
font-family: "Montserrat", sans-serif;
font-weight: 500; }
/* min height */
.container {
white-space: nowrap;
min-height: 100vh;
}
<div class="container"><nav>
<div class="site_header">
<img alt="nav logo" class="logo" src="https://i.imgur.com/1SxQJfI.png">
<div class="right">
<div class="class_button">
<a class="">CLASSES</a>
</div>
<img alt="menu button" class="menu" src="https://i.imgur.com/beUooBz.png">
</div>
</nav>
<div id="slider">
<div class="slider_child" id="slider_child">
<div class="image_con" style="left: 50%; opacity: 1">
<img src="https://i.imgur.com/xvYImiF.png" class="img1" />
</div>
<div class="image_con" style="left: 40%; opacity: 0">
<img src="https://i.imgur.com/hYnjyMy.png" class="img2" />
</div>
<div class="image_con" style="left: 40%; opacity: 0">
<img src="https://i.imgur.com/kGZ5oCv.png" class="img3" />
</div>
</div>
<!--ARROW AND TEXT ISSUE -->
<a class="slidenext" onclick="nextSlide();">
<img src="https://i.imgur.com/GASeP9Y.png" class="arrow_icon" />
<div class="grow">GROW</div>
</a>
<a class="slideprev" onclick="prevSlide();"><img src="https://i.imgur.com/WLkS6Jk.png" class="arrow_icon" />
<div class="shift">SHIFT</div>
</a>
<div class="title_holder">
<div class="title lineheight">
IR
</div>
<div class="title lineheight">
REG
</div>
<div class="title">
ULAR
</div>
<div class="button">
<a class="learn_more">LEARN MORE</a>
</div>
</div>
</div>
<!-- footer social media and slideshow numbers-->
<p>
#follow us
</p>
<div class="footer">
<img src="https://i.imgur.com/rCkPv9i.png alt="instagram link" class="social_icons ig" />
<img src="https://i.imgur.com/9rmiZY1.png" alt="facebook link" class="social_icons" />
</div>
</div>
</div>
</div>
codepen
Change your slider image height to 630px. It should place the whole container within 100vh. #slider { height: 630px }. Another tip: If you are using flexbox. You don't need absolute positioning for footer in this case.
I have been trying to create a responsive menu for the mobile browser of my site and it has four links. I have given 25% width for each of them. The problem is, although its logos stay center their titles don't. You can notice for the snippet that the titles are not in the center of their div.
What is the problem here? What am I doing wrong? Can you suggest how can I keep these titles center as well?
this is the current state:
I'm trying to make it something like this:
The snippet:
.menu {
position: fixed;
bottom: 0;
width: 100%;
background-color: #434A54;
color: white;
font-size: 12px;
padding-top: 7px;
}
a.main-link:link,
a.main-link:visited {
background-color: #434A54;
color: white;
text-decoration: none;
display: inline-block;
width: 25%;
}
.logo {
width: 24px;
height: 24px;
margin-left: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container menu">
<div class="row">
<a href="start.html" class="main-link">
<div class="col-3"> <img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo"/> <br>
LINK1
</div>
</a>
<a href="calculator-home.html" class="main-link">
<div class="col-3"> <img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo"/> <br>
LINK222
</div>
</a>
<a href="contact.html" class="main-link">
<div class="col-3"> <img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo"/> <br>
LINK33333
</div>
</a>
<a href="about.html" class="main-link">
<div class="col-3"> <img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo"/> <br>
LINK4444444
</div>
</a>
</div>
</div>
Columns should be direct child of rows.
Add text center class to the columns. Put the anchor tag inside of columns and make it display:block. And the image and menu title should be placed inside the anchor tag.
/*This css is not required. */
img{
width:25px;
height:25px;
}
a.main-link:link,
a.main-link:visited {
text-decoration: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-3 text-center">
<a href="start.html" class="main-link d-block">
<img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo " />
<div> LINK1 </div>
</a>
</div>
<div class="col-3 text-center">
<a href="start.html" class="main-link d-block">
<img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo " />
<div> LINK1 </div>
</a>
</div>
<div class="col-3 text-center">
<a href="start.html" class="main-link d-block">
<img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo " />
<div> LINK1 </div>
</a>
</div>
</div>
</div>
If you change the html code and add the image before the text inside the anchor tag then add text-align: center you'll get the same result
check my code:
.menu {
position: fixed;
bottom: 0;
width: 100%;
background-color: #434A54;
color: white;
font-size: 12px;
padding-top: 7px;
}
.main-link {
text-align: center
}
a.main-link:link,
a.main-link:visited {
background-color: #434A54;
color: white;
text-decoration: none;
display: inline-block;
width: 25%;
}
.logo {
width: 24px;
height: 24px;
margin-left: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container menu">
<div class="row">
<a href="start.html" class="main-link">
<img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo" /><br />
<span class="col-3">LINK1
</span>
</a>
<a href="calculator-home.html" class="main-link">
<img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo" /> <br>
<span class="col-3">LINK222
</span>
</a>
<a href="contact.html" class="main-link">
<img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo" /> <br>
<span class="col-3">LINK33333
</span>
</a>
<a href="about.html" class="main-link">
<img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo" /><br />
<span class="col-3">LINK4444444
</span>
</a>
</div>
</div>
HTML
<div class="button">
<a href="#">
<img id="img1" src="icons/onas1.svg" alt="O nas[enter image description here][1]">
</>
<a href="#">
<img id="img2" src="icons/kontakt1.svg" alt="kontakt">
</a>
</div>
</div>
CSS:
div.button img{
position: fixed;
height: 10%;
display: inline-block;
}
Hey, how can I put these two images next to each other?
Try this code:
div a img{
height: 10%;
width:200px;
}
<div class="button">
<a href="#">
<img id="img1" src="https://yt3.ggpht.com/-3N3L1JNdZ4k/AAAAAAAAAAI/AAAAAAAAAAA/PmHzBEEHaU4/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" alt="O nas[enter image description here][1]">
</>
<a href="#">
<img id="img2" src="https://yt3.ggpht.com/-3N3L1JNdZ4k/AAAAAAAAAAI/AAAAAAAAAAA/PmHzBEEHaU4/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" alt="kontakt">
</a>
</div>
</div>
I have an issue with bootstrap thumbnail and horizontal scrollbar in IE and Firefox but not chrome nor mobile browsers.
So basically, in firefox and IE the modals look strange and there is a horizontal scroll bar, however this issue does not appear in chrome or mobile phone browsers. as you see in the image, this is the issue
and this is how modals look like in firefox
and this is how it should look like without any issue as in chrome
and for the modal code here:
<div class="container" id="portfolio" >
<hr>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<a href="Text 101 WebBuild V1/Text 101 WebBuild V1.html" target="_blank"> <img src="images/text101.png" alt="..." class="image">
<div class="imgDescription">
<h3 class="img-content"><strong>Text 101</strong></h3>
<span class="modal-button" >
<img src="images/unity1.png" style="height:30px; width:30px;" > </span>
</div>
</a>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<a href="landingPage.html" target="_blank"> <img src="images/myweb-app.png" alt="..." class="image">
<div class="imgDescription">
<h3 class="img-content" style="left:95px;"><strong>MyWebsite App</strong></h3>
<span class="modal-button" style="left:145px">
<img src="images/webdev.png" style="height:30px; width:auto;" > </span>
</div>
</a>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<a href="#"> <img src="images/card3.jpg" alt="..." class="image">
<div class="imgDescription">
<h3 class="img-content"></h3>
<span class="modal-button"></span>
</div>
</a>
</div>
</div>
</div> <!-- portfolio end here -->
and the css used here:
.thumbnail {
position: relative;
display: inline-block;
}
.thumbnail .imgDescription {
position: absolute;
top: 4px;
left: 4px;
width: 98%;
height: 96%;
display: none;
color: #FFF;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
}
.thumbnail:hover .imgDescription {
display: block;
background: rgba(0, 0, 0, .6);
}
.thumbnail .imgDescription .img-content {
position: absolute;
top: 25%;
left:35%;
color:white;
}
.thumbnail .imgDescription .modal-button {
position: absolute;
top: 55%;
left:43%;
}
I just couldn't figure where the issue is I mean it runs noraml in chrome and phone browsers. any help with be much appreciated.
Your tags are out of place. Notice how you open an <a> tag then a <div> and a <span> but you close the </a> before the </span> and </div>. HTML requires proper nesting so before you close the </a> you need to close every tag under it. Try using this code for the portfolio HTML:
<div class="container" id="portfolio">
<hr>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<a href="Text 101 WebBuild V1/Text 101 WebBuild V1.html" target="_blank"> <img src="images/text101.png" class="image" width="100%">
<div class="imgDescription">
<h3 class="img-content"><strong>Text 101</strong></h3>
<span class="modal-button">
<img src="images/unity1.png" style="height:30px; width:30px;">
</span>
</div>
</a>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<a href="landingPage.html" target="_blank"> <img src="images/myweb-app.png" alt="..." class="image" width="100%">
<div class="imgDescription">
<h3 class="img-content" style="left:95px;"><strong>MyWebsite App</strong></h3>
<span class="modal-button" style="left:145px">
<img src="images/webdev.png" style="height:30px; width:auto;">
</span>
</div>
</a>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<a href="#"> <img src="images/card3.jpg" alt="..." class="image" width="100%">
<div class="imgDescription">
<h3 class="img-content"></h3>
<span class="modal-button"></span>
</div>
</a>
</div>
</div>
</div>
</div>
Update: I also added width="100%" to the images for IE.