For instance;
<ul>
<li>
<div class="img1"><img src="img.jpg" /></div>
<div class="cs1">Some text</div>
<div class="cs2">other text</div>
<div class="button">Click here</div>
</li>
</ul>
In the code above, there are div elements within a list item (li). I have heard that this is not the correct usage. Can anyone confirm if this information is accurate?
Combining these two block elements is acceptable as they are both compatible in structure. For more information on the content allowed within <li>, refer to the Mozilla Documentation.
The W3C validator approves the use of divisions in HTML coding.
If you want to ensure the validity of your HTML code, you can also verify it using the W3C Validator.
Hopefully, this tool proves to be beneficial for checking your HTML code.
If you ever find yourself unsure, the best place to check is the HTML DTD. It may seem confusing at first glance, but it's a valuable resource.
Take a look at this example: http://www.w3.org/TR/html4/struct/lists.html#edef-UL
The DTD specifies that in UL (or OL), you can only have LI's (one or more).
<!ELEMENT UL - - (LI)+ -- unordered list -->
Now, looking at the LI element:
<!ELEMENT LI - O (%flow;)* -- list item -->
This means it can include any element from the 'flow' shortcut (zero or more). Click on the %flow link to learn about those elements.
You can also discover various attributes associated with each element through the DTD.
Indeed, developers frequently utilize it for creating CSS-friendly dropdown menus and various other purposes that come to mind.
According to the HTML syntax (regardless of version), it is perfectly acceptable to have a div element nested inside an li element, as confirmed by checking the specifications or using a validator.
However, from a non-syntactic perspective, the real issue arises when using a bulleted list (ul element) with only one item in it. While this may not be formally incorrect, it does appear to lack any logical purpose.
It's not necessarily incorrect, but the approach you take depends on your desired outcome.
For a dropdown menu to work properly, each div should be wrapped inside a <li> element,
similar to the example provided below.
For instance:
<ul>
<li><div class="img1"><img src="image.jpg" /></div>
<li><div class="content1">Some text here</div> </li>
<li><div class="content2">More text here</div> </li>
</ul>
In my grid view, I want to ensure that any text in a column that exceeds the width of the column will either wrap within the column or display on a new line. Below is the code for the grid view: <asp:GridView ID="GridView1" AllowSorting="True" runa ...
<div id="myUniqueCarousel" className="carousel slide" data-bs-ride="true"> <div className="unique-carousel-indicators"> <button type="button" data-bs-target="#myUniqueCarousel" data-bs-slide-to="0" className="active" aria-curre ...
When working with this jsFiddle, it appears that the jQuery .show() function does not behave as expected. Despite the documentation stating that it should revert CSS attributes to their original values, using .show(x).delay(x).hide(x) seems to cause the CS ...
Setting up a listener for the browser window, I use this line of code: $(window).resize(resizeObjects); However, during certain points in the web application cycle, I need to remove this event from window.resize. Can anyone provide guidance on how to det ...
Trying to achieve the unique box design shown below using CSS. I researched various resources, such as https://css-tricks.com/examples/ShapesOfCSS/, but encountered an issue with the purple border cutting edges. Attempted using an octagon shape without su ...
Exploring the functionalities of Bootstrap 4 and jQuery has been an interesting journey. I recently worked on creating a Navbar with 4 links, where the 4th link has a submenu that opens upon hover. However, I encountered an issue where this functionality o ...
I'm working on a layout where all elements can be viewed without the need for scrolling. Any panels that require more space should be scrollable. In the following example, I want the contents of main-left to be scrollable without stretching the entire ...
Working on a small Angular 5 project, I have a simple component that represents a food product shown below: [![enter image description here][1]][1] This component is nested within my main component. When this component is clicked, a quantity component/m ...
Looking to jazz up my JavaFX application with some custom CSS styling. Managed to link a stylesheet to my app using the following code: //Java code FXMLLoader loader = new FXMLLoader(MainApp.class.getResource("/path/to/fxml")); Scene sce ...
Hello, I am new to Django and I have been searching for tutorials on how to style Django forms without using Bootstrap. Is it possible to style Django forms using pure CSS without Bootstrap? If so, could you please provide some examples? I prefer not to u ...
Can someone please check to see if they can find what I'm overlooking? It's working perfectly in Chrome 10 but not in Firefox 4. The aim is for it to look like an iPhone keyboard. http://jsfiddle.net/pfqdr/ UPDATE: http://jsfiddle.net/pfqdr/6/ ...
<!DOCTYPE HTML> <html> <head> <title>Interactive Web Page</title> <link id="mycss" rel="stylesheet" href="mycss.css"> <script> function resizeText(size) { va ...
I am facing an issue while trying to access a blog post within the user module that has been posted by another user module. Here is my model: class details(models.Model): about_us = models.TextField(max_length=255) def __str__(self): retur ...
Is it possible to achieve unique grid layouts in Bootstrap 4? For instance, An irregular grid where the first column covers two rows, followed by two rows with three columns each |||||||||||||||| | | | | | | |_ |_ |_ | | | | | | |_____| ...
I am working on changing the background color of a cell based on its value. Currently, I am utilizing the following library: react-data-table-component Procedure: If the value is above 0, then the cell's background color will be red. Otherwise, th ...
I currently have a table that is organized with tbody elements to group rows together. In order to create a grid-like structure, I applied borders to each individual td element within the tbody. However, I also desire to show that the tbodies themselves ar ...
Trying to bring a unique design concept to life, courtesy of my talented graphic designer. However, this sleek look is proving to be quite the challenge as I navigate through bootstrap implementation. We are focusing on a call to action section that perfe ...
I need assistance with setting the background-color of this <ul> to none while also adjusting the link's background-color to black. Here is the CSS code I have used: a:link { background-color: black } And here is the HTML code snippet: <di ...
Hey there! I'm currently working on a button that includes a Font Awesome icon at the end of it. To display the icon, I'm using the :after pseudo-element on the button, which is working fine so far. The issue I'm facing is with the CSS tran ...
For my mobile website in Safari browser, I am utilizing the html5 video tag. While the video is functioning properly, I have encountered an issue with 'a' links overlapping on top of the video. These links have been added using absolute positioni ...