ugrás a tartalomhoz

Menü túllóg a határoló diven

walko · 2009. Jún. 26. (P), 08.55
Sziasztok,

Ismét a segítségeteket kérném. Egy weboldalt készítek, amin a felül lévő menü a következőképpen néz ki:
- van 1 header - ez egy kép (800px széles)
- alatta egy 1 menubar - ez is egy kép (800px széles) és egy div is egyben
- a menubarban egy menuitems átlátszó háttérrel (detto div (szélessége: 796px, mert a két fenti képnek van mindkét oldalt egy 2px solid white border-je, a képnek magának és nem html kóddal létrehozva)).

Érdekes módon IE-ben szépen megjelenik minden úgy ahogy kell, de FF és Chrome alatt a menuitems átlátszó háttere kilóg a menubar-ból jobbra és a menubar kép jobb széléről hiányzik 1px széles border és a képen látszik is egy 1 pixelnyi elcsúszás, de nem végig (azaz csak kb az utolsó 20%-on látszik az elcsúszás).
Ha leveszem a menuitems méretét 792px akkor szépen megjelenik, de megmarad a háttérkép elcsúszása és IE alatt meg már csúnya.

Kicsit nagyon tanácstalan vagyok, mi lehet a probléma.
Nagyon köszönöm a segítségeteket.
‹ Oldalak közötti áttűnés IE8 table height ›
 ■
1

+ info

walko · 2009. Jún. 26. (P), 09.01
Most vettem észre, hogy FF alatt nem 800 px széles a frame div (amibe pakoltam az egész oldalt), viszont Chrome és IE alatt igen...
Ezt se tudom miért csinálja :(
2

LINK!!

szabo.b.gabor · 2009. Jún. 26. (P), 09.20
nemá..
3

nem lehet

walko · 2009. Jún. 26. (P), 09.33
Ha arra gondolsz, hogy adjak linket, amin meg tudom mutatni, akkor sajnos nem fog menni, mert nem járultak még hozzá, hogy kiadjam.
Kérdésre nagyon szívesen válaszolok.
Egy képet csináltam, hátha jobban látható, amit leírtam.

hiba.jpg
4

kód?

solkprog · 2009. Jún. 26. (P), 09.56
Akkor szürkítsd le a forráskódot problémás részre, cseréld ki a képeket, és erre adjál egy linket/forráskódot.

üdv,
Balázs
5

kód

walko · 2009. Jún. 26. (P), 10.52
Nos ami a kérdéses részre vonatkozik:

<div class="head">
    <img src="../images/newheader.jpg" border="0" width="800" height="232">        </div>

<div class="menubar">
    <div class="menuitems">
.
.
.
    </div>
</div>
A html rész ennyi és a css pedig:

.menubar
{
    height: 100px;
    width: 800px;
    background-image: url('../images/menuback2.jpg');
    position: relative;
}

.menuitems
{
    filter:alpha(opacity=40);
    opacity: 0.40;
    background-color: #AA0000;
    position: absolute;
    width: 796px;
    top: 25%;
    left: 2px;
    height: 50px;
    padding: 3px;
    letter-spacing: 1.5px;
    line-height: 200%;
}
6

padding

csman007 · 2009. Jún. 26. (P), 13.12
a padding + left az 5px nem 4
7

köszi

walko · 2009. Jún. 26. (P), 13.41
Köszönöm a megvilágítását a problémának... valóban az volt a baj.
A padding összeadódik a margóval... megtanultam.
Nagyon köszönöm.

Viszont a FF továbbra is benne hagyja azt az apró törést és nem is 800 px széles a frame div. Ezt mi okozhatja?
Ennyi csak a frame css kódja

.frame
{
    width: 800px;
    /*text-align: center;*/
    margin-right: auto;
    margin-left: auto;
}
8

+ info

walko · 2009. Jún. 26. (P), 17.32
Már jópár órája jóbarátom a Gugli, de csak arra sikerült rájönnöm, hogy más is találkozott már a problémával, azaz, neki is átméretezi a háttérképet a FF.
Érdekes módon, ha csinálok egy teljes új html lapot és arra rakom be csak a képet, akkor nem méretezi át. Az eredeti oldalról kivettem már mindent, ugyanúgy néz ki mint a proba oldal, de semmi változás a képen. :(

HA van ötlet kérlek mondjátok.
9

próbáld meg ugy, h nem

csman007 · 2009. Jún. 26. (P), 17.35
próbáld meg ugy, h nem px-xel, hanem %-al adod meg.
10

sajnos...

walko · 2009. Jún. 26. (P), 18.31
Nem megy úgy sem... valamiért szerintem a frame div-vel van baja, de mi a búbánat?
IE és Chrome alatt tökéletes.

Még egy dolog:
amikor csak a proba oldalt készítettem a két képpel egymás alatt, akkor a kettő között megjelent egy 5px magas "rés". Ha beállítottam egy margin-top: -5px; akkor tökéletesen egymás alatt voltak és nem volt eltolás sem a menüben.
Ha ezt alkalmaztam a frame div-ben, akkor ott persze "felcsúszott" az alsó kép.
11

megoldva

walko · 2009. Jún. 26. (P), 20.20
Nagyon köszönöm a segítséget!
Végülis az volt a probléma, hogy az egyik div-ben html img-két volt bent a kép, a másikban pedig a css-ben volt megadva, mint background-image...

Nem keverem ezentúl.
Viszont a kép méretének megnövelése még mindig probléma, de nem zavaró. Ha valaki tud megoldást, örömmel veszem.
12

biztosan elcsúszás?

kerzo · 2009. Jún. 26. (P), 20.29
Biztosan elcsúszik a kép? Vagy egyszerűen csak ismétli a css-ben megadott hátteret? Mert nem látni a forrásban, hogy le lenne tiltva (no-repeat). Ilyenkor ha a div mérete nem egyezik meg pontosan a kép méretével, akkor lehet, hogy az egyik oldalon az ismétléstől vastagabbnak látszik a border.