i have some issues with photo grid.
its like have a padding on right side, i have put rule like padding-right 0
or margin-right or right 0 and still see the issues.
doesnt fit properly
here my workaround https://codepen.io/RIN-id/pen/ZrzyZB
index.html
<ul id="photo-gallery">
<li>
<a href="a.jpg" data-description=" Mulak Mar-onan (Kapal Tuktuk)">
<img src="img/galery/a.jpg" >
</a>
</li>
</ul>
styles.css
#photos {
width: 100%;
height: 100%;
}
#photo-gallery {
width: 100%;
overflow: scroll;
/*! overflow-x: scroll; */
}
h3 {font-size: 20px; color: #fff;}
#photos img {
width: 30%;
float: left;
display: block;
margin: 2px;
}
ul {
list-style: none;
margin: 0px auto;
padding: 10px;
display: block;
max-width: 780px;
text-align: left;
}
#overlay {
background: rgba(0,0,0, .8);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
text-align: center;
z-index: 5000;
}
#overlay img {
margin: 10% auto 0;
width: 100%;
border-radius: 5px;
z-index: 5000;
position: relative;
padding-top: 113px;
}
thank you, sorry for bad grammar.
try put margin: 0; padding: 0 in your css
The problem is that the images are each 30% width floated left with only a small margin that doesn't offset the 10% gap left over.
What I would do:
-Delete margin for #photos img
-Change width to 33.33%
-Add desired padding (2px for instance)
-Add box-sizing: border-box to include padding in width
try to set
margin: 0; padding: 0
top: 0;
bot: 0;
Related
What is the best way to have an image on top of a card with content underneath it?
I have tried negative margins but I have had no luck on with this approach.
I attached an image of what the look and feel I am going for:
Here is my attempt on code
.card {
text-decoration: none;
margin-right: 20px;
text-align: center;
}
.card__section {
overflow: hidden;
padding-bottom: 50px;
display: block;
position: relative;
}
.card__inner {
background: black;
padding: calc(35px + 30%) 35px 35px;
color: white;
width: 100%;
display: block;
position: relative;
}
.card__image {
width: 80%;
height: auto;
margin: 0 auto -30%;
position: relative;
z-index: 1;
}
<a href="#" class="card">
<section class="card__section">
<img
class="card__image"
src="http://via.placeholder.com/340x220"
alt=""
/>
<div class="card__inner">
<h1>
This is a static template, there is no bundler or bundling
involved!
</h1>
</div>
</section>
</a>
you need to add below css
.card__section {
overflow: visible;
}
.card__image {
margin-bottom: 20px;
margin-top: -100px;
}
section.card__section {
margin-top: 60px;
}
and put your image in card__inner div
see https://codesandbox.io/s/card-hover-5n0yf?file=/index.html:450-461
hope this helps
You're almost there! There are two things that need to be updated:
1. Remove extra % in .card__image
.card__image {
width: 80%;
height: auto;
margin: 0 auto -30%%; // <-- Remove extra % at the end.
position: relative;
z-index: 1;
}
2. Adjust padding in .card__inner due to negative margin on previous element.
.card__inner {
background: black;
// Update padding to below. Negative margin on previous element needs to be added to the top padding.
padding: calc(35px + 30%) 35px 35px;
color: white;
width: 100%;
display: block;
position: relative;
}
Sandbox: https://codesandbox.io/s/card-hover-wiilf
I have an HTML structure like:
.container {
width: 100%;
height: 300px;
background-color: blue;
}
.dots-container-wrapper {
width: 100%;
}
.dots-container {
max-width: 55px;
overflow: hidden;
min-width: 1px;
display: block;
padding: 0;
margin: 0 auto;
height: 0.875rem;
position: relative;
}
.dots-container>ul {
padding: 0;
display: flex !important;
transition: all 0.25s;
position: relative;
margin: 0;
list-style: none;
transform: translateX(0);
align-items: center;
bottom: unset;
height: 100%;
}
.dots-container>ul li {
width: 6px;
height: 6px;
margin: 0 2.5px;
background-color: #fff;
border: none;
border-radius: 50%;
display: inline-block;
opacity: .7;
}
<div class="container">
<div class="dots-container-wrapper">
<div class="dots-container">
<ul class="dots">
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
The problem is that the div "dots-container" has a property max-width: 55px. But in case the width is less than 55px, I would like to use the real width, however, the div is always 55px. This is a problem because I´m using this in a carousel with dots functionality. When there are 5 pictures, you can see 5 dots aligned in the center, but in case there are fewer pictures, let´s say 2, the div is still 55px and the dots don´t seem to be aligned in the center. See example screenshots.
Your .dots-container is displayed as a block. By default a block will always try to fill up the entire width. By making the container .dots-container-wrapper display flex, it's children will only take up as much space as they need (while also centering them if needed).
.dots-container-wrapper {
width: 100%;
display: flex; // change to flex
}
.dots-container {
max-width: 55px;
overflow: hidden;
min-width: 1px;
display: block;
padding: 0;
margin: 0 auto;
height: 0.875rem;
position: relative;
}
I am making a website for my college course and I am having problems getting the button heights in my slide show to match up. I was wondering if anyone could give me a clue as to how to get them both to be at the same height?
This is my css for the slide show:
/=== SLIDESHOW SECTION ===/
#container
{
width: 90%;
height: 700px;
border: none;
margin: 0 auto;
position: relative;
}
#container > img
{
width: 100%;
height: 100%;
position: absolute;
}
#container > .btn
{
position: absolute;
width: 50px;
height: 50px;
border: none;
border-radius: 25px;
top: 350px;
background: #000000;
color: #ffffff;
font-size: 20px;
}
#container>#btn1:hover
{
box-shadow: 10px 0px 20px 0px #343d46 ;
}
#container>#btn2:hover
{
box-shadow: -10px 0px 20px 0px #343d46;
}
#container>#btn2
{
position: relative;
float: right;
}
picture of the problem
change your
#container>#btn2
{
position: relative;
float: right;
}
to
#container>#btn2
{
right:0;
}
Try adding this before #container>#btn2:
#container>#btn1
{
position: relative;
float: left;
}
Absolute positioning generally shouldn't be applied to classes (multiple elements).
I would remove the absolute positioning on your .btns and use flexbox on your container, like so:-
#container
{
width: 90%;
height: 700px;
border: none;
margin: 0 auto;
display: flex; /* adds flexbox to container */
align-items: center; /* vertically aligns everything in container */
justify-content: space-between; /* spaces the buttons as far away `enter code here`from each other as possible */
}
You can then add padding to your container for finer adjustments of your buttons horizontal distance from the container edge.
I'm trying to show off the best hairstyles that I've done on a web site.
When you hover over the images, it gives a little information about each of the styles. The hover works fine and shows up, but even though I have the height set as 100% on the information div, it only takes up enough space needed for the text. I'm using display: table to get the text centered vertically "on the image". When I change it to display block, it works fine, but the vertical centering is a must. This is extremely annoying & after 2 hours of fiddling with it I simply cannot get it to work. Please help! http://jarahairandmakeup.tumblr.com/
div.post {
width: 50%;
height: auto;
position: relative;
float: left;
}
div.information {
display: table;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.65);
text-align: center;
z-index: 2;
opacity: 0;
}
div.post:hover .information { opacity: 1 !important; }
div.info {
color: #fff;
display: table-cell;
vertical-align: middle;
font: 11px/1.4 'Gudea';
letter-spacing: .3em;
text-transform: uppercase;
padding: 0 5%;
}
div.info h3 {
font: 100 20px/1 'Gudea';
margin: 0; padding: 0;
letter-spacing: 6px;
}
div.info hr { color: #fff; background: #fff; margin: 20px auto;}
div.image {
float: left;
position: relative;
z-index: 1;
}
div.image img.hairstyle {
width: 100%;
height: 100%;
display: block;
}
<div class="post">
<a href="/ciara">
<div class="information">
<div class="info">
<h3>CURLED UPDO</h3>
<hr />
A romantic style updo with braided accents for prom
</div>
</div>
<div class="image">
<img src="http://static.tumblr.com/ww0u3rz/BRjn5dotq/img_0919.jpg" class="hairstyle">
</div>
</a>
</div>
I'd like to make it so the black background of the information div takes up the entire length of the photo.
use display:block instead of table.
Edit:
Just wrap the info div with a wrapper and have the following css:
display: table;
position: absolute;
height: 100%;
width: 100%;
it works fine: http://cloud.kerim.me/image/2p3W1x011m0I
So I have this code here: http://jsfiddle.net/nUwgX/ which has a little arrow at the bottom. What I'd like to happen is when the window get's resized is to keep the arrow about 15% from the bottom of the screen but I'm not sure how I'd do that. Any help would be appreciated.
HTML:
<div class = "container">
<div class = "top-wrapper">
<a id = "name" href = "#">Bigfoot Games</a>
</div>
<div class = "bottom-wrapper">
<p>Content</p>
</div>
</div>
CSS:
.container {
width: 100%;
height: 100%;
margin: 0 auto;
position: relative;
padding: 0;
text-align: center;
}
.top-wrapper {
position: relative;
background: #0f0f0f;
height: auto;
height: 100%;
max-height: 900px;
width: 100%;
margin: 0 auto;
padding: 0;
display: table;
}
.top-wrapper:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(15, 15, 15, 0);
border-top-color: #0f0f0f;
border-width: 30px;
margin-left: -30px;
}
#name {
display: table-cell;
text-align: center;
vertical-align: middle;
padding: 20px;
color: white;
font-size: 80px;
text-decoration: none;
margin: auto 0;
}
.bottom-wrapper {
background: white;
margin: 0 auto;
padding: 20px;
}
Edit: Okay, so saying that I wanted the arrow about 15% above is not what I meant! Ha! What I mean is, I want the .top-wrapper to be 100% so that it covers the whole window, and you scroll down to see the .bottom-wrapper - however when the screen is resized (other than my 1920 x 1080 resolution) the arrow get's hidden just out of sight, what I'd like is the arrow to be visible regardless of resolution and have the look (in terms of padding/distance) as a 1920 x 1080 resolution.
Change the css of .top-wrapper to only take up 85%, that leaves 15% for the "arrow" on the bottom to take up.
.top-wrapper {
...
height: 85%;
...
}
see the jsfiddle:
http://jsfiddle.net/nUwgX/1/
Change your .top-wrapper height to 85%
I changed just that in the jsfiddle and it maintains when the screen is resized. If that isn't what you are looking for, please elaborate on the question.
Good Luck!
If you want to keep your bottom-wrapper at the bottom fixed position ...
Replace your .bottom-wrapper class with below
.bottom-wrapper {
position:fixed;
bottom: 0px;
height: 15%;
width: 100%;
background-color: white;
margin: 0 auto;
}
.bottom-wrapper p{
padding-top: 20px;
}
Then change .top-wrapper:after to .bottom-wrapper:before