I have following css. I want to align image in center. But it is not working?
element.style {
}
.bx-wrapper .bxslider li img {
max-width: 100% !important;
height: auto !important;
}
.bxslider img {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
}
.bx-wrapper img {
max-width: 100%;
}
img {
border: 0;
}
img {
vertical-align: middle;
}
img {
border: 0;
}
HTML:
<ul class="bxslider" style="width: 860%; transform: translate3d(545.5px, 0px, 0px); vertical-align: middle; display: block; height: 465px; transition-duration: 0s;">
<li class="bxslider_imge bx-clone" style="float: left; list-style: none outside none; position: relative; width: 760px;">
<img alt="buk" src="/uploads/thumbs/52.jpg" data-image-original-path="/uploads/thumbs/52.jpg" title="Buk" data-image-thumb-path="/uploads/thumbs/52.jpg" data-image-id="17610" data-thumb-loaded="0">
</li>
<li class="bxslider_imge" style="float: left; list-style: none outside none; position: relative; width: 760px;">
<img alt="itc" src="/uploads/thumbs/e7.jpg" data-image-original-path="/uploads/thumbs/e7.jpg" title="ITC" data-image-thumb-path="/uploads/thumbs/e7.jpg" data-image-id="17607" data-thumb-loaded="1">
</li>
</ul>
To vertical align to middle, I like to use:
.elem {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Of course, you need all the vendor prefix (-webkit-transform, -moz-transform).
This is compatible with all majors browsers (IE9 and up)
Related
I was building a meme with top and bottom text.
I am in need of rotating an image so I did it with transform: rotate(90deg);, but it's overlapped parent's div like the following example.
h1 {
margin-top: 100px;
}
.parent {
border: 1px solid black;
display: inline-block;
position: relative;
background: #777;
}
.parent .rotate {
transform: rotate(90deg);
width: 100px;
}
.parent h4 {
position: absolute;
left: 0;
right: 0;
text-align: center;
color: white;
z-index: 1;
}
.parent .top {
top: 10px;
}
.parent .bottom {
bottom: 10px;
}
<div class="parent">
<h4 class="top">Top Text</h4>
<img class="rotate" src="http://2.bp.blogspot.com/-7uOyzdXhG2Y/UVpJUbwqGzI/AAAAAAAAAo0/35w5N8tPvHE/s640/iphone-5-hd-wallpapers-hd-41664-tpmw7.jpg" />
<h4 class="bottom">Bottom Text</h4>
</div>
How can I change the style of the parent div to match the position and size of the rotated image?
First, we need to change the height of the div to be same as width.
We can do it by
.parent{
background-color: red;
width: 100%;
padding-top: 100%; /* 1:1 Aspect Ratio */
position: relative; /* If you want text inside of it */
}
Second, we need an additional div inside it that has absolute position with full width and height of it.
We can use flex to center the image inside that absolute div.
Here is a working code.
h1 {
margin-top: 100px;
}
.container {
display: inline-block;
width: 300px;
}
.parent {
border: 1px solid black;
display: inline-block;
position: relative;
background: #777;
width: 100%;
padding-top: 100%;
position: relative;
}
.p-absolute {
bottom: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
margin-top: auto;
margin-bottom: 0;
display: flex;
align-items: center;
justify-content: center;
}
.parent .rotate {
transform: rotate(90deg);
max-width: 100%;
max-height: 100%;
}
.parent h4 {
position: absolute;
left: 0;
right: 0;
text-align: center;
color: white;
z-index: 1;
}
.parent .top {
top: 10px;
}
.parent .bottom {
bottom: 10px;
}
<div class="container">
<div class="parent">
<h4 class="top">Top Text</h4>
<div class="p-absolute">
<img class="rotate" src="http://2.bp.blogspot.com/-7uOyzdXhG2Y/UVpJUbwqGzI/AAAAAAAAAo0/35w5N8tPvHE/s640/iphone-5-hd-wallpapers-hd-41664-tpmw7.jpg" />
</div>
<h4 class="bottom">Bottom Text</h4>
</div>
</div>
Trying to create an overlay effect on hover, using :after, but it's not taking the full height.
It will work if I give a:after a fixed height in pixels. But I was hoping not to set a static height so it can be applied to images of all sizes.
Thanks in advance!
* {
margin: 0;
padding: 0;
}
.container {
width: 500px;
height: 500px;
}
a {
position: relative;
height: 100%;
width: 100%;
}
a:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,0.4);
opacity: 0;
transition: all .4s;
-webkit-transition: all .4s;
}
a:hover:after {
opacity: 1;
}
<div class="container">
<a href="#">
<img src="https://vignette.wikia.nocookie.net/dragonballfanon/images/7/70/Random.png/revision/latest?cb=20161221030547">
</a>
</div>
I removed width: 100%; and height: 100% from a and added display: inline-block; By default a tags have a display value of inline which ignores width and height values so they weren't doing anything before anyway. display: inline-block; is probably what you wanted to go with from the beginning.
* {
margin: 0;
padding: 0;
}
.container {
width: 500px;
height: 500px;
}
a {
position: relative;
display: inline-block;
}
a::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,0.4);
opacity: 0;
transition: all .4s;
-webkit-transition: all .4s;
}
a:hover::after {
opacity: 1;
}
<div class="container">
<a href="#">
<img src="https://vignette.wikia.nocookie.net/dragonballfanon/images/7/70/Random.png/revision/latest?cb=20161221030547">
</a>
</div>
<a> tag default display is display: inline.
To achieve the desired result you should display your <a> as inline-block. See docs: https://www.w3schools.com/css/css_inline-block.asp
a {
position: relative;
display: inline-block;
}
* {
margin: 0;
padding: 0;
}
.container {
width: 500px;
height: 500px;
}
a {
position: relative;
display: inline-block;
}
a:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,0.4);
opacity: 0;
transition: all .4s;
-webkit-transition: all .4s;
}
a:hover:after {
opacity: 1;
}
<div class="container">
<a href="#">
<img src="https://vignette.wikia.nocookie.net/dragonballfanon/images/7/70/Random.png/revision/latest?cb=20161221030547">
</a>
</div>
Your <a> element is not getting the full height, because by default is displayed as inline.
You can set display:inline-block; to change the default render behavior... or you can play with the position property.
Setting the container to position:relative, and the a and the a:after to position:absolute, will let you force the a:after to adjust to top:0px; and bottom:0px; covering the full height.
With that changes, everything works as expected.
Check it.
.container {
width: 500px;
height: 500px;
position: relative;
}
a {
position: absolute;
}
a:after {
content: '';
position: absolute;
width: 100%;
top: 0;
bottom: 0px;
background: rgba(0,0,0,0.4);
transition: all .4s;
-webkit-transition: all .4s;
opacity:0.2;
}
a:hover:after {
opacity: 1;
}
<div class="container">
<a href="#">
<img src="https://vignette.wikia.nocookie.net/dragonballfanon/images/7/70/Random.png/revision/latest?cb=20161221030547">
</a>
</div>
add a display block:
a {
position: relative;
height: 100%;
width: 100%;
display:block;
}
You can visit the site I am working on here. Currently, I am working on making the site relative. I am adjusting the CSS for a resolution with a width less than 820px. This involves adjusting the menu from this
to this . As you can see, I have outlined my divs with a red border to demonstrate the problem. I want to the menu bar to sink to the bottom of its parent div. However, setting it to bottom: 0 nothing changes. How can I get the div class="nav" to sink to the bottom of div class="header" at a resolution of less than 820px?
Here is my HTML
<div class="header">
<div id="narrow-logo"><img src="Images/pantry logo.png" width="536" height="348"></div>
<div class="nav">
<ul>
<li class="link">HOME</li>
<li class="link">MENU</li>
<li id="logo"><img src="Images/pantry logo.png" width="536" height="348"></li>
<li class="link">CONTACT</li>
<li class="link">ABOUT</li>
</ul>
</div>
</div>
And my CSS
.header {
width: 960px;
height: 150px;
margin: 0 auto;
text-align: center;
position: relative;
padding: 100px 0px 0px 0px;
}
.header div#narrow-logo {
display: none;
}
.nav ul li {
display: inline-block;
vertical-align: middle;
margin-right: 70px;
}
#logo a img {
max-width: 250px;
height: auto;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
#logo {
width: 250px;
position: relative;
}
#media screen and (max-width: 1080px) {
.header {
width: 700px;
height: 125px;
padding: 75px 0px 0px 0px;
}
#logo a img {
max-width: 180px;
}
#logo {
width: 180px;
}
#media screen and (max-width: 820px) {
.header {
border: 2px solid red;
width: 475px;
padding: 0;
margin-top: 40px;
height: 200px;
}
.header div#narrow-logo {
border: 2px solid red;
display: inherit;
position: absolute;
left: 50%;
-webkit-transform: translate(-50%);
transform: translate(-50%);
}
.header div#narrow-logo a img {
width: 200px;
height: auto;
}
.nav {
border: 2px solid red;
bottom: 0px;
}
.nav ul li {
margin-right: 25px;
}
.nav ul li:nth-child(3) {
display: none;
}
#logo a img {
display: none;
}
#logo {
width: 0;
}
I know that is a lot of code and I apologize. I just wanted to make sure I included all positioning attributes that could be causing my issue. Let me know if I can clarify anything, and I appreciate your time and advice.
For bottom:0 to work, you need the element that it's being applied to to be absolutely positioned. You also need, in this case, to have it's parent relatively positioned. Try this:
.nav ul li {
display: inline-block;
margin-right: 70px;
position:absolute;
bottom:0;
}
Adding position value will resolve your issue.Please update your css in the following section.
#media screen and (max-width: 820px) {
.nav {
border: 2px solid red;
bottom: 0px;
position:absolute;
left:16%;
}
}
For bottom:0; to work, your class="nav" has to have absolute positioning.
CSS:
.nav {
position: absolute;
bottom: 0;
I have a div which is floating to the left with a menu in it and another div to the right which is filling the rest of the space, the problem is, the div on the right is set to 100% but is going off to the right of the page and creating an unwanted scroll. I think the cause is the left-margin I have put on it to allow for the left floating div. Is there a way to make the right div fill the rest of the space without creating a horizontal scroll but so that I can also align things left: 0px against the edge of the float.
I have put the page onto one of my other domains so you can see:
http://aspiresupportandhousing.com/cleanserve/
HTML:
<body>
<div id="lp_bt">
<div id="logo_container_s">
</div>
<div id="menu_container_s">
<nav id="secondary_nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Our Services</li>
<li>Cleaning</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
<div id="left_panel">
<div id="logo_container">
</div>
<div id="menu_container">
<nav id="primary_nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Our Services</li>
<li>Cleaning</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
<div id="right_panel">
<div id="main_container">
<div id="title">
</div>
</div>
</div>
</body>
CSS:
html {
height: 100%;
min-width: 1000px;
}
* {
margin: 0px;
padding: 0px;
}
body {
height: 100%;
min-width: 1000px;
color: #000000;
}
/* Hidden */
#lb_bt {
height: 30px;
width: 30px;
left: 30px;
}
#logo_container_s {
left: -150px;
width: 150px;
height: 42px;
position: absolute;
background: url(logo.jpg);
z-index: 3000;
}
#menu_container_s {
left: -150px;
height: 400px;
width: 150px;
position: absolute;
z-index: 3000;
}
/* End Hidden */
/* Left Panel */
#left_panel {
height: 100%;
width: 150px;
float: left;
background-color: #26609E;
z-index: 2000;
}
#logo_container {
width: 150px;
height: 42px;
left: 0px;
top: 0px;
position: relative;
background: url(logo.jpg);
z-index: 3000;
}
#menu_container {
height: 400px;
width: 150px;
top: 0px;
left: 0px;
position: relative;
}
ul {
list-style: none;
text-align: left;
border-top: solid 1px #002954;
}
ul li {
display: list-item;
}
ul li a:link, ul li a:visited {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
font-weight: normal;
width: 800;
color: #FFFFFF;
line-height: 38px;
margin: 0px 10px;
padding: 0px 5px 8px 0px;
text-align: left;
text-decoration: none;
}
ul li a:hover, ul li a:active {
color: #2593C1;
}
#media only screen and (min-width: 280px) and (max-width: 800px) {
body {
background: none rgba(161, 220, 254, 0.4);
}
#left_panel {
left: -150px;
position: absolute;
}
#lp_bt {
top: 0px;
left: 0px;
background: url(menu.jpg);
width: 30px;
height: 30px;
}
#lp_bt:hover {
width: 150px;
height: 100%;
background: none #26609E;
}
#lp_bt:hover #secondary_nav {
display: list-item;
}
#lp_bt:hover #logo_container_s {
left: 0px;
top: 0px;
position: relative;
}
#lp_bt:hover #menu_container_s {
top: 0px;
left: 0px;
position: relative;
}
}
/* End Left Panel */
/* Right Panel */
#right_panel {
height: 100%;
width: 100%;
margin-left: 150px;
background: url(bg.jpg) no-repeat top left fixed;
background-size: cover;
position: absolute;
z-index: 1;
}
#main_container {
width: 700px;
height: 50%;
margin-left: auto;
margin-right: auto;
margin-top: auto;
background: rgba(255, 255, 255, 0.8);
border-radius: 30px 30px 30px 30px;
}
#title {
width: 600px;
height: 104px;
margin-left: auto;
margin-right: auto;
top: 30px;
background: url(title.png) no-repeat center center;
position: relative;
}
#media only screen and (min-width: 280px) and (max-width: 800px) {
#right_panel {
background: none;
}
}
Your Scroll Is caused beacuse yo have a margin-left for your
#right_panel
You have three solutions wich envolve make some changes in CSS for the #right_panel
One use method calc() to set the width:
#right_panel {
width: calc( 100% - 150px);
}
Two change your z-index value and delete margin-left:
#right_panel {
width:100%;
margin-left:0;
z-index:-1;
}
Three use box-sizing and padding instead of margin:
#right_panel {
box-sizing:border-box;
padding-left:150px;
width:100%;
margin:0;
}
Seen as though #left_panel and #right_panel are positioned absolutely, you can simply remove the negative margin form #left_panel:
#left_panel {
left: 0px;
position: absolute;
}
... then remove the 100% width from #right_panel and position it thusly:
#right_panel {
top:0; right:0; bottom:0; left:150px;
}
http://jsfiddle.net/Pz7PP/
You need use CSS position.
A little example
Codepen
CSS
*{margin:0;padding:0;}
#divleft {
position:absolute;
top:0;bottom:0;left:0;
width:250px;
background: red;
}
#divright {
position:absolute;
top:0;
bottom:0;
left:250px;
right:0;
background: green;
}
I am terrible at css, please bear with me.
Three elements: .subscribe, #pictures, #menu.
These three need both .subscribe and #menu to be overlay on top of pictures. The css is below (all selectors are correct). I thought just z-index and positioning would do it, however, it's not working out.
Anything obviously wrong? Thank you.
#slideshow * {
margin: 0;
padding: 0;
}
#slideshow {
position: relative;
padding: 14px 0 15px;
width: 926px;
height: 335px;
}
#slideshow #pictures {
background: url('images/bg.jpg');
width: 926px;
height: 335px;
left: 0;
overflow: hidden;
}
#slideshow #pictures li {
display: block;
position: absolute;
top: 0;
width: 926px;
z-index: -1;
}
#slideshow #pictures li img {
display: block;
position: relative;
bottom: 0;
}
#slideshow #menu {
list-style-type: none;
right: 0;
padding-top: 290px;
padding-right: 20px
position:relative;
}
#slideshow #menu li {
display: block;
float: right;
z-index: 3;
}
#slideshow #menu li a {
display: block;
font: 11px "Lucida Grande", "Verdana";
text-decoration: none;
padding: 7px 0 7px 28px;
z-index: 3;
color: #ccc;
line-height: 14px;
vertical-align: middle;
}
#slideshow #menu li a:hover {
color: #fff;
}
#slideshow #menu li.current a {
font: 15px "Georgia";
color: #fff;
padding: 5px 0 5px 28px;
line-height: 18px;
}
#slideshow #pictures .subscribe {
height: 91px;
width: 252px;
position: relative;
margin-top: 100px;
float: left;
bottom: 0;
z-index: 2;
background: url('images/SubscribeButton.png');
}
#slideshow #pictures .subscribe:hover {
background: url('images/SubscribeButton-Dark.png');
}
Mark-up:
<div id="slideshow">
<ul id="pictures">
<li style="visibility: hidden; zoom: 1; opacity: 0; "> <a class="subscribe"></a><img src="style/images/sample1.jpeg" alt="Slide 1" title="Sample 1" style="display: none; width:926px; height:335px "></li>
<li style="visibility: hidden; zoom: 1; opacity: 0; "><a class="subscribe"></a><img src="style/images/sample2.jpeg" alt="Buenos Aires" title="Buenos Aires" style="display: none; width:926px; height:335px "></li>
<li style="visibility: hidden; zoom: 1; opacity: 0; "><a class="subscribe"></a><img src="style/images/Slideshow-Image1.jpg" alt="Our design team creates the perfect collections of white shirts each season" title="Creation" style="display: none; width:926px; height:335px "></li>
</ul>
<ul id="menu">
<li>three</li>
<li>two</li>
<li><a id="first" href="style/images/Slideshow-Image1.jpg">one</a></li>
<li class="background" style="visibility: hidden; zoom: 1; opacity: 0; left: 0px; top: 188px; width: 166px; height: 28px; "><div class="inner"></div></li></ul>
</div>
I think you're close. But to keep it simple, I would just put the z-index on slightly different elements (namely the main container elements).
Have a play with the code here: http://jsfiddle.net/irama/GwcsF/1/
The key bits being:
#slideshow {
position: relative;
}
#slideshow #pictures {
left: 0;
z-index: 1;
position: absolute;
}
#slideshow #menu {
right: 0;
position:relative;
z-index: 3;
}
#slideshow #pictures .subscribe {
position:absolute;
bottom: 0;
z-index: 2;
}
Is that roughly what you were looking for? Let us know how you go!
You need to use position: relative for any parent DIV (with the image in it). Any layers to overlay that DIV must be nested inside the parent and with the CSS attribute set to position: absolute.
This sets the nested DIV tag to sit at the top left of it's parent, and overlay it. Then the z-index should work.
Hope that helps.
Ref: http://css-tricks.com/3118-text-blocks-over-image/
Post the related HTML, please!
However, the contents of blocks appear to be getting the z-indices, but this will often not work because of the "Stacking contexts". See Overlapping And ZIndex.
So, depending on the HTML, you'll probably need to set z-index on the #pictures and #menu containers.