Support » Algemene WordPress vragen » afmetingen drop down menu aanpassen

  • Opgelost wmsbootje

    (@wmsbootje)


    Is het mogelijk de afmetingen van een drop-down menu aan te passen? En zo ja, waar en hoe doe ik dat dan precies.

    Link naar onze site: http://westra-maritiem.nl/wordpress/

    Het gaat met name om het dropdown menu bij Jachtverhuur.
    Ik vind het mooier als alle balken even breed zouden zijn. En een aantal titels van de childpages is ook langer dan wat nu te zien is in de balken.
    Voorbeeld: Indeling zou Indeling en Inventaris moeten zijn, maar dat past nu niet.

    O, nog een vraag. Als je “Jachtverhuur” aanwijst rolt het menu uit. Aan de linkerkant van de blokken staat een lichter streepje van 1 mmm breed. Hoe maak ik dat breder?

12 reacties aan het bekijken - 1 tot 12 (van in totaal 12)
  • Alles is aan te passen in je css.
    Ik zag in je bron div class=”nav” met alle ul en li classes, daar zal je het in moeten aanpassen.

    Thread starter wmsbootje

    (@wmsbootje)

    en wat doen die ol ul en li?

    Ben nu bezig met de opmaak van m’n pagina’s en heb al van alles uitgeprobeerd maar ik zie niet echt iets veranderen als ik bv die ol er bij zet

    ul ol en li stylen je menu

    Is je menu een plugin?

    Thread starter wmsbootje

    (@wmsbootje)

    nee, is geen plugin

    Okay, in je css moet je zoeken naar de class page_item, deze stuurt je li aan.

    Dan heb je ook nog de class children en de class artmenu die verantwoordelijk zijn voor de ul classes.

    Deze classes zijn er om je menu te stylen.

    Thread starter wmsbootje

    (@wmsbootje)

    Bedankt dat je wilt meedenken, maar mijn html kennis is niet zo heel erg uitgebreid.

    Om even 1 ding tegelijk aan te pakken:
    die class page-item heb ik gevonden. En die children ook, maar wat moet ik nou qua codes wijzigen om die balken in het dropdownmenu allemaal even groot te krijgen?
    Moet ik dan een bereik aangeven bij die ul? Die is toch voor de opmaak van de lijsten?

    Ik heb even gegeten, was best lekker.
    Post even de css van de page-item aub

    EDIT:
    ik heb nog even naar je site gekeken, dat lijntje aan de zijkant is een hover

    en als je je balken even breed wilt hebben dan gaat het niet helemaal passen ben ik bang.

    Thread starter wmsbootje

    (@wmsbootje)

    O ja, eten! Dat ga ik zo ook maar eens doen 🙂

    Ik heb maar gewoon de hele css gecopieerd, anders zul je net zien dat de code die je nodig hebt er net niet bij zit.

    Die balken komen toch onder de “hoofdknop” (weet even de technische term niet)? Dan komen ze op de pagina’s wel over de tekst heen als het menu uitklapt, maar dat vind ik niet zo’n probleem.

    /* begin Page */

    /* Generated with http://www.leadcamp.com/content/free-wordpress-themes/ version 2.0.2.15338 */

    body
    {
    margin: 0 auto;
    padding: 0;
    background-color: #C0BCA0;
    background-image: url(‘images/Page-BgTexture.jpg’);
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: top left;
    }

    .Main
    {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    }

    .cleared
    {
    float: none;
    clear: both;
    margin: 0;
    padding: 0;
    border: none;
    font-size:1px;
    }

    /* end Page */

    /* begin Box, Sheet */
    .Sheet
    {
    overflow: hidden;
    min-width:35px;
    min-height:35px;
    margin: 0 auto;
    position: relative;
    z-index: 0;
    width: 900px;
    }

    .Sheet-body
    {
    position: relative;
    z-index: 0;
    margin: 13px;
    }

    .Sheet-tl
    {
    position: absolute;
    overflow: hidden;
    z-index: -1;
    top: 0;
    left: 0;
    width: 17px;
    height: 17px;
    background-image: url(‘images/Sheet-s.png’);
    }

    .Sheet-tr
    {
    position: absolute;
    overflow: hidden;
    z-index: -1;
    top: 0;
    right: 0;
    width: 17px;
    height: 17px;
    }

    .Sheet-tr div
    {
    position: absolute;
    z-index: -1;
    top: 0px;
    left: -17px;
    width: 34px;
    height: 34px;
    background-image: url(‘images/Sheet-s.png’);
    }

    .Sheet-bl
    {
    position: absolute;
    overflow: hidden;
    z-index: -1;
    bottom: 0;
    left: 0;
    width: 17px;
    height: 17px;
    }

    .Sheet-bl div
    {
    position: absolute;
    z-index: -1;
    top: -17px;
    left: 0;
    width: 34px;
    height: 34px;
    background-image: url(‘images/Sheet-s.png’);
    }

    .Sheet-br
    {
    position: absolute;
    overflow: hidden;
    z-index: -1;
    bottom: 0;
    right: 0;
    width: 17px;
    height: 17px;
    }

    .Sheet-br div
    {
    position: absolute;
    z-index: -1;
    top: -17px;
    left: -17px;
    width: 34px;
    height: 34px;
    background-image: url(‘images/Sheet-s.png’);
    }

    .Sheet-tc
    {
    position: absolute;
    overflow:hidden;
    z-index: -1;
    top: 0;
    left: 17px;
    right: 17px;
    height: 17px;
    }

    .Sheet-tc div
    {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 34px;
    background-image: url(‘images/Sheet-h.png’);
    }

    .Sheet-bc
    {
    position: absolute;
    overflow:hidden;
    z-index: -1;
    bottom: 0;
    left: 17px;
    right: 17px;
    height: 17px;
    }

    .Sheet-bc div
    {
    position: absolute;
    z-index: -1;
    top: -17px;
    left: 0;
    width: 100%;
    height: 34px;
    background-image: url(‘images/Sheet-h.png’);
    }

    .Sheet-cl
    {
    position: absolute;
    overflow:hidden;
    z-index: -1;
    top: 17px;
    left: 0;
    width: 17px;
    bottom: 17px;
    }

    .Sheet-cl div
    {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 34px;
    height: 100%;
    background-image: url(‘images/Sheet-v.png’);
    }

    .Sheet-cr
    {
    position: absolute;
    overflow:hidden;
    z-index: -1;
    top: 17px;
    right: 0;
    width: 17px;
    bottom: 17px;
    }

    .Sheet-cr div
    {
    position: absolute;
    z-index: -1;
    top: 0;
    left: -17px;
    width: 34px;
    height: 100%;
    background-image: url(‘images/Sheet-v.png’);
    }

    .Sheet-cc
    {
    position: absolute;
    overflow:hidden;
    z-index: -2;
    top: 17px;
    left: 17px;
    right: 17px;
    bottom: 17px;
    background-image: url(‘images/Sheet-c.png’);
    }

    .Sheet
    {
    margin-top: -13px !important;
    }
    /* end Box, Sheet */

    /* begin Header */
    div.Header
    {
    margin: 0 auto;
    position: relative;
    z-index:0;
    width: 874px;
    height: 125px;
    }

    div.Header-jpeg
    {
    position: absolute;
    z-index:-1;
    top: 0;
    left: 0;
    width: 874px;
    height: 125px;
    background-image: url(‘images/Header.jpg’);
    background-repeat: no-repeat;
    background-position: center center;
    }
    /* end Header */

    /* begin Logo */
    .logo
    {
    display : block;
    position: absolute;
    left: 10px;
    top: 10px;
    width: 854px;
    }

    h1.logo-name
    {
    display: block;
    text-align: left;
    }

    h1.logo-name, h1.logo-name a, h1.logo-name a:link, h1.logo-name a:visited, h1.logo-name a:hover
    {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 26px;
    font-style: normal;
    font-weight: bold;
    text-decoration: none;
    padding:0;
    margin:0;
    color: #1F2920 !important;
    }

    .logo-text
    {
    display: block;
    text-align: left;
    }

    .logo-text, .logo-text a
    {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 18px;
    font-style: normal;
    font-weight: normal;
    padding:0;
    margin:0;
    color: #1F2920 !important;
    }

    /* end Logo */

    /* begin Menu */
    /* menu structure */

    .artmenu a, .artmenu a:link, .artmenu a:visited, .artmenu a:hover
    {
    text-align:left;
    text-decoration:none;
    outline:none;
    letter-spacing:normal;
    word-spacing:normal;
    }

    .artmenu, .artmenu ul
    {
    margin: 0;
    padding: 0;
    border: 0;
    list-style-type: none;
    display: block;
    }

    .artmenu li
    {
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
    float: left;
    position: relative;
    z-index: 5;
    background:none;
    }

    .artmenu li:hover
    {
    z-index: 10000;
    white-space: normal;
    }

    .artmenu li li
    {
    float: none;
    }

    .artmenu ul
    {
    visibility: hidden;
    position: absolute;
    z-index: 10;
    left: 0;
    top: 0;
    background:none;
    }

    .artmenu li:hover>ul
    {
    visibility: visible;
    top: 100%;
    }

    .artmenu li li:hover>ul
    {
    top: 0;
    left: 100%;
    }

    .artmenu:after, .artmenu ul:after
    {
    content: “.”;
    height: 0;
    display: block;
    visibility: hidden;
    overflow: hidden;
    clear: both;
    }
    .artmenu, .artmenu ul
    {
    min-height: 0;
    }

    .artmenu ul
    {
    background-image: url(images/spacer.gif);
    padding: 10px 30px 30px 30px;
    margin: -10px 0 0 -30px;
    }

    .artmenu ul ul
    {
    padding: 30px 30px 30px 10px;
    margin: -30px 0 0 -10px;
    }

    /* menu structure */

    .nav
    {
    position: relative;
    margin: 0 auto;
    width: 874px;
    height: 41px;
    z-index: 100;
    }

    .artmenu
    {
    padding: 12px 6px 0px 6px;
    }

    .nav .l, .nav .r, .nav .r div
    {
    top: 0;
    position: absolute;
    z-index: -1;
    overflow: hidden;
    height: 41px;
    }

    .nav .l
    {
    left: 0;
    right: 0px;
    }

    .nav .r
    {
    right: 0;
    width: 0px;
    }

    .nav .r div
    {
    width: 874px;
    right: 0;
    }

    .nav .l, .nav .r div
    {
    background-position: left top;
    background-repeat: no-repeat;
    background-image: url(‘images/nav.png’);
    }

    /* end Menu */

    /* begin MenuItem */
    .artmenu ul li
    {
    clear: both;
    }

    .artmenu a , .artmenu a span
    {
    height: 29px;
    display: block;
    }

    .artmenu a
    {
    cursor: pointer;
    text-decoration: none;
    margin-right: 2px;
    margin-left: 2px;

    }
    .artmenu a
    {
    background-image: url(‘images/item-left.png’);
    background-position: left top;
    background-repeat: no-repeat;
    }

    .artmenu a span
    {
    background-image: url(‘images/item-right.png’);
    background-position: right top;
    background-repeat: no-repeat;
    }
    .artmenu a span span
    {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    color: #28261B;
    padding: 0 19px;
    margin: 0 4px;
    line-height: 29px;
    text-align: center;
    background-image: url(‘images/item-center.png’);
    background-position: left top;
    background-repeat: repeat-x;

    }

    .artmenu a:hover
    {
    background-position: left -29px;
    }

    .artmenu li:hover>a
    {
    background-position: left -29px;
    }
    .artmenu li:hover a span
    {
    background-position: right -29px;
    }

    .artmenu a:hover span
    {
    background-position: right -29px;
    }

    .artmenu a:hover span span
    {
    color: #000000;
    background-position: left -29px;
    }

    .artmenu li:hover a span span
    {
    color: #000000;
    background-position: left -29px;
    }

    .artmenu a.active
    {
    background-position: left -58px;
    }

    .artmenu a.active span
    {
    background-position: right -58px;
    }

    .artmenu a.active span span
    {
    color: #000000;
    background-position: left -58px;
    }

    /* end MenuItem */

    /* begin ContentLayout */
    .contentLayout
    {
    margin-bottom: 1px;
    width: 874px;
    position: relative;
    }
    /* end ContentLayout */

    /* begin Box, Block */
    .Block
    {
    overflow: hidden;
    min-width:11px;
    min-height:11px;
    margin: 0 auto;
    position: relative;
    z-index: 0;
    }

    .Block-body
    {
    position: left;
    z-index: 0;
    margin: 2px;
    }

    .Block-tl
    {
    position: absolute;
    overflow: hidden;
    z-index: -1;
    top: 0;
    left: 0;
    width: 5px;
    height: 5px;
    background-image: url(‘images/Block-s.png’);
    }

    .Block-tr
    {
    position: absolute;
    overflow: hidden;
    z-index: -1;
    top: 0;
    right: 0;
    width: 5px;
    height: 5px;
    }

    .Block-tr div
    {
    position: absolute;
    z-index: -1;
    top: 0px;
    left: -5px;
    width: 10px;
    height: 10px;
    background-image: url(‘images/Block-s.png’);
    }

    .Block-bl
    {
    position: absolute;
    overflow: hidden;
    z-index: -1;
    bottom: 0;
    left: 0;
    width: 5px;
    height: 5px;
    }

    .Block-bl div
    {
    position: absolute;
    z-index: -1;
    top: -5px;
    left: 0;
    width: 10px;
    height: 10px;
    background-image: url(‘images/Block-s.png’);
    }

    .Block-br
    {
    position: absolute;
    overflow: hidden;
    z-index: -1;
    bottom: 0;
    right: 0;
    width: 5px;
    height: 5px;
    }

    .Block-br div
    {
    position: absolute;
    z-index: -1;
    top: -5px;
    left: -5px;
    width: 10px;
    height: 10px;
    background-image: url(‘images/Block-s.png’);
    }

    .Block-tc
    {
    position: absolute;
    overflow:hidden;
    z-index: -1;
    top: 0;
    left: 5px;
    right: 5px;
    height: 5px;
    }

    .Block-tc div
    {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background-image: url(‘images/Block-h.png’);
    }

    .Block-bc
    {
    position: absolute;
    overflow:hidden;
    z-index: -1;
    bottom: 0;
    left: 5px;
    right: 5px;
    height: 5px;
    }

    .Block-bc div
    {
    position: absolute;
    z-index: -1;
    top: -5px;
    left: 0;
    width: 100%;
    height: 10px;
    background-image: url(‘images/Block-h.png’);
    }

    .Block-cl
    {
    position: absolute;
    overflow:hidden;
    z-index: -1;
    top: 5px;
    left: 0;
    width: 5px;
    bottom: 5px;
    }

    .Block-cl div
    {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 10px;
    height: 100%;
    background-image: url(‘images/Block-v.png’);
    }

    .Block-cr
    {
    position: absolute;
    overflow:hidden;
    z-index: -1;
    top: 5px;
    right: 0;
    width: 5px;
    bottom: 5px;
    }

    .Block-cr div
    {
    position: absolute;
    z-index: -1;
    top: 0;
    left: -5px;
    width: 10px;
    height: 100%;
    background-image: url(‘images/Block-v.png’);
    }

    .Block-cc
    {
    position: absolute;
    overflow:hidden;
    z-index: -2;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    background-image: url(‘images/Block-c.png’);
    }

    .Block
    {
    margin: 7px;
    }

    /* end Box, Block */

    /* begin BlockHeader */
    .BlockHeader
    {
    position: relative;
    overflow: hidden;
    height: 30px;
    z-index: 0;
    line-height: 30px;
    padding: 0 7px;
    margin-bottom: 7px;

    }

    .BlockHeader-text
    {
    white-space : nowrap;
    color: #000000;
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 12px;
    font-style: normal;
    font-weight: bold;
    line-height: 30px;
    }

    .BlockHeader .l, .BlockHeader .r, .BlockHeader .r div
    {
    top: 0;
    position: absolute;
    z-index: -1;
    overflow: hidden;
    height: 30px;
    }

    .BlockHeader .l
    {
    left: 0;
    right: 4px;
    }

    .BlockHeader .r
    {
    right: 0;
    width: 4px;
    }

    .BlockHeader .r div
    {
    width: 894px;
    right: 0;
    }

    .BlockHeader .l, .BlockHeader .r div
    {
    background-position: left top;
    background-repeat: no-repeat;
    background-image: url(‘images/BlockHeader.png’);
    }

    .header-tag-icon
    {
    display:inline-block;
    background-position:left top;
    background-image: url(‘images/BlockHeaderIcon.png’);
    padding:0 0 0 21px;
    background-repeat: no-repeat;
    min-height: 14px;
    margin: 0 0 0 5px;
    }

    /* end BlockHeader */

    /* begin Box, BlockContent */
    .BlockContent
    {
    overflow: hidden;
    min-width:1px;
    min-height:1px;
    margin: 0 auto;
    position: relative;
    z-index: 0;
    }

    .BlockContent-body
    {
    position: relative;
    z-index: 0;
    margin: 8px;
    }

    .BlockContent-body
    {
    color:#2B291D;
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    }

    .BlockContent-body a:link
    {
    color: #445A46;
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: underline;
    }

    .BlockContent-body a:visited, .BlockContent-body a.visited
    {
    color: #9F996F;
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: underline;
    }

    .BlockContent-body a:hover, .BlockContent-body a.hover
    {
    color: #6D6631;
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: none;
    }

    .BlockContent-body ul
    {
    list-style-type: none;
    color: #665F2E;
    margin:0;
    padding:0;
    }

    .BlockContent-body li
    {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 12px;
    text-decoration: none;
    }

    .BlockContent-body ul li
    {
    padding:0px 0 0px 13px;
    background-image: url(‘images/BlockContentBullets.png’);
    background-repeat:no-repeat;
    margin:0.5em 0 0.5em 0;
    line-height:1.2em;
    }

    /* end Box, BlockContent */

    /* begin Box, Post */
    .Post
    {
    overflow: hidden;
    min-width:1px;
    min-height:1px;
    margin: 0 auto;
    position: relative;
    z-index: 0;
    }

    .Post-body
    {
    position: relative;
    z-index: 0;
    margin: 10px;
    }

    .Post
    {
    margin: 10px;
    }

    /* Start images */
    a img
    {
    border: 0;
    }

    .article img, img.article
    {
    border-style: solid;
    border-width: 1px;
    border-color: #C0BCA0;
    margin: 1em;
    }

    .metadata-icons img
    {
    border: none;
    vertical-align: middle;
    margin:2px;
    }
    /* Finish images */

    /* Start tables */

    .article table, table.article
    {
    border-collapse: collapse;
    margin: 1px;
    width:auto;
    }

    .article table, table.article .article tr, .article th, .article td
    {
    background-color:Transparent;
    }

    .article th, .article td
    {
    padding: 2px;
    border: solid 1px #8D875E;
    vertical-align: top;
    text-align:left;
    }

    .article th
    {
    text-align:center;
    vertical-align:middle;
    padding: 7px;
    }

    /* Finish tables */
    /* end Box, Post */

    /* begin PostHeaderIcon */
    .PostHeaderIcon-wrapper
    {
    text-decoration:none;
    margin: 0.2em 0;
    padding: 0;
    font-weight:normal;
    font-style:normal;
    letter-spacing:normal;
    word-spacing:normal;
    font-variant:normal;
    text-decoration:none;
    font-variant:normal;
    text-transform:none;
    text-align:left;
    text-indent:0;
    line-height:inherit;
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 22px;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    color: #212C22;
    }

    .PostHeaderIcon-wrapper, .PostHeaderIcon-wrapper a, .PostHeaderIcon-wrapper a:link, .PostHeaderIcon-wrapper a:visited, .PostHeaderIcon-wrapper a:hover
    {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 22px;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    color: #212C22;
    }

    /* end PostHeaderIcon */

    /* begin PostHeader */
    .PostHeader a:link
    {
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: none;
    text-align: left;
    color: #2C3A2D;
    }

    .PostHeader a:visited, .PostHeader a.visited
    {
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: none;
    text-align: left;
    color: #686345;
    }

    .PostHeader a:hover, .PostHeader a.hovered
    {
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: none;
    text-align: left;
    color: #000000;
    }
    /* end PostHeader */

    /* begin PostMetadata */

    .PostMetadataHeader
    {

    background-color: #D6D0A4;
    border-color: #C0BCA0;
    border-style: solid;
    border-width: 1px;
    padding:3px;
    }

    /* end PostMetadata */

    /* begin PostIcons */
    .PostHeaderIcons, .PostHeaderIcons a, .PostHeaderIcons a:link, .PostHeaderIcons a:visited, .PostHeaderIcons a:hover
    {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 11px;
    color: #433F1E;
    }

    .PostHeaderIcons a, .PostHeaderIcons a:link, .PostHeaderIcons a:visited, .PostHeaderIcons a:hover
    {
    margin:0;
    }

    .PostHeaderIcons a:link
    {
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: underline;
    color: #425744;
    }

    .PostHeaderIcons a:visited, .PostHeaderIcons a.visited
    {
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: underline;
    color: #425744;
    }

    .PostHeaderIcons a:hover, .PostHeaderIcons a.hover
    {
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: none;
    color: #6A632F;
    }

    /* end PostIcons */

    /* begin PostContent */
    /* Content Text Font & Color (Default) */
    body
    {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    color: #1F1D14;
    }

    .PostContent
    {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    text-align: justify;
    color: #1F1D14;
    }

    /* Start Content link style */
    /*
    The right order of link pseudo-classes: Link-Visited-Hover-Focus-Active.
    http://www.w3schools.com/CSS/css_pseudo_classes.asp
    http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states/
    */
    a
    {
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: underline;
    color: #425744;
    }

    /* Adds special style to an unvisited link. */
    a:link
    {
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: underline;
    color: #425744;
    }

    /* Adds special style to a visited link. */
    a:visited, a.visited
    {
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: underline;
    color: #5C583D;
    }

    /* :hover – adds special style to an element when you mouse over it. */
    a:hover, a.hover
    {
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: none;
    color: #000000;
    }

    /* Finish Content link style */

    /* Resert some headings default style & links default style for links in headings*/
    h1, h2, h3, h4, h5, h6,
    h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
    h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
    h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited
    {
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    }

    /* Start Content headings Fonts & Colors */
    h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover
    {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 28px;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    color: #6A632F;
    }

    h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover
    {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 22px;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    color: #6A632F;
    }

    h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover
    {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 18px;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    color: #7A7552;
    }

    h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover
    {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    color: #1F1D14;
    }

    h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover
    {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    color: #1F1D14;
    }

    h6, h6 a, h6 a:link, h6 a:visited, h6 a:hover
    {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    color: #1F1D14;
    }
    /* Finish Content headings Fonts & Colors */

    /* end PostContent */

    /* begin PostBullets */
    /* Start Content list */

    ul
    {
    list-style-type: none;
    color: #0B0F0B;
    margin:0;
    padding:0;
    }

    li
    {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 12px;
    }

    .Post ul li
    {
    padding:0px 0 0px 13px;
    background-image: url(‘images/PostBullets.png’);
    background-repeat:no-repeat;
    margin:0.5em 0 0.5em 0;
    line-height:1.2em;
    }

    /* Finish Content list */
    /* end PostBullets */

    /* begin PostQuote */
    /* Start blockquote */

    blockquote p
    {
    color:#151409;
    font-family: Arial, Helvetica, Sans-Serif;
    font-style: italic;
    font-weight: normal;
    text-align: left;
    }

    blockquote
    {
    border-color:#C8C084;
    border-width: 1px;
    border-style: solid;

    margin:10px 10px 10px 50px;
    padding:5px 5px 5px 41px;

    background-color:#E9E6CE;

    background-image:url(‘images/PostQuote.png’);
    background-position:left top;
    background-repeat:no-repeat;
    }

    /* Finish blockuote */
    /* end PostQuote */

    /* begin PostMetadata */

    .PostMetadataFooter
    {

    background-color: #D6D0A4;
    border-color: #C0BCA0;
    border-style: solid;
    border-width: 1px;
    padding:3px;
    }

    /* end PostMetadata */

    /* begin PostIcons */
    .PostFooterIcons, .PostFooterIcons a, .PostFooterIcons a:link, .PostFooterIcons a:visited, .PostFooterIcons a:hover
    {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 11px;
    text-decoration: none;
    color: #544F26;
    }

    .PostFooterIcons a, .PostFooterIcons a:link, .PostFooterIcons a:visited, .PostFooterIcons a:hover
    {
    margin:0;
    }

    .PostFooterIcons a:link
    {
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: underline;
    color: #425744;
    }

    .PostFooterIcons a:visited, .PostFooterIcons a.visited
    {
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: underline;
    color: #425744;
    }

    .PostFooterIcons a:hover, .PostFooterIcons a.hover
    {
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: none;
    color: #6A632F;
    }

    /* end PostIcons */

    /* begin Button */
    button.Button, a.Button
    {
    position:relative;
    display:inline-block;
    width: auto;
    outline:none;
    border:none;
    background:none;
    line-height:34px;
    margin:0;
    padding:0;
    overflow: visible;
    cursor: default;
    text-decoration: none !important;
    }

    /*This HACK needed for ie7 (button position)*/
    *:first-child+html button.Button, *:first-child+html a.Button
    {
    display:list-item;
    list-style-type:none;
    float:left;
    }

    .Button .btn
    {
    position: relative;
    overflow: hidden;
    display: block;
    width: auto;
    z-index: 0;
    height: 34px;
    color: #000000;
    white-space: nowrap;
    float: left;
    }

    .Button .t
    {
    height:34px;
    white-space: normal;
    padding: 0 21px;
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    text-align: left;
    line-height: 34px;
    text-decoration: none !important;
    }

    input, select
    {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    }

    .Button .active
    {
    color: #F7F6F3;
    }

    .Button .hover, a.Button:hover
    {
    color: #0B0A05;
    text-decoration: none !important;
    }

    .Button .active .r
    {
    top: -68px;
    }

    .Button .hover .r
    {
    top: -34px;
    }

    .Button .r
    {
    display: block;
    position: absolute;
    overflow: hidden;
    z-index: -1;
    top: 0;
    right: 0;
    width: 11px;
    height: 102px;
    }

    .Button .r span
    {
    display: block;
    position: absolute;
    overflow: hidden;
    z-index: -1;
    top: 0;
    right: 0;
    width:411px;
    height: 102px;
    }

    .Button .active .l
    {
    top: -68px;
    }

    .Button .hover .l
    {
    top: -34px;
    }

    .Button .l
    {
    display: block;
    position: absolute;
    overflow: hidden;
    z-index: -1;
    top: 0;
    left: 0;
    right: 11px;
    height: 102px;
    }

    .Button .l, .Button .r span
    {
    background-image: url(‘images/Button.png’);
    }

    /* end Button */

    /* begin Footer */
    .Footer
    {
    position:relative;
    z-index:0;
    overflow:hidden;
    width: 874px;
    margin: 5px auto 0px auto;
    }

    .Footer .Footer-inner
    {
    height:1%;
    position: relative;
    z-index: 0;
    padding: 8px;
    text-align: center;
    }

    .Footer .Footer-background
    {
    position:absolute;
    z-index:-1;
    background-repeat:no-repeat;
    background-image: url(‘http://westra-maritiem.nl/wordpress/wp-content/uploads/footerbalk.jpg’);
    width: 874px;
    height: 100px;
    bottom:0;
    left:0;
    }
    .Footer .Footer-text p
    {
    margin: 0;
    }

    .Footer .Footer-text
    {
    display:inline-block;
    color:#1C1A0D;
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 11px;
    }

    .Footer .Footer-text a:link
    {
    text-decoration: none;
    color: #425744;
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: underline;
    }

    .Footer .Footer-text a:visited
    {
    text-decoration: none;
    color: #5C583D;
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: underline;
    }

    .Footer .Footer-text a:hover
    {
    text-decoration: none;
    color: #6A632F;
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: none;
    }
    /* end Footer */

    /* begin PageFooter */
    .page-footer, .page-footer a, .page-footer a:link, .page-footer a:visited, .page-footer a:hover
    {
    font-family:Arial;
    font-size:10px;
    letter-spacing:normal;
    word-spacing:normal;
    font-style:normal;
    font-weight:normal;
    text-decoration:underline;
    color:#8D843F;
    }

    .page-footer
    {
    margin:1em;
    text-align:center;
    text-decoration:none;
    color:#7A7552;
    }
    /* end PageFooter */

    /* begin LayoutCell */
    .contentLayout .sidebar1
    {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
    overflow: hidden;
    width: 218px;
    }

    /* end LayoutCell */

    /* begin LayoutCell */
    .contentLayout .content
    {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
    overflow: hidden;
    width: 100%;
    }

    /* end LayoutCell */

    .commentlist, .commentlist li
    {
    background: none;
    }

    .commentlist li li
    {
    margin-left:30px;
    }

    .commentlist li .avatar
    {
    float: right;
    border: 1px solid #eee;
    padding: 2px;
    margin:1px;
    background: #fff;
    }

    .commentlist li cite
    {
    font-size:1.2em;
    }

    #commentform textarea
    {
    width: 100%;
    }

    img.wp-smiley
    {
    border:none;
    margin:0;
    padding:0;
    }

    .navigation
    {
    display: block;
    text-align: center;
    }

    /* Recommended by http://codex.wordpress.org/CSS */
    /* Begin */
    .aligncenter, div.aligncenter
    {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    .alignleft
    {
    float: left;
    }

    .alignright
    {
    float: right;
    }

    .alignright img, img.alignright
    {
    margin: 1em;
    margin-right: 0;
    }

    .alignleft img, img.alignleft
    {
    margin: 1em;
    margin-left: 0;
    }

    .wp-caption
    {
    border: 1px solid #ddd;
    text-align: center;
    background-color: #f3f3f3;
    padding-top: 4px;
    margin: 10px;
    }

    .wp-caption img
    {
    margin: 0;
    padding: 0;
    border: 0 none;
    }

    .wp-caption p.wp-caption-text
    {
    font-size: 11px;
    line-height: 17px;
    padding: 0 4px 5px;
    margin: 0;
    }
    /* End */

    Het is een lap he, ik wil je best verder helpen maar, ik ga zo sporten en ben pas laat weer thuis, dus moet je even geduld hebben.

    Thread starter wmsbootje

    (@wmsbootje)

    Is prima. Ik heb er geen haast mee. Ben al lang blij dat iemand me ermee wil helpen.
    Veel plezier bij het sporten!

    Je eerste vraag:
    Is het mogelijk de afmetingen van een drop-down menu aan te passen? En zo ja, waar en hoe doe ik dat dan precies.
    Voeg de volgende code toe aan je CSS:
    .children li
    {
    width: 250px;
    }

    Screenshot
    Zoals je ziet heb ik nu een waarde toegevoegd van 250px.

    Je tweede vraag:
    O, nog een vraag. Als je “Jachtverhuur” aanwijst rolt het menu uit. Aan de linkerkant van de blokken staat een lichter streepje van 1 mmm breed. Hoe maak ik dat breder?
    Dit lichte streepje is een onderdeel van een afbeelding van width 4px en height 87px!
    In je CSS staat deze afbeelding onder:
    .artmenu a
    {
    /images/item-left.png
    }
    Als je het streepje breder wilt dan zal je een nieuwe afbeelding moeten maken.

    gr ReZon

    Thread starter wmsbootje

    (@wmsbootje)

    Ik ben helemaal blij!

    Het is me gelukt om die code erin te plakken en de uitlijning van de blokken op links ipv gecentreerd te zetten.
    Dan hoeven de blokken maar 175px breed te zijn en staat alles netjes onder elkaar.

    De code van de afbeelding heb ik nu ook gevonden. Weet alleen nog niet hoe ik het wil hebben qua kleuren, maar dat komt nog wel.

    Ik vind het leuk om uit te vogelen hoe ik alles zelf voor elkaar kan krijgen ipv het over te laten aan een buro wat het voor me zou kunnen doen. Daar leer ik niks van.
    Maar het is toch wel heel fijn dat er mensen zijn die je willen helpen als je tegen problemen aan loopt.

    ReZon, heel erg bedankt!

12 reacties aan het bekijken - 1 tot 12 (van in totaal 12)
  • Het onderwerp ‘afmetingen drop down menu aanpassen’ is gesloten voor nieuwe reacties.