I need help with adding a dotted line between the Names and Prices in my HTML menu. Can someone guide me on how to do this? I'm a bit lost, haha. You can check out the menu here.
I know CSS is used for styling, but specifically, how can I make the dotted line span between those two elements?
Thanks for your assistance! =)
<style type="text/css">
.menugroup{
width:100%;
}
.itemlist{
list-style-type: none;
}
.separator{
margin: 5px;
width:50%;
border-bottom: 1px dotted #000
}
</style>
<div class="menugroup">
<ul class="itemlist">
<li>product name<span class="separator"></span>price</li>
</ul>
</div>
Starting with your structure, you have a series of lists with headers above each one, accompanied by notes above and/or below. Here is the recommended markup:
<h2>Egg Platters</h2>
<div class="note">Served With Home Fries & Toast</div>
<ul>
<li><span class="item">Two Eggs Any Style</span><span class="separator"> </span><span class="price">2.75</span></li>
(etc.)
</ul>
<div class="note">Add On Any Two Slices ...</div>
<div class="note large">Add Coffee for $0.50 with ...</div>
The use of class="price" is appropriate. However, consider naming classes based on their purpose (like "note"). Using headings can eliminate the need for additional styling to make text bold.
To enhance styling, add a <span class="separator"> for customizable spacing between items and prices. You can style it using properties like:
.separator {
border-bottom: 1px dotted #333;
}
Additionally, as suggested by ClarkeyBoy's comment, limiting the overall width can improve readability. TripWired's link provides further suggestions on structuring content effectively.
Did you take into account a solution similar to this?
In usual circumstances, I would steer clear of using tables...but in this particular scenario, a table might be the most suitable option.
Avoiding dotted lines is crucial as they can severely impact usability (a page filled with dotted lines can create clutter and make it difficult to follow each line - you may even find yourself using your finger on the screen as if navigating through a menu).
Instead, consider utilizing a table with alternating row colors, which could give off a visually appealing look. Implement a rollover state that highlights the entire row to clearly indicate to users the costs of each item.
You can find an excellent tutorial along with code examples here (check out example 3):
The code is located at the bottom of the page and is relatively easy to copy and paste from your end.
Best of luck!
To create a unique design, I plan to utilize a background x repeated .gif across the entire line while concealing it using a white bg color for the float left item name and float right item price.
.line{ clear:both; margin-bottom:15px; background:transparent url(img/common/dot.gif) repeat-x scroll 0 0; height:22px; } .label{ background-color:#FFF; padding-right:2px; float:left; } .price{ float:right; background-color:#FFF; padding-left:2px; }
<style>
table th, td{
border-bottom: 2px dashed #AAAAAA;
}
Snippet of HTML code:
<h2>Latest Interior Design Trends</h2>
<table class="furniture" border="1">
<tbody>
<tr>
<th>Type</th>
<td>Sofa</td>
</tr>
<tr>
<th>Color</th>
<td>Gray</td>
To insert a dash between entries, you can include an additional column with '-' or any similar symbol of your choice.
Using the MiU component "Expansion panel", I encountered an issue. By default, when the user hovers over the panel, the cursor is set to pointer. I attempted to change it to a default cursor, but my modification did not work. The code for my component is ...
Having trouble with aligning code within floated divs? In my left div, a span and image are stuck at the bottom left, while in the right one, text is fixed to the top-right. Check out how it looks currently. If you can provide some guidance on fixing thi ...
Seeking a solution to automatically generate a DIV when our products do not fill up the entire row, using the MixItUp jQuery filter and sort plugin. Is there a JavaScript code that can detect the empty space in a row and create the necessary div to mainta ...
I need help with disabling select options based on specific time instances. For example, I want the user to provide specifications by 6:00 am in order to use the system at 10:00 am, ensuring there is a 4-hour gap between the two times. So, after 6:00 am, t ...
I am facing an issue with a button that, when clicked, adds a new media item to a list. The problem is that it uses unique IDs that end up getting duplicated. I am looking for a solution to add some kind of anonymous number to the ID to prevent duplication ...
My goal is to anchor the Footer to the bottom of the page. I attempted to achieve this by using Absolute positioning in CSS, as suggested in similar discussions. However, the footer seems to be behaving like a Fixed element rather than Absolute. html, b ...
I am working on creating a search box within a navbar and encountering an issue with the border style: https://i.sstatic.net/DCMpX.png My challenge lies in achieving consistent borders - I aim for the icon to have the same border as the "Search..." box w ...
On the Bootstrap documentation page for buttons found at this link, there is an issue with toggling adjacent buttons where the box-shadow overlaps from one button to another. https://i.sstatic.net/p8FKd.png The CSS code for the box shadow on each button ...
I've managed to iron out all the kinks on my current website, but I'd like to have an error message displayed whenever one occurs instead of just encountering an HTTP 500 error page. After some online research, I believed that adding these two li ...
I'm struggling to utilize v-for in order to create multiple div elements, but no matter how I attempt it (even trying to iterate over a list), the v-for doesn't seem to function properly and always turns the line into a comment when executed. No ...
I currently have a collection of button images with different hover effects specified like this: <img src="home.PNG" onmouseover="this.src='homemo.PNG'" onmouseout="this.src='home.PNG'" /> My goal is to make them scroll down to ...
For a while now, I've been using ng-repeat to create tables. However, I have come across an issue that I've never encountered before. ng-repeat="users in [].constructor(10) track by $index" Essentially, all the elements generated by ng-repeat a ...
Currently, I am in the process of developing a project that involves users. In order to display all users, I am executing a query on an SQL database. After styling the interface, I have added an input element beside each user, which initializes at zero. Ad ...
Is it possible to create an array that contains references to the fields in a form (such as input, textarea, etc.) and then run a function on them in my code, like addClass()? To clarify my objective - I am looking to add a red border color to any invalid ...
My current challenge involves integrating fullCalendar into a Bootstrap tab. It works perfectly when placed in the active tab (usually the first tab), however, when I move it to another tab that is not active, the calendar renders incorrectly upon page loa ...
How can I set a fixed height for my HTML table on a webpage so that if it exceeds the height, a vertical scrolling bar is automatically displayed? Any assistance would be greatly appreciated. Thank you. ...
I am currently developing a web app on the Tizen platform. Within my HTML5 code, I have a div element with an image set as its background. In certain scenarios, I need to display random text within this div multiple times. The text can vary in size and ma ...
Struggling to determine the device-height after setting predefined device-widths such as: For Extra small devices Phones (<768px) For Small devices Tablets (≥768px) For Medium devices Desktops (≥992px) For Large devices Desktops (≥1200px) I& ...
I recently updated the login menu for my Admin panel. Initially, the login page was named login.php, but I decided to change it to index.php. Even though I made sure to update the action from login.php to index.php, when I click on the login button it st ...
I created a weather prediction web application using p5.js. It functions perfectly on my local server. However, I keep encountering this issue on the GitHub page: Mixed Content: The page at '' was loaded over HTTPS, but requested an insecure ...