I'm trying to do Tabs with pure HTML/CSS, and it works nice in all major browsers. Except IE, both 7 and 8.
If I don't add display: table to the ul, the content is not on a new line in every browser. However, IE doesn't display it in a new line even after I add that. What can I do about that? Is there a better way to make tabs in pure HTML/CSS?
<!DOCTYPE>
<html>
<head>
<style type="text/css">
ul.tabs {
display: table;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.tabs>li {
float: left;
padding: 10px;
background-color: lightgray;
}
ul.tabs>li:hover {
background-color: yellow;
}
ul.tabs>li.selected {
background-color: orange;
}
div.content {
border: 1px solid black;
}
</style>
</head>
<body>
<ul class="tabs">
<li class="selected">One</li>
<li>Two</li>
<li>Three</li>
</ul>
<div class="content">
This should really appear on a new line.
</div>
</body>
</html>
Because of the floated <li> elements your <ul> element is zero height.
Try adding ul { overflow: auto; } and div.content { clear: both; } to your CSS
Does this (jsfiddle) work for you?
Changes made:
Removed display: table; from ul.tabs
Removed float:left from ul.tabs li's
Added display:inline-block to ul.tabs li's
I always just "float" the li elements:
ul.tabs{list-style: none;}
ul.tabs li{float:left;}
I've used this approach which works well. It uses an inline list: http://nontroppo.org/test/tab1.html
UPDATE: Above is outdated. If I were to answer the question now I would suggest using the CSS target pseudo-class method outlined here: http://www.w3.org/Style/Examples/007/target. There are other methods like using (hidden) radio buttons in combo with the checked pseudo-class but using target seems the cleanest.
Related
test.html:
div, li {
display: inline-block;
margin-left: 30px;
}
<div>тест1</div>
<ul>
<li>тест</li>
</ul>
Opening test.html gives such a result that although div and li tags share the same style rules, div tag content is nevertheless closer to the left screen border than li tag's (at least at Google Chrome 44, desktop). Why is it so and how is it "healed"?
<ul> have some margin from left in default css. You can reset your css, or just put to your <ul> margin: 0; and padding: 0;.
HTML elements have styling rules beyond simple left margin & display type (such as padding for example). Also elements are positioned relative to other elements (unless explicitly set otherwise).
There's no reason for your <div> & <li> to look identical.
Posting the full code in accordance with #Alesha Oleg's answer-
<!DOCTYPE html>
<style>
div, li
{
display: inline-block;
margin-left: 30px;
}
ul
{
margin: 0;
padding: 0;
}
</style>
<div>ABCD</div>
<ul>
<li>ABCD</li>
</ul>
Now you get same effect on both:
div, li{
display: inline-block;
margin-left: 30px;
}
ul {
margin:0;
padding:0;
}
Here is fiddle: http://jsfiddle.net/nphzbfwd/1/
Hello guys) seems like I have pretty common issue with :hover'ing over floated list elements in IE, though I didn't find any solution so far. IE11 + WIN7. Here is my HTML...
<!doctype html>
...
<ul id="horizontal-menu">
<li></li>
<li></li>
<li></li>
</ul>
And I have my CSS this way...
#horizontal-menu {
list-style: none;
}
#horizontal-menu li {
display: inline-block;
float: left;
margin-left: 3px;
}
#horizontal-menu li a {
background-color: green;
display: inline-block;
float: left;
height: 30px;
width: 30px;
}
#horizontal-menu li a:hover, #horizontal-menu li a:active {
background-color: red;
}
The problem is that in IE the actual :hover area of those list item links has a strange left margin, and it works fine for the rest of the browsers...
Though I don't have enough reputation to post images, here you gonna find a fast link to my explanatory drowings...
Need your good advice fellas :/ tnx
...
Just used this !DOCTYPE...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
didn't solve the issue...
...
Just removed the display:inline-block rule from both li and a elements... didn't work for me
...
Removed also all possible inherited margins and paddings... still the same
The issue still exists
remove the display:inline-block rule from both li and a elements
I have a sort of menu like this one, but how you can see the code is not so "well".
I'd like that margin between word and border is always 5px for example, for every word.
I know I should use List for this kind of stuff, but I don't know how to apply css style with cross-browser compatibility.
Can you give to me an example of that menu with List?
This is how I'd do it:
See: http://jsfiddle.net/thirtydot/554BT/3/
<ul class="menu">
<li>Home</li>
<li>Incredible</li>
<li>One</li>
</ul>
.menu {
width:545px;
float:left;
margin: 0;
padding: 0;
list-style: none
}
.menu li {
float: left;
text-align: center;
padding: 0 15px;
border-left: 2px solid red
}
.menu li:first-child {
border: 0
}
This is the way I would do it, keeping it as easy (simple) as possible. It probably doesn't get any less complex than this:
HTML
<ul id="menu">
<li>Home</li>
<li>Incredible</li>
<li>One</li>
</ul>
CSS
#menu {
list-style-type: none;
}
#menu li {
display: inline-block;
padding: 0 10px;
border-left: 2px solid red;
}
#menu li:first-child {
border-left: none;
}
DEMO: jsfiddle
Check out Listmatic for examples of all the basic list layouts.
Looks like you want something like this one.
Try this...
fiddle:http://jsfiddle.net/anish/Laqqn/
<style type="text/css">
.menu
{
width:500px;
}
.menu li
{
width:100px;
text-align:center;
float:left;
border-right:1px solid red;
}
</style>
<ul class="menu">
<li>Home</li>
<li>Incredible</li>
<li>One</li>
</ul>
A CSS3 example, not really cross browser as it uses CSS3 pseudo-selectors
CSS3 List menu
This other example uses a pipe character to separate the links and is cross browser safe:
CSS2 List menu
Space between the borders do this =
Put a border on the right side of the li and the second button put a border on the left side of the li.
Now add margin-left (or margin-right) and see it expand.
This worked in my case.
Good luck.
I'm trying to style a menu, but I keep running into this weird margin that's appearing in both FF4 and IE.
This is the only affecting css:
#header ul
{
display: inline;
}
#header ul li
{
list-style-type: none;
background: #000;
display: inline;
margin: 0;
padding: 0;
}
#header ul li a
{
color: #fff;
text-decoration: none;
display: inline-block;
width: 100px;
text-align: center;
}
And this is the HTML:
<div id="header">
<ul id="toplinks">
<li>Hello</li>
<li>Herp</li>
<li>Derp</li>
</ul>
</div>
As you can see, there's a margin appearing on both sides, and I'd like it so it would have no margin (or maybe 1px would be okay)...
That's no moon...i mean...margin.
What you're seeing is the white space between your elements. Inline-block treats the elements as inline, except they have heights, widths, margins, paddings, etc. What happens is the newline + spacing you've given your html elements for nice indentation is being displayed as a space between the elements.
inline-block is also not cross-browser consistent. I'd suggest using display:block; with floats.
Edit to add suggestion:
If you want nice indents, but want to avoid extra white-space (as in all XML data ever), use what I call the "fishy notation"
Instead of:
<div id="header">
<ul id="toplinks">
<li>Hello</li>
<li>Herp</li>
<li>Derp</li>
</ul>
Use:
<div id="header"
><ul id="toplinks"
><li>Hello</li
><li>Herp</li
><li>Derp</li
></ul
></div>
White space contained by elements is preserved, but white space within elements is not.
Time to whip out that CSS Reset! I first include this, and then start designing. It makes it much easier, as most HTML will look identical cross-browser.
But to fix your problem, I would check if there is a stray border property somewhere. I've had rogue borders before, and they drove me mad. To kill it (for now), try this:
border-style: none;
If we had the complete CSS (don't worry, we don't steal it), I could actually fiddle with it and give you a fully functional answer.
change your CSS to
#header ul
{
display: inline;
}
#header ul li
{
float:left;
background: #000;
margin-left: 1px;;
padding: 0;
}
#header ul li a
{
color: #fff;
text-decoration: none;
display: inline-block;
width: 100px;
text-align: center;
}
I've got a horizontal navigation bar made from an unordered list, and each list item has a lot of padding to make it look nice, but the only area that works as a link is the text itself. How can I enable the user to click anywhere in the list item to active the link?
#nav {
background-color: #181818;
margin: 0px;
overflow: hidden;
}
#nav img {
float: left;
padding: 5px 10px;
margin-top: auto;
margin-bottom: auto;
vertical-align: bottom;
}
#nav ul {
list-style-type: none;
margin: 0px;
background-color: #181818;
float: left;
}
#nav li {
display: block;
float: left;
padding: 25px 10px;
}
#nav li:hover {
background-color: #785442;
}
#nav a {
color: white;
font-family: Helvetica, Arial, sans-serif;
text-decoration: none;
}
<div id="nav">
<img src="/images/renderedicon.png" alt="Icon" height="57" width="57" />
<ul>
<li>One1</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
<div>
<h2>Heading</h2>
</div>
Don't put padding in the 'li' item. Instead set the anchor tag to display:inline-block; and apply padding to it.
Define your anchor tag css property as:
{display:block}
Then the anchor will occupy the entire list area, so your click will work in the empty space next to your list.
Make the anchor tag contain the padding rather than the li. This way, it will take up all the area.
Super, super late to this party, but anyway: you can also style the anchor as a flex item. This is particularly useful for dynamically sized/arranged list items.
a {
/* This flexbox code stretches the link's clickable
* area to fit its parent block. */
display: flex;
flex-grow: 1;
flex-shrink: 1;
justify-content: center;
}
(Caveat: flexboxes are obvs still not well supported. Autoprefixer to the rescue!)
Use following:
a {
display: list-item;
list-style-type: none;
}
Or you could use jQuery:
$("li").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
You should use this CSS property and value into your li:
pointer-events:all;
So, you can handle the link with jQuery or JavaScript, or use an a tag, but all other tag elements inside the li should have the CSS property:
pointer-events:none;
Just simply apply the below css :
<style>
#nav ul li {
display: inline;
}
#nav ul li a {
background: #fff;// custom background
padding: 5px 10px;
}
</style>
here is how I did it
Make the <a> inline-block and remove the padding from your <li>
Then you can play with the width and the height of the <a> in the <li>
Put the width to 100% as a start and see how it works
PS:- Get the help of Chrome Developer Tools when changing the height and width
If you have some constraint where you need to keep <li> structure as is and would like your a tag to take up the full area within the li element you can do the following:
a {
display: flex !important;
width: -webkit-fill-available;
height: -webkit-fill-available;
justify-content: center;
align-items: center;
}
Put the list item within the hyperlink instead of the other way round.
For example with your code:
<li>One</li>