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

    Tips for placing an icon within an input field

    I'm struggling to place an icon inside an input tag, but it always appears at the bottom of the input. I initially tried using Bootstrap, but I ended up resorting to custom styles for this specific issue. Here's the HTML code: <d ...

    cssbootstrap-4font-awesomelaravel-blade

    Having difficulty including text in the website header

    I'm struggling to add text on the right side of my header. I have placed small images on the right side of the header, slightly below, and now I want to insert some text above them but I can't seem to get it to work. This is what I'm trying ...

    csshtml

    Adjust the height of a division dynamically

    I have the following HTML snippet: <div id="container"> <div id="feedbackBox"></div> </div> The #feedbackBox div is initially not visible. To center the div, the CSS code is used: #container { position: absolute; widt ...

    jqueryhtmlcssresize

    Issues with displaying images in CSS when using HTML 5 canvas drawing

    In attempting to draw an image on a canvas using a pre-loaded image and CSS, such as: img.style.backgroundColor="red"; ctx.drawImage(img,0,0,100,100); I have observed that the image is drawn without incorporating the CSS modifications. Are HTML canvases ...

    javascriptcsshtmlcanvastransparency

    Resolving the Table Issue with 'onclick' in Javascript

    Apologies for the lack of creativity in the title, I struggled to come up with something fitting. Currently, I am engaged in the development of a user-friendly WYSIWYG site builder. However, I have encountered an obstacle along the way. I've devised ...

    javascripthtmlcss

    Add the application's logo image to the Ionic header along with a side menu

    When attempting to place the app logo image in the center or left of the Ionic header with vertical alignment, it seems to shift to the top instead. The code I am currently using to display the logo is causing some issues: <ion-view view-title="<im ...

    htmlcssionic-frameworkcss-position

    Explore the functions of jQuery's .css() method and the implementation of

    Could use some assistance with the .css() method in jQuery. Currently working on a mouseover css menu, and encountering an issue when trying to include this code: $(this).siblings().css({backgroundColor:"#eee"}); at the end of my script. It seems to int ...

    jquerycss

    Whenever I open my collapsible dropdown, it seems to leap up unexpectedly

    When I interact with the collapsible card, it has a jerky animation. I would like it to open smoothly instead. The issue lies with the tooltip-cus class. If I remove position: relative;, the opening animation is smooth, but then the position of the toolti ...

    htmlcssbootstrap-4

    Height that is determined in real-time

    I am attempting to adjust the height of a div based on the size of the screen. Within this div, there is a calendar that contains multiple lines of content, which can be displayed or hidden based on user preference. The height of the calendar is not fixed, ...

    css

    Is there a way to position a table to the left using bootstrap?

    I've been struggling to align my table to the left side of my page using bootstrap with Flask. Despite numerous attempts, the tables remain centered and unaffected on the page as shown below. {% extends "base.html" %} {% block title %}Home{% ...

    htmlcssbootstrap-4

    What is the best way to activate multiple events within an overlapping area containing multiple divs at the same

    How can I trigger events on same level divs that overlap in different areas? When there are multiple divs overlapping, only one of them gets triggered. Is there a way to trigger events on all overlapped same level divs? Here is an example code snippet: ...

    javascripthtmlcss

    The page separator image sinks below the menu

    Take a look at the home icon located at the top left corner of this page: If you observe closely, you will notice a small orange line extending below the orange header towards the bottom left of the home button. I have spent hours attempting to adjust it ...

    css

    Is the hover rotation feature not functioning properly?

    I am trying to achieve a small rotation effect when I hover over my div. It works perfectly on another div, but for some reason it's not working on this one. Below is the code snippet: .more, .more:visited { color: #fff; min-width: 88px; heigh ...

    htmlcss

    Aligning MaterialUI Grid items vertically within various Grid containers

    Looking to implement a design that features three vertical columns. The first and last columns will display MaterialUI cards, while the middle column will showcase a vertical line with dots aligned vertically with the start of each card. The height of the ...

    htmlcssreactjsmaterial-ui

    How to ensure an absolutely positioned div spans the entire width of the screen

    I am facing an issue with an absolutely positioned div that I want to stretch the full width of the screen using 100vw. However, the problem is that it aligns with its parent's starting point rather than the left side of the viewport. How can I make s ...

    htmlcsscss-positionabsolute

    Is it feasible to have fixed headers adopt the width property?

    Is there a way to align the widths of table elements while maintaining a fixed header row? If the 'fixed' property is disabled, the width spaces correctly but the header won't stay fixed and will scroll out of the container div. Enabling the ...

    htmlcsshtml-tablewidthfixed-header-tables

    What are the recommended margins for various alphabets?

    When displaying text, some alphabets take up more space than others. So how can I adjust the white space between elements '#re1' and '#re2' automatically in the scenario described below? In this code snippet, what is the best way to ad ...

    javascripthtmlcss

    Identifying the precise image dimensions required by the browser

    When using the picture tag with srcset, I can specify different image sources based on viewport widths. However, what I really need is to define image sources based on the actual width of the space the image occupies after the page has been rendered by th ...

    javascripthtmlcss

    What is the best way to dynamically render classes based on conditions in a table using React Bootstrap?

    I am looking for a way to dynamically change the color of a class based on the transaction data in a table. import React from "react"; import Table from "react-bootstrap/Table"; import "./TableComponent.css"; const TableComponent = ({ Movement }) =&g ...

    javascriptcssreactjsbootstrap-4react-bootstrap

    Using the Wordpress media library to retrieve images

    I'm currently in the process of developing a plugin with its own admin page. As part of the options on this admin page, I am interested in including a button that would enable me to access the Wordpress media library. The purpose behind this button i ...

    phpajaxwordpressimageforms