What is the best way to create this using html and css?

Struggling to recreate a design I was given:

https://i.sstatic.net/G4jFA.jpg

I currently have this setup:

https://i.sstatic.net/8GSRK.png

How can I insert vertical lines spanning the full height between the options?

<ul id="navigation">
    <li><a href="#">Log In</a></li>
    <li><a href="#">VIP Membership</a></li>
    <li><a href="#">Best Players</a></li>
    <li><a href="#">Administrators</a></li>
    <li><a href="#">Forums</a></li>
</ul>

#navigation { 
    float: right;
    padding-top: 8px;
    font-size: 18px;
    font-family: Arial;
}

#navigation li { 
    padding: 2px;
    margin: 0;
    float: left;
    list-style: none;
}
htmlcssmenuline

Answer №1

Your query pertains to creating a border line of full height between the options with the style border-left: 1px solid #666666

Link to Fiddle Example

#navigation
{
    width: 100%;
    list-style-type: none;
    background: #000000;
    text-align: center;
}
#navigation li
{
    display: inline-block;
    height: 70px;
    line-height: 70px;
    border-left: 1px solid #666666;
}
#navigation li:last-child
{
     border-right: 1px solid #666666;
}
#navigation li a
{
    text-decoration: none;
    color: #FFFFFF;
    padding: 10px 15px 10px 15px;
    font-family: arial;
}
#navigation li a:hover
{
    color: red;
}

Answer №2

One way to achieve this effect is by utilizing the CSS border property. You can experiment with the following code snippet:

#menu li:not(:first-child) {
  border-left: 1px solid gray;
}

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

Tips for utilizing a file name when using the move_uploaded_file function

I have a mission to produce a video and then transfer the video onto a file server. I am capable of creating the video, which is stored as a BLOB, and converting it into a file format. After that, my aim is to upload this file onto the server. The html a ...

phphtml

Struggling with implementing the use of XMLHttpRequest to transfer a blob data from MySQL to JavaScript

I have a blob stored in my local WAMP64/MySQL server that I need to retrieve and pass to an HTML file using XMLHttpRequest. I know I should set responseType="blob", but I'm not sure how to transfer the blob from PHP to JavaScript in my HTML file. Any ...

javascriptphphtmlmysqlajax

Tips for maintaining interactivity after a page refresh

$(document).ready(function () { $("#2").click(function () { $("#content").load("{% url 'about' %}"); }); $("#3").click(function () { $("#content").load("{% url ...

javascripthtmljqueryjquery-uijquery-plugins

Seamless border that flows through several elements

I'm currently working on integrating line numbers into a code snippet. I've managed to get it functioning, but there's an issue with the border between the line number and the code. Instead of being continuous, there are small, unsightly gap ...

cssborderline-numberscss-counter

JavaScript and HTML - specify the location in the html document where the JavaScript script will be displayed

I'm a beginner when it comes to JavaScript. I am trying to make sure that my HTML page remains unchanged while JavaScript text is displayed in a specific location without refreshing the entire page. To trigger a JavaScript function via a button on a ...

javascripthtml

Expanding size on hover without affecting the alignment of surrounding elements

Imagine there are 10 divs on the page styled as squares, collectively known as the home page. Among these 10: 3 divs belong to the .event1 class, 5 divs belong to the .event2 class, and 2 divs belong to the .event3 class. <div class="boxes event1"> ...

javascriptjqueryhtmlcsscss-transforms

Issue with CSS background scaling bug

Is it possible to make the cloud background scale within the box? The current issue can be viewed here: I have tried various methods to resolve the problem where the background scales even beyond the limited box. However, I could not identify the solutio ...

htmlcssanimationbackground

Is it possible to display a variety of color schemes in just one console.log()?

My task involves working with an array of hexadecimal values, "colors": ["#d5dd90","#e6bb45","#ef9770"] To log these out in different colors, I used the following method: colors.forEach((value)=>{ console.log(& ...

javascriptcssconsolestylingconsole.log

failure in data transmission causing upload issues

Is there a way for me to prevent the character > from causing issues? I have a combo box with an option listed below. I attempted to replace > with &gt;, but it still isn't uploading correctly. <select name="Category3" id="Category3"> ...

htmlspecial-characters

Issue with grid element not properly scaling using the transform:scale property

I have encountered an issue where a simple grid, with the gaps set to 0, displays a small line when I apply the transform:scale(1.5) css property. I am unsure if this is a bug or if I am doing something incorrectly. Interestingly, the result in Firefox dif ...

htmlcssgoogle-chrome

Paths of least resistance: Absolute URLs for assets in CSS

What could be causing the absolute path for this asset (the font) not to work while the relative path does? <body> hello friend </body> <style type="text/css"> @font-face { font-family: 'Gilroy'; /* src: ur ...

cssreactjs

submitting two contact forms using ajax

Looking to enhance my knowledge of form design... Hello there! I'm currently working with two contact forms on the same page, both utilizing ajax for submissions. Each form functions properly when standalone, but as soon as I integrate them togethe ...

phpjqueryhtmlajaxforms

I am unable to utilize the map function as it results in a TypeError: The property 'map' is undefined and cannot be read

I recently delved into the world of "REACT" in order to work on the front-end of my own project. I encountered a problem for 2 days with the map function while getting data from my back-end and saving the IDs in the Cuartos array. I couldn't figure ou ...

javascriptjavahtmlajaxreactjs

Issues with implementing @font-face on a singular font

I've encountered an issue while setting up a website for a client concerning the fonts. Most fonts are displaying correctly, but there is one font, "chunkfive", that is not working as expected. The problem becomes more severe in Internet Explorer wher ...

htmlcssfontscross-browserfont-face

The initial menu option stands out due to its unique appearance, created using the :first-child

I am currently designing a website menu and I would like the .current-menu-item - current item, to have a different appearance. However, I want the first item in this menu to have rounded corners (top left, bottom left). How can I achieve this using the :f ...

htmlcsscss-selectors

Can a ng-repeat value be assigned to a text input field?

<tr ng-repeat="person in users" ng-class="{'chosen': person.AdmissionID == currentSelection}" ng-click="selectRow(person.AdmissionID)"> <td>{{person.AdmissionID}}</td> <td>{{person.AdmissionNumber}}</td> ...

javascripthtmlangularjs

Creating CSS styles for mobile devices, such as smartphones and tablets

Hey there! I've been using CSS for developing desktop websites for quite some time now, and I'm eager to expand my skills to build websites that cater to a variety of devices like phones, smartphones, tablets, and even consoles with web browsers. ...

css

Use Jquery to modify the value of a data attribute when a key is released

When I am adding some HTML to a document, one part includes a text input field. My goal is to update the value of the closest li element's data attribute whenever information is typed into this input field. Unfortunately, this functionality is not cu ...

javascriptjqueryhtml

Troubleshooting Problems with CSS `transform` in JQuery UI's `Slide` Transition

While implementing JQueryUI's slide transition on an element with a CSS transform, I encountered an issue where the top half of the element gets hidden during the animation. Is there a way to tweak either my JQueryUI animation or CSS to avoid this pro ...

javascriptjqueryjquery-uicssangularjs

Implementing automatic page breaks in Laravel using the mpdf libraryLet me know

I am attempting to automatically add a page break if the data exceeds 10. I am using mpdf in conjunction with Laravel and Vue. Below is my CSS code: <style> div.breakNow { page-break-inside:avoid; page-break-after:always; } </style> This is t ...

phpcsslaravelvue.jsmpdf