Having trouble rounding the corners of my navigation bar. When I use border-radius: 15px;, it rounds all the corners of the <a> tag, but I only want to round the corners of the <li> tags to adjust the margins of the whole toolbar.
Check out this fiddle for reference.
Thank you!
EDIT:
I only want the "Home" and "Contact" items to have rounded corners.
Here is another option:
ul#list-nav li {
border:2px solid blue;
float:left;
overflow:hidden;
}
li.first{
border-top-left-radius:15px;
border-bottom-left-radius:15px;
}
li.last{
border-top-right-radius:15px;
border-bottom-right-radius:15px;
}
In order to round the corners of the initial and final li elements, experiment with
:first-child and :last-child selectors
View the interactive demonstration here: http://jsfiddle.net/HYhBe/33/
To enhance the design, introduce two new classes - one for rounding the left corners and another for rounding the right corners. Then, apply these classes to the first and last elements respectively.
Check out this Fiddle for a live example
.round_left {
border-radius: 15px 0 0 15px;
}
.round_right {
border-radius: 0 15px 15px 0;
}
<ul id="list-nav">
<li><a href="#" class="round_left">HOME</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">THE WAY WE WORK</a></li>
<li><a href="#" class="round_right">CONTACT</a></li>
</ul>
Updated link: http://jsfiddle.net/HYhBe/25/
When styling ul#list-nav li, remember to use float:left and overflow:hidden;
A reminder that li is a block level element, so you can remove display:inline from the code.
ul#list-nav li {
border-radius: 15px;
float:left;
overflow:hidden;
}
-- New and improved question update --
To enhance the appearance of 'ul#list-nav li a', make sure to eliminate the border-radius property from the existing code and include the following lines in your CSS stylesheet:
ul#list-nav li:first-child a{ border-radius: 15px 0 0 15px;}
ul#list-nav li:last-child a{ border-radius: 0 15px 15px 0;}
Are there methods available in JavaScript or any JavaScript framework to determine the position within a textbox? For example, being able to identify that figure 1 is at position 2 and figure 3 is at position 3. Figure 1 Figure 2 ...
I've run into a challenge while attempting to position a sidebar over page wrappers. The issue with absolute positioning arises when the sidebar needs to align with the corner of the blue header. I have contemplated using JavaScript to maintain its cu ...
The scenario above demonstrates that when hovering over the dropdown menu, it displays a submenu. However, I want the submenu to be displayed after clicking on the dropdown text. Could anyone provide assistance on how to change the hovermenu to a clickabl ...
Implementing: <html> <head> <style> p { font-size: 16px; } .font-size-16 { font-size: 16px !important; } </style> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspend ...
View the problem screenshot hereWelcome to my first stackoverflow post, please be gentle if I make any mistakes. I'm currently working on a project for a course using Bootstrap 4. The issue I'm facing pertains to the navbar losing its full width ...
When attempting to create a form, I encountered an unexpected behavior. <form> <input type="text" autocomplete="username" style="display:none;"> <label for="password">password:</label><input type="password" autocomplete="c ...
When I click the Add Dependent link button, I wanted the scroll bar to automatically scroll to the bottom, and it does just that. However, there is a small issue after the postback where the text "Please fix the following problems:" briefly appears, even t ...
Here is the code snippet I have: <div className="center"> <TextField variant="outlined" className="manualUserFollowTxt" required id="manualUserFollowTxt" label="Username" name="username" autoComplete="username" a ...
Is there a way to retrieve the custom attribute "location" of an option selected from a datalist and display it? I understand that for a select element we can use selectedIndex, but how can this be achieved with datalist? <!DOCTYPE html> <html&g ...
I have a custom script that tracks the current position within a menu and applies an active class to it. However, I require specific rules for the ID contact_form. Specifically, I need to add 1000px to the scrollTop value for that particular ID location. ...
I am attempting to display captions beneath the thumbnail slider in list format. However, the text is not appearing unless I switch the <ul> tag to <div>. You can locate the thumbnail here. It is the first thumbnail. Much appreciated. ...
I am encountering issues while attempting to exhibit an array of images by their source link using ngFor. It seems like there are errors hindering the functionality! Below is the image HTML code located within my card component: <div class="Session-Pa ...
What are some recommended strategies for optimizing webpage loading speed? What key factors should be taken into consideration? ...
''' 29/11/2021 ''' I have a code snippet that retrieves dates from a table on a webpage, but it also fetches other values along with the date. I am looking for a way to extract just the d ...
I am currently in the process of developing a web-based application using Bootstrap. My goal is to save a .aspx page as an HTML file within my application. Upon writing the code: using System; using System.Collections.Generic; using System.Linq; using S ...
I'm trying to align an image in the center of the screen, but I've run into some trouble. Typically, this is easy by setting the width of a div and using margin: auto;. However, I also need the div to have the position: fixed; property, which see ...
Let me share the code I've been working on: <!DOCTYPE html> <html> <head> <base target="_blank"> </head> <body> <div style="border: 2px solid #D5CC5A; overflow: hidden; margin: 15px auto; max-width: 800px; ...
I understand that it is possible to detect if a key has been pressed and identify which key was pressed using JavaScript. In order to check if a key is down or pressed, jQuery can be utilized with ease: $( "#some id" ).keydown(function() or $( "#m" ). ...
As I was planning to incorporate SVG for the numerous icons on my website, concerns have been raised about the potential impact on site speed. With multiple search results on each page and several icons per result, another developer advised against using S ...
After working with socket.IO and starting off with a chat example, my chat service has become quite complex. The foundation of my code is from the original tutorial where they included <script src="/socket.io/socket.io.js"></script> <scrip ...