Is it possible to use markup like this
<ul>
<li><img alt="" src="/image1.jpg"></li>
<li><img alt="" src="/image2.jpg"></li>
</ul>
And do a sliding door effect? I have some CSS that looks like this:
ul li {
list-style-type: none;
margin:0; padding:0;
}
li a {
display:block;
overflow:hidden;
width:225px;
}
li a img {
float:left;
}
li a:hover img {
float:right;
}
It works in FireFox but IE7 doesn't seem to understand the float:left / float:right code. Any ideas?
Have a look at these articles on A List Apart and see if they do what you need:
Sliding Doors of CSS
Sliding Doors of CSS, Part II
They have a lot of other good articles if you can't sleep like me...
Have you tried setting the <li> to block?
ul li { display: block; }
If I recall correctly, IE had issues with lists, unless you explicitly defined the styles.
As an aside: Sliding Doors is a term that has a different meaning to what you describe - might even throw some people off =)
Related
I am trying to create indentation for buttons that sit inside of a nested ul li structure.
I can't change the HTML as it is being rendered by a third party system.
The HTML
<ul>
<li><button>Parent</button>
<ul>
<li>
<button> Child</button>
<li><button>Parent</button>
<ul>
<li>
<button> Sibling etc</button>
</li>
</ul>
</li>
</li>
</ul>
</li>
</ul>
The ul and li have no margin or padding so the idea was to simply add padding to the button elements.
The issue is, because of the ul having no margin/padding, the buttons all start from the exact same point and there (no matter how deep they are nested) all have the exact same indentation.
LESS
ul{
li{
button{
padding-left: 25px;
}
ul{
li{
button{
padding-left: 35px;
}
}
}
}
}
I thought of doing something like the above (and account for as many levels as possible) but it would be a nightmare to maintain.
Surely there is a more elegant way to handle this, thoughts?
I don't know why you would want to go as far as to write a mixin for this.
My solution in LESS:
ul ul button {
padding-left: 25px;
}
ul ul ul button {
padding-left: 35px;
}
Would that solve the problem for you?
The resulting CSS would look like this:
ul ul button {
padding-left: 25px;
}
ul ul ul button {
padding-left: 35px;
}
Alright, so I thought of a different solution and looked at the LESS documentation but the underlying problem is that you can't know the number of levels of nesting coming into play beforehand obviously.
Thus you would have to wait for the HTML to be rendered, then read out the level of nesting (e.g. 5 levels) and based on that you could generate the CSS, which I'm afraid wouldn't make much sense and is something to be done in JavaScript.
All of that being said you could use a few variables to ease your writing process in LESS but that's about it. Here for an example:
#padding: 25px;
#addten: 10px;
#selector: ul button;
#selector { #padding; }
ul #selector { #padding + #addten; }
ul ul #selector { #padding + #addten*2; }
ul ul ul #selector { #padding + #addten*3; }
Probably you could also create a mixin for that to add another layer of abstraction but like I said, I wouldn't go thus far.
Hope this helps. =)
Here's my code and everything looks okay to me, but for whatever reason the LIs are creating extra padding at the bottom.
What am I missing? Here's the Fiddle, http://jsfiddle.net/M8eRG/
<ul class="project-thumbs">
<li><img src="http://wiki.urbandead.com/images/1/1c/Square.gif"></li>
<li><img src="http://wiki.urbandead.com/images/1/1c/Square.gif"></li>
</ul>
.project-thumbs {
list-style-type:none;
margin:0;
padding:0;
}
.project-thumbs li{
background:#cc3300;
}
Images are not displayed as block elements by default, hence they "create a line". You can alter that behavior by specifying this:
.project-thumbs li img
{
display: block;
}
Try putting this in the li itself
.project-thumbs li{
background:#cc3300;
margin:0;
padding:0;
}
i am trying to make a CSS menu for my webpage for school. I have been developing my site on a Mac and have got it working just the way i want it. I have tested it in safari, firefox and chrome as well as firefox on windows, all of these work fine, i hover over the links menu and it drops down.
css for menu
#menu
{
position:relative;
top:-83px;
left:60%;
font-size:30px;
width:250px;
}
#menu ul
{
position:absolute;
list-style-type:none;
background-image:url('../images/linkBG.png');
background-repeat:no-repeat;
background-position: 38px 0px;
width:250px;
}
#menu li ul
{
display:none;
list-style-type:none;
background-image:url('../images/menuBG.png');
background-repeat:repeat-y;
font-size:20px;
}
#menu a:link {color:rgb(255,0,0);}
#menu a:visited {color:rgb(255,255,0);}
#menu a:hover {color:rgb(255,0,255)}
#menu a:active {color:rgb(255,255,255);}
#menu li:hover > ul
{
display: block;
}
#menu li ul li
{
padding-left:0px;
padding-top:10px;
padding-bottom:10px;
}
When trying it on IE (ver6 and ver8) the links menu repositions it self (moves up about 50px and overlaps the heading), the background image gets moved across to the right by about 30px, and the menu no longer drops down when the mouse hovers over the text. I have heard of IE being a pain to develop for but this is just stupid. I have seen one solution that involved a bit of script to work around the issue but i cannot use script as this is for an assignment (which will be marked on a windows machine so there are high odds of it hitting IE). Along with the faulty menu is a table that i am centering using margin-left:auto and margin-right:auto once again it works fine in all browsers except IE. Is there any way i can get around this? is there an alternative to hover that will work on all browsers.
thanks.
html code for menu
<div id="menu">
<ul>
<li>Links Menu
<ul>
<li>Details</li><!--This may be #details-->
<li>Home town</li>
<li>My Course</li>
<li>Books, Music and Films</li>
<li>Timetable </li>
<li>Search</li>
</ul>
</li>
</ul>
</div>
Take a look at the margins and padding on your menu and the header above it. IE sometimes misinterprets them when objects bordering each other have both margins and padding. If you're able to replace your margins with more padding or different positioning, that might fix it.
Otherwise, the easiest way might to use IE conditional statements to give Explorer different versions of your CSS classes. I doubt they'd be considered script, but I don't honestly know. Example:
<!--[if IE]>
#menu {
/* different positioning for IE only */
top: ____;
left: ____;
}
<![endif]-->
I'm designing a custom wordpress template for some friends, and want a horizontally justified top menu. All would be fine, except that wp_page_menu outputs the list elements all in one line, which (after a LOT! of head-scratching) appears to break the formatting and removes all space between the elements. For example, the following outputs 1, 2 and 3 spaced out and then 456 all together. (Tested in Safari, Firefox and Chrome, all on mac.)
<style>
.menu {
text-align: justify;
width: 700px;
margin: 10px;
}
.menu * {
display: inline;
}
.menu span {
display: inline-block;
position: relative;
width: 100%;
height: 0;
}
</style>
<div class="menu">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li><li>5</li><li>6</li>
</ul>
<span></span>
</div>
I've already got a custom function editing the output from wp_page_menu to add the span after the ul, so I guess the easiest thing to do would be to extend that function to put the line breaks in as well, but if anyone's got other ideas, or can tell me why this is happening (especially that!) that would be great.
EDIT:
Have fixed it now by adding a function that inserts a space to the html (code below if anyone's interested for now or if someone comes across this in the future). Seems that was all that was necessary! Would still be interested to hear if anyone can tell me why this is needed.
// Add a space after the </li> in wp_page_menu to allow justification of the menu
function add_break($break) {
return preg_replace('/<\/li>/', '</li> ', $break, -1);
}
add_filter('wp_page_menu','add_break');
To answer your question, that's how xHTML works.
If you have the following:
testtest1
That would show up as
testtest1
And if you have the following:
test test1
That would show up as
test test1
Now, the same logic works for <li> elements, as well as various other selectors such as <img> selectors.
Have you have had a header with three images in a line, but when you tried to do this:
<img src="#" />
<img src="#" />
<img src="#" />
That will insert a space ( ) after each image, whereas having them in line would not.
Your function accomplishes exactly what you wanted. You could've done it using Javascript or CSS as well, but your solution is better. Just in case you are curious, here is how to do it with CSS:
.menu li:before {
content:' ';
}
Hope that helped.
instead of display:inline, try floating your lis left. then maybe:
no:
.menu * {
display: inline;
}
instead
.menu li{
float:left;
padding:0 5px;
list-style:none;
}
I guess i kind of embelished with the other stuff but give it a try!
If I understand it correctly - what you really need is a tabular layout.
Try adding this to the css:
.menu { display: table; }
.menu ul { display:table-row; }
.menu li { display:table-cell; }
You could just ditch the li tag altogether and just make them div's with the same class name.
I have the following menu:
<ul class="top-menu">
<li><a_href="/Products" title="Products"><span>Products</span></a><ul>
<li><a_href="/Products/List" title="Product List"><span>Product List</span></a></li>
</ul>
</li>
<li><a_href="/Customers" title="Customers"><span>Customers</span></a></li>
</ul>
and I also have a sprite for the top menu items (products, customers).
How is it possible to make the menu's top level links display the images ?
thought about css nth-child selector
ul.top-menu
{
list-style: none;
width:528px;
}
ul.top-menu li a
{
display:block;
float:left;
height:40px;
background-image:url(../Images/sprite-menu.png);
text-indent:-9999px;
}
ul.top-menu:nth-child(1) a
{
width:135px;
background-position:0 0;
}
but it is not working.
thanks.
nth-child selectors are set on the child element, not the parent
To make your example work, I used the nth-child selector on the li rather than the ul, like so:
ul.top-menu li:nth-child(1) a
{
width:135px;
background-position:0 0;
}
And of course the "<a_href" tags in your sample HTML should read "<a href" with no underscore.
you probably want to chain child selectors
To achieve the effect I believe you want, which is to have only the top-level items get the style, I would use CSS Child Selectors instead:
/* desired top-level-only styles go here */
ul.top-menu>li>a
{
width:135px;
background-position:0 0;
}