I am trying to get an oversized image to horizontally stay centered within a list element. When scaling the window down, you'll see that right side of the image becomes hidden. This is what's meant to happen, but I want the original image to stay centered thus becoming hidden left and right side. Can anyone help please?
FIDDLE HERE
#photo-container{
list-style-type: none;
width:100%;
overflow:hidden;
text-align: center;
}
.photo{
width:100vw;
min-width:600px
}
<div>
<ul>
<li id="photo-container">
<img class="photo" src="https://brianrashid.com/wp-content/uploads/2015/09/NYC-FORBES-1940x970.jpg">
</li>
</ul>
</div>
You can try using position + transform tricks.
.photo {
...
position: relative;
left: 50%;
transform: translateX(-50%);
}
jsFiddle
Related
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 4 years ago.
At this page I have the navigation menu .slider-btm underneath the head image ("Branding, Print, Websites & Movies, Displays & Signage") with:
.slider-btm {
position: absolute;
width: 100%;
bottom: 0;
height: 60px;
z-index: 10;
}
and parent:
<div class="slider-outer-wrapper" style="position:relative">
yet the navigation menu .slider-btm is not at the bottom of the screen. I see the following:
I wish to have this menu at the bottom like the menu at the bottom of brand.insightdesign.com.au
Help appreciated.
In an ultra-basic way, that website (that you have removed from your question) would have the container measure the height of your window and attach the height of the window to the header(container) and then absolute position the menu to the bottom of this container (see code for a very rough example)
.container {
background:red;
position:relative;
height:100vh;
}
li {
list-style:none;
float:left;
}
.menu {
position:absolute;
bottom:0;
width:100%;
background:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div class="container">
<div class="menu">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
<h1>This is more content</h1>
If you need anything further explaining, let me know.
--- UPDATE ---
Instead of using JavaScript to work out the height of your browser window, simply add height:100vh to the container height. This will match the container height to the browser height, give you the same outcome (just through CSS rather than JavaScript - with the added positive of that this you won't have to assign this to an on resize in case the user resizes their screen). I have updated the code above.
--- FURTHER UPDATE ---
Thanks, by moving .slider-btm out of .slider-outer-wrapper container, this should resolve your issue so that .slider-btm can sit at the bottom of your container which is 100vh.
You want to have the bar fixed at the bottom of the screen, also while scrolling?
Use position: fixed
.slider-btm {
position: fixed;
width: 100%;
bottom: 0;
height: 60px;
z-index: 10;
}
i think the issue is the the different screen resolution of the devices , add this line to the "slider-outer-wrapper" class
.slider-outer-wrapper{
position: relative;
height: 100%;
}
you have added max-height property , please remove it
after removing
I'm creating simple photo gallery (php) for a responsive site and when a photo is displayed I want to have overlay with navigation displayed on mouse hover (for desktop, taking another approach for mobile). The overlay (over photo) is supposed to be div of same width as the given photo (variable width), left navigation is 25% of left part and right one 25% on the right. When photo is displayed and mouse cursor is outside of photo nothing is visible. When mouse cursor hovers over left part big < is displayed. And > for right side. < and > should be vertically centered.
I got it working but only with absolute positioning, declaring exact position but the result is not responsive and breaks when windows is smaller:
jsfiddle.net/mwf5618r/
I tried using flex and z-index too but did not get it to work. Below is what I created with flex but does not work. I don't need to use flex as long as it is responsive.
jsfiddle.net/x1jexvb0/
Will you help me to make it cleanly and responsive? Many thanks.
I changed some HTML elements included the CSS, hopefully this will done the work for you. Check also the new Fiddle: http://jsfiddle.net/mwf5618r/1/embed/
HTML:
<div style="position: relative;">
<a href="#left" class="photo_nav left">
<div id="photo_nav">
<
</div>
</a>
<a href="#right" class="photo_nav right">
<div id="photo_nav">
>
</div>
</a>
<div style="margin:0;padding:0;width:100%;margin:auto;">
<img src="http://3.bp.blogspot.com/_w0r3cYUSD7A/Sob415afOVI/AAAAAAAABa4/-J_vkiTkITE/s1600/sunflare.jpgg" class="photo" style="width:100%;">
</div>
</div>
CSS:
a.photo_nav {
position: absolute;
width: 25%;
height:100%;
padding: 0;
margin: 0;
opacity:0;
font-size: 200px;
text-decoration:none;
background:none;
transition: 0.3s;
}
a.photo_nav:hover {
color:#fff;
opacity:0.6;
}
a.photo_nav #photo_nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
a.photo_nav.left {left: 0;}
a.photo_nav.right {right: 0;}
a.photo_nav.left div#photo_nav {left: 0;}
a.photo_nav.right div#photo_nav {right: 0;}
Well maybe this?
I've got this gallery I'm currently building, and I'm trying to work out how to get my images to fill their containers.
I don't mind if they're cropped a little, I just would like them to fill the the full height and width of their parent element .thumb.
My HMTL looks like this:
<ul class="thumbs">
<li class="thumb">
<img src="/img.jpg">
</li>
...
</ul>
And my CSS like this:
.thumbs .thumb {
background: red;
height: 33.5294118%;
float: left;
width: 50%;
overflow: hidden;
z-index: 0;
}
I've got a demo set up over here: http://codepen.io/realph/pen/hjvBG
If anyone could point me in the right direction, I'd really appreciate it.
Thanks in advance!
Try adding .thumb a to your .thumb img definition (so the a element is 100% width as well) - you may also have to make one or both (a/img) tags display: block and height 100% as well
You can try adding a class to the img element, like:
<img src="/img.jpg" class="img-class">
and the css.
.img-class{ width:100%; height: 100%; }
Newb question. I'm trying to use z-index, but it doesn't seem to be working the way I would expect. Here's my code:
<a id="favoritelink" href="#" style="margin-left: 600px" class="addtofavorites" title="Add to Favorites"></a>
<div class="description" style="margin-top: -18px">
Some description
</div>
In css, I have specified a z-index for .description as 1 and for .addtofavorites as 10. #favoritelink has a background image and text that is shifted way off the page (it is essentially an image link). The background of .description still sits on top of the background for .addtofavorites.
I want the .addtofavorites background to be on top.
Here's the css for .addtofavorites and for .description:
.description
{
background:#efefef;
width:600px;
max-height:500px;
padding:12px;
z-index:1;
}
.addtofavorites
{
background:url(img/plus.png) no-repeat center;
background-size:75%;
display:block;
text-indent:-9999px;
width:51px;
height:56px;
margin-right:6px;
z-index:10;
}
You have to use position: relative or position: absolute for z-index to work.
Edit: http://jsfiddle.net/GndRj/4/
Based on your code, but added position: relative and reduced margin-left on .favoritelink so that it shows up in the preview window.
I have a 'main_menu' div which contains a background-image that is repeating on the y-axis. Above this div I have another div which is used for a header. The problem is that the header div has an image which is about 75px in height. I would like to start the text in main_div about 50 px higher from where main_div's background-image actually starts.
I was thinking of something like:
position:absolute; top:-50px;
This doesn't really work.
The question is how do I move the text up, while keeping the background-image at the normal spot.
Thanks
{EDIT}
Here's the CSS
.menu_main
{
background-image:url('../menu_main.jpg');
background-repeat:repeat-y;
width:173px;
padding:5px;
}
.menu_header
{
background-image:url('../menu_header.jpg');
text-align:center;
width:173px;
height:65px;
padding:5px;
}
This is the html
<div class="menu_header">Some Header</div>
<div class="menu_main">
<ul>
<li>Educational Objective</li>
<li>Projects</li>
<li>Class Preparation</li>
<li>Testimonials</li>
</ul>
</div>
So as you can see the header is pretty tall. So I'd like to start the text in the menu_main div about 50px higher up
Use a negative top margin.
.menu_main ul {margin-top:-50px;}
You could move it like you were doing with absolute positioning and move the background down like so:
background:url(someimage.png) repeat-y left 50px;
this will move your bg image so it starts 50px down.
I might be able to help more if you provide a screenshot or more code or a live example...
You could style your UL specifically:
.nav
{
position: relative;
top: -50px;
}
and
<ul class="nav">
...
Or perhaps put the UL in another DIV class="nav".
But you can move the background down (for example by 5 pixels):
background-position: top 5px;