Forum Moderators: not2easy
I am trying to get our site as free from layout tables as possible and I've hit a bit of a stumbling block here. What I have are a series of links set up via an inline list:
ul.actionLink {
display: inline;
margin: 0 0 10px 0;
padding: 0;
text-align: center;
background: transparent;
line-height: 1em;
list-style: none;
}
ul.actionLink li {
display: inline;
float: left;
margin: 0;
padding: 0;
font-size: 0.8em;
}
Back in the good old table days we had a row split into two cells. The left cell containing instructional text while the right contained the action links. The action links were in a table themselves so there was no worry about the links wrapping.
I am trying to remove the tables but I cannot get the text and links to align properly. Basically I need the list to maintain it's width and not wrap the list items while forcing the text to wrap if it encounters the edge of the list. All this while staying on the same line.
I've tried combinations of text-aligns and floats but to no avail.
Thanks in advance for your time,
Tony
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
:)
You could give an example of what you desire using a table, and see if we can emulate it. You could have also described your problem better.
From what you said, the layout uses two columns... why then are you saying it's inline? inline is just one continuous block of content/text. To get things beside eachother, you need to use floats, (which automatically sets display to block, not inline) or inline-block which isn't well supported yet.
What you might want is something like this? I don't know. Note the overflow:auto, something you may not have done/thought of.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="application/html; charset=UTF-8"> <style type="text/css">
ul, li{margin:0;padding:0;list-style-type:none}
.action{float:right;border:1px solid black}
.text{overflow:auto;border:1px solid blue}
</style>
<title>test</title>
</head>
<body>
<ul>
<li class="action">action name</li><div class="text">do do behla dsokdsfkjes isodsjldsfdsi josdjfslk.</div>
<li class="action">another name</li><div class="text"> do do behla dsokdsfkjes isodsjldsfdsi josdjfslk.</div>
<li class="action">shop de whop</li><div class="text"> do do behla dsokdsfkjes isodsjldsfdsi josdjfslk.</div>
</ul>
</body>
</html>
