I am trying to build a website and have encountered a tricky issue with li having display: inline-block; property.
My website is: http://www.gypsytours.in/
If you visit this site, on homepage, I have a horizontal list under the heading "Himalayan Packages by Gypsy Tours".
In this list, I have a block element A with display: block; property.
Here are my simplified codes:
HTML:
<div id="menu-board">
<ul>
<li>Elephant Safari Packages in Jim Corbett Park, India</li>
<li>Chopta Tungnath Trekking Package</li>
<li>River Rafting Packages in Rishikesh</li>
</ul>
</div>
CSS:
#menu-board
{
text-align: center;
}
#menu-board ul
{
}
#menu-board ul li
{
float: none;
display: inline-block;
}
#menu-board ul li a
{
display: block;
width: 180px;
height: 130px;
background-color: #C50000;
text-align: center;
overflow: hidden;
}
Now, the issues is: My link-text in 2nd box, is not longer than two lines, unlike the other two boxes where link-text spreads in three lines. This boxes look perfectly fine in IE and FireFox but when I open the site in Google Chrome or Safari, the box in the center (with relatively shorter text) pops down. If I make the text long enough to span in three lines, it comes back to original position. I am not able to figure out how to fix this. My apologies for not being able to put across my issue in simple and short manner. I am relatively inexperienced with web-designing. I will really appreciate if you guys can help me out. Thanks in advance.
Ok, after more digging, I found out that it was a computed float issue.
I believe that adding:
#splash-list ul li a {
float:left;
}
will solve the problem. It may compute very slightly differently on other browsers, but at least they'll be in the proper line.
Hope this helps!
Mason
Related
I've put my code into a jsFiddle because I wasn't able to reproduce it with a smaller example.
I have a few menu items that show their submenu when hovered. I wanted to add a title that should also be shown on hover but the css class doesn't seem to work.
Here's the rule, it's on line 60 in the fiddle:
li:hover > .skimap-control-title {
display: block;
}
The funny thing is if I add the exact same rule in the developer tools it suddenly works.
I hope someone here can help me.
I think the problem is with some syntax/formatting errors. I wasn't able to narrow it down, but when you click "Tidy Up" in JSFiddle, it seems to work as expected. See updated fiddle
Also why do you have <ul></ul>? What is the point of these empty tags?
I was able to fix it thanks to #cocoa
I just copied the rule after using "Tidy up" in my fiddle and replaced the rule in my css file and it works.
The strange thing is in the git diff the two lines look exactly the same.
I'm clueless what the difference is here, but it works.
Without knowing your code, we can only guess.
But here's an example on how to display a child when the parent is in hover state:
<div class="outer">
<div class="show-on-hover">Hello there!</div>
</div>
and here's the CSS:
.outer {
width: 150px;
height: 150px;
display: block;
border: 1px solid green;
}
.show-on-hover {
display: none;
}
.outer:hover {
background: #ccf;
}
.outer:hover .show-on-hover {
display: block;
}
Here's a working fiddle: http://jsfiddle.net/an5v2atn/1/
I hope I am right here, I need your help with my upcoming online shop. I would like to center the main categorie menu on the top but I am missing the right CSS order.
This is what it looks right right now and there are 2 ways I want to test the looking.
First I want is a centered menu where "home" and "Kollektionen" have the same distance to the left or right.
And secondly I want to try out what it looks like when every li-element 'pushes' the next element to the right so that it's centered at the last one.
You know what I mean? 2 different ways of centering my menu and I don't find the right command....
I hope you can help me.
Thanks in advance.
PS: sorry for my bad english, it's not my native language.
EDIT: I cannot post code I'm afraid as it's not mine. But maybe this is enough: the basic template is made of this http://www.shopwaredemo.de/
2nd EDIT: after trying Asko's, Mike's and Tom's answer and both works I ask myself why? What is the difference between display:flex and display:inline-box and between text-align and justify-content set to center???
Perhaps use display: inline-block? E.g the following:
.menu {
text-align: center;
}
.menu li {
float: none; /* assuming the template has set this to 'left' */
display: inline-block;
margin-left: 20px; /* tweak this for the space inbetween items */
margin-right: 20px; /* and this, too */
}
Note that I didn't look at the code, so the div .menu is an example.
You can try to make the <ul> display: inline-block and apply text-align: center on parent.
JSFiddle Demo: http://jsfiddle.net/Q2hSv/1/
Without seeing some code, maybe this will help.
.topmenu {
width: 80%;
margin: auto;
}
.menuitems {
float: left;
width: // Here you take the number of items divided by 100%
// remember to take borders and margins into account
Dependent on your browser scope you could use display:flex;
HTML:
<nav>
<ul>
<li>Home</li>
<li>Neuheiten</li>
<li>Orschmuck</li>
<li>Ringe</li>
<li>Halsketten</li>
<li>Armbander</li>
<li>Kollecktion</li>
</ul>
</nav>
CSS:
nav {
background: #000;
margin: 0 auto;
width: 70%;
}
ul {
display: flex;
justify-content: center;
}
li {
list-style: none;
}
Example http://codepen.io/tom-maton/pen/AFpnJ
back to work and managed to achieve my goal:
Thanks again for every answer, I used and played a lot with your snippets and and I ended up using this (click click!):
#mainNavigation {
margin: 0 auto;
width: 98%;
}
#mainNavigation ul {
display: flex;
justify-content: center;
}
#mainNavigation li {
list-style: none;
width: 15%;
text-align: center; /* to center the li-elements itself */
}
which works perfectly! Still figuring out what excatly justify-center and display:flex do but I want you to know that you helped a lot.
CHEERS!
PS: how come my thread got a negative rating? it says -1 to me!? Did I do anything wrong?
Please look at my jsFiddle: http://jsfiddle.net/AnNyf
I am trying to get those icons to fit right under that block of text there on the right. I've tried a lot of methods but I just can't get it to work. I'm just a bit rusty on things so I need a refresher.
Thanks in advance!
add right:300px to your li css class
header#header .inner .networks li {
float: right;
list-style: none;
margin-top:122px;
position: relative;
right:300px; //recommend you play around with the value
}
http://jsfiddle.net/AnNyf/2/
I want to do a navigation with list elements formatted as table so the width of all elements is the same but it won't work for Firefox.
HTML:
<div id="#navigation">
<ul>
<li>
<a>Menu1</a>
<ul>
<li><a>Sub1</a></li>
<li><a>Sub2</a></li>
</ul>
</li>
<li><a>Menu2</a></li>
</ul>
</div>
CSS (some properties are missing but only such things as color...):
#navigation {
position: relative;
height: 25px;
width: 852px;
}
#navigation>ul {
width: 850px;
top: 0px;
padding: 0;
margin: 1px;
list-style-type: none;
display: table;
table-layout: fixed;
border-collapse: collapse;
}
#navigation>ul>li {
position: relative;
height: 25px;
display: table-cell;
}
#navigation>ul>li>ul {
position: absolute;
width: 100%;
margin: 0;
padding: 0;
list-style-type: none;
}
#navigation>ul>li>ul>li {
/* nothing really happening here */
}
JS Fiddle:
http://jsfiddle.net/ZrsXv/2/
Everything works fine in Chrome, Safari, IE8 and greater and with some modifications also in IE6 and IE7
But in Firefox I will always get this
I know I'm not the first one having Problems but I have also tried solutions I found on stackoverflow but if something is changing this is everything I get
So is there a solution that won't mess everything up?
I think your problem is that position: relative; doesn't really work on table cells. I couldn't find a source at the moment but I'm pretty sure I have experienced the same problem before.
So what is happening in Firefox is that the width of #navigation>ul>li>ul is calculated as 100% of #navigation which is the closest ancestor with a position value other than static (default position value).
You can go around the problem by inserting a dummy element with position: relative; (f.ex. a div) inside #navigation>ul>li and then #navigation>ul>li>ul must be changed to #navigation>ul>li>div>ul
The easiest solution is to reference already-existing examples of menus built from nested lists.
http://www.devarticles.com/c/a/HTML/Building-a-Drop-Down-Menu-with-Nested-HTML-Lists/2/
I'm not really sure why you're using display: table, either; it's been a while since I last made a multilevel menu myself, but I never used that display method, and none of the examples I found after a brief search did either.
Reading other answers and comments I understand why you're using display: table and it could be acceptable...
I tryed different solutions and nothing work for Firefox so, if you are interested in using this method I can suggest to give the fisrst li element width to the children ul using javascript / jQuery like I did in your jsfiddle here
Otherwise I can not help you in a different way... sorry.
I have a menu for which I wanted all of the space around the text, within each individual item, to take the user to the specified page. I looked around on the web and found that the best solution is to set the "a" display to block, as follows:
a {
display: block;
height: 100%;
text-decoration: underline;
}
I have managed to get this working perfectly but want to put images in some of them - like a calendar icon for the events option. I notice it is now underlining the links too. Is there any way to get rid of this? The links have padding-right set to 5px if that helps narrow down the cause / solution.
So all the relevant code is as follows:
a {
display: block;
height: 100%;
text-decoration: underline;
}
a > img {
text-decoration: none;
border: none;
padding-right: 5px;
width: 1.8em;
height: 1.8em;
}
Many thanks in advance.
Regards,
Richard
PS It is Google Chrome in which I am having this problem - I have not currently checked it in any other browsers.
Images are inline elements, so they are treated as part of the text. It's not the image that is underlined, it's the text that contains the image that is underlined, so it doesn't help to prevent underlining for the image.
You can turn the images into block elements by floating them, then they are not part of the text:
a > img {
float: left;
border: none;
padding-right: 5px;
width: 1.8em;
height: 1.8em;
}
I think your best option is to get rid of the underline text-decoration property for the a element, put the link text in a span with common class, and apply text-decoration: underline to that class.
I was running in the same doubt. The text-decoration set to none works for me:
<a href="..." style="text-decoration:none;">
<img src="...">
</a>
As was said befor, you can use a class to make this more generic.
Nice question by the way, It looks totally strange in my website when I saw some minus at the bottom of images. Then I realize that was an underlying.
I tried eveything in the comments to no avail, what worked for me was modifying div which contained all the tags. I have an inkling that they are only underlined when in their absolute default position. Here was the div each tag was wrapped in, no other tricks were applied.
.myDiv {
display: flex;
justify-content: center;
align-items: center;
}