ul li styling

R

richard

<ul>
<li>sample</li>
<li>Item line 1<br>Item line 2</li>
<li>what?</li>
</ul>

In list 2 I show the CSS as display:inline-block; to keep the three items
showing as I want.

Now what's the trick for styling all 3 items to have a background and
border the same height? Height and width don't seem to do anything.
Padding works. But I want all 3 the same height and width.
 
R

richard

<ul>
<li>sample</li>
<li>Item line 1<br>Item line 2</li>
<li>what?</li>
</ul>

In list 2 I show the CSS as display:inline-block; to keep the three items
showing as I want.

Now what's the trick for styling all 3 items to have a background and
border the same height? Height and width don't seem to do anything.
Padding works. But I want all 3 the same height and width.
Click to expand...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title></title>
<meta http-equiv="content-type" content="text/html;
charset=windows-1252">

<style type="text/css">

ul { list-style-type:none; margin:0; padding:0; }
ul li { display:inline; }
.Aname, .Cname { background:#CCFFFF; width:300px; padding:10px; }
.Bname { display:inline-block; background:#F8FAAB; padding:10px; }

</style>
</head>

<body>

<ul>
<li class="Aname">Sample</li>
<li class="Bname">Item one<br>Item two</li>
<li class="Cname">something</li>
</ul>

</body>

</html>
 
R

richard

<ul>
<li>sample</li>
<li>Item line 1<br>Item line 2</li>
<li>what?</li>
</ul>

In list 2 I show the CSS as display:inline-block; to keep the three items
showing as I want.

Now what's the trick for styling all 3 items to have a background and
border the same height? Height and width don't seem to do anything.
Padding works. But I want all 3 the same height and width.
Click to expand...

Once again, figured it out. Removed the inline-block and changed to
float:left for all 3. Works as desired.
 
D

dorayme

richard said:
ul { list-style-type:none; margin:0; padding:0; }
ul li { display:inline; }
.Aname, .Cname { background:#CCFFFF; width:300px; padding:10px; }
.Bname { display:inline-block; background:#F8FAAB; padding:10px; }


<ul>
<li class="Aname">Sample</li>
<li class="Bname">Item one<br>Item two</li>
<li class="Cname">something</li>
</ul>
Click to expand...

and in later post:

"Once again, figured it out. Removed the inline-block and changed
to float:left for all 3. Works as desired."

Like

ul { list-style-type:none; margin:0; padding:0; }
li { float: left; padding:10px; height: 3em;}
..Aname, .Cname {color: #000; background:#CCFFFF; }
..Bname {color: #000; background:#F8FAAB; }

?

Your Bname content is semantically suggestive of a further list
within. I guess you could:

ul {list-style: none; margin: 0; padding: 0;}
li { float: left; height: 4em; padding: 10px;}
..main ul li {float: none; height: auto; padding: 0;}
..Aname, .Cname {color: #000; background:#CCFFFF; }
..Bname {color: #000; background:#F8FAAB; }

<ul class="main">
<li class="Aname">Sample</li>
<li class="Bname">
<ul>
<li>Item one</li>
<li>Item two</li>
</ul>
</li>
<li class="Cname">something</li>
</ul>
 
R

richard

and in later post:

"Once again, figured it out. Removed the inline-block and changed
to float:left for all 3. Works as desired."

Like

ul { list-style-type:none; margin:0; padding:0; }
li { float: left; padding:10px; height: 3em;}
.Aname, .Cname {color: #000; background:#CCFFFF; }
.Bname {color: #000; background:#F8FAAB; }

?

Your Bname content is semantically suggestive of a further list
within. I guess you could:

ul {list-style: none; margin: 0; padding: 0;}
li { float: left; height: 4em; padding: 10px;}
.main ul li {float: none; height: auto; padding: 0;}
.Aname, .Cname {color: #000; background:#CCFFFF; }
.Bname {color: #000; background:#F8FAAB; }

<ul class="main">
<li class="Aname">Sample</li>
<li class="Bname">
<ul>
<li>Item one</li>
<li>Item two</li>
</ul>
</li>
<li class="Cname">something</li>
</ul>
Click to expand...

Quit reading into what is not there.
Are you assuming that all 3 <li> MUST be exactly equal?
Since when?
I can only have one <li> per <ul>? Since when?
 
D

Doug Miller

Once again, figured it out. Removed the inline-block and changed to
float:left for all 3. Works as desired.
Click to expand...

That's at least the third time in as many days. Next time, spend more than ten
seconds thinking before you post.
 
D

Doug Miller

Quit reading into what is not there.
Are you assuming that all 3 <li> MUST be exactly equal?
Since when?
I can only have one <li> per <ul>? Since when?[/QUOTE]

You know, most people, when they want help from someone else, don't take a
truculent and argumentative approach toward the helpers. That might explain
why most people who come here get more help than you do.
 
J

JJ

richard said:
<ul>
<li>sample</li>
<li>Item line 1<br>Item line 2</li>
<li>what?</li>
</ul>

In list 2 I show the CSS as display:inline-block; to keep the three items
showing as I want.

Now what's the trick for styling all 3 items to have a background and
border the same height? Height and width don't seem to do anything.
Padding works. But I want all 3 the same height and width.
Click to expand...

What if a user comes along who has beefed up their browser's font size
above the default? Text above a certain size will spill out of any
element with a fixed height, unless you use overflow: hidden or some
sort of image replacement.
 
D

dorayme

JJ said:
What if a user comes along who has beefed up their browser's font size
above the default? Text above a certain size will spill out of any
element with a fixed height, unless you use overflow: hidden or some
sort of image replacement.
Click to expand...

The contribution of the word "fixed" is all yours. Richard is far
too experienced to fall for this one. If you read the thread
carefully, there are a couple of suggestions from a visitor to
your earth.
 
R

richard

What if a user comes along who has beefed up their browser's font size
above the default? Text above a certain size will spill out of any
element with a fixed height, unless you use overflow: hidden or some
sort of image replacement.
Click to expand...

Not my problem. I try to design my pages so that doesn't happen.
Most modern browsers allow the user to change the font size if need be.
So if text falls outside of the intended block, the user merely changes the
text size to fit.
Hell, I can have 100pt text in a 10x10pixel block and you'll never read it.
Then again, turn off your damned styles and forget about the formatting.
 
R

richard

The contribution of the word "fixed" is all yours. Richard is far
too experienced to fall for this one. If you read the thread
carefully, there are a couple of suggestions from a visitor to
your earth.
Click to expand...

Thank you dear. And from which "earth" are you?
 
D

dorayme

So what is your answer to my question? Is this what you did? Or
something else?

Quit reading into what is not there.
Click to expand...


What is "there" and what is "not there" is the question. It is a
sort of family member of the more famous "To be or not to be"

Are you assuming that all 3 <li> MUST be exactly equal?
Click to expand...

I assumed from your "Now what's the trick for styling all 3 items
to have a background and border the same height?" that you were
hankering for some sort of equality. Silly me thought you wanted
the background at least the same height.
Since when?
Click to expand...

Since I read your initial words I guess.
I can only have one <li> per <ul>? Since when?
Click to expand...

You can have as many as you like, what have I said to suggest
otherwise?
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Working on mobile css menu with plenty of frustration! 2
Not sure why drop-down is not working. 2
I need help fixing my website 2
Dropdown menu in a fixed navbar 1
Need help with code on website (noob) 2
Horizontal menu bar header 2
Is it possible an iframe can overlapp another? 3
Different font sizes inside same div 2

Members online

Total: 26 (members: 2, guests: 24)
Robots: 394

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,020
Latest member
GenesisGai

Latest Threads

Top