Formating syntax (inline-block?)

HTML & CSS
1

Sorry if I have missed this being asked before.

I am working on a help document for a scripting language what I want to do is to define a syntax statement so that the syntax can be written as


<div class="syntax">
startofstatement<ul><li>option1</li><li>option2</li><li>option3</li></ul>end of statement

and that when the line is displayed startofstatement and endofstatement appear level with each other with a “deep list” going down the page in the middle.

I have tired an inline-block on the UL but it still drops the list on to a new line and shows the endofstatement on a new line as well.

I know I should be able to do this, but don’t know how.

2

Thanks again for the help. It’s working just the way I wanted now. Easy to enter and maintain.

3

Hi,
Building on the last snippet you posted you could wrap the options in another span so you can target them with some styles too.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>

<style type="text/css">
.second {
    display: inline-block;
    vertical-align:middle;
    border:solid 1px;
    line-height: 1em;
}
.second span {
    float:left;
    clear:left;
    padding:1px 4px;
}
</style>

</head>
<body>

<p class="first">Start of the line:
    <span class="second">
        <span>option 1</span>
        <span>option 2</span>
        <span>option 3</span>
    </span>
End of the line</p>

</body>
</html>
4

Thanks Ryan, I’ll see how that turns out.

5

To be honest, a table has no place here. Tables aren’t to be used for layout purposes. It’s only to be used for tabular data. Misuse of the table element should be avoided :).

I was just saying wrap the startofstatement in ANY sort of element, and then float both the <ul> options, and the startofstatement element.

6

Thanks for the suggestions.

I would like to avoid a table as different statements have variable parameters and I would like to keep things as easy as possible so the programmers can easily enter the syntax.

Ryan were you suggesting wrapping each bit of the statement in a list and a list with in it.

eg


<div class="syntax">
<ul>
<li>startofstatement</li>
<li><ul><li>option1</li>
<li>option2</li>
<li>option3</li>
</ul></li>
<li>end of statement</li></ul>
</div>

If so what CSS code would you suggest to format it?
I have attached a rough image of where I am trying to go

7

Seems like a table would work well here, as you have a list of optional parameters available to each scripting statement.

<html>
<head>
<title>Scripting Help</title>
<style type="text/css">
<!--
.syntax ul, li {
    list-style: none;
    margin:0;
    padding:0;
}
.syntax td {
    text-align: left;
    vertical-align: top;
}
-->
</style>
</head>
<body>
<table class="syntax">
  <tr>
    <td>startofstatement</td>
    <td><ul>
        <li>option1</li>
        <li>option2</li>
        <li>option3</li>
      </ul></td>
    <td>endofstatement</td>
  </tr>
</table>
</body>
</html>

I’m new to HTML/CSS so I am probably wrong about this being the right place to use a table.

8

Are you completely sure; you are actually wanting a List and not a CODE block which are sometimes wrapped in pre-formatted text?

9

Using the code below I am close to what I want, does this make sense?

Thanks for the help.


<html>
<STYLE type="text/css">
span.second{
display: inline-block; 
vertical-align: middle;
border:solid 1px;
line-height: 1em;
}

</STYLE>
<body>
<div class="first">
<p>
		Start of the line:
		<span class="second">
			option1<br />
			option2<br />
			option3<br />
		</span>

		End of the line</p>
	</div>
</body>
</html>
10

Unformatted text can be a pain cross browser to get all on one line. I’d recommend either wrapping the text in an element, adn then floating both, or place the <ul> first in the HTML and float it.