My span height (class="figure") is not stretching to 100% height of the list item
HTML
<div class="container">
<ul>
<li>
<span class="stepLabel">Step</span>
<span class="figure"></span>
<img src="indent.png" alt="ghost" class="ghost">
</li>
<li>
<span class="stepLabel">Step</span>
<span class="figure"></span>
<img src="indent.png" alt="ghost" class="ghost">
</li>
</ul>
</div>
CSS
.container { width: 90%; margin: 10px auto; border: 1px solid #d8d8d8; }
ul { list-style: none; margin: 0; padding: 0; overflow: hidden; }
ul li { display: block; width: 12.1%; height: auto; float: left; margin-left: -1%; }
ul li .stepLabel { display: block; position: absolute; z-index: 999; }
ul li img.ghost { width: 100%; height: auto; position: relative; z-index: 1; opacity: 0.1; }
.figure { display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,0.2); }
http://jsfiddle.net/6YsT3/
Set the height of the parent li.
ul li {
height: 72px;
}
The initial height of an element is auto, therefore that isn't even doing anything. The span element will collapse upon itself, as 100% of auto is actually just 0.
Updated jsFiddle example
width/heigh 100%?
You can use position: absolute and left/right/top/bottom 0-s
http://jsfiddle.net/6YsT3/5/
Don't forget parent's position: relative (for li);
Related
I'm absolute positioning a ul list (but could be any element) at the bottom center of a container.
When window or container is resized, the list shrinks as if it was some kind of margin or padding or max-width applied somewhere. See this fiddle.
Desired effect
I need the list to keep an auto width (depending on its content) and only shrinks when it takes more than 100% of the parent's width.
I've noticed this behavior only happens when transform: translateX(-50%).
EDIT
The wrapper div contains other elements. List acts as a navigation menu or toolbox.
HTML
<div id="wrapper">
<p>Whatever other content</p>
<ul id="list">
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
</div>
CSS
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
#wrapper {
position: relative;
height: 100%;
width: 100%;
background: #fff;
}
#list {
list-style: none;
position: absolute;
padding: 2px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
font-size: 0;
background: #555;
}
#list li {
display: inline-block;
margin: 1px;
}
#list span {
display: block;
height: 40px;
width: 40px;
background: #222;
}
You can use flexbox to replace the old absolute way of positioning.
#wrapper {
background: #fff;
height: 100%;
width: 100%;
position: relative;
display: flex;
}
#list {
margin: 0;
padding: 0;
list-style: none;
align-self: flex-end;
margin: 0 auto;
border: 1px solid #222;
}
I updated the fiddle http://jsfiddle.net/uLj5raoq/
Only solution I found was to put a position: fixed on element I want to fully see. Any other options? (I dont want to 'cool-image' fixed). Help or hint would be awesome. Also, if anyone can explain solution - that would be even better
Fiddle: JSFiddle
HTML
<div class="img-cont">
<div id="slider">
<ul>
<li class="slide">
<img src="http://www.sportspearl.com/wp-content/uploads/2017/05/football-150x150.png" >
<div class="cool-image"></div>
</li>
</ul>
</div>
</div>
CSS
.img-cont{
height: 270px;
position: relative;
}
#slider {
position: relative;
background: green;
overflow: hidden;
width: 440px;
height: 200px;
}
#slider ul{
position: relative;
margin: 0;
padding: 0;
}
#slider ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 440px;
height: 270px;
text-align: center;
line-height: 300px;
}
div.cool-image{
background-color: white;
position: absolute;
border: 5px solid #EEEEEE;
width: 650px;
height: 350px;
z-index: 1;
display: inline-block;
background-repeat: no-repeat;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Basketball.png/170px-Basketball.png);
margin-left: -40px; /* Just to product situation */
display: inline-block;
}
Unfortunately, you can't. The child element is only capable of changing within the parents region when the position is not set to fixed or absolute.
If you don't want to make the child fixed, you could try position:absolute; and set the parent to position: relative;
Like this...
.slide img {
position: absolute;
z-index: 2;
}
.slide {
position: relative;
}
Or you could try to only hide the overflow on 1 direction. Like overflow-y:hidden; Or overflow-x: hidden;
I am trying to figure out how to get rid of extra height in my inner <div> which contain <img> tags. I have tried a css reset but it isn't doing a full reset as far as I can tell.
In the HTML and CSS below, I have 3 <img> tags stacked vertically, each 32px. I want there to be no room between them and the <div> which contains them, I expect to have a height of 96px. You can see in the js fiddle, that there is space between the <img> tags and the inner div has a height > 100px.
UPDATE The possible duplicate post linked to explains well what is happening:
By default, an image is rendered inline, like a letter. It sits on the
same line that a, b, c and d sit on. There is space below that line
for the descenders you find on letters like f, j, p and q. You can
adjust the vertical-align of the image to position it elsewhere.
However, adjusting the vertical-align: top did not completely solve the problem since there was still extra height. In my case, it was necessary to set line-height:0 to completely remove all extra height.
The HTML:
<div class="ss-buttons">
<div class="outer">
<div class="inner">
<a><img src="http://www.static.mseifert.com/img-common/blank.gif" class="ss-zoom sprite-32"></a>
<a><img src="http://www.static.mseifert.com/img-common/blank.gif" class="ss-zoom sprite-32"></a>
<a><img src="http://www.static.mseifert.com/img-common/blank.gif" class="ss-zoom sprite-32"></a>
</div>
</div>
</div>
The CSS
html,
body {
min-width: 100%;
height: initial;
}
body {
line-height: 1;
}
html,
body,
div,
span,
a,
img,
p,
pre {
border: 0;
padding: 0;
margin: 0;
}
img.sprite-32 {
display: inline-block;
width: 44px;
height: 32px;
z-index: 0;
}
.outer {
width: 44px;
display: inline-block;
position: relative;
height: 96px;
}
.inner {
width: 44px;
position: absolute;
display: inline-block;
left: 0px;
z-index: 2000;
top: 0px;
}
a {
display: inline-block;
height: 32px;
}
img.ss-zoom {
background: url(http://www.static.mseifert.com/img-common/slideshow-zoom-sprite.png) no-repeat 0px 0px scroll;
}
div.ss-buttons img {
border: none;
background-color: green;
}
Add line-height:0; to .inner
html,
body {
min-width: 100%;
height: initial;
}
body {
line-height: 1;
}
html,
body,
div,
span,
a,
img,
p,
pre {
border: 0;
padding: 0;
margin: 0;
}
img.sprite-32 {
display: inline-block;
width: 44px;
height: 32px;
z-index: 0;
}
.outer {
width: 44px;
display: inline-block;
position: relative;
height: 96px;
}
.inner {
width: 44px;
position: absolute;
display: inline-block;
left: 0px;
z-index: 2000;
top: 0px;
line-height: 0;
}
a {
display: inline-block;
height: 32px;
}
img.ss-zoom {
background: url(http://www.static.mseifert.com/img-common/slideshow-zoom-sprite.png) no-repeat 0px 0px scroll;
}
div.ss-buttons img {
border: none;
background-color: green;
}
<div class="ss-buttons">
<div class="outer">
<div class="inner">
<a><img src="http://www.static.mseifert.com/img-common/blank.gif" class="ss-zoom sprite-32"></a>
<a><img src="http://www.static.mseifert.com/img-common/blank.gif" class="ss-zoom sprite-32"></a>
<a><img src="http://www.static.mseifert.com/img-common/blank.gif" class="ss-zoom sprite-32"></a>
</div>
</div>
</div>
Add vertical-align: top; to your a element CSS styling (<a>). That will line them all up with no spacing. When you use inline-block, for some reason CSS3 defaults the default vertical-align property to baseline thus the spacing. If you change vertical-align to top it'll remove your spacing issue.
Here's the updated CSS snippet for <a> element styling:
/* ...rest of your CSS */
a {
display: inline-block;
height: 32px;
vertical-align: top;
}
/* rest of your CSS... */
Just add float:left to a tag in css
a{
float:left;
}
Your CSS will be
html,
body {
min-width: 100%;
height: initial;
}
body {
line-height: 1;
}
html,
body,
div,
span,
a,
img,
p,
pre {
border: 0;
padding: 0;
margin: 0;
}
img.sprite-32 {
display: inline-block;
width: 44px;
height: 32px;
z-index: 0;
}
.outer {
width: 44px;
display: inline-block;
position: relative;
height: 96px;
}
.inner {
width: 44px;
position: absolute;
display: inline-block;
left: 0px;
z-index: 2000;
top: 0px;
}
a {
display: inline-block;
height: 32px;
}
img.ss-zoom {
background: url(http://www.static.mseifert.com/img-common/slideshow-zoom-sprite.png) no-repeat 0px 0px scroll;
}
div.ss-buttons img {
border: none;
background-color: green;
}
a{
float:left;
}
I'm trying to replace this
<h1><span>FITLayout</span></h1>
line with logo whitch should be placed after my top menu with fixed position. But when I apply my CSS code, nothing is displayed.
This is how I'm trying to apply CSS code:
#header .inner h1 a {
float: left;
display: block;
background:url('https://www.google.cz/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwiJxavlxfLLAhVBORQKHbAaB2MQjRwIBw&url=http%3A%2F%2Fdesign.ubuntu.com%2Fdownloads%3Fmetadata%3Delement-logo%2Bbrand-ubuntu&psig=AFQjCNGNBTguZJPq3hjdH5AHeMs-P7V1dQ&ust=1459775537916571') no-repeat;
}
#header .inner h1 span {
display: none;
}
HERE is example of my problem and I can modify only CSS code.
Is there any solution, please?
With the only child <span> set to display:none the parent <a> tag has zero width and height. You can manually set the width and height based on the background image size.
h1 a {
background: url('https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png') no-repeat;
display: block;
width: 272px;
height: 92px;
}
h1 a span {
display: none;
}
<h1><span>FITLayout</span></h1>
Did you check if your image path was valid ? Because it isn't.
Check this code with a correct image path
#header .inner h1 a {
display: block;
background:url('http://lorempicsum.com/futurama/350/200/1') no-repeat;
width: 100%; height: 200px;
}
EDIT
Now, if you want the image to be fixed, you have to add position: fixed; and specify a width and height. You also have to add a padding-top to the list to make it visible.
Like this
#header .inner h1 a {
display: block;
background:url('http://lorempicsum.com/futurama/350/200/1') no-repeat;
height: 200px;
background-size: cover;
position: fixed;
left:8px; right: 0;
}
#menubar { padding-top: 200px; }
You may also use a pseudo element to load your image :
#body {
width: 100%;
height: 900px;
}
#header {
float: left;
width: 100%;
}
#header .inner div {
position: fixed;
top: 0;
width: 100%;
height: 30px;
color: white;
background-color: #5f5f5f;
}
#header .inner #topmenu .login {
text-decoration: none;
display: inline-block;
float: right;
padding-right: 20px;
padding-top: -10px;
color: white;
}
#header .inner h1 a {
float: left;
}
#header .inner h1 a:before {
content:url('http://design.ubuntu.com/wp-content/uploads/ubuntu-brandmark-thumb2.png');
}
#header .inner h1 span {
display: none;
}
<div id="body">
<header id="header">
<div class="inner">
<h1><span>FITLayout</span></h1>
<div id="topmenu">
Login
</div>
<div id="social" class="icons">
<span>Twitter</span>
<span>Facebook</span>
<span>Linked In</span>
</div>
<nav id="menubar">
<ul id="menu">
<li class="dropdown">Company</li>
<li class="selected dropdown">Products</li>
<li class="dropdown">News</li>
<li class="dropdown">Downloads</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
</div>
From the css rules you following things are to be made sure:-
"#header .inner h1 a" rule should be having a "height", "width" property, especially when you want to display image using "background" attribute.
Be sure the image path you have declared is correct.
#header .inner h1 a {
background: #eee url('http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png') no-repeat;
display: block;
float: left;
height: 50px;
position: fixed;
width: 50px;
}
This should do the trick.
I'm trying to positioned the navigation in the middle position of the container, but I haven't can, yet. I'm using span for navigation.
I have positioned the parent containers as relative how is recommended and then assign position to span using top, right and left.
img{
max-width:600px;
}
.slider{
position: relative;
margin: 0 auto;
/*overflow: hidden;*/
width: 100%;
}
.slider ul{
/*white-space: nowrap;*/
list-style: none;
padding: 0;
position: relative;
}
.slider ul li{
margin-right: -4px;
width: 100%;
position: absolute;
display: none;
top: 0;
left: 0;
}
.slider ul li.active{
display: list-item;
}
/*Navegacion*/
.flechas-nav .anterior, .flechas-nav .siguiente{
position: absolute;
cursor: pointer;
}
.flechas-nav .anterior {
top: 50%;
}
.flechas-nav .siguiente{
right: 0;
top: 50%;
}
.flechas-nav span {
height: 100%;
width: 10%;
opacity: 0;
position: absolute;
z-index: 900;
}
.slider:hover .flechas-nav span {
opacity: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="slider">
<ul class="slider-contenedor">
<li class="slide active">
<img class="img-responsive" src="http://i.imgur.com/Khgz4Qd.jpg" alt="">
</li>
<li class="slide">
<img class="img-responsive" src="http://i.imgur.com/Dc3XS7w.jpg" alt="">
</li>
<li class="slide">
<img class="img-responsive" src="http://i.imgur.com/aVzLCnM.jpg" alt="">
</li>
</ul>
<div class="flechas-nav">
<span class="anterior">Left</span>
<span class="siguiente">Right</span>
</div>
</div>
</div>
</div>
I put demo on jsfiddle.
How can I position vertical middle this span?
Demo
You have a few issues in your CSS. For one, when using position:absolute it removes the element out of the flow of the document. Both your image and text are being positioned absolute. so there is no height or width being registering in your document. That's why top: 50% isn't working. So start by removing the positioning from .slider ul li
.slider ul li{
margin-right: -4px;
width: 100%;
/*position: absolute;*/ //remove
display: none;
/*top: 0;*/ //not needed anymore
/*left: 0;*/ //not needed anymore
}
Now top:50% will work and the words "left" and "right" will seemingly be centered. There's a few more things:
Next, your div containers are display: block by default so they take the width of the document. Since your image is not width:100% the container is too large and the word "right" will disappear because the image isn't wide enough. (check out your demo and user4429928's answer - make the screen large and "right" will seem to disappear). You can set the container to display: inline-block so it wraps the image:
.container{
display: inline-block;
}
Now, I would remove the absolute positioning from .anterior and .siguiente and add the positioning to the parent instead and float the children:
.flechas-nav{
width: 100%;
position: absolute;
top: 50%;
color: #FFF;
transform: translateY(-50%); //read note below about this
}
.flechas-nav .anterior {
float: left;
}
.flechas-nav .siguiente{
float: right;
text-align: right;
}
Calling top:50% does not actually center an element, it positions it 50% from it's top. In this case becasue your text has very little height, it looks ok, but if you added height: 200px or something, you would see that it's not actually centered. To correct this you can use:
transform: translateY(-50%);
Now your content is centered and within its parent. And to fix the image rotating issue you can set the image thats fading out to absolute and the one that comes in to static:
FIDDLE
try the demo : http://jsfiddle.net/17ow14kf/2/
img{
max-width:600px;
}
.slider {
height: 210px;
margin: 0 auto;
position: relative;
width: 100%;
}
.slider ul{
/*white-space: nowrap;*/
list-style: none;
padding: 0;
position: relative;
}
.slider ul li{
margin-right: -4px;
width: 100%;
position: absolute;
display: none;
top: 0;
left: 0;
}
.slider ul li.active{
display: list-item;
}
/*Navegacion*/
.flechas-nav .anterior, .flechas-nav .siguiente{
position: absolute;
cursor: pointer;
}
.flechas-nav .anterior {
top: 50%;
}
.flechas-nav .siguiente{
right: 0;
top: 50%;
}
.flechas-nav span {
height: 100%;
width: 10%;
opacity: 0;
position: absolute;
z-index: 900;
}
.slider:hover .flechas-nav span {
opacity: 1;
}
.flechas-nav {
height: 50px;
margin-top: -25px;
position: absolute;
top: 50%;
width: 100%; color:#fff;
}
.flechas-nav .anterior {
left: 0;
top: 50%;
}