Menu Tabs with Rounded Edges

Seeking help to round the corners of a tabbed dynamic menu using Drupal and the dynamic-persistent-menu module. The code provided below is almost perfect, with 99% accuracy. View the current state of the menu here: . Can anyone assist in achieving the remaining 1% perfection and ensure that both navi_top_right.png and navi_top_left.png appear simultaneously?

Below is the HTML I have utilized to create an active menu element:

  • VPS Servers

    • After numerous attempts with different CSS styles, it seems like I need to turn to the community for assistance!

    Here are the relevant CSS definitions currently being used:

    a.dynamic-persistent-menu-menu-item { background: url(images/backgrounds/business/navi_top_left.png) top left no-repeat; }

    .dynamic-persistent-menu-menu li.active, .dynamic-persistent-menu-menu a:hover {

    background: #093056 url(images/backgrounds/business/navi_top_left.png) top left no-repeat;

    }

    .dynamic-persistent-menu-menu-item a.active {

    background: #093056 url(images/backgrounds/business/navi_top_right.png) top right no-repeat;

    }

    cssimagebackground

    Answer №1

    If you want to achieve rounded corners without using multiple graphics, consider using the `border-radius` property in your CSS.

    This method is compatible with Firefox, Safari, and Chrome but may default to square corners in IE and Opera.

    For more details on this technique, check out this link.

    Answer №2

    If you're looking for a cool visual effect, consider using the 'sliding doors' technique:

    Check out this resource for more information: http://www.alistapart.com/articles/slidingdoors/

    To achieve this effect, give the <li> element a top left corner and the <a> element a top right corner using background images and padding/margin. This allows the text to always fit within the elements.

    I implemented a similar technique on www.mallorca.nl, creating rounded orange corners for a specific block:

    <div id="destwrapheader">
  <h2 style="font-size: 15px;">Discover your ideal Mallorca destination!</h2>
</div>

#destwrapheader {
  background:transparent url(images/mallorca/destinationblock/destination_top_right.png) no-repeat scroll right top;
}

#destwrapheader h2 {
  background:transparent url(images/mallorca/destinationblock/destination_top_left.png) no-repeat scroll left top;
margin:0 28px 0 0;
padding:0 0 0 12px;
}

    Similar techniques can be applied for creating rounded corners in other parts of the page as well.

    An issue to keep in mind is ensuring that the active state is indicated on the <li> element rather than just the link itself.

    Alternatively, you could opt to use CSS3 border radius for modern browsers:

    Answer №3

    If you're feeling adventurous, give SpiffyCorners a try! It's a CSS solution that can add some flair to your website. Just be warned, the markup can get a bit tricky.

    Another option is niftyCube, which involves adding a touch of javascript to your site. Check it out here.

    Or, if you're feeling bold, embrace the border-radius property and leave Internet Explorer users in the dust. Who needs 'em, right?

    Answer №4

    Do you think we should insert divs both before and after?

    <style type="text/css> 
  .left_corner { 
    display:inline;
    background: #093056 url(left.png) top left no-repeat !important; 
  } 

  .right_corner { 
    display:inline;
    background: #093056 url(left.png) top right no-repeat !important;
  } 
</style>
</head>
<body> 
  <div>
    <div class="left_corner">&nbsp;</div>content<div class="right_corner">&nbsp;</div>
  </div>

    This method is effective in all web browsers!

    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

    ui-grid row size set to automatically adjust using rowHeight : 'auto'

    Has anyone else experienced this strange behavior with ui-grid? When I set the rowHeight to auto, each cell in the same row ends up with different heights. One of the cells contains multiline data, which seems to be causing issues for ui-grid. I've ev ...

    javascriptcssangularjsng-gridangular-ui-grid

    Struggling with aligning and floating links to the right while crafting a custom navigation bar

    I'm in the process of crafting a custom navigation bar for my website, with the intention of having my name prominently displayed on the far left while the links float to the far right. I've utilized CSS to style everything within the nav section ...

    htmlcss

    Using jQuery Accordion within the MVC Framework

    I'm new to MVC and considering using an accordion. However, I'm facing issues as the accordion does not appear despite adding all necessary references for jquery accordion and creating the div. Here is my code: @{ ViewBag.Title = "Online Co ...

    javascriptjqueryhtmlcssasp.net-mvc

    Menu Items at the Center

    I am currently working on a Wordpress website and struggling to center the menu items that are currently aligned to the left. I have created a child theme from the existing theme's code, but still can't figure out how to achieve this simple task. ...

    csswordpressmenuhtml-listsnav

    Safari causing placeholders to be sliced

    I'm having trouble creating attractive placeholders in Safari. This is how it currently appears. Codepen: https://codepen.io/anon/pen/RLWrrK .form-control { height: 45px; padding: 15px; font-size: 16px; color: #8c8c8c; background-color: ...

    htmlcsstwitter-bootstrap

    What could be the reason why certain animations fail to run on specific icons when hovering over the parent element?

    I recently launched my website which features a series of tabs with unique icons. Some of the icons, labeled as soap-icon, have animated effects while others, categorized under icomoon-icon, do not. Upon checking the console, I discovered that the animati ...

    jqueryhtmlcssanimation

    What is the solution to prevent the inadvertent activation of onmouseEnter when onmouseLeave

    I recently created a CSS/Jquery script that enlarges a DIV and replaces a font awesome icon with some text when hovered over, then changes it back to the icon when the mouse leaves. However, I noticed in the console that when I remove the mouse from the DI ...

    jquerycss

    Can the current website navigation be integrated into the blog script?

    People might see me as a spoil sport for not using Wordpress, but I prefer a flatfile blog system for my small site. Currently, I am using the ozjournals-3.2 blog system. I need assistance in installing a header and site navigation on top of the blog page ...

    cssheadernavigationblogs

    Design a circular text element using Tailwind CSS

    Just starting out as a web developer and running into some issues with Tailwind CSS. Here's what I'm trying to achieve: https://ibb.co/KL8cDR2 This is the code I have right now: <div class="w-1/2 h-10 rounded-full bg-gray-400" style ...

    csstailwind-css

    applying different styles to various elements

    As a newcomer to the world of jQuery, I am attempting to achieve the following goal: I have several instances of a div, and for each instance, I randomly assign a class from a predefined list in order to modify certain attributes. While this process is su ...

    jqueryhtmlcssrandom

    Enhance CSS delivery for the items listed below

    Reduce the delay caused by rendering JavaScript and CSS above-the-fold. There are 16 CSS resources currently blocking the rendering of your page. This delay could be affecting the loading time of your content. To improve this issue, consider deferring or ...

    javascriptphpjqueryhtmlcss

    Apply a class to a div element when the WooCommerce cart is devoid of any items

    Is there a way to apply a class or style to an element that displays the cart count only when the cart is empty? Currently, I have the following code in my header.php file which shows the cart count correctly, but does not update the color: header.php ( ...

    phpcsswordpresswoocommercecart

    Empty gap separating two side by side photos

    Could someone assist me with removing the excessive white space between these two images? Each image is contained within its own respective div, with layer effects applied when hovered over. I've attempted changing the display to inline-block and sett ...

    htmlcss

    Wrapping a list vertically with ASP.NET using a repeater for generation

    I have a repeater that is creating a list of links in no particular order. I want the list to be displayed as follows: -Item1 -Item4 -Item2 -Item5 -Item3 Most solutions I've found require you to know the items in advance and set specific classes for ...

    asp.netcsslistxhtmlrepeater

    Glitches of white light during loading screens on your Prestashop website

    There's a strange occurrence on the website where it flashes white DURING (not just at the start) every time a page loads. Initially, the page seems to load smoothly and almost completely, but then there is a sudden flash before all elements are disp ...

    htmlcssprestashop

    No matter how many times I modified the code in the ReactDOM.render() method within my index.js file, the end result remained unchanged

    When I ran npx create-react-app my-app, and then proceeded to cd my-app and npm start, a browser opened on localhost:3000. While looking at the index.js file, I noticed that the ReactDOM.render() method included the following code: ReactDOM.render( <Rea ...

    javascriptphphtmlcssreactjs

    Tips on updating arrow button icon when clicked using jquery

    I am currently working on a project where I have a button icon that I want to change upon clicking it. I am using the following jQuery code: <script> $('div[id^="module-tab-"]').click(function(){ $(this).next('.hi').sl ...

    javascriptjqueryhtmlcss

    nyroModal automatically adapts its dimensions according to the size of the webpage, not the size of

    A situation has arisen with a link that opens an image using nyroModal. While everything is functioning correctly, the Modal window appears in the center of the page instead of aligning with the middle of the browser window. As a result, only the upper por ...

    javascriptjqueryhtmlcssnyromodal

    Unusual Occurrence: Unexpected Gap at the Beginning of HTML

    There seems to be an issue with white space appearing unexpectedly at the top and right side of the file in a website I am working on. Despite adding margin: 0; padding: 0; to both <body> and <html>, the problem persists. After inspecting the ...

    csshtml

    "Resolving an inconsistency problem with the Vary header in Htaccess

    Could someone help me identify the issues in my htaccess code? I'm encountering errors: This response is negotiated, but doesn't have an appropriate Vary header. The resource doesn't send Vary consistently. ## add vary header <IfModule ...

    css.htaccessheadergzipvary