A couple years ago, I asked a question about frames old fashion way. Some nice gentleman at sitepoint gave me a css template for a css/frame page. It is great. Now I am trying to create a css/frame page with unordered lists and their subs. But the lists are all flushing to the left. Evidently I’m using the wrong technique. This site I am building will not be put online but only for private consumption for family. Any help would be appreciated. I guess I’m asking how do you code html and css to make these lists LOOK like lists with the subs NOT flushing to the left.Obviously I’m a newbie.
Hi warrenj97266,
Did you use a different login ID a couple of years ago? Curious that you just joined tonight. In either event, Welcome to the forums or Welcome back to the forums.
Do you have a page written using HTML4 frameset or a page written that uses HTML frames that display pages from another site, say?
I’m not sure what you mean by “lists with the subs”. What are subs? Are you talking about list markers?
Any help that you can give us regarding your design intent would be helpful… a screenshot, a drawing, the code that you have now would be ideal.
The frameset was a question I had a couple years ago. A gentleman from sitepoint created a generic page for a frame design using nothing but css. Each page now is the same css design. It works great but when I tried using the standard
- codes, they all flushed to the left instead of a space from the left with the sub unordered lists. I apologize for my lack of technical jargon. I am trying to create an unordered list with unordered lists within an unordered list.
Topic line (unordered list)
Topic line (sub or unordered list within an unordered list)
Topic line (ul)
Topic line (etc)
the second and fourth topic line should be 10 spaces over or so. All are showing here as all flushed left. Argh. Please forgive my lack of venacular. Its why I’m here.
Yes I used a different login earlier. I’m traveling and left my password info at home. I’m NOT using HTML4 frameset. But a css designed page. each page is it’s own frameset.
Unordered lists, without the influence of CSS, will indent sublevels by default.
If your lists are not indenting, then perhaps some CSS is interfering with them.
Copy this into a file and open it in your browser and see how it behaves. It is a simple, no CSS, series of nested lists.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>template</title>
<!--
https://www.sitepoint.com/community/t/html-css-code-for-unordered-and-its-sub-lists-in-a-css-frame-webpage/244279/3
warrenj97266
-->
</head>
<body>
<ul>
<li>A1 Level
<ul>
<li>B1 Level</li>
<li>B2 Level</li>
</ul>
</li>
<li>A2 Level
<ul>
<li>B1 Level</li>
<li>B2 Level</li>
</ul>
</li>
<li>A3 Level
<ul>
<li>B1 Level</li>
<li>B2 Level
<ul>
<li>C1 Level</li>
<li>C2 Level</li>
</ul>
</li>
<li>B3 Level</li>
</ul>
</li>
</ul>
</body>
</html>
1 Like
Your page probably has a CSS reset added which removes the left margin/padding from uls and ols and probably set their bullets to none.
You can re-instate the bullets and spacing by using your own css for the elements in question.
e.g.
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
ul.my-list, ul.my-list ul {
margin:1em 0 ;
padding:0 0 0 1.8em;
list-style:disc;
}
ul.my-list ul{list-style:circle}
</style>
</head>
<body>
<ul class="my-list">
<li>List item</li>
<li>List item</li>
<li>List item
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</body>
</html>
2 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.