ugrás a tartalomhoz

háttérkép képtérképpel és egy div doboz esete

Csányi Pál · 2006. Már. 18. (Szo), 21.03
A háttérképet Gimppel készítettem; van rajta hét gomb, melyet navigáció céljából festettem. Az volt a tervem, hogy készítek a gombokhoz képtérképet, és ha majd a fölhasználó odakattint, akkor a megfelelő oldal nyílik majd meg.

Igen ám, de kiderült a számomra, hogy háttérképnek beállított képhez nem rendelhető ilyen képtérkép. Ugye igazam van?

A háttérképet egy CSS állományban adom meg, ahol viszont hiába adom meg az usemap="#map" kódot, annak nem lesz hatása.

Ha viszont a képet nem háttérként, hanem rendesen adom meg az usemap="#map" kóddal, akkor működik a navigáció, viszont a div dobozom e kép alá kerül, ami nem jó, mert én azt szeretném, hogy a kép a navigációs gombokkal a szöveg mögött legyen!

Hogy a szöveg a navigációs gomboktól kissé jobbra álljon, azt megoldottam.

Hogyan érhetném el azt, hogy a weboldalon elhelyezett kép a doboz mögött legyen?

A doboz meghatározása a CSS állományban:
.main {
overflow: auto;
margin-top: 92px;
margin-bottom: 10px;
margin-left: 180px;
margin-right: 180px;
border: groove;
border-color: #F6DD90;
padding: 1em;
float: left;
width: 600px;
height: 310px;
}
A html oldal részlete:
<DIV class="main"> ... </DIV>
Minden tanácsot megbecsülök!
‹ Alap Ajax példákat hol találok? Három hasábos CSS oldalfelépítés? ›
 ■
1

Szelet

Edit · 2006. Már. 18. (Szo), 21.28
Képtérképes megoldás mindenféle használhatósági problémákat vet fel. A felhasználóid egy jelentős része utálni fogja. Inkább szeleteld fel azt a képet darabokra, és egyenként állítsd be CSS-ben háttérként az egyes HTML elemek alá. Navigációnak mindig bombabiztos megoldást kell választani, mert ha nem működik, elérhetetlenné válik az oldalad:

<ul>
<li><a href="akarmi.html" id="akarmi">Akármi</a></li>
<li><a href="valami.html" id="valami">Valami</a></li>
</ul>


#akarmi { background: url(1.jpg) no-repeat top left; }
#valami { background: url(2.jpg) no-repeat top left; }
2

Szeletelés és képtérkép nélkül, egész háttérképet?

Csányi Pál · 2006. Már. 18. (Szo), 22.00
Azon gondolkodom, hogy talán lehetséges a következő.

Az egész képet szeletelés és képtérkép nélkül háttérnek megadom CSS állományban.

A CSS segítségével fölszabdalom az oldalt annyi részre, ahány navigációs gombot készítettem a háttérképre.

Ennek módját innen venném: http://www.w3.org/TR/1998/REC-CSS2-19980512/visuren.html#fixed-positioning

Ennél a példánál maradva a sidebar részt osztanám föl hét részre, a hét gombnak megfelelő dimenziókra, hogy fedjék a gombokat a háttérképen.

Aztán - valami módon - ide helyezném a hívatkozásokat (link -eket).

Lehetséges volna ez?
3

?

Edit · 2006. Már. 18. (Szo), 22.28
Nem vagyok benne biztos, hogy értem, mi a kérdés, de azt meg lehet csinálni, hogy beállítasz 1 nagy háttérképet, mondjuk a body elemre, és megpróbálod CSS-ben pixelpontosan a háttérkép adott pontjai fölé igazítani a linkeket és egyéb dolgokat az oldaladon. Ekkor viszont fix szélességet és magasságot kell megadnod, mert különben 800x600 és 1024x768 felbontású monitoron más-máshová fognak esni a linkek, nem beszélve arról, mi történik, ha a felhasználó átméretezi a böngésző ablakát, vagy mondjuk mobiltelefonon nézi az oldaladat.

Plusz ott van még a "pixelpontos" probléma - nem tudom, mennyire bonyolult az az oldal, de elég nehéz úgy megírni a CSS-t, hogy minden böngésző ugyanazt mutassa. Ha rákeresel az "1px probléma" szavakra itt a keresőben, bőséges gyűjteményt fogsz találni. Heteket el lehet szórakozni az ilyen pozicionálgatással.

Ez egy nagyon rugalmatlan megoldás, én nem így fognék hozzá. Szerintem nem is nagyon dizájnol így senki. Kis hátterek egyenként az elemek alá - mindenki így csinálja.
5

Értem, és elfogadom a tanácsod!

Csányi Pál · 2006. Már. 18. (Szo), 23.43
Értem, és elfogadom tanácsodat!

Aggaszt azonban az, hogy megállnak-e majd egymás mellett ezek a fölsorolások (ul) és a dobozom?

ul -1 |----------------------|
ul -2 |_____doboz______|
ul -3 |________________|
ul -4 |________________|

Ebben a rögzített helyzetű dobozban ugyanis szöveg van, és a dobozban gördíthető a szöveg.

Minden tanácsot megbecsülök!
6

Látni kéne

Edit · 2006. Már. 18. (Szo), 23.46
Tedd ki légyszi az oldalt valahová, hogy lássuk, miről van szó.
7

Gond-e..

Csányi Pál · 2006. Már. 18. (Szo), 23.58
Szemináriumi munkának készül a nagybecskereki műszaki egyetemre ez a honlap.
Ezért aztán a háttérképen a cím, meg a dobozban a szöveg, meg máshol is a szöveg szerb nyelvű. Aki akarja, nézze meg itt:
http://csanyipal.info/~csanyipal/tehnicko/index.html

Minden tanácsot megbecsülök!
8

Ha minden tanács érdekel...

erenon · 2006. Már. 19. (V), 00.07
akkor szerintem a háttérkép túl nagy (lassan jön be)
és nem jó villogó szöveget alkalmazni (ízlés kérdése, és a fórumon valki szerint az epilepsziásokra is veszélyes)

A kérdés az maradt, h hol van a menü, ahol a problémád felvetődött?
Mert én nem látok egy darab felsorolást sem, csak egy linket, de az őt köülölelő doboznak nincs láthatóan háttérképe...
9

Mert közben szerkesztem..

Csányi Pál · 2006. Már. 19. (V), 00.13
Azért nincs már ott a menü.

A villogást meg mindjárt kiszedem.

A háttérképet tegyem át jpg formátumba? Az segít a beolvasás gyorsaságán?
10

Ha bmp..

erenon · 2006. Már. 19. (V), 00.16
akkor feltétlenül! A méret számít!
11

Én se

Edit · 2006. Már. 19. (V), 00.20
Én se értem, hol lenne a menü. Meg azt se, hogy az oldal címe és egyéb fontos információk miért háttérképen vannak. Azt a keresők, mobiltelefonok, felolvasóprogramok nem látják. Elkezdhetjük 15 körön keresztül megcsinálni a menüt, stb. De hidd el, fele annyi energiával megtanulhatod a HTML-t és CSS-t.

El kellene olvasnod egy HTML és CSS szerkesztési könyvet, például ezt:

Webszerkesztés stílusosan

Ennél jobb tanácsot nem tudok adni.
12

Igaza van

erenon · 2006. Már. 19. (V), 00.38
a kedves hölgynek, h bővíteni kéne a téren az ismereteidet, viszont szerintem ne könyvből. Egyszerűen szvsz felesleges kidobni rájuk a pénzt. Ezek a dolgot ezrével megtalálhatóak az interneten, frissen-fiatalosan-ingyen, és olyan rövid magyarázatot igényelnek, h a szemed se folyik ki tőle.

Láttam a honlapodat, és ott rendesen meg van csinálva. A háttérképek nem tartalmazhatnak információt. Minden legyen szövegesen, és a problémáid megoldódnak (a jobb keresési eredményekről ((ha kellenek)) nem is beszélve)
13

Könyv

Edit · 2006. Már. 19. (V), 02.12
viszont szerintem ne könyvből. Egyszerűen szvsz felesleges kidobni rájuk a pénzt

Minden fent van az interneten, ha tudod, hol keresd. De ahhoz, hogy keresni és kérdezni tudj, előbb valahonnan meg kell tanulnod a szakmát, legalább alapfokon.
4

1xű

Anonymous · 2006. Már. 18. (Szo), 23.12
Szerintem radírozd le a gombokat a háttérképről => bg.jpg
a leradírozott gombok átlátszó háttérrel => gomb.jpg

a div megkapja háttérnek a bg.jpg-t.
a listák pedig listajelölőnek a gomb.jpg-t
extrának pedig az li:hover kap egy list-style: url(gomb2.jpg); -t.
14

Doboz felül

Joó Ádám · 2006. Már. 19. (V), 11.51
Az eredeti elképzelés már csak azért sem működne, mert ha a doboz a képtérkép felett van, akkor elfedi és nem lehet a térképre kattintani.
15

Igaz! Viszont van egy megoldás.

Csányi Pál · 2006. Már. 20. (H), 00.18
Kaptam egy segítséget, és ezt használom majd:
<body>
<a href="index.html" target="_parent"> 
<img style="border:0px;width:120px;height:40px" 
src="images/gomb_120_1.gif" alt="Címoldal" />
</a><br />