Overflow (?) van een achtergrond plaatje

[Zeezicht]

Voor een website die ik aan het maken ben, heb ik een soort navigatiebalk in beeld. Op deze balk kan je zien waar je zit op de website dmv van de links die erin staan en als background een soort icoon.

<div id="nav_bar" class="nav_contact"><a href="URL">Naam site</a> > <a href="URL">Naam pagina</a></div>

De stylesheet hierbij is:

code:

div#nav_bar {
    padding-right: 60px;
    height: 25px;
    padding-top: 10px;
    background-color: #eee; 
    border-top: 1px solid #ddd; 
    border-bottom: 1px solid #ddd; 
    font-size: x-small; 
    text-align: right;
    background-repeat: no-repeat; 
    background-position: right;
}

.nav_contact {
    background-image: url('contact.gif');
}

Nu is het icoontje echter groter dan de balk met achtergrond en borders moet worden. Nu zou ik willen dat het icoontje aan de boven- en onderkant gewoon over de randen heen gaat.
Ik kom daar echter niet uit. Heeft iemand een idee hoe ik dat voor elkaar kan krijgen?

[Reinier]

M.i. kan dit niet. De background van een element zal nooit buiten dat element zichtbaar zijn.

[Zeezicht]

Is het dan mogelijk met een gewoon plaatje?

[Reinier]

Ja, je kan het op meerdere manieren oplossen, bijvoorbeel door het icoontje niet als achtergrond te gebruiken maar hem d.m.v. relative of absolute positioning op de juiste plek neer te zetten.

Heb je anders een linkje naar wat je nu hebt en hoe het er uit moet komen te zien?

[André]

Zet de top van je background op -10px

[ Voor 3% gewijzigd door André op 10-11-2004 14:04 ]

[Zeezicht]

André schreef op 10 november 2004 @ 14:04:
Zet de top van je background op -10px

Dit heeft helaas geen effect.

Ja, je kan het op meerdere manieren oplossen, bijvoorbeel door het icoontje niet als achtergrond te gebruiken maar hem d.m.v. relative of absolute positioning op de juiste plek neer te zetten.

Heb je anders een linkje naar wat je nu hebt en hoe het er uit moet komen te zien?

Zit zit achter een firewall op een interne webserver, dus dat wordt lastig,

Maar ik ga ff proberen een los plaatje te positioneren. Helaas is het dan niet makelijk met een stylesheet aan te passen Of heb ik dat mis?

[Reinier]

Zeezicht schreef op 10 november 2004 @ 14:11:
[...]


Dit heeft helaas geen effect.

Dat leek mij ook, de background kan de DIV nou eenmaal niet verlaten, en dat is juist wél wat jij wilt!

Maar ik ga ff proberen een los plaatje te positioneren. Helaas is het dan niet makelijk met een stylesheet aan te passen Of heb ik dat mis?

Dat heb je volgens mij mis, dat kan namelijk prima. Bijvoorbeeld in je source:

code:

[img]"contact.gif"[/img]

En in je stylesheet:

code:

img#icon
{
     position: absolute ;
     top: 5px ;
     right: 80px ;
}

Anyway, zoiets dus.

Overigens kan je beter de underscores uit de class- en id-namen halen!

[Zeezicht]

Reinier schreef op 10 november 2004 @ 14:49:
Dat heb je volgens mij mis, dat kan namelijk prima. Bijvoorbeeld in je source:

code:

[img]"contact.gif"[/img]

En in je stylesheet:

code:

img#icon
{
     position: absolute ;
     top: 5px ;
     right: 80px ;
}

Anyway, zoiets dus.

Overigens kan je beter de underscores uit de class- en id-namen halen!

Thx voor de tip van de underscores. Maar wat ik eigenlijk bedoelde met het veranderen in het stylesheet is dat ik de url wil aanpassen in het stylesheet, omdat deze ook ergens anders voorkomen en dus dan op 1 plaats gedefineerd zijn. Maar dat lijkt mij dus niet mogelijk...