I am trying to solve an issue. I have a regular list. Within the li's I have a overlapping div, witch appears on a hover. The problem is, that the hover is always overlapped by the next li. How can i make it happen, that the content of the next li stays below the hovered div. Html and css seems to stack li's? Is this a know problem?
I already tried z-index, but that will not work on child elements.
Its impossible to add the complete code, but this basically shows it. Why is the next li-element always overlapping the last and how can I get around this?
li {
position: relative;
width: 100px;
}
img {
width: 120%;
height: auto;
position: absolute;
top: 0;
border: 1px solid red;
}
<ul>
<li style="z-index:1;"><!-- list-element 1 -->
<div style="z-index:4;"><img src="http://img.brothersoft.com/screenshots/softimage/f/free_cat_wallpaper-407575-1285474870.jpeg" style="width:100%;" /></div>
</li>
<li style="z-index:1;"><!-- list-element 2 -->
<div style="z-index:4;"><img src="http://img.brothersoft.com/screenshots/softimage/f/free_cat_wallpaper-407575-1285474870.jpeg" style="width:100%;" /></div>
</li>
<li style="z-index:1;"><!-- list-element 3 -->
<div style="z-index:4;"><img src="http://img.brothersoft.com/screenshots/softimage/f/free_cat_wallpaper-407575-1285474870.jpeg" style="width:100%;" /></div>
</li>
</ul>
Thanks
/* EDIT: My Mistake - I misunderstood your question. */
Do the positioning on the .img-wrapper. (code snippet updated below too)
See this fiddle: https://jsfiddle.net/tqtveoau/4/
/* END EDIT */
I'm guessing this isn't your production code but always try and use classes for your styles.
.list-item {
position: relative;
width: 100px;
}
.img-wrapper {
display: none;
position: absolute;
top: 0;
z-index: 1;
}
.img-wrapper img {
width: 120%;
border: 1px solid red;
}
.list-item:hover .img-wrapper {
display: block;
}
<ul>
<li class="list-item">
List Item
<div class="img-wrapper">
<img src="http://img.brothersoft.com/screenshots/softimage/f/free_cat_wallpaper-407575-1285474870.jpeg" style="width:100%;" />
</div>
</li>
<li class="list-item">
List Item
<div class="img-wrapper">
<img src="http://img.brothersoft.com/screenshots/softimage/f/free_cat_wallpaper-407575-1285474870.jpeg" style="width:100%;" />
</div>
</li>
<li class="list-item">
List Item
<div class="img-wrapper">
<img src="http://img.brothersoft.com/screenshots/softimage/f/free_cat_wallpaper-407575-1285474870.jpeg" style="width:100%;" />
</div>
</li>
</ul>
See the fiddle here:
https://jsfiddle.net/tqtveoau/3/
Move the styles from your img to the parent div and give it a class. Also set the background of the div that's absolute to white
Related
I am having issues getting my menu to align properly. The images are all spaced far away from each other even when they should be closer. I am new to using Ul and Li and am not sure how to fix this. Ideally I would have the images across the whole screen with no space on the right or left and just a thin space between each image, but instead, there is a large space. I am unsure if this is something in the Ul Li tags or if there is something I can do with margin.
Could someone please advise me. I am including a jsfiddle to show what it currently looks like. https://jsfiddle.net/f1bctqzn/ is what I am currently getting. How do I these lines to touch their respective sides of the screen and still have a small space between the rest.
<li class="header"><img src="https://i.imgur.com/T4ZAaK3.png" class ="kale-grain-bowls"></li>
<li class="header"><img src="https://i.imgur.com/T4ZAaK3.png" class ="kids-real-meals"></li>
Add padding: 0 to your ul and margin: 1px (or something) to li
Also, add width: 100% to img
See this fiddle
To add space betwwen the li items, don't add the margin property to the ul, but add a margin to the li items (I used the 2px you had set for the ul). To add a margin only between the li items, I used
li.header{
margin-left:2px;
}
li.header:first-child{
margin-left: 0;
}
Adjusted the margins and used a flexbox to adjust the images across the whole screen.
Check it out and let me know your feedback. Thanks!
body {
margin: 0;
padding: 0;
}
ul.toplist {
list-style: none;
padding: 0;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
li.header {
display: inline-block;
height: 100%;
margin-right: 1px;
}
img.kale-grain-bowls,
img.salads,
img.burgers-sandwiches,
img.sides,
img.smoothies-milkshakes,
img.kids-real-meals {
max-width: 100%;
max-height: 100px;
}
<ul class="toplist">
<li class="header">
<a href="/menu/kale-grain-bowls">
<img src="https://i.imgur.com/T4ZAaK3.png" class="kale-grain-bowls">
</a>
</li>
<li class="header">
<a href="/menu/salads">
<img src="https://i.imgur.com/T4ZAaK3.png" class="salads">
</a>
</li>
<li class="header">
<a href="/menu/burgers-sandwiches">
<img src="https://i.imgur.com/T4ZAaK3.png" class="burgers-sandwiches">
</a>
</li>
<li class="header">
<a href="/menu/sides">
<img src="https://i.imgur.com/T4ZAaK3.png" class="sides">
</a>
</li>
<li class="header">
<a href="/menu/smoothies-shakes">
<img src="https://i.imgur.com/T4ZAaK3.png" class="smoothies-milkshakes">
</a>
</li>
<li class="header">
<a href="/menu/kids-real-meals">
<img src="https://i.imgur.com/T4ZAaK3.png" class="kids-real-meals">
</a>
</li>
</ul>
I am making an image slider and for some reason the parent element is adding whitespace at the bottom of parent div for no reason that I can tell. If there is a better way to set up the css then I would really appreciate a pointer. Here is the code:
HTML:
<div id="imgslider">
<ul class="bxslider">
<li>
<img src="http://localhost:8888/wordpress/wp-content/uploads/2015/08/DevelopImages_PureTisanes_LowRes-11.jpg" alt="" />
</li>
<li>
<img src="http://localhost:8888/wordpress/wp-content/uploads/2015/08/DevelopImages_PureTisanes_LowRes-1.jpg" alt="" />
</li>
</ul>
<div class="clear"></div>
CSS:
#imgslider {
display: block;
height: inherit;
}
.bxslider {
position: relative;
}
.bxslider img {
width: 100%;
max-height: 750px;
position: absolute;
}
.bxslider img:first-child {
top: 0;
left: 0;
z-index: 1;
}
There is a not closed div at the end :-)
Maybe this is what causing the issue:
<div id="imgslider">
<ul class="bxslider">
<li>
<img src="http://localhost:8888/wordpress/wp-content/uploads/2015/08/DevelopImages_PureTisanes_LowRes-11.jpg" alt="" />
</li>
<li>
<img src="http://localhost:8888/wordpress/wp-content/uploads/2015/08/DevelopImages_PureTisanes_LowRes-1.jpg" alt="" />
</li>
</ul>
</div>
<div class="clear"></div>
Not sure it will help but i have read somewhere "clear:both" cause adding some space at bottom so you may want to add "overflow:hidden" to the parent div (i think it is the div with id "imgslider")
#imgslider {
display: block;
height: inherit;
overflow:hidden;
}
I am new to html,css and am currently working on a page.
I am unable to align the menu at the right bottom side.It is clashing with my 3 pictures in the middle. Also logo at the bottom left keeps changing when ever I make changes to the images at the centre. Kindly go through the code and let me know.
body {
margin: 0;
padding: 0;
}
.background{
position: relative;
}
.background .text {
position: absolute;
top: 300px;
left: 300px;
width: 300px;
}
.logo {
position:absolute;
left: 10px;
bottom: 10px;
}
#bottomnav ul {
list-style: none;
display: inline-block;
width: 100%;
position: absolute;
right:0px;
bottom:0px;
}
#bottomnav ul li {
width: 0%;
float: right ;
text-align:right;
}
.images{
width:250;
height:250;
display:inline;
float:right;
border:2px solid #FFF;
margin-top:300px;
}
<body>
<div class="background">
<img src="images/landing_page.png"/>
<div class="text">
<h1>welcome</h1>
<p>office</p>
<p>ink</p>
</div>
<div class="logo"> <img src="images/logo_03.png"/> </div>
<div class="images">
<img src="images/top1.jpg" width="400" style="float:right"/>
<img src="images/top2.jpg"width="400" style="float:right"/>
<img src="images/top3.jpg" width="400" style="float:right"/>
</div>
<div id="bottomnav">
<ul>
<li>Home</li>
<li>About </li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
Divi,
check out clearfix.
http://nicolasgallagher.com/micro-clearfix-hack/
You will need to apply the fix to the image parent container (.images).
Also you are using a lot of absolute positing, when it is not necessarily needed.
You could float the logo left and image container right, while applying an explicit width to each.
Also why do you have .images set to 250 width, and images are 400 width?
I am unsure if this is the answer you're looking for, but this solution solves the problem you were having regarding the menu not showing up on the bottom right hand side (I think is what you were trying to achieve with some of your css): http://jsfiddle.net/swm53ran/72/
I reorganized the structure of your html a little bit because you said the logo should be at the bottom (I'm assuming below the other larger pictures).
<div class="background">
<img src="images/landing_page.png"/>
<div class="text">
<h1>welcome</h1>
<p>office</p>
<p>ink</p>
</div>
<div class="images">
<img src="images/top1.jpg" width="400" style="display:inline-block;"/>
<img src="images/top2.jpg"width="400" style="display:inline-block;"/>
<img src="images/top3.jpg" width="400" style="display:inline-block;"/>
</div>
<div class="logo"> <img src="images/logo_03.png"/> </div>
<div id="bottomnav">
<ul>
<li>Home</li>
<li>About </li>
<li>Contact Us</li>
</ul>
</div>
</div>
heres the css:
#bottomnav {
display:inline-block;
float:right;
}
#bottomnav ul {
list-style: none;
}
#bottomnav ul li {
display: inline-block;
}
Useful tip: when dealing with css, less is more, try to be concise in your styles so that you dont have to write over styles with other styles and force your way around the DOM.
hope this helps/gets you pointed in the right direction.
I have a menu like
but would like to get a resultlike this
So far I have this:
<div id="bottomnav">
<ul>
<li>
<a href="#" target="_blank" title="lamp">
<img class="swing" src="http://site.cheetos.com.br/static/masterbrand/img/cap1-poste.png" width=250 height=350 style="z-index: 10" />
</a>
</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
I added z-index, but I am doing it wrong, What can it be done to put the image above the menu?
please take a look at the fiddle
Aligning Multiple Images In a Fixed Footer
You want something like this:
#bottomnav{
width: 100%;
height: 50px;
background: no-repeat url(http://eurekavi.com/barraroja.png);
background-size: 100% 100%;
position: absolute;
bottom: 0px;
}
#bottomnav ul {
width: inherit;
height: inherit;
list-style: none;
}
#bottomnav ul li {
width: 25%;
height: inherit;
position: relative;
float: left;
outline: 1px solid yellow;
}
#bottomnav li img {
position: absolute;
bottom: 0;
left: 0;
}
where you HTML looks like:
<ul>
<li>
<img ... />
</li>
<li>
<img ... />
</li>
<li>
<img ... />
</li>
</ul>
Fiddle: http://jsfiddle.net/audetwebdesign/s5GNA/
Some Explanation
Your bottomnav parent container is absolutely positioned at the bottom, that is fine.
For ul and li, inherit the height so as to take the guess work out of where the bottom of the elements are (when you float the content, the heights will collapse otherwise).
For li, you must set the position to relative and float them left.
Finally, absolutely position the images left and bottom to 0.
If you can, make your images all of the same dimensions and adjust the lamp bases so that they have a common baseline, otherwise, you need to tweak the bottom: {n}px setting for each image where '{n}' is some number to be found by trial and error.
I've an unordered list like this:
<ul style="float:left;">
<li class="book">
<div>title sdfdfdsfdsfds sdfsdfsdf dsfsdfsdf fdgsdfsdf</div>
</li>
<li class="book">
<div>title</div>
</li>
</ul>
The height of the li should depend partially from the content of li(div height). But if the height of the inner DIV becomes higher than another div inside another li all the div should assume the same dimension of the larger div.
I tryed with:
div { height: auto; min-height: 100%; }
and setting the li
float: left;display: inline-block; height: 100px;
but nothing changed. If the content of the first DIV causes the div to resize, the other DIV will not assume the new 100% height. How can I solve this ?
In CSS, to automatically adjust things to the same height based on their content, they must be part of a table row. Try this:
<ul class="booklist">
<li class="book">
<div>title <br>sdfdfdsfdsfds <br>sdfsdfsdf dsfsdfsdf fdgsdfsdf</div>
</li>
<li class="book">
<div>title</div>
</li>
</ul>
.booklist { display: table; float: left; }
.book { display: table-cell; border: 1px solid gray; }
Note that unlike a set of inline-block items, table rows will not auto-wrap to multiple lines, so if that is your goal, you cannot accomplish this with CSS and must add some JavaScript, such as to adjust the heights.
Maybe I'm not understanding you but this:
all the div should assume the same dimension of the larger div.
is going to happen anyway.
If you are trying to maintain some consistency between the li elements try something like this:
li {float: left; width: 100px; border: 1px solid red; overflow: hidden; }
Try the following (put the li elements inside the div element):
<ul style="float:left;">
<li class="book" >
<div style="display: inline-block; height: 100px;">
title sdfdfdsfdsfds sdfsdfsdf dsfsdfsdf fdgsdfsdf
</div>
</li>
<li class="book" >
<div style="display: inline-block; height: 100px;">
title
</div>
</li>
</ul>
DISCLAIMER: inline styles there for ease of reference:)