I am trying to create an overlay for responsive images in a horizontal gallery.
The overlay div in the li has position and a large z-index value but still displays on background of the image.
When I try to do absolute for an image with higher z-index the horizontal scrolling for image fails.
See the demo: Jsfiddle
html,
body {
min-height: 100%;
height: 100%;
}
body {
width: 100%;
margin: 0;
padding: 0;
}
#thumbsList {
height: 76%;
white-space: nowrap;
margin: 0;
padding: 0;
line-height: 0px;
top: 13%;
left: 80px;
list-style-type: none;
top: 13%;
position: absolute;
}
#thumbsList li {
display: inline;
position: relative;
}
#thumbsList li img {
max-width: 100%;
height: 100%;
transition: all 0.8s ease;
}
.Absolute-Center {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.backStrip {
background-color: #2d2d2d;
border-bottom: 1px solid #1a1a1a;
height: 35px;
position: relative;
z-index: 22;
position: fixed;
width: 253px;
top: 43px;
height: 79px;
left: 85px;
}
#infoText {
color: white;
font-style: italic;
padding-top: 10px;
float: right;
margin-right: 10px;
font-family: sans-serif;
font-size: 12px;
}
#mainContainer {
height: 100%;
width: 100%;
position: fixed;
z-index: 1;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 8px solid #2D2D2D;
margin: 0px;
overflow-x: auto;
}
#thumbsButtons {
list-style: none;
position: fixed;
bottom: 6%;
left: 46%;
z-index: 22;
}
#counterContainer {
position: fixed;
bottom: 5%;
left: 50%;
right: 50%;
font-family: verdana;
font-weight: bold;
width: 100px;
}
#thumbsButtons li {
float: left;
margin-left: 11px;
font-size: 16px;
font-family: verdana;
}
#thumbsButtons li:hover {
cursor: pointer;
}
#nextArrow {
position: fixed;
right: 10px;
top: 43%;
z-index: 13333;
font-size: 100px;
color: white;
font-family: helvetica;
cursor: pointer;
}
#sidelogo {
position: absolute;
z-index: 10;
top: 35%;
left: 0%;
width: 67px;
height: 258px;
background-color: #2D2D2D;
}
.headerInfo {
position: absolute;
bottom: 22px;
color: white;
z-index: 333;
font-family: verdana;
font-size: 17px;
text-align: center;
}
.thumbOverlay {
position: absolute;
z-index: 13111133;
background-color: black;
color: white;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
display: inline;
}
<div id="mainContainer">
<div class="backStrip"> <span id="infoText">Written By Banmeet Singh</span>
</div>
<ul id="thumbsButtons"></ul> <span id="nextArrow">></span>
<span id="sidelogo">Thinking Forward</span>
<ul id="thumbsList">
<li>
<img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" /> <span class="headerInfo">Josh Kloss</span>
</li>
<li>
<div class="thumbOverlay"><span>adasd</span>
</div>
<img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" />
</li>
<li>
<img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" />
</li>
<li>
<img class="forward" src="http://placehold.it/200x100" alt="Alternate Text" />
</li>
<li>
<img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" />
</li>
<li>
<img class="forward" src="http://placehold.it/200x100" alt="Alternate Text" />
</li>
</ul>
<div id="counterContainer">3 of 10</div>
Check the Second Image. I have added the overlay to that.
#thumbsList li {
display: inline-block;
position: relative;
}
are you expecting this kind of result?
see jsFiddle
Check this out: https://jsfiddle.net/r6hho2sL/11/
here I made some modifications to your code:
1. I used JQuery to adjust the width of the overlay element on window re-size event so that it would keep its responsive behavior
$( window ).resize(function() {
$( ".thumbOverlay" ).width($(".forward").width());
});
$( ".thumbOverlay" ).width($(".forward").width());
I used (divs and spans) instead of list (ul and li)
I modified the css classes
.thumbOverlay {
top: 0;
position: absolute;
z-index: 13111133;
background-color: black;
color: white;
height: 100%;
display: inline;
}
#thumbsList span {
display: inline;
margin-left: -4px;
}
Marc Andre, your fiddle(s) code is, unfortunately, rather leaky and inconsistent. So, instead of patching and rearranging it, I took the liberty of starting from scratch staying as close to your original idea as possible.
For a quick look, check my Pen on CODEPEN Responsive filmstrip and thumblist
Where did you go wrong?
First of all, I don't intend to pick on you, I am just being honest:
You didn't use 'position' correctly on your elements, which (probably) resulted in a confusing (hair-pulling, I guess) onscreen output.
Two general rules:
1) parent-element => position: relative, child-element => position: absolute.
Both can have any kind of width/height (%, px), but the child values are relative to the parent-element.
2) child-element => position: fixed. Width/height/position are relative to the browser window, ALWAYS.
You mixed the two rules and got yourself running in circles. To break free you should do:
/* Generally accepted (and working) init of HTML and BODY */
html, body { width: 100%; height: 100%; margin: 0; padding: 0 }
body { max-width: 100%; margin: 0 auto }
/* margin: 0 auto will center BODY onscreen if max-width < 100% */
#thumbsList { position: absolute /* relative to BODY!!! which is a parent */ }
#thumbsList li { position: relative /* while a child of UL, it is a parent of IMG */ }
#thumbsList li img { position: absolute /* child of LI absolute coords relative to LI */ }
No further 'position'ing should be needed for #thumbslist (only sizing, styling and such).
Again unfortunately, because of the number of (logic) errors, your CSS requires to be redesigned (IMHO that is).
UPDATE
As you may have seen by now, the code works on Codepen and standalone in the latest IE11, FF and CH (all W7, I still need to check mobile).
What I essentially created is a strip of stacked flexbox layout layers. Once you master the flexbox techniques, you wil see that it has lots of advantages over regular (inline-)block techniques. Drawbacks too, I will point them out where applicable.
To easily understand my (very down to earth) flexbox workflow I always ask what basic layout is needed:
a column of rows or a row of columns
wrapping or not
justification (often justify-content: space-between, you may want to read into this)
Nesting and trickery will come later...
Dissecting your requirements: you actually need a regular webpage, but instead of nicely placed blocks, you need them stacked, hence the need for layers
Why is this happening?
This is not an issue with z-index as .thumbOverlay is stacked on top of the image. The issue is that .thumbOverlay has a percentage height which means it will take up the full height of its container. In this case the container is a li which has been setup as display: inline; so its height will be as high as its line box.
What can you do?
For your overlay to work you either need height: 100%; to calculate the correct height.
Method 1: Make the list item inline-block
If you make the li display: inline-block; then you will be able to set its height.
Change display: inline; to display: inline-block; on #thumbsList li
Add height: 100%; to #thumbsList li to make the li the height of the ul
Change max-width: 100%; to max-width: calc(100vw - 96px); on #thumbsList li img. This will ensure that the img takes up the full width of the viewport, minus the borders and positioning applied to the #mainContainer and #thumbsList
html, body {
min-height: 100%;
height: 100%;
}
body {
width: 100%;
margin: 0;
padding: 0;
}
#thumbsList {
height: 76%;
white-space: nowrap;
margin: 0;
padding: 0;
line-height: 0px;
top: 13%;
left: 80px;
list-style-type: none;
top: 13%;
position: absolute;
}
#thumbsList li {
/*display: inline;REMOVE THIS*/
display: inline-block; /*ADD THIS*/
height: 100%; /*ADD THIS*/
position: relative;
}
#thumbsList li img {
/*max-width: 100%; REMOVE THIS*/
max-width: calc(100vw - 96px); /*ADD THIS*/
height: 100%;
transition: all 0.8s ease;
}
.Absolute-Center {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.backStrip {
background-color: #2d2d2d;
border-bottom: 1px solid #1a1a1a;
height: 35px;
position: relative;
z-index: 22;
position: fixed;
width: 253px;
top: 43px;
height: 79px;
left: 85px;
}
#infoText {
color: white;
font-style: italic;
padding-top: 10px;
float: right;
margin-right: 10px;
font-family: sans-serif;
font-size: 12px;
}
#mainContainer {
height: 100%;
width: 100%;
position: fixed;
z-index: 1;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 8px solid #2D2D2D;
margin: 0px;
overflow-x: auto;
}
#thumbsButtons {
list-style: none;
position: fixed;
bottom: 6%;
left: 46%;
z-index: 22;
}
#counterContainer {
position: fixed;
bottom: 5%;
left: 50%;
right: 50%;
font-family: verdana;
font-weight: bold;
width: 100px;
}
#thumbsButtons li {
float: left;
margin-left: 11px;
font-size: 16px;
font-family: verdana;
}
#thumbsButtons li:hover {
cursor: pointer;
}
#nextArrow {
position: fixed;
right: 10px;
top: 43%;
z-index: 13333;
font-size: 100px;
color: white;
font-family: helvetica;
cursor: pointer;
}
#sidelogo {
position: absolute;
z-index: 10;
top: 35%;
left: 0%;
width: 67px;
height: 258px;
background-color: #2D2D2D;
}
.headerInfo {
position: absolute;
bottom: 22px;
color: white;
z-index: 333;
font-family: verdana;
font-size: 17px;
text-align: center;
}
.thumbOverlay {
position: absolute;
z-index: 13111133;
background-color: black;
color: white;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
/*display: inline; REMOVE THIS*/
}
<div id="mainContainer">
<div class="backStrip">
<span id="infoText">Written By Banmeet Singh</span>
</div>
<ul id="thumbsButtons"></ul> <span id="nextArrow">></span>
<span id="sidelogo">Thinking Forward</span>
<ul id="thumbsList">
<li>
<img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" /> <span class="headerInfo">Josh Kloss</span>
</li>
<li>
<div class="thumbOverlay"><span>adasd</span> </div>
<img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" />
</li>
<li>
<img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" />
</li>
<li>
<img class="forward" src="http://placehold.it/200x100" alt="Alternate Text" />
</li>
<li>
<img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" />
</li>
<li>
<img class="forward" src="http://placehold.it/200x100" alt="Alternate Text" />
</li>
</ul>
<div id="counterContainer">3 of 10</div>
</div>
https://jsfiddle.net/vhqg2zg3/2/
Method 2: Make the overlay relative to the list
If you make .thumbOverlay position relative to the ul you will be able to get the height from the ul instead.
Remove position: relative; from #thumbsList li. This will stop .thumbOverlay from being relative to it
Remove left: 0px; from .thumbOverlay. This will ensure that its left position is kept at where it is initially drawn
html, body {
min-height: 100%;
height: 100%;
}
body {
width: 100%;
margin: 0;
padding: 0;
}
#thumbsList {
height: 76%;
white-space: nowrap;
margin: 0;
padding: 0;
line-height: 0px;
top: 13%;
left: 80px;
list-style-type: none;
top: 13%;
position: absolute;
}
#thumbsList li {
display: inline;
/*position: relative; REMOVE THIS*/
}
#thumbsList li img {
max-width: 100%;
height: 100%;
transition: all 0.8s ease;
}
.Absolute-Center {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.backStrip {
background-color: #2d2d2d;
border-bottom: 1px solid #1a1a1a;
height: 35px;
position: relative;
z-index: 22;
position: fixed;
width: 253px;
top: 43px;
height: 79px;
left: 85px;
}
#infoText {
color: white;
font-style: italic;
padding-top: 10px;
float: right;
margin-right: 10px;
font-family: sans-serif;
font-size: 12px;
}
#mainContainer {
height: 100%;
width: 100%;
position: fixed;
z-index: 1;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 8px solid #2D2D2D;
margin: 0px;
overflow-x: auto;
}
#thumbsButtons {
list-style: none;
position: fixed;
bottom: 6%;
left: 46%;
z-index: 22;
}
#counterContainer {
position: fixed;
bottom: 5%;
left: 50%;
right: 50%;
font-family: verdana;
font-weight: bold;
width: 100px;
}
#thumbsButtons li {
float: left;
margin-left: 11px;
font-size: 16px;
font-family: verdana;
}
#thumbsButtons li:hover {
cursor: pointer;
}
#nextArrow {
position: fixed;
right: 10px;
top: 43%;
z-index: 13333;
font-size: 100px;
color: white;
font-family: helvetica;
cursor: pointer;
}
#sidelogo {
position: absolute;
z-index: 10;
top: 35%;
left: 0%;
width: 67px;
height: 258px;
background-color: #2D2D2D;
}
.headerInfo {
position: absolute;
bottom: 22px;
color: white;
z-index: 333;
font-family: verdana;
font-size: 17px;
text-align: center;
}
.thumbOverlay {
position: absolute;
z-index: 13111133;
background-color: black;
color: white;
height: 100%;
width: 100%;
/*left: 0px; REMOVE THIS*/
top: 0px;
display: inline;
}
<div id="mainContainer">
<div class="backStrip">
<span id="infoText">Written By Banmeet Singh</span>
</div>
<ul id="thumbsButtons"></ul> <span id="nextArrow">></span>
<span id="sidelogo">Thinking Forward</span>
<ul id="thumbsList">
<li>
<img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" /> <span class="headerInfo">Josh Kloss</span>
</li>
<li>
<div class="thumbOverlay"><span>adasd</span> </div>
<img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" />
</li>
<li>
<img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" />
</li>
<li>
<img class="forward" src="http://placehold.it/200x100" alt="Alternate Text" />
</li>
<li>
<img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" />
</li>
<li>
<img class="forward" src="http://placehold.it/200x100" alt="Alternate Text" />
</li>
</ul>
<div id="counterContainer">3 of 10</div>
</div>
https://jsfiddle.net/pmuqvLpm/
It's worth noting that the way you are currently scaling your images will lead to distortion as they are not going to keep their aspect ratio. This is because the height of the image is remaining static while the width scales. It may be worth doing something like this instead:
html, body {
min-height: 100%;
height: 100%;
}
body {
width: 100%;
margin: 0;
padding: 0;
}
#thumbsList {
height: 76%;
white-space: nowrap;
margin: 0;
padding: 0;
line-height: 0px;
top: 13%;
left: 80px;
list-style-type: none;
top: 13%;
position: absolute;
}
#thumbsList li {
/*display: inline;REMOVE THIS*/
display: inline-block; /*ADD THIS*/
vertical-align: middle; /*ADD THIS*/
position: relative;
}
#thumbsList li img {
width: calc(100vw - 96px); /*ADD THIS*/
transition: all 0.8s ease;
}
.Absolute-Center {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.backStrip {
background-color: #2d2d2d;
border-bottom: 1px solid #1a1a1a;
height: 35px;
position: relative;
z-index: 22;
position: fixed;
width: 253px;
top: 43px;
height: 79px;
left: 85px;
}
#infoText {
color: white;
font-style: italic;
padding-top: 10px;
float: right;
margin-right: 10px;
font-family: sans-serif;
font-size: 12px;
}
#mainContainer {
height: 100%;
width: 100%;
position: fixed;
z-index: 1;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 8px solid #2D2D2D;
margin: 0px;
overflow-x: auto;
}
#thumbsButtons {
list-style: none;
position: fixed;
bottom: 6%;
left: 46%;
z-index: 22;
}
#counterContainer {
position: fixed;
bottom: 5%;
left: 50%;
right: 50%;
font-family: verdana;
font-weight: bold;
width: 100px;
}
#thumbsButtons li {
float: left;
margin-left: 11px;
font-size: 16px;
font-family: verdana;
}
#thumbsButtons li:hover {
cursor: pointer;
}
#nextArrow {
position: fixed;
right: 10px;
top: 43%;
z-index: 13333;
font-size: 100px;
color: white;
font-family: helvetica;
cursor: pointer;
}
#sidelogo {
position: absolute;
z-index: 10;
top: 35%;
left: 0%;
width: 67px;
height: 258px;
background-color: #2D2D2D;
}
.headerInfo {
position: absolute;
bottom: 22px;
color: white;
z-index: 333;
font-family: verdana;
font-size: 17px;
text-align: center;
}
.thumbOverlay {
position: absolute;
z-index: 13111133;
background-color: black;
color: white;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
/*display: inline; REMOVE THIS*/
}
#thumbsList:after {
content: "";
height: 100%;
display: inline-block;
vertical-align: middle;
}
<div id="mainContainer">
<div class="backStrip">
<span id="infoText">Written By Banmeet Singh</span>
</div>
<ul id="thumbsButtons"></ul> <span id="nextArrow">></span>
<span id="sidelogo">Thinking Forward</span>
<ul id="thumbsList">
<li>
<img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" /> <span class="headerInfo">Josh Kloss</span>
</li>
<li>
<div class="thumbOverlay"><span>adasd</span> </div>
<img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" />
</li>
<li>
<img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" />
</li>
<li>
<img class="forward" src="http://placehold.it/200x100" alt="Alternate Text" />
</li>
<li>
<img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" />
</li>
<li>
<img class="forward" src="http://placehold.it/200x100" alt="Alternate Text" />
</li>
</ul>
<div id="counterContainer">3 of 10</div>
</div>
https://jsfiddle.net/vwxznmhy/
Add this.
#thumbsList li {
display: inline-block;
position: relative;
height: 100%;
}
Issue -
since li is made display:inline, it is not taking up 100% height of your ul i.e. #thumbsList.
Solution-
After making your li display:inline-block and adding height:100%, li element took entire height of ul and thumbOverlay div which is a child elemt of li also took up 100% height.
Related
I'm trying to create a horizontal/scrollable nav with gradient fades on each end. Setting the parent to overflow: auto almost solves my problem but hides my active link border, which I position absolute as a :before pseudo above its parent link. I was wondering if there was a way for me to keep the overflow while having my pseudo border break out of it? For the sake of this question, the gradient really doesn't matter per se but this structure needs to remain in tact.
ul {
margin: 0;
}
li {
display: inline-block;
}
.vertical-title {
height: 55px;
margin-bottom: 13px;
border-bottom: 3px solid #dceaec;
font-size: 22px;
line-height: 57px;
color: #111;
text-align: center;
text-transform: uppercase;
}
.vertical-title-wrapper {
padding: 0;
z-index: 0;
position: relative;
}
.hub-nav {
display: block;
padding: 0 15px;
width: 100%;
z-index: 1;
white-space: nowrap;
overflow: auto;
}
.hub-nav-link {
position: relative;
}
.hub-nav-link.active-path:before {
content: "";
display: block;
height: 3px;
width: 100%;
left: 0;
position: absolute;
top: -16px;
background-color: #007eff;
}
<div class="hub-wrapper">
<div class="vertical-title">
Page Title
</div>
<nav class="hub-nav">
<ul class="hub-nav-list">
<li class="hub-nav-list-item">
<a class="hub-nav-link active-path" href="">
There's supposed to be a border above me!
</a>
</li>
</ul>
</nav>
</div>
<div>
Content Below
</div>
Negative margins will do the trick:
ul {
margin: 0;
}
li {
display: inline-block;
}
.vertical-title {
height: 55px;
margin-bottom: 13px;
border-bottom: 3px solid #dceaec;
font-size: 22px;
line-height: 57px;
color: #111;
text-align: center;
text-transform: uppercase;
}
.vertical-title-wrapper {
padding: 0;
z-index: 0;
position: relative;
}
.hub-nav {
display: block;
padding: 0 15px;
width: 100%;
z-index: 1;
white-space: nowrap;
overflow: auto;
padding-top: 16px;
margin-top: -16px;
}
.hub-nav-link {
position: relative;
}
.hub-nav-link.active-path:before {
content: "";
display: block;
height: 3px;
width: 100%;
left: 0;
position: absolute;
top: -16px;
background-color: #007eff;
}
<div class="hub-wrapper">
<div class="vertical-title">
Page Title
</div>
<nav class="hub-nav">
<ul class="hub-nav-list">
<li class="hub-nav-list-item">
<a class="hub-nav-link active-path" href="">
There's supposed to be a border above me!
</a>
</li>
</ul>
</nav>
</div>
<div>
Content Below
</div>
So that you don't have to look for too long - I added these two lines into your snippet:
.hub-nav {
padding-top: 16px;
margin-top: -16px;
}
My navbar (or something) is extending too far and creating a horizontal scrollbar. I see people asking about this, but I cannot find the answer for my situation. The smaller I make the screen the bigger the space gets. Right now I'm just looking at IE.11.
Can someone please help? Thank you in advance.
Below is the code where I think the problem is. (html, page css and parallax css).
<body>
<div class="wrapper">
<header class="lighthouse">
<nav class="main">
<div class="menu-icon"> <i class="fa fa-bars fa-2x"></i> </div>
<div class="top-nav-logo"> <img src="images/mlc-logo/mlcwhite.png" width="97" height="59" alt="Mission Lighthouse Church Logo"/></div>
<ul>
<li>HOME</li>
<li>WHO JESUS IS</li>
<li>WHO WE ARE</li>
<li>MEDIA</li>
<li>CONNECT</li>
</ul>
</nav>
<div class="logo"><img src="images/mlc-logo/mlc-main-320.png" width="280" height="167" alt="Mission Lighthouse Church Logo" data-enllax-ratio="-.8" data-enllax-type="foreground"/> </div>
<div class="seagull"><img src="images/Parallax/seagull2.png" alt="Seagulls" width="276" height="136" class="seagull" data-enllax-ratio="-3" data-enllax-direction="horizontal" data-enllax-type="foreground"/></div>
<div class="welcome-home" data-enllax-ratio="-1.1" data-enllax-type="foreground">Welcome Home</div>
</header>
CSS:
html, html * {
padding: 0;
margin: 0;
}
body {
font-size: 62.5%;
}
.wrapper {
width: 100%;
background-color: #000000;
position: absolute;
}
.top-nav-logo {
display: block;
width: 100%;
margin: 10px 10px 0 20px;
position: fixed;
z-index: 100;
}
.menu-icon {
width: 50%;
box-sizing: border-box;
background-color: #000;
text-align: right;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
nav.main {
display: inline-block;
position: fixed;
top: 0;
right: 0;
left: 0;
max-width: 1341px;
margin: 0 auto;
overflow: hidden;
width: 100%;
text-align: left;
z-index: 80;
}
nav ul {
list-style: none;
text-align: center;
background-color: rgba(0,0,0,0.0);
overflow: hidden;
color: #fff;
padding: 0;
margin: 0;
transition: 1s;
z-index: 80;
}
nav.blue ul {
background-color: rgba(0,34,73,0.95);
}
nav ul li {
display: inline-block;
padding: 20px;
}
nav ul li a {
display: inline-block;
color: #ffffff;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 1.7em;
text-decoration: none;
}
nav ul li a:visited {
color: rgba(240,183,110,1.00);
}
nav a:hover {
color: #F0F694;
text-decoration: none;
font-weight: 700;
transition: 1.7s;
-webkit-transition: 1.7s; /*Safari*/
}
CSS for Parallax:
.lighthouse {
width: 100%;
height: 768px;
position: relative;
background-image: url(../images/Parallax/front-header-4.jpg), url(../images/Parallax/2nd-header-background.jpg);
background-size: auto 768px, cover;
background-position: top center;
background-attachment: fixed;
background-repeat: no-repeat;
will-change: transform;
overflow: hidden;
}
.logo {
height: 140px;
width: 88%;
position: relative;
top: 170px;
margin: 0 auto;
text-align: center;
opacity: 0.65;
z-index: 20;
}
.seagull {
height: 123px;
width: auto;
position: relative;
left: -190px;
opacity: 0.8;
z-index: 10;
}
.welcome-home {
font-family: 'Kaushan Script', cursive;
font-size: 9.0em;
color: #004391;
position: relative;
text-align: center;
width: 98%;
top: 255px;
}
nav.main {
display: inline-block;
position: fixed;
top: 0;
right: 0;
left: 0;
max-width: 100%;
margin: 0 auto;
overflow: hidden;
width: 100%;
text-align: left;
z-index: 80;
}
Replace this code in your style sheet
You entered max-width:1341px; that is the reason it was expanded so far
I have an image where I need to add a tag to the right bottom corner.
When I pust it there, it's 4px below the image, no padding nor margin is there.
.postImage {
position: relative;
display: inline-block;
}
.post img.thumbnail {
width:100%;
height: 100%;
}
.commercial {
position: absolute;
bottom: 0;
right: 0;
background-color: #666;
color: #fff;
padding: 3px;
font-size: 14px;
font-weight: 100;
}
<div class="postImage">
<img class="thumbnail" src="https://dummyimage.com/600x400/f00/fff">
<span class="commercial">commercial</span>
</div>
What is the best way to fix it? I don't think
bottom: 4px;
is the right one.
Thank you
By default image tag take some extra space in bottom because it's inline element. Change it to block element to remove extra space
.thumbnail {
display: block; /*inline-block, float:left etc..*/
}
.postImage {
position: relative;
display: inline-block;
}
.post img.thumbnail {
width:100%;
height: 100%;
}
.commercial {
position: absolute;
bottom: 0;
right: 0;
background-color: #666;
color: #fff;
padding: 3px;
font-size: 14px;
font-weight: 100;
}
.thumbnail {
display: block;
}
<div class="postImage">
<img class="thumbnail" src="https://dummyimage.com/600x400/f00/fff">
<span class="commercial">commercial</span>
</div>
.postImage {
position: relative;
display: inline-block;
}
.postImage img.thumbnail {
width: 100%;
height: 100%;
display: block;
}
.commercial {
position: absolute;
bottom: 0;
right: 0;
background-color: #666;
color: #fff;
padding: 3px;
font-size: 14px;
font-weight: 100;
}
<div class="postImage">
<img class="thumbnail" src="https://dummyimage.com/600x400/f00/fff">
<span class="commercial">commercial</span>
</div>
Just add display: block; to thumbnail class.
.postImage {
position: relative;
display: inline-block;
}
.post img.thumbnail {
width:100%;
height: 100%;
}
.commercial {
position: absolute;
bottom: 0;
right: 0;
background-color: #666;
color: #fff;
padding: 3px;
font-size: 14px;
font-weight: 100;
}
.thumbnail {
display: block;
}
<div class="postImage">
<img class="thumbnail" src="https://dummyimage.com/600x400/f00/fff">
<span class="commercial">commercial</span>
</div>
That's true that img default display is inline and by changing to display:block that works, but if you don't want to change display then you can add vertical-align:bottom which aligns element to bottom line of parent div as below, and yes bottom:0 works fine as your .commercial is positioned as absolute.
.postImage {
position: relative;
display: inline-block;
}
.post img.thumbnail {
width:100%;
height: 100%;
}
.commercial {
position: absolute;
bottom: 0;
right: 0;
background-color: #666;
color: #fff;
padding: 3px;
font-size: 14px;
font-weight: 100;
}
img{
vertical-align:bottom;
}
<div class="postImage">
<img class="thumbnail" src="https://dummyimage.com/600x400/f00/fff">
<span class="commercial">commercial</span>
</div>
This is usually a simple thing to do I thought but for some reason I just can't get it.
So as you can see below (snippet), I have a ul with lis that are fixed to the left side of the screen as small tabs. When hovered over, they expand. I am trying to make it so that it just reveals the straight line of text instead of un-wrapping it as it expands. What do I do?
body {
margin: 0;
background-color: black;
font-family: sans-serif;
}
#navTabs {
width: 100%;
padding-left: 0;
position: fixed;
}
#navTabs li {
border-bottom-right-radius: 15px;
border-top-right-radius: 15px;
height: 75px;
width: 10px;
background-color: gray;
margin-left: 0;
position: relative;
top: 100;
overflow: hidden;
transition: width .75s;
list-style: none;
word-wrap: none;
}
#navTabs li:hover {
width: 250px;
}
#navTabs li h1 {
position: relative;
left: 30px;
}
<body>
<ul id="navTabs">
<li>
<h1>HOME</h1>
</li>
<br>
<li>
<h1>NOT HOME</h1>
</li>
</ul>
</body>
You can add white-space: nowrap to prevent the text from wrapping to the next line.
body {
margin: 0;
background-color: black;
font-family: sans-serif;
}
#navTabs {
width: 100%;
padding-left: 0;
position: fixed;
}
#navTabs li {
border-bottom-right-radius: 15px;
border-top-right-radius: 15px;
height: 75px;
width: 10px;
background-color: gray;
margin-left: 0;
position: relative;
top: 100;
overflow: hidden;
transition: width .75s;
list-style: none;
word-wrap: none;
/* added this: */
white-space: nowrap;
}
#navTabs li:hover {
width: 250px;
}
#navTabs li h1 {
position: relative;
left: 30px;
}
<body>
<ul id="navTabs">
<li>
<h1>HOME</h1>
</li>
<br>
<li>
<h1>NOT HOME</h1>
</li>
</ul>
</body>
Try using margin-left instead of width like this:
body {
margin: 0;
background-color: black;
font-family: sans-serif;
}
#navTabs {
width: 100%;
padding-left: 0;
position: fixed;
}
#navTabs li {
border-bottom-right-radius: 15px;
border-top-right-radius: 15px;
height: 75px;
width: 250px;
background-color: gray;
margin-left: -230px;
position: relative;
top: 100;
overflow: hidden;
transition: all .75s;
list-style: none;
word-wrap: none;
}
#navTabs li:hover {
width: 250px;
margin-left: 0px;
}
#navTabs li h1 {
position: relative;
left: 30px;
}
<body>
<ul id="navTabs">
<li>
<h1>HOME</h1>
</li>
<br>
<li>
<h1>NOT HOME</h1>
</li>
</ul>
</body>
You could add something like this <nobr>NOT HOME</nobr>
body {
margin: 0;
background-color: black;
font-family: sans-serif;
}
#navTabs {
width: 100%;
padding-left: 0;
position: fixed;
}
#navTabs li {
border-bottom-right-radius: 15px;
border-top-right-radius: 15px;
height: 75px;
width: 10px;
background-color: gray;
margin-left: 0;
position: relative;
top: 100;
overflow: hidden;
transition: width .75s;
list-style: none;
word-wrap: none;
}
#navTabs li:hover {
width: 250px;
}
#navTabs li h1 {
position: relative;
left: 30px;
}
<body>
<ul id="navTabs">
<li>
<h1>HOME</h1>
</li>
<br>
<li>
<h1><nobr>NOT HOME</nobr></h1>
</li>
</ul>
</body>
Ashkay's answer if correct. Anyway you can also manipulate margin-left instead of width. Then you will achieve nice effect of moving text with the box.
See the snippet below.
body {
margin: 0;
background-color: black;
font-family: sans-serif;
}
#navTabs {
width: 100%;
padding-left: 0;
position: fixed;
}
#navTabs li {
border-bottom-right-radius: 15px;
border-top-right-radius: 15px;
height: 75px;
width: 250px;
background-color: gray;
margin-left: -240px;
position: relative;
top: 100;
overflow: hidden;
transition: margin .75s;
list-style: none;
word-wrap: none;
}
#navTabs li:hover {
margin-left: 0;
}
#navTabs li h1 {
position: relative;
left: 30px;
}
<body>
<ul id="navTabs">
<li>
<h1>HOME</h1>
</li>
<br>
<li>
<h1>NOT HOME</h1>
</li>
</ul>
</body>
So I've been using the same format to center everything according to ALL screen resolutions. This has been going good for a while, until I tried to add a video.
Is it SPECIFICALLY because it's a video?
JSFIDDLE:
http://jsfiddle.net/SgQ56/
Here is my code.
HTML
<body>
<div id="page-wrap">
<div id="header">
<img src="http://i.imgur.com/UMz3wIf.png" />
</div>
<img src="http://i.imgur.com/8snNfFV.png" />
<ul id="nav">
<li>Home</li>
<li>Forums</li>
<li>Members</li>
<li>Streams</li>
<li>Contact Us</li>
</ul>
<div class="clear"></div>
<div id="mainbody">
<img src="http://i.imgur.com/oMJE74H.png" /></div>
<div id="banished">
<iframe width="325" height="240" src="http://www.youtube.com/embed/Ls8FBFFjMxk" frameborder="0" allowfullscreen></iframe>
</div>
<div id="footer">
<p>©2014 Rythmn Designs<p></div>
</div>
</body>
CSS
body
{
margin: 0px;
padding: 0px;
background: url("http://puu.sh/6RlKi.png")
}
.clear
{
clear:both;
}
#page-wrap
{
width: 1019px;
margin: 0 auto;
}
#header
{
width:100%;
text-align: center;
display: block;
}
.readmore
{
position: absolute;
margin: 0 auto;
top: 352px;
right: 382px
}
#nav
{
height: 1px;
list-style: none;
padding-left: 14px;
text-align: center;
padding-bottom: 0px;
margin: -14px;
margin-top: -15px;
}
#nav li a
{
position:relative;
top: -12px;
display: block;
width: 100px;
float: left;
color: white;
font-size: 14.09px;
text-decoration: none;
font-family:"BankGothic Md BT"
}
#nav li a:hover, #nav li a:active
{
color: red;
}
#mainbody
{
vertical-align:top;
position:relative
}
.news2
{
margin: 0 auto;
position: absolute;
top: 125px;
right: 375px
}
#banished
{
margin: 0 auto;
position: absolute;
top: 685px;
right:488px;
}
.news1
{
margin: 0 auto;
position: absolute;
top: 400px;
right: 378px
}
.teamspeak
{
position: absolute;
top: 125px;
right: 30px
}
#ts3viewer_1037062
{
position:absolute;
top: 155px;
right: 30px;
width: 290px;
height:190px;
overflow:auto;
}
.twitter-timeline
{
right: 27px;
top: 407px;
position:absolute;
width: 310;
height:230;
}
.twitter
{
right: 35px;
top: 406px;
position:absolute;
width: 310;
height:230;
}
#footer
{
background: #181818;
color: white;
padding: 20px 0 20px 0;
text-transform: uppercase;
border-top: 15px solid #828080;
text-align: center;
font-family:"BankGothic Md BT";
font-size: 12px;
position: relative;
}
Does this help? I tested it on my laptop and it seems to be in place
//edit Ok I think I fixed it this time??
#banished{
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
width: 50%;
}
#banished iframe {
position: absolute;
top: 370px;
left: 633px;
height: 15%;
width: 35%;
}
I also put #banshed inside the #mainbody tag in the html
I think you typed right instead of left in #banished. If you change top to 690px and left to 650px it puts the video in the right place (probably not pixel perfect, you can adjust that)