Which is better for website footers: tables or nested ULs?

I am trying to create a footer with a specific layout that consists of item titles and images. The design I have in mind includes three columns, where the middle one is larger than the sides. The middle column should be 550px wide, while the side columns should be 225px each. The top title needs to be centered within the middle column, while the items below are displayed in two columns.

Additionally, I want the footer to have some styling elements such as separating lines between blocks and above and below the content. The fixed width of the footer will be set at 900px, but I plan to use a different design for smaller screens or mobile devices.

As someone new to coding, I'm unsure whether I should use nested ULs or a table to achieve this layout. Any guidance on the best approach would be greatly appreciated. Thank you!

htmlcss

Answer №1

Avoid using tables for layout purposes; instead, opt for ULs and headers to structure your content. Here's a simple example:

<ul class="column">
    <li>Item</li>
</ul>
<div class="column column-2x">
    <header>Title</header>
    <ul class="column">
        <li>Item</li>
    </ul>
    <ul class="column">
        <li>Item</li>
    </ul>
</div>
<ul class="column">
    <li>Item</li>
</ul>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to split a Bootstrap col-md div in half vertically?

I am attempting to create the following layout using the Bootstrap grid system. Within a container <div class="row">, there are two divs occupying half of the width each (<div1> and <div2>). The height of <div1> will vary based on t ...

csstwitter-bootstrap

In my current Next.js project, I tried setting up a new [collectionId].jsx file within the pages directory, but I am facing issues with getting

In my current next.js project, I recently created a file named [collectionId].jsx within the pages directory. Interestingly, I noticed that Tailwind CSS does not seem to work properly with this file. However, when I renamed the file to [collectionId].js wi ...

cssreactjsnext.jstailwind-css

The radio button becomes unchecked when moving to the next fieldset

While developing a dynamic page using PHP and Laravel, I encountered a situation where I needed to add an additional radio button option to each card. Below is the code snippet for the card in question: <div class="card" style="margin:10p ...

htmlformstwitter-bootstrapdom

Having trouble with looping the CSS background using JavaScript in CodePen

Can someone help me with looping through CSS background images? Why is the background not changing in this code example: http://codepen.io/anon/pen/dGKYaJ const bg = $('.background').css('background-image'); let currentBackground = 0; ...

javascriptcssloops

HTML structure consisting of a 3 by 3 grid

Creating a 3x3 grid with cells that have varying heights depending on content is proving to be challenging. Except for the cells marked with red arrows, the rest of the grid has fixed height in pixels. I attempted to build a 3x3 grid using divs to experi ...

javascriptcsshtmlstyles

Addressing the spacing and alignment issues within the progress bar

I need some help with my Angular app. I am currently working on creating a progress bar, but I am facing some issues with the alignment of the bars. Here is the code snippet that I have used: CSS: .progressbar { position: relative; height: 56px; mar ...

htmlcssangularbootstrap-5

What is the best way to show an HTML response from an API call on the DOM?

After making an API call, I receive the following HTML response and I am trying to display it on the DOM as actual HTML tags, rather than just showing text with HTML tags. API response: <strong>Hello</strong> Current DOM rendering: <str ...

htmlreactjsfrontend

Cannot populate Kendo Menu with images due to dataSource imageUrl not recognizing the content

I have integrated Kendo controls into my application, specifically a Menu control with a datasource in my controller. Currently, I am passing the relative path of URL for imageUrl. However, as the application has grown, there are multiple calls being made ...

cssangularjskendo-uiiconskendo-menu

The layout of my CSS grid item is slightly off, but the overall result is nearly accurate

Exploring the realms of CSS grid on my website has led me to create an intriguing "add friend" menu design. The layout I am aiming for is depicted in this visual representation: Here is a snippet of the HTML and SCSS code being used: .container { ...

htmlcsslayoutcss-grid

How can JSON data objects be transmitted to the HTML side?

I created a JSON object using Node JS functions, and now I'm looking to transfer this data to the HTML side in order to generate a table with it. However, I'm encountering difficulties sending the JSON object over because of my limited experience ...

javascripthtmlnode.jsexpress

Dynamically remove the underline tag from a table cell

Within my HTML, I've inserted the code below for a cell: cell.innerHTML = "<u>View All</u>"; In my onclick event for the cell, I have this code (for example, it's based on a condition where I structure the content as shown below, no ...

jqueryhtml

Show a tweet by its identification number

Is there a way to show a tweet by its unique id? For instance, if I have the id 876126300649525249, can I display the actual tweet on my website? Does anyone know if this is achievable? ...

htmlnode.jstwitter

Tips for utilizing ng-model in an Angular application

<input type="search" placeholder="{{'COMPONENT_PROPERTIES.SEARCH_ICON' | translate}}" ng-model="icon.name" list="classIcon" ng-change="changeFn(icon.name)"> <i class="{{$select.selected}}"></i> &nbsp;&nbsp; {{$s ...

angularjshtml

Troubleshooting: Css navbar alignment

How can I center the navigation bar both horizontally and vertically? I've tried various methods but nothing seems to work. Here is my HTML: <section class="navigation" ng-controller="NavController"> <div class="nav-container"> ...

htmlcss

Adjust the background color of alternate elements

I am looking to customize the background colors of every other element within the structure provided below: <div class="dets"> <div>Simple Layout</div> <div>Few Pictures/Links</div> <div>Element Uniformity</div> ...

jqueryhtmlcsscss-selectors

Tips for creating multiple popups using a single line of JavaScript code

I am new to JavaScript and I am attempting to create a popup. However, I am facing an issue in opening two divs with a single line of JavaScript code. Only one div opens while the other remains closed despite trying various solutions found on this website. ...

javascripthtmlcsspopup

Creating a webpage with a left panel and draggable elements using JavaScript/jQuery

As someone new to Javascript/jQuery, I have been given the task of creating a web page with elements in a "pane" on the left side that can be dragged into a "droppable" div area on the right side. The entire right side will act as a droppable zone. I am u ...

javascriptjqueryhtmlcss

Show me all the posts from the database in a single row

When attempting to display all the entries from my posts table in the database, I noticed that only one entry is showing up. If I try to duplicate the code, it simply repeats the same ID from the posts table. <div class="row"> <?php $query ...

phphtml

Recreated using CSS and JavaScript: iOS "Background Open" Animation

I am currently seeking a method to replicate the iOS Safari animation that occurs when opening a link in the background (the item jumps up and quickly animates to where it can be accessed) - This same animation is also seen on OSX Safari's "save to re ...

javascriptioscssanimationweb-applications

What is the best way to retrieve the initial <ul> element from a JavaScript document?

Just to clarify, I'm looking to target a specific div with a class and the first <ul> from a document (specifically in blogger). Currently, I have a JavaScript function that grabs the first image and generates a thumbnail as shown below: //< ...

javascripthtml