Is there a way to apply dir tags to <li> elements and not mess up the list indicators? Intuitively, they should all be at the same side and RTL <li> elements in an otherwide LTR document should either align to the left if it's only a single underfull line, or else from the right. Why do the reversed direction indicators end up so far in the margin anyway?
ul {
max-width: 15em;
margin: auto;
}
<!DOCTYPE HTML>
<html>
<body>
<ul dir="ltr" lang="en">
<li>English</li>
<li dir="rtl" lang="ar">العربية</li>
<li>English</li>
</ul>
<ul dir="rtl" lang="ar">
<li>العربية</li>
<li dir="ltr" lang="en">English</li>
<li>العربية</li>
</ul>
</body>
</html>
This code works perfect. You can do it just by applying css:
<!DOCTYPE HTML>
<html>
<style type="text/css">
ul {
direction: rtl;
max-width: 15em;
margin: auto;
}
.ltr{
direction : ltr;
}
.rtl{
direction : rtl;
}
</style>
<body>
<ul class="ltr" lang="en">
<li>English</li>
<li lang="ar">العربية</li>
<li>English</li>
</ul>
<ul class="rtl" lang="ar">
<li>العربية</li>
<li lang="en">English</li>
<li>العربية</li>
</ul>
</body>
</html>
"Why do the reversed direction indicators end up so far in the margin anyway?"
Because you have applied a max-width:15em to the ul. So the child list items will take full width of the parent and ended up in this way.
"Is there a way to apply dir tags to <li> elements and not mess up the list indicators?"
Workaround 1:
If you are not bothered about the inconsistent alignment of list indicators and need them to follow the direction, make the ul an inline element. without giving a specific width.
body {
margin: 50px;
}
ul {
display: inline-block;
max-width: 15em;
margin: auto;
}
<!DOCTYPE HTML>
<html>
<body>
<ul dir="ltr" lang="en">
<li>English</li>
<li dir="rtl" lang="ar">العربية</li>
<li>English</li>
</ul>
<br><br><br><br>
<ul dir="rtl" lang="ar">
<li>العربية</li>
<li dir="ltr" lang="en">English</li>
<li>العربية</li>
</ul>
</body>
</html>
Workaround 2:
Use list-style-position: inside property in ul. This property align the bullets with the text.
ul {
max-width: 15em;
margin: auto;
list-style-position: inside;
}
<!DOCTYPE HTML>
<html>
<body>
<ul dir="ltr" lang="en">
<li>English</li>
<li dir="rtl" lang="ar">العربية</li>
<li>English</li>
</ul>
<br><br><br><br>
<ul dir="rtl" lang="ar">
<li>العربية</li>
<li dir="ltr" lang="en">English</li>
<li>العربية</li>
</ul>
</body>
</html>
Related
I want to make a site for multiple-choice examination. The options must be in horizontal to save more space.
Minimal Working Example
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Lists</title>
<meta charset="utf-8" />
<style>
li.ans {
color: red;
}
ol.option {
}
ol.option > li {
list-style: lower-alpha;
}
</style>
</head>
<body>
<ol>
<li>
What is the capital of Japan?
<ol class="option">
<li>New York</li>
<li>Jakarta</li>
<li class="ans">Tokyo</li>
<li>Kuala Lumpur</li>
</ol>
</li>
<li>
Who was granted a Noble prize for discovering photo electric effect?
<ol class="option">
<li>Mike Tyson</li>
<li>Bill Gates</li>
<li>Donald Trump</li>
<li class="ans">Albert Einstein</li>
</ol>
</li>
</ol>
</body>
</html>
Output
Desired Output
Question
How to make horizontal ordered list for multiple-choice questions?
ol.option {
display: flex;
justify-content: space-between;
max-width: 500px;
}
Add above code to your inline style and be sure to learn more about flexbox for layout.
How do I stop the right menu dropdown child elements from going off the page? I know it is simple but don't know the CSS to change to get it to work. Any help is appreciated.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your page title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure-min.css">
<style>
ul{background-color: #4CAF50; width: 100%}
</style>
</head>
<body>
<div class="pure-menu pure-menu-horizontal">
<ul class="pure-menu-list">
<li class="pure-menu-item pure-menu-selected">Home</li>
<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
Contact
<ul class="pure-menu-children">
<li class="pure-menu-item">Email</li>
<li class="pure-menu-item">Twitter</li>
<li class="pure-menu-item">Tumblr Blog</li>
</ul>
</li>
<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover" style="float:right">
Test
<ul class="pure-menu-children">
<li class="pure-menu-item"">Email</li>
<li class="pure-menu-item">Twitter</li>
<li class="pure-menu-item">Tumblr Blog</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I want to have them so the start at the right hand side of the page but not go off.
thanks
With some tweaking and adding in your CSS, you can achieve this. See this JSFiddle, I also cleaned your code.
Add the class .right-menu to the most right menu to get this working.
.pure-menu-horizontal .right-menu .pure-menu-children {
left: auto; /* Position from right, not from left */
right: 0; /* Position from right, not from left */
}
Update
I used display: flex; to address the problem that Firefox's having to properly show the menu you wanted.
This is what you need to add:
.pure-menu-horizontal .pure-menu-list.pure-menu-list {
display: flex;
}
.pure-menu-horizontal .right-menu {
margin-left: auto;
}
See my updated JSFiddle. Read more about the handy flexbox property at Mozilla Developer Network.
For some reason my background color does not cover the entire page width on my mobile device, However, it looks fine on a regular desktop. I cannot find the problem.
Here is my style.css:
#media only screen and (min-width : 250px) and (max-width : 780px)
{
#pageHeader{
border:none;
background-color:"background-color:#F5F5DC";
}
#pageHeader nav {
height:300px;
width:100%;
}
#pageHeader nav ul {
padding-left:0;
width:100%;
}
#pageHeader nav ul li {
width:100%;
text-align:center;
margin-left:25px;;
}
#pageheader nav a:link, #pageHeader nav a:visited {
height: 60px;
padding: 5px 23px;
text-decoration: none;
dislay: block;
width:100%;
}
#pageHeader img{
width: 100%;
height: auto;
margin-bottom: 3%;
}
}
Here is my html:
!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style/style.css" type="text/css" media="screen" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us</title>
</head>
<body>
<div id="pageHeader" style="background-color:#F5F5DC">
<img src="style/logo.jpg" name="logo" width="431" height="94" alt=""/>
<br />
<br />
<nav>
<ul>
<li >Home</li>
<li style="margin-left:25px">All Products</li>
<li style="margin-left:25px">Blog Using Ruby</li>
<li style="margin-left:25px">User Javascript Page</li>
<li style="margin-left:25px">Submit Concerns using Perl</li>
<li class="active" style="margin-left:25px">About Us using HTML5</li>
<li style="margin-left:25px">Asp Help Pages</li>
<li style="margin-left:25px;"><img src="style/cartimage.jpg" name="shopping cart" /></li>
</ul>
</nav>
</div>
</div>
<h1 align="center">About Us</h1> </br> </br>
<div align="center" id="pageBody">
<table width="100%" border="0" cellpadding="6">
<tbody>
<tr>
<td> Code omitted </td>
</tr>
</tbody>
</table>
<div id="pageFooter">
Copyright |Admin Log In
</div>
</div>
</body>
</html>
Look that you have an extra tag when you close your
<div id="pageHeader" style="background-color:#F5F5DC">
If you are using more code, and floating some tags, dont forget to put the "overflow:hidden" in the container that "contains" the tags floated!
Remove the explicit height on the nav element - let the flow content dictate that rather than setting it explicitly. If you clear fix the floats in the unordered list using the CSS-
.group:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
(See http://css-tricks.com/snippets/css/clear-fix/)
The list will take the height of its contents.
You will also want to remove the margin left on the list item elements (these are at 100% plus the 25px margin), replacing it with padding-left and setting box-sizing: border-box on the list items (or just set the margin to zero when at a smaller viewport width as your design doesn't seem to need it).
The unordered list will need to look something like this-
<ul class="group">
<li>Home</li>
<li>All Products</li>
<li>Blog Using Ruby</li>
<li>User Javascript Page</li>
<li>Submit Concerns using Perl</li>
<li class="active">About Us using HTML5</li>
<li>Asp Help Pages</li>
<li><img src="style/cartimage.jpg" name="shopping cart" /></li>
</ul>
In either case you should remove the inline margin-left: 25px styles - you will find it much more maintainable to keep these externally in your CSS.
I have a simple list with list-style-type: lower-latin;
FIDDLE
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>
CSS
ul
{
list-style-type: lower-latin;
}
The problem is that by default, the list-style-type is right-aligned:
How can I make the letters left-align with css?
Add the property list-style-position: inside to your ul rule and modify the margin and padding if necessary: http://jsfiddle.net/jFxLB/
Try this code:
<html>
<head>
<style>
ul
{
list-style-type:lower-alpha;
}
</style>
</head>
<body>
<ul dir="rtl" style="text-align:left;">
<li>coursesweb.net</li>
<li>www.marplo.net</li>
<li>www.php.net</li>
</ul>
<ol dir="rtl" style="text-align:left;">
<li>Free courses</li>
<li>Tutorials</li>
<li>Lessons</li>
</ol>
</body>
</html>
Thanks.
I have the following HTML
<!DOCTYPE html>
<html>
<body>
<h1>My Great Web</h1>
<FONT SIZE = "5">
<ol>
<li> Foo. </li>
<li> Bar. </li>
<ol>
</FONT>
<br>
<hr style="width: 100%"/>
</body>
</html>
Which produce the following figure.
Notice that the horizontal line doesn't extend fully to the left. How can I do that?
You have to close your <ol>
<ol>
<li> Foo. </li>
<li> Bar. </li>
</ol>
The font tag is not supported in HTML5. Use CSS instead.
The font element is deprecated in HTML 4.01.
It might display poorly on some browsers
<html>
<body>
<h1>My Great Web</h1>
<div style="font-size:12px;">
<ol>
<li> Foo. </li>
<li> Bar. </li>
</ol>
</div>
<br>
<hr/>
</body>
</html>
Do this :
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0 ;
padding: 0;
font-size: 14px;
}
.container {
width: 80%;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<h1>My Great Web</h1>
<div class="list">
<ol>
<li> Foo. </li>
<li> Bar. </li>
<ol>
</div>
<br />
</div>
<hr />
</body>
</html>