I have a horizontal menu consisting of <li> elements with display: inline.
The elements are supposed to be next to each other seamlessly.
In the source code, I would like to have each li on one line for easier debugging:
<li class="item1 first"> ... </li>
<li class="item2"> ... </li>
...
However, if I add a \n after each element, the menu items have a gap between each other. I gather this is the intended behaviour, but is there any way to turn it off using a clever "white-space" setting or something?
Edit: I can't use float, this is in a CMS with the option to center the list items.
You can avoid the rendering issues but keep the code maintainable like this:
<ul
><li>item 1</li
><li>item 2</li
><li>item 3</li
></ul>
It removes the whitespace but it's still easy to edit the items in a text editor, provided your CMS doesn't mess with the markup you enter!
Do you have the ability to edit the CSS? If so, you could try adjusting the padding/margins on the <li> element. It does seem to be a lot of effort of readability.
Depending on what browser you are using you can get the HTML Tidy http://users.skynet.be/mgueury/mozilla/, which gives you the option to Tidy up your source, which might be useful enough for debugging
CSS+float is your friend.
HTML is whitespace independent - so adding line breaks should have no effect. Some browser's rendering engines don't quite get this right however.
What you probably want to do is add
float: left;
to your li tags to get them next to each other.
Related
I am using the TinyMCE gem with Rails (if that even matters) to generate text on my site. All the sudden bullet points are not appearing. (They used to display just fine.)
After all the ERB is rendered, the final HTML is pretty unstyled and boring (it looks like this...)
<ul>
<li>Text here</li>
<li>More text here</li>
</ul>
There is no CSS that speaks directly to bullets (ul, li, or ol).
Looking at other StackOverflow posts (like this) you're supposed to ensure that <li> tags have the css property display: list-item, but when I look at them in the Chrome inspector, they do have this display property.
You can see the issue live here if you want to verify that this property is correct.
Other than this, I'm not sure what could be causing the issue. What else can I check for? I've never had bullets just disappear before!
As per your live issue here
overflow-x: hidden; on <li>
is hiding the bullets.
Removing it or adding
overflow-x : unset; may help
I have tried without success to make a dropdown list without the content are getting pushed down under the dropdown, i can't get it to work, i have tried with float and display wont work :s
Anyone have any suggestions?
It really doesn't seem like you have come a long way at all, so I'd be hesitant to just write a long answer to explain how dropdowns work, and instead suggest that you look up tutorials. You are probably going to need to use javascript to make the dropdown "clickable" to open and close it.
But I'll try to start you off in the right direction!
To avoid making the dropdown move other elements, it needs to have the css attribute "position:absolute;" and the parent element (the element the menu is inside) has to have the attribute "position:relative;"
<style>
.menuButton{
position:relative;
}
.dropDown{
position:absolute;
bottom:0;
}
</style>
<div class="menuButton">
<p>Click me!</p>
<div class="dropDown">
<ul>
<li>Option 1</li>
<li>Option 2</li>
</ul>
</div>
</div>
Though further, I'd suggest you use javascript to toggle the ".dropDown" class' attribute "display:none" on and off. You will most likely learn better by googling, because I dont think I have teach you, and people are probably not going to give you a lot of help here on such a basic question
Consider this Bootstrap bug report. Basically, the <select> dropdown is not aligned with the <select> element on Chrome and Safari (both tested only a Mac). #mdo thinks there there is no fix. I just want a second opinion.
Can the <select> dropdown be aligned with the base <select> element?
You will NEVER style browser built-in tools the same across multiple browsers and across multiple OS.
I have been doing this a very long time and my best advise it to style as-best-as possible and reserve quirky css hacks for old IE browsers.
If you want to be super-anal about exact pixels, you need to not use the select html tag and instead use a ul tag. Then use css to list-style: none;
<ul id="my_selectbox">
<li>Option 1</li>
<li>Option 2</li>
</ul>
Then, style the menu to look exactly how you want it to look.
So think of this as a menu instead of a selectbox.
Then use javascript to make the menu drop down like a select tag.
(but that sure is a lot of work for a few pixels isn't it?)
Remember, you will NEVER EVER write a CSS file that makes all browsers look identical. Just isn't how they are designed. If you have a manager that demands it, they need to learn how this stuff works.
further note: you will have to also use javascript to store a selection. I can write you a quick script that does this if you need it. Not sure how proficient you are with javascript.
This additional style to the element may help:
-webkit-appearance: none;
How would code this in css and html? Should I do it with absolute? Or float it somehow? Any Ideas?
I would do it using css positioning while keeping in mind good markup. So basically, make the code reflect that the <h1> is the big east conference and each of the teams be list items.
Like this:
<h1>The Big East</h1>
<ul>
<li>Team 1</li>
<li>Team 2</li>
...
</ul>
This way the code makes sense to screen readers and is most SEO compliant.
Now, as far as how to then arrange the images, you can do it completely in CSS. So for the h1 you just do something like this:
h1{background-image:url(images/bigeast.png);text-indent:-9999px;display:block;overflow:hidden;}
The indent just sends the text outside of the h1 so it can't be seen while keeping the good markup intact. Just do the same with all of the li's and you'll have all of your images in place. Then simply set all of the positions on the elements to absolute and position them on the page with something like left:238px; and top:20px;
I know it seems like a pain, but it's really not all that hard, especially if you use firebug.
Make sense?
something driver me crazy here
i have a big HTML template which i can't post but the problem is that when i write ul tag like this everything works find
<ul><li>something</li><li>something</li><li>something</li></ul>
but when i write it like this i got +4 pixel i don't know from where
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
when i use the second method i'm sure that i have no extra space somewhere but i think it's from the "enter" between them
Any solution? css maybe
::Extra info
i found that the problem comes from closing and starting li tag this worked out
<ul>
<li>
something
</li><li>
something
</li><li>
something
</li>
</ul>
any idea ?
You are probably noticing such gap because you are using CSS to make an horizontal menu; when making <li> inline elements white space between them is not ignored.
i would start by using a reset CSS like this one
I don't know what cause the problem, but you can solve it using CSS. Write a style for li element and specify the proper margin.
What you're noticing is the 'feature' of (x)html collapsing whitespace into a single space. Most of the time this isn't too much of a problem, but for a horizontal menu it's an irritation.
There are two options available to deal with this (in addition to your first example):
<ul>
<li>something</li
><li>something</li
><li>something</li>
</ul>
(Note that the first two </li> tags aren't closed until the following line.)
<ul>
<li>something</li><!-- hiding the whitespace
--><li>something</li><!-- hiding the whitespace again
--><li>something</li>
</ul>
Of the two options I prefer the first, it doesn't throw up any errors, validating quite happily under xhtml 1.0 strict. It's not an ideal situation, but it's slightly better than trying to put a whole list into a single line of (x)html.