Runda hörn i meny

[Pelle Penna]

Hej

Hjälp en gamma gubbe.

 

Vår hemsida http://katrineholm.seniornet.se/ tillhör en central org. där vi använder oss av wordpress och temat Responsive.

 

Jag skulle vilja att hörnen på menyn blir rundade och i wordpresstemat finns en länk till deras forum och där finns inlägg om hur man gör runda hörn med hjälp av att klistra in css-kod. Jag har provat detta men det blir bara runda hörn i högerkanten och så kan vi ju inte ha det.

 

Jag klistrar här nedan in den kod som föreslås och ber om er hjälp

The original CSS for the menu is as follows:

.menu {
    background-color: #585858;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#585858), to(#3d3d3d));
    background-image: -webkit-linear-gradient(top, #585858, #3d3d3d);
    background-image: -moz-linear-gradient(top, #585858, #3d3d3d);
    background-image: -ms-linear-gradient(top, #585858, #3d3d3d);
    background-image: -o-linear-gradient(top, #585858, #3d3d3d);
    background-image: linear-gradient(top, #585858, #3d3d3d);
    clear: both;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#585858, endColorstr=#3d3d3d);
    margin: 0 auto;
}

To modify the menu with rounded corners all we need to do, is add the following to our custom CSS.

.menu {
    border-radius: 10px;
}

Now we have rounded corners, but upon hover, you’ll find that the corners of the first menu item are square. We can change this behavior with:

.menu > li:first-child:hover,
.menu > li:first-child:hover a {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

Depending on how you have your menu set up, you may also need this CSS for the first menu item:

.menu > li:first-child,
.menu > li:first-child > a {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}Hälsningar

Per

 

 

[ChromaWoods]

Som regelbunden Katrineholmsbesökare måste man ju dra sitt strå till stacken.

 

Anledningen till att vänsterkanten blir kantig, är att det första menyvalet lägger sig över de runda hörnen eftersom dess kanter är kantiga. De skjuter alltså över meny-elementets hörn. De är runda där bakom, men det syns inte. Du kan enkelt komma runt detta genom att lägga till overflow-x: hidden; på menyklassen. Den nya snutten behöver alltså kompletteras så att den ser ut såhär;

.menu {
  border-radius: 10px;
  overflow-x: hidden;
}

Den raden gör så att det kringliggande menyelementet skalar bort allt som vågar sig utanför dess gränser och de runda hörnen kommer således att synas. Sen kan du givetvis även välja hur mycket rundning det ska vara genom att ändra 10px till något annat värde (5px, 10px, 15px etc.). Ju högre värde, desto kraftigare rundning.

[Pelle Penna]

Som regelbunden Katrineholmsbesökare måste man ju dra sitt strå till stacken.

 

Anledningen till att vänsterkanten blir kantig, är att det första menyvalet lägger sig över de runda hörnen eftersom dess kanter är kantiga. De skjuter alltså över meny-elementets hörn. De är runda där bakom, men det syns inte. Du kan enkelt komma runt detta genom att lägga till overflow-x: hidden; på menyklassen. Den nya snutten behöver alltså kompletteras så att den ser ut såhär;

.menu {
  border-radius: 10px;
  overflow-x: hidden;
}

Den raden gör så att det kringliggande menyelementet skalar bort allt som vågar sig utanför dess gränser och de runda hörnen kommer således att synas. Sen kan du givetvis även välja hur mycket rundning det ska vara genom att ändra 10px till något annat värde (5px, 10px, 15px etc.). Ju högre värde, desto kraftigare rundning.

Du ä.... bra go..... TACK

[Pelle Penna]

Jag behöver mera hjälp i detta

Chromawoods gav en bra kod men men men.

Om jag nu börjar lägga till undersidor till någon av toppsidorna, så händer följande. En undersida går bra, men om det blir två, så förvinner sida två ner bakom sidotexten och syns knappt. Tar jag bort kodsnutten så blir det ok igen. Finns det någon lösning av någon?

 

.menu {

  border-radius: 10px;

  overflow-x: hidden;

}

[Jonas__B]

Har du länk till sidan som visar det du beskriver?

[Pelle Penna]

Har du länk till sidan som visar det du beskriver?

Ja den finns högst upp, men jag hade fn. tagit bort de underliggande sidorna. 

Om du kollar katrineholm.seniornet.se och sedan på sidan Teknisk hjälp. Där har jag lagt till två testsidor x o x3.

Sedan ser jag nu att det då dyker upp en liten rulllist längst till höger, men den kommer man inte åt och det vill jag inte heller.

Sedan provade jag att ta bort den direktlänken som ligger underst och som heter Seniornet Sweden och då syntes plötsligt inga undersidor alls.

Jag låter detta ligga ett tag om du/ni vill kolla. Annar så får det bli kantiga hörn igen

[Jonas__B]

man behöver ta bort overflow-x:hidden och background-color: #000066;  under .menu 

lägg till 

    background-color: #000066;
    border-radius: 10px;

till elementet .main-nav

 

ta bort background color på ul-menu > li:hover och .menu a samt .menu .current_page_item a, .menu .current-menu-item a

 

lägg till border-top-left-radius: 10px; på .menu > li:first-child > a

 

Då löser du det mesta.  Den första länken på andra raden i menyn kommer dock att göra att det inte blir en rund kant vid hover.

[Pelle Penna]

Tack för ditt svar, men jag upptäckte att vi har lite nya koder. Orkar du ta dig tiden och försöka förklara för denne tröge gubbe hur det ska vara och var det ska vara??

mvh

Per

 

body {

   font-size: 100%;

}

 

/* Textstorlek i Footer Widgets, kolla text-nr med Visa sidkälla  */

#text-2,

#text-3,

#text-7 {

  font-size: 1.2em;

}

 

#text-8 {

  font-size: 1em;

}

 

.menu {

                           background-color: #000066;

        background-image: none;

}

 

.menu a:hover {

                           background: #6699cc!important;

                          text-decoration: none;

}

 

.menu a {

                          color: #ffffff !important;

                           background: #000066 !important;

                           text-decoration: none;

                           font-size: 95%;

}

 

.menu li li a {

                           color: #ffffff !important;

                           background:  #000066 !important;

                           text-decoration: none;

                           font-size: 87%;

}

 

.menu li li a:hover {

                           color: #ffffff !important;

                           background:#6699cc!important;

                           text-decoration: none;

}

 

.js .main-nav .menu li a:hover,

.js .main-nav .menu li li a:hover {

    background-color: #80B0FF !important; 

    background-image: none;

    filter: none;

}

 

 

h1{ 

     color:#000066 !important;

     font-size: 1.8em;

}

 

h2{ 

     color:#000066 !important;

    font-size: 1.5em;

}

 

h3{ 

     color:#000066 !important;

     font-size: 1.2em;

}

 

h4{ 

     color:#000066 !important;

     font-size: 1em;

}

 

a:hover,

a:focus,

a:active {

                           outline: 0;

                           color: #000099;

                           text-decoration: underline;

}

 

a.blue {

    color: #ffffff !important;

    background-color: #000099 !important;

     background-image: none !important;

}

 

a.ab-item {

color: yellow !important;

}

 

#content-full {

   margin-top: 0.5em;  

}

 

.breadcrumb,

.breadcrumb-current {

   font-size: 1.1em;

}

 

#wrapper.clearfix {

   margin-top: 1em;  

   padding-top: 1em;

}

.menu {

  border-radius: 10px;

  overflow-x: hidden;

}