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.
Related
I want that the div panel_pricing-table becomes an flexbox so that all elements in it stay in this box also when i make my window smaller. My problem is that the elements in the flexbox wont shrink, if i make my browser window smaller. The mistake is in CSS but i dont find it. Can you help me pls?
Screenshot of the problem
Here is my HTML:
html {
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
body{
background-color: #3a86ff;
}
.panel_pricing-table{
width:80%;
margin: 0 auto;
display :flex;
transform: translateY(70%);
background-color: aliceblue;
min-width: 40px;
max-width: 34200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Price Tiers</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="panel_pricing-table">
<div class="pricing-plan">
<img src="icons/icon1.png" alt="" class="pricing-img">
<h2 class="pricing-header">Personal</h2>
<ul class="pricing-features">
<li class="pricing-features-item">Custom domains</li>
<li class="pricing-features-item">Sleeps after 30 mins of inactivity</li>
</ul>
<span class="pricing-price">Free</span>
Sign up
</div>
<div class="pricing-plan">
<img src="icons/icon2.png" alt="" class="pricing-img">
<h2 class="pricing-header">Small team</h2>
<ul class="pricing-features">
<li class="pricing-features-item">Never sleeps</li>
<li class="pricing-features-item">Multiple workers for more powerful apps</li>
</ul>
<span class="pricing-price">$150</span>
Free trial
</div>
<div class="pricing-plan">
<img src="icons/icon3.png" alt="" class="pricing-img">
<h2 class="pricing-header">Enterprise</h2>
<ul class="pricing-features">
<li class="pricing-features-item">Dedicated</li>
<li class="pricing-features-item">Simple horizontal scalability</li>
</ul>
<span class="pricing-price">$400</span>
Free trial
</div>
</div>
</body>
</html>
you should learn responsive_html, it will solve the problem
A (in my opinion quite dirty) way to shrink the elements would be to use transform: scale(x) with x being smaller than 1.
What you probably want to do is use smaller font-sizes on smaller viewports.
A good starting point to learn more about responsiveness in css would be to read about media queries: mdn docs
Add this in your css file. You have to make your image size small
For my reference, i have kept the width 80 you can keep whatever you want
.pricing-img{
width:80%
}
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p><span style="color: #ffffff;">Through the program, you will use these disciplines which include:</span></p>
<ul><li>Neuroscience</li>
<li>Business management</li>
<li>Philosophy</li>
</ul>
<!-- Further down the page I have: -->
<ul><li>Increase your circle of influence</li>
<li>Inspire growth through authenticity</li>
<!-- However the background here is White and it works well with the text colour of dark blue -->
I have a website which has multiple colors as the background and I am putting text on the page.
I'm using "< spans color=#123456/ffffff >" for the text but with the bullet points it's not working correctly.
Ideally I want to add a CSS entry to say UL1 color = black and UL2 color = white. with the bullet points and text as either Black/White.
Currently if I use the span setting I can see the text as black/white but the bullet point is black. With a black background, you can't see the bullet point.
An example is:
Bullet Point 1
Bullet point 2
with a second list further down the page of:
White bullet point on black background
Second White bullet point on black background
Is this possible to do?
Thanks in Advance.
Pher.
Below code sample can help you to change color of buttet points as well text of list
.home {
color: red;
}
.products {
color: blue;
}
.about {
color: yellow;
}
.contact{
color: green;
}
.bullet {
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<ul class="bullet">
<li><a class="home" href="#">Home</a></li>
<li>
<a class="products" href="#">Products</a>
</li>
<li><a class="about" href="#">About Us</a></li>
<li><a class="contact" href="#">Contact</a></li>
<li class="dropdownLink">☰</li>
</ul>
</body>
</html>
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>
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.
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.