...

View Full Version : DIV DIV within LI



khan8822
09-28-2006, 10:24 PM
ul {
margin-left: 0;
padding-left: 0;
display: inline;
}

li {
display: inline;
list-style: none;
}


does any know why if I use DIV inside LI like below, the LIs will not line up horizontally anymore? Anyway to make it so?



<ul>
<li>
</div>
ABC
</div>
</li>
<li>
<div>
ZXY
</div>
</li>
</ul>

thanks for any input

IvanJ
09-28-2006, 10:43 PM
That code displays as:

ABC
ZXY

Isn't this how you want it to display?

mark87
09-28-2006, 10:44 PM
A div is a block level element... you'd need to have li div { display: inline } in there. Not sure if div's should be in li's really though... :/

khan8822
09-28-2006, 10:57 PM
hum....not sure what i should do then...

i want a tabbed menu

with each tab, a LI

displays couple lines of text and an image
with the layout using div


is this possible?....

mark87
09-28-2006, 10:59 PM
Well you can do it, just maybe a <span> would be better suited.

khan8822
09-28-2006, 11:14 PM
hum i tried something like below, but didnt work....
am i doing sotmehig wrong?



<ul>
<li>
<span>
<table><tr><td>
ABC </td></tr></table>
</span>
</li>
<li>
<span>
ZXY
</span>
</li>
</ul>

mark87
09-28-2006, 11:51 PM
Why are you using a table? :confused:

Start again and explain what you're trying to do and what you want it to look like... :)

rmedek
09-28-2006, 11:53 PM
Auuugh, don't throw tables in there… div or span is much much better. They don't mean anything semantically.

The LIs don't line up anymore because the div is a block-level element (like a list item), and by default it takes up 100% width.

If you goal is to have each menu item contain an image and a couple of lines of descriptive text, I probably wouldn't use an unordered list at all. Post a screenshot of what you're trying to do and I'll show you how I'd mark it up.

khan8822
09-29-2006, 12:01 AM
sorry tried to make it easier to read before, but i guess made it more confusing =P

below is what i am trying to do

it will update the message-US and message-CA with DOM & AJAX
and background bgcolor will change as will

i have all this working, just that i wanted to be in a horizontal tab layout


<ul>
<li>
<div >
<div><H3>US</H3></div>
<div>
<table><tr>

<td id="td1-US" width="100" bgcolor="white" border="2">
<div id="message-US" align="center">empty</div>
</td>
</tr>
</table>
</div>
</div>
</li>

<li>
<div >
<div><H3>CA</H3></div>
<div>
<table><tr>

<td id="td1-CA" width="100" bgcolor="white" border="2">
<div id="message-CA" align="center">empty</div>
</td>
</tr>
</table>
</div>
</div>
</li>


</ul>

rmedek
09-29-2006, 12:10 AM
no code
show picture
or link

Because your code says you want to have data tables with the word "empty" in them.

khan8822
09-29-2006, 12:19 AM
hope this helps =)

rmedek
09-29-2006, 12:23 AM
So you want each section to have the name of a country, then below some related number, then line those up horizontally like tabs?

khan8822
09-29-2006, 12:24 AM
yep
is it really difficult?

rmedek
09-29-2006, 12:41 AM
No. I guess I just don't understand what the numbers are all about.

The reason why I even want to know is because HTML is nothing more than defining (marking up) your content semantically. So, in this case I'd probably use definition lists as my markup:


<dl>
<dt>US</dt>
<dd>245000</dd>
</dl>

Because there's no built in wrapper for each definition term I'd use separate lists:



<dl>
<dt>US</dt>
<dd>245000</dd>
</dl>

<dl>
<dt>CA</dt>
<dd>255555</dd>
</dl>


Then to give the whole thing some sort of style hook I'd throw it all in a <div>:



<div id="menu">
<dl>
<dt>US</dt>
<dd>245000</dd>
</dl>

<dl>
<dt>CA</dt>
<dd>255555</dd>
</dl>
</div>


Then you can start styling:


* {
margin: 0;
padding: 0;
}

#menu {
border-left: solid 1px #000;
margin: 1em 0;
}

#menu dl {
width: 200px;
float: left;
border: solid #000;
border-width: 1px 1px 1px 0;
}

#menu dt, #menu dd {
text-align: center;
padding: .5em 0;
}

#menu:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}

…and take it from there. There are a bunch of different ways to approach this… this is my two cents. Hope it helps…

khan8822
09-29-2006, 03:31 PM
hi, just wondering if is possible to use UL and LI to achieve this?

khan8822
09-29-2006, 04:39 PM
nevermind i decided to just use

pure divs to do it

rmedek
09-29-2006, 06:17 PM
nevermind i decided to just use pure divs to do it

You're missing the point, man. If you're just going to use divs why not just use tables?

HTML is supposed to define things. You are marking up text semantically. CSS styles everything you've marked up. Why use empty, meaningless divs when you can define what the menus are? The difference between this…


<dl>
<dt>US</dt>
<dd>245000</dd>
</dl>

…and this…


<div>
<div>US</div>
<div>245000</div>
</div>

…is that only the first means anything. Using divs as replacements for table cells is pointless.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum