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
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;
}
Positioning the <h1> to the position that I want.
Here's what I am trying to do: https://imgur.com/a/D0ief0a
CSS File and HTML File
#import url('https://fonts.googleapis.com/css? family=Montserrat:400,600');
body {
font-family: 'Montserrat';
padding: 0;
margin: 0;
}
.header {
position: relative;
background-color: antiquewhite;
}
.header img {
padding: 1em 2em;
width: 10%;
display: block;
border-radius: 80px;
}
.header h1 {
padding: 1em;
text-align: center;
font-size: 3em;
position: relative;
}
<header>
<div class="header">
<img src="../Welcome/images/123.jpg" alt="">
<h1> A Work In Progress</h1>
</div>
</header>
I tried everything that comes into my mind.
See if it helps :
JSFiddle DEMO
.header img {
padding: 1em 2em;
width: 10%;
border-radius: 80px;
position: fixed;
float: left;
display: inline-block;
}
Added float: left; and position: fixed;, also changed the display to inline-block
I think the best way to do this is use position:fixed:
.header h1 {
text-align: center;
font-size: 3em;
display: block;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
This will keep it centered regardless of device coming into your site.
Play the with parameters a bit to get the exact position you want, also you might want to do this to the background aswell.
For some reason instead of only being able to click the links by clicking on the text, you can also click below it on empty space.
My friend said I had to reduce div size but I'm not quite sure on what he meant.
#video {
position: fixed;
right: 0;
bottom: 0;
min-height: 100%;
min-width: 100%;
}
#devil,
#steam,
#youtube {
display: block;
margin-left: auto;
margin-right: auto;
height: 230px;
width: 230px;
position: relative;
}
#steam,
#youtube {
text-decoration: none;
font-family: cursive;
font-style: oblique;
}
#devil {
border-radius: 120px;
top: 250px;
right: 20px;
}
#steam {
top: 280px;
left: 10px;
}
#youtube {
top: 50px;
left: 115px;
}
a:link,
a:visited {
color: forestgreen;
}
<div>
<img id="devil" src="img/frizzy.jpg">
</div>
<div>
<a id="steam" href="https://steamcommunity.com/id/impenetrable" target="_blank">steam</a>
<a id="youtube" href="https://www.youtube.com/c/ItsFrizzy" target="_blank">youtube</a>
</div>
Your problem is probably in here:
#devil,
#steam,
#youtube {
display: block;
margin-left: auto;
margin-right: auto;
height: 230px;
width: 230px;
position: relative;
}
You shouldn't need to set the height or width for your links, since they will be automatically set based on the text. You can use something like firefox tools to look at the bounding block of your links and see what's giving them the big space to click. You can even mess with the parameters here to suit your liking.
In your css, you specify height: 230px; for your element that holds the link. Decrease this size to remove the blank space that also responds to your mouse.
As suggested, use a border or background color to help indicate where your elements are, or use the development console (F12 in Chrome) to find your element sizes.
Instead of setting height to links you should set font-size for them and if this didn’t help set line-height same as font-size value.
You are getting a height on your anchors because you are applying a height to them (you should remove this). Also, I wouldn't use absolute or relative positioning for this as you do not need it. I would envelope your image and your social links in their own containers and position them. Here is an example of what I am talking about.
.container {
margin-top: 20px;
}
#video {
position: fixed;
right: 0;
bottom: 0;
min-height: 100%;
min-width: 100%;
}
.social_container {
margin: 0px auto;
padding: 10px;
width: 200px;
}
#steam,
#youtube {
margin: 0px auto;
width: 80px;
display: inline-block;
text-decoration: none;
font-family: cursive;
font-style: oblique;
text-align: center;
}
#devil {
border-radius: 120px;
display: block;
margin-left: auto;
margin-right: auto;
height: 230px;
width: 230px;
position: relative;
}
a:link,
a:visited {
color: forestgreen;
}
<div class="container">
<img id="devil" src="img/frizzy.jpg">
</div>
<div class="social_container">
<a id="steam" href="https://steamcommunity.com/id/impenetrable" target="_blank">steam</a>
<a id="youtube" href="https://www.youtube.com/c/ItsFrizzy" target="_blank">youtube</a>
</div>
Well, I'm back to doing front-end stuff -- which is really not my forté -- and I'm stumped.
I have a div with a logo, and I need to put some text in-line with it, vertically centered within the div. Every time I try to float the element right, it seems to end up outside of the div (somehow?).
Relevant HTML:
<div id="wrapper-header">
<div id="wrapper-nav-header">
<div id="header-logo">
<span id="header-logo-span"><img src="mylogo.png" /></span>
<span id="header-customer-name">Customer Name</span>
</div>
</div>
...
</div>
Relevant CSS:
#wrapper-header {
background-color: #fff;
position: fixed;
z-index: 999;
width: 100%;
padding: 0;
white-space: nowrap;
font-size: 13px;
line-height: 1
}
#wrapper-header #header-logo {
margin-left: 20px;
padding: 10px 0;
}
#wrapper-header #header-logo img {
max-height: 40px;
vertical-align: middle;
}
#wrapper-header #header-customer-name {
vertical-align: middle;
}
What do I need to do to get this header-customer-name element to float right?
You can try using flex box:
html, body{
margin: 0;
padding: 0;
}
#wrapper-header {
background-color: #fff;
position: fixed;
z-index: 999;
width: 100%;
padding: 0;
white-space: nowrap;
font-size: 13px;
line-height: 1
}
#header-logo {
margin-left: 20px;
padding: 10px 0;
display: flex;
align-items: center;
}
#header-logo img {
max-height: 40px;
vertical-align: middle;
}
#header-customer-name {
flex-grow: 1;
text-align: right;
}
<div id="wrapper-header">
<div id="wrapper-nav-header">
<div id="header-logo">
<span id="header-logo-span"><img src=http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" /></span>
<span id="header-customer-name">Customer Name</span>
</div>
</div>
</div>
or you can calculate an appropriate padding to your header-customer-name like this:
html, body{
margin: 0;
padding: 0;
}
#wrapper-header {
background-color: #fff;
position: fixed;
z-index: 999;
width: 100%;
padding: 0;
white-space: nowrap;
font-size: 13px;
line-height: 1
}
#header-logo {
margin-left: 20px;
padding: 10px 0;
}
#header-logo img {
max-height: 40px;
vertical-align: middle;
}
#header-customer-name {
float: right;
padding: 12px 0; /*you can change for a more precise value*/
}
<div id="wrapper-header">
<div id="wrapper-nav-header">
<div id="header-logo">
<span id="header-logo-span"><img src=http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" /></span>
<span id="header-customer-name">Customer Name</span>
</div>
</div>
</div>
Anyway if you're referring that the header-customer-name is outing on the right of the #wrapper-header that is probably because it has position: fixed and width: 100%, that's why I add the style:
html, body{
margin: 0;
padding: 0;
}
Check my answer here to better understanding White Space Appears Right of Browser Window When at Full Screen
This has no relation with the question but can help you
Don’t Overqualify
As a general rule, don’t supply more information than is necessary.
// bad
ul#someid {..}
.menu#otherid{..}
#id1 #id2{...}
// good
#someid {..}
#otherid {..}
#id2{...}
Try in fiddle
Change style to this way..
#wrapper-header #header-customer-name {
vertical-align: middle;
float: right;
padding-top: 15px; /*value suits to your logo */
}
Do you have CSS reset code in CSS files which is linked with this page. After the is below css reset added, the problem was solved. Demo
html, body {
margin:0;
padding:0;
}