Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Positioning a list

Status
Not open for further replies.
ChrisRChamberlain

ChrisRChamberlain

Programmer
Mar 23, 2000
3,392
GB
Beginner type question(s) coming up [smile]

The following code is from a tree type menu

<ul>
<li id=&quot;foldheader&quot;>News</li>
<ul id=&quot;foldinglist&quot; style=&quot;display:none&quot; style=&{head};>
<li><a href=&quot; <li><a href=&quot; News</a></li>
<li><a href=&quot; News</a></li>
</ul>

<li id=&quot;foldheader&quot;>Webmaster</li>
<ul id=&quot;foldinglist&quot; style=&quot;display:none&quot; style=&{head};>
<li><a href=&quot; Drive</a></li>
<li><a href=&quot; Kit</a></li>
<li><a href=&quot; </ul>

<li id=&quot;foldheader&quot;>Nested Example</li>
<ul id=&quot;foldinglist&quot; style=&quot;display:none&quot; style=&{head};>
<li><a href=&quot; 1</a></li>
<li><a href=&quot; 2</a></li>
<li id=&quot;foldheader&quot;>Nested</li>
<ul id=&quot;foldinglist&quot; style=&quot;display:none&quot; style=&{head};>
<li><a href=&quot; 1</a></li>
<li><a href=&quot; 2</a></li>
</ul>
<li><a href=&quot; 3</a></li>
<li><a href=&quot; 4</a></li>
</ul>
</ul>

What needs to be modified to get the menu to start on the left hand side and not be indented?

If you take out the first <ul> </ul> tags it positions it correctly but the individual lists then have a gap at the top before the sublist begins.

Having resolved that, how do you get text, pictures etc to be positioned to the right of the menu?

Thanks in anticipation HTH

Chris [pc2]
 
Sort by date Sort by votes
in your <UL> tag set the following style:

style=&quot;margin-left:5px; margin-top;5px; margin-bottom:5px&quot;

change the 5px to the value you want
 
Upvote 0 Downvote
You have to use tables or absolutely-positioned block elements.
Here are two examples:

1. tables:
. . .
<table>
<tr>
<td>
<ul>
<li id=&quot;foldheader&quot;>News</li>
. . . all your lists are here
</ul>
</td>

<td>page content</td>
</tr>
</table>
. . .

2. CSS positioning:
<html>
<head>
<style>
.leftcol {
position: absolute;

left: 0px;
width: 300px;
margin: 0px;
padding: 0px;
border: 1px solid black;
background-color: #eeeeee;
}

.rightcol {
margin-left: 300px;
padding: 0px;
border: 1px solid black;
background-color: #dddddd;
}

p { font: 10pt verdana,sans-serif; color: black;
padding: 20px; margin: 0;
border: 0px dotted black; }
</style>
</head>
<body>
<div class=leftcol>
<p>
<ul> . . . </ul> your lists
</p>
</div>

<div class=rightcol>
<p>page content</p>
</div>
</body>
</html>

Look for html tables and CSS tutorials.
good luck
 
Upvote 0 Downvote
starway

Using the table option, the page content is being repositioned relative to the tree as the tree expands and contracts.

Any ideas? HTH

Chris [pc2]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
787
3esolar
3
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
238
Alt255
Alt255
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
825
spamjim
spamjim
lmcate
  • Locked
  • Question
Create a Expand/Collapse FAQ Accordion, Collapse other on Click 1
Replies
2
Views
788
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top