Webprofis is een Forum waarin je vragen kunt stellen die webgerelateerd zijn. Heb je vragen over of problemen met je Webpagina, HTML, CSS, Javascript, PHP of andere client of serverside scriptingtalen? Stel ze dan gerust op dit forum. Op dit forum zijn een aantal vrijwilligers actief die u graag met uw vragen willen helpen en u waar mogelijk een passend antwoord aanbieden. Hebt u zelf veel ervaring en kennis met betrekking tot het bovenstaande? U bent van harte welkom om uw kennis met anderen te delen!

We hopen dat eenieder op dit Forum een leerzame ervaring mag opdoen.

Team Webprofis

Opgelost Achtergrondrand verwijderen bij hover over menu

bewerkt di 10 mrt 2015 in Stylesheets Posts: 117
Ik heb een vraag. Ben met deze website bezig:
http://www.ladiesnight-exclusive.nl/test/index.html

Daar zie je de navbar met menu

Als ik er overheen scrol zie je aan het buitenste gedeelte nog steeds een grijs randje/lijntje 1px
Ik krijg dat maar niet weg met css en/of code. Ik weet niet waar die staat.

Kunnen jullie een kijken a.u.b ?
Dank je wel!

Reacties

  • bewerkt ma 9 mrt 2015
    PMPosts: 879
    Zet dit eens erbij in je nav li {:

    nav li {
    /* erbij zetten */
    padding-left: 0px !important;
    }

    Nu krijg je problemen aan de rechterkant met de laatste CONTACT
    Dit kun je weer oplossen door de width van het laatsste child te vergroten:


    nav li:last-child {
    width: 173px; /* de anderen zijn 161*/
    }
  • PMPosts: 117
    Nope, gaat niet... na de 1e wijziging wel. En los daarvan blijft het randje onder dan ook nog zichtbaar...
    :) :) Of plaats ik het niet goed...
    Hoor het graag :)
  • PMPosts: 879
    ok, ik zie dat jij FF als browser gebruikt, dit werkte wel in Chrome maar probeer deze eens, die heb ik in FF getest:


    nav li:first-child {
    padding-left: 0px; /* toevoegen */
    }

    En deze in zijn geheel toevoegen:



    nav li:last-child {
    width: 163px;
    }
  • bewerkt di 10 mrt 2015
    PMPosts: 732
    Als je in je stylesheet kijkt staat je dorpdown ul op width 250px, maar je li staat op 248px dus mis je 2 px.

    Ik zou er dan dit van maken:


    nav li ul {
    display:none;
    width:250px; /* die 250 */
    z-index:1000;
    position:absolute;
    left:0;
    top:70px;
    }
    nav li ul li {
    background:none;
    float:none;
    padding:0;
    text-align:left;
    width:100%; /* was 248px */
    }
    nav li ul li:first-child {
    background: url(../images/dropdown.png) no-repeat left top;
    float:none;
    padding:10px 0 0;
    text-align:left;
    /* width:248px; deze kan weg */
    }
    nav li ul li a {
    font-size:14px;
    padding:10px 20px;
    background:#808080; /* 2c2017 */
    border-top:1px solid #ff83e5; /* 382b20 */
    border-bottom:1px solid #ff83e5; /*211811 */
    /* als je de width op 248 laat staan, geef dan een border left en richt dan kom je ook op 250 */
    border-left:1px solid #808080;
    border-right:1px solid #808080;
    }
    nav li ul li:first-child a {
    /* font-size:14px; kan weg */
    /* padding:10px 20px; kan weg */
    /* background:#808080; kan weg */
    border-top:0;
    /* border-bottom:1px solid #ff83e5; kan weg */
    }
    nav li ul li a:hover {
    background:#ff83e5; /* 231912 */
    /* gebruik je geen border left en richt verander dit dan niet */

    /* oud */
    border-top:1px solid #ff83e5; /*2f231a */
    border-bottom:1px solid #ff83e5; /*1b120d */
    /* nieuw *?
    border:1px solid #ff83e5; /*2f231a */
    }

    Maar voor het gene wat je weer geeft en voor het gene wat moet gebeuren met een dropdown vindt ik het verdomd veel html en css voor alleen dat beetje effect.

    Dit kan veel eenvoudiger met veel minder code (html,js.css) en vooral veelminder inline style.
    nuet
    If it's not fun, you're not doing it right!
  • Dat vind ik ook Rene, daar heb je helemaal gelijk in! Toch bedankt!
  • Nou jongens, spijtig, maart alles wat ik probeer. Het lukt niet... Ik ga het denk ik opgeven...
    Moet toch makkelijker zijn? Dus wie nog een poging? :) Dank!
  • PMPosts: 732
    Nog eens even goed gekeken, maar dat lijntje wat je ziet doet hij alleen zodra hij over die felle kleur van de achtergond gaat, laat de achtergond maar eens weg dan zie je dat lijntje ook weg is.

    Je kunt dit wel oplossen, gebruik een schaduw voor het dropdown menu.
    carlos
    If it's not fun, you're not doing it right!
  • PMPosts: 879
    Vreemd, ik zie dit in FF na verandering van mijn laatse post hieroven

    menu1.png
    1242 x 392 - 402K
    menu2.png
    1123 x 295 - 198K
    menu1.png 402.4K
    menu2.png 198.1K
  • Nuet,

    Moet ik het geen jij hebt neergezet, bij het origineel voegen, of hetgeen weghalen, en t jouwe plaatsen?
    Thx!
  • bewerkt di 10 mrt 2015
    PMPosts: 879
    Deze heb je reeds staan in je css:


    nav li:first-child {
    padding-left: 1px;
    /* de rest */
    }
    De padding-left 1px; vervang je door padding-left 0px;

    Onderstaande heb je nog niet in je css, dus die voeg je gewoon in zijn geheel toe:


    nav li:last-child {
    width: 163px;
    }

    Wat uitleg: li van HOME en re van CONTACT heb je 1px brede achtergrondkleur die "uitsteekt"
    Als je de padding van het first child op 0px zet, schuift de hele zaak 1px naar links omdat alle lists naar left floaten. Gevolg hiervan is dat nu re van CONTACT 2px uitsteekt. De widths van alle list zijn 161. Als we de laatste dus 163 maken heb je weer alles dekkend
  • PMPosts: 732
    Een tip, gooi dat menu eruit want dat is een rotzooitje.
    Men gebruikt zowel een border als padding om een ander kleur rand te geven.
    En dan allemaal afbeeldingen voor een beetje kleur te krijgen, dat gaat toch veel mooier.
    nuetcarlos
    If it's not fun, you're not doing it right!
Login of Registreer om te reageren.