Three-column navigation menu featuring visuals

I'm currently working on the stylesheet for a website and trying to figure out the most effective way to design the navigation menu. Here's how the menu is structured:

There are double vertical lines between column 1 and 2, as well as between column 2 and 3. These lines will probably need to be an image because of their style.

My question is this:

All of these links are part of one unordered navigation list semantically. However, I can't seem to find a CSS-only way to create this list that will function properly in IE. The use of images between the list items is adding to the difficulty. Is there a cleaner solution to this?

My second idea was to create 3 columns and place a list in column 1 and column 3. Yet, this still seems complicated with the image dividers. I considered using li:after to insert the images, but IE7 doesn't support the "content" property.

Currently, it appears that the simplest way to construct this is without using lists. However, I am concerned about losing proper semantics. Is there a better alternative that I may be overlooking? The layout is quite tabular, so I could potentially make it a table . . . :)

Thank you!

csslistnavigation

Answer №1

For the customization of links, simply substitute the names and images in the code provided below:

   <style type="text/css">

   ul{
     width:400px;
 height:200px;
 }
   ul li{
 border-top:1px solid gray;
 border-bottom:1px solid gray;
 display:block;
 height:99x;
 width:100px;
}
  .left{
    float:left;
    }

  .right{
    float:right;
   }
  .second{
margin-top:100px;
margin-left:-100px;
   }
   .image{
background:red;
border-left:3px double gray;
border-right:3px double gray;
display:block;
float:left;
height:200px;
width:194px;}
    </style>


    <body>
      <ul>
    <li class="left"><a href="#">Custom Link 1</a></li>
        <li class="left second"><a href="#">Custom Link 2</a></li>
        <li class="image"><a href="#">Custom Link 3</a></li>
        <li class="right second"><a href="#">Custom Link 4</a></li>
        <li class="right"><a href="#">Custom Link 5</a></li>
      </ul>
    <body>

If you have any concerns or need further assistance, feel free to reach out. Best regards!

Answer №2

In my opinion, creating a single unordered list (UL) with four list items (LIs) and using absolute positioning on the first and last Li items, perhaps labeled as "events" and "about us," would be a great approach. You can easily achieve this by leveraging pseudo selectors like :first-child and :last-child.

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

Best practices for embedding Internal CSS and rectifying missing classes in mobile view for email templates on Gmail

I am currently facing an issue with my email template. While it works perfectly fine in Outlook web and the Outlook app, Gmail web and Gmail's internal CSS strip away certain classes automatically. In an attempt to hide the pre-header on mobile devic ...

htmlcsshtml-email

Make sure that the contents of the div are all displayed on a single line

After searching for solutions here, I attempted the suggested code but unfortunately, it did not produce the desired outcome. My goal is to have all the alphabet letters appear on a single line. Kindly disregard my utilization of inline elements: <div ...

htmlcss

Troubleshooting inactive CSS hover animation

Greetings! I'm facing an issue with a CSS hover animation. Here are two demos I've created: In the first DEMO, the animation works perfectly. However, in the second DEMO, it doesn't seem to be functioning. On the second demo, there are two ...

javascriptjquerycss

What is the process for specifying a specific font family in CSS?

Despite setting my text to font-family: Times New Roman, I'm seeing a different font in my Chrome browser. Here is the relevant HTML code: <p style="color:#F17141;font-size: 120px; font-family: &quot;Times New Roman&quot; ; font-weight: b ...

htmlcss

What is the best way to apply a CSS class to a div element without affecting its child elements using JavaScript?

Currently, I am using JavaScript to add and remove a CSS class through a click event. Within my div structure, I have multiple similar divs. While I can successfully add and remove the class from my main div, I am facing an issue where the class is also ap ...

javascripthtmlcss

Unable to view image when using material-ui CardMedia component

Hello, I've encountered a problem with rendering an image in my application. Let me explain the issue in a simplified manner. So, I have a card component (MyCardComponent) where I need to pass a string prop containing the image file location. The goa ...

javascriptcssreactjsmaterial-ui

The footer seems to be losing its stickiness and not staying at the bottom when I

My goal is to create a sticky footer for my webpage. Once you click the add new sports button, a drawer slides out and the footer remains fixed at the bottom. However, as I scroll down the page, the footer moves up instead of staying in place. I have tried ...

javascripthtmlcssreactjsmaterial-ui

The use of the picture element, with its ability to support various image formats and sizes, must always include

Recently, I came across a VueJS template that closely resembles HTML but has the following structure: <picture> <source type="image/avif" :scrset="avif" /> <source type="image/webp" :scrset="webp" ...

htmlcss

Retrieve the bounding rectangle of a div that has the CSS style `display: contents` using the getBoundingClientRect

My objective is to apply styling and obtain the bounding box of an entire "row" within a CSS grid, including features like highlighting when hovering over it. To achieve the styling aspect, I make use of the display: contents property, so that the styles ...

javascripthtmlcss

When importing both shared-lib and MUI in my ReactJS application, I noticed that my custom MUI styles were being overwritten by the MUI styles

I have developed a shared library using React and Storybook. Within this library, I am utilizing the MUI V5 Button and making some style modifications using CSS modules. I executed the "build&pack" script in my library, which generated a tgz package that ...

cssreactjsmaterial-ui

I'm looking to create a chart similar to this using Bootstrap 4 - any advice on how to

Is there a way to implement animations in this chart? https://i.sstatic.net/YpabJ.png ...

htmlcsschartsbootstrap-4

Using Bootstrap to shift columns

I've been attempting this task with no success. My goal is to create 5 columns within Bootstrap, each with a width of "2". I also want to add an offset of "2" between the second and third columns. The desired outcome would be: 2 Width Pricing Table - ...

htmlcsstwitter-bootstrap

The issue persists with the flex item not occupying the full height of the screen despite using "align-items: stretch"

When using flex-direction: row; on the body element, I expect that setting align-items: stretch; will vertically stretch the child item to fill the screen height. However, for some reason this is not happening. Below is a simple example of what I am tryin ...

htmlcssflexbox

jQuery functions correctly within jsfiddle, yet it encounters issues when utilized within WordPress

I've been experimenting with a jQuery script to grey out the screen. While it works perfectly on my jsFiddle link provided below, I'm having trouble getting it to work from within my WordPress plugin. Check out the working script on my jsFiddle ...

javascriptjqueryhtmlcsswordpress

Trouble with jQuery delay in updating the CSS attribute while using fadeIn

After writing a simple JQuery code, I noticed that every time I click on 'eat', the animation lags. Is there any way to preload this animation for smoother performance? The #custom_menu element is a full-page section with a fixed position (simil ...

javascriptjquerycss

What is causing my css elements to appear larger compared to other instances?

As someone who is not a designer, I find myself doing a lot of cutting and pasting for my side hustles. I believe many others can relate to this experience. Currently, I am working on a personal project that involves using tailwindcss, appwrite, and svelte ...

csstailwind-cssdaisyui

Difficulty arises when trying to merge a dropdown menu with a horizontally scrolling menu

I am attempting to include a dropdown menu within a horizontally long menu. In order to achieve this, I have merged the script for displaying a scrollable menu with that of a dropdown menu. However, in doing so, the dropdown menu does not pop out from the ...

jquerycssmenu

Is there a possibility of encountering problems when collapsing table rows versus individual cells?

By using the css visibility property, you have the ability to set it to collapse for specific table rows. Nevertheless, there are two methods to accomplish this task. The first is to implement the logic on the <tr> element: thead > tr { visi ...

htmlcsshtml-table

Unable to show inline form within a ul element

I had a ul list with regular text inside the li tag. When I attempted to show it inline, it worked perfectly. However, as soon as I replaced that text with a form, I could no longer get it to display inline. This was my HTML code: <ul class='tes ...

htmlcss

Is the space-between property not delivering the desired spacing?

I am trying to achieve equal spacing between list items, and I attempted the following code. ul { list-style-type: none; display: flex; justify-content: space-between; } However, it seems that this approach is not working as expected. I am confused ...

htmlcssflexbox