Keresés
Hírlevél
 
Kiemelt témák
»Hogy viszonyul ehhez a család?
»Legjobb metodika emberi relációk tárolására
»A programozó hibája, hogy törik a programját?
»Jogosultság kezelés mezőszinten
Állás/munka
»Wordpress szakértőt keresünk
»Kamu álláshirdetők listája
»Front-end fejlesztő / Sitebuilder
»DataStore Developer
»PHP programozó, webfejlesztő munkát keres
» több téma
Tudástár
√Oldalon keresés 8x írja ki az eredményt
?XML-ből sok szövegmező
?Input mezőből visszakapott adat probléma
√TinyMCE és az ékezetek
?Rengeteg hasonló kép betöltése gyorsan (PHP)
√Ékezetes kar. nem minden táblában jól
?Shelltreeview gond
√Grafikon rajzolás probléma
?Onclick= php függvény
?Egyenes megrajzolása
?Access-ből adott xml fájl kinyerése
√Listázás időpont szerint
√Exportálás változó könyvtárba
*Link eredményének kiolvasása
√Imagemapre képet
» több téma
Társalgó
»A programozásból jól meg lehet élni?
»MFC tanulás
»Könyvet adok-veszek
»Hogy viszonyul ehhez a család?
»Nintendo wii
»Letölthető az új Rad Studio XE és Delphi XE
»Weblap véleményezés
»Játékmotor elmélet
»Informatikai bulvárlap
»Delphi-ről C++-ra váltás
» több téma
ASP  |  C#  |  C++  |  CSS  |  Delphi  |  Flash  |  HTML  |  Java  |  JavaScript  |  Pascal  |  Perl  |  PHP  |  Python  |  Visual Basic  |  Visual C++  |    »    

Tudástár

»

Több oldalvezérlő menü egy oldalon

»

Több oldalvezérlő menü egy oldalon

nyitotta: Kukuri, idő: 2010.03.11., moderátor: Árnyék
  Értesítés változás esetén Felvétel kedvencekhez Küldés emailben Nyomtatható verzió

Kategóriák:Web-programozás » HTML
Web-programozás » CSS

Sorrend:
Időzóna:
Blokkméret:
Oszd meg másokkal is!iWiWWindows LiveGoogle BookmarksBlogtérLinktérStartlapUrlguruDiggDeliciousTumblrStumbleUponYahoo!NetVibes
Üdvözletem!

Az oldalom két menüsort szeretnék használni.
Egyet felül vizszintese és egyet jobb oldalt függőlegesen. A pozícionálást és egyéb stílusbeállításokat CSS-ben oldom meg. A két menü külön külön <div> ben van azon belül a html listájával.
<ul><li>
A probléma akkor jelentkezik amikor a jobb oldali menüsornak CSS-be megadom a position: absolute; értéket. Ekkor ugyanis a felül levő vízszintes menü nem működik. Nincsenek meg a hivatkozások.
Ebben kérem a segítséget.
'a menu két külön div-ben van', akkor gondolom más más ID-vel rendelkeznek, ez esetben add meg igy a CSS-t:

#menu-vizszint ul li {
//mindenféle stilus meghatározás
}

#menu-fuggoleges ul li {
//mindenféle stilus meghatározás
}
Szia!
Szerintem úgy van de beszúrom a program részleteket.
Vizszintes menu
<ul id="menu">
<li><a id="n1" href="./index.php">Főoldal</a></li>
<li><a id="n2" href="./irasok/irasok.htm">Statisztika</a></li>
</ul>
<div id="tartalom.leiras" align="center">
<img SRC="./kepek/<?=$kep?>.jpg" align="bottom" BORDER=0 height=500>
</div>
Függőleges menü jobb oldalt

<div id="reklamjobb">

<?=$maxkep?>/<?=$kep?>. kép

<ul id="orszagmenu">
<li><a href="./feldolgoz.php?sz=1024&kep=<?=$kep+1?>&valasz=Ausztrália&log=<?=$log?>"> Ausztrália</a></li>
<li><a href="./feldolgoz.php?sz=1024&kep=<?=$kep+1?>&valasz=Ausztria&log=<?=$log?>">Ausztria</a></li>
<li><a href="./feldolgoz.php?sz=1024&kep=<?=$kep+1?>&valasz=Francia&log=<?=$log?>">Franciaország</a></li>
<li><a href="./feldolgoz.php?sz=1024&kep=<?=$kep+1?>&valasz=Görög&log=<?=$log?>">Görögország</a></li>
<li><a href="./feldolgoz.php?sz=1024&kep=<?=$kep+1?>&valasz=Hollandia&log=<?=$log?>">Hollandia</a></li>
<li><a href="./feldolgoz.php?sz=1024&kep=<?=$kep+1?>&valasz=India&log=<?=$log?>">India</a></li>
<li><a href="./feldolgoz.php?sz=1024&kep=<?=$kep+1?>&valasz=Izrael&log=<?=$log?>">Izrael</a></li>
<li><a href="./feldolgoz.php?sz=1024&kep=<?=$kep+1?>&valasz=Líbia&log=<?=$log?>">Líbia</a></li>
<li><a href="./feldolgoz.php?sz=1024&kep=<?=$kep+1?>&valasz=Magyarország&log=<?=$log?>">Magyarország</a></li>
<li><a href="./feldolgoz.php?sz=1024&kep=<?=$kep+1?>&valasz=Németország&log=<?=$log?>">Németország</a></li>
<li><a href="./feldolgoz.php?sz=1024&kep=<?=$kep+1?>&valasz=Olaszország&log=<?=$log?>">Olaszország</a></li>
<li><a href="./feldolgoz.php?sz=1024&kep=<?=$kep+1?>&valasz=Oroszország&log=<?=$log?>">Oroszország</a></li>
<li><a href="./feldolgoz.php?sz=1024&kep=<?=$kep+1?>&valasz=Skócia&log=<?=$log?>">Skócia</a></li>
<li><a href="./feldolgoz.php?sz=1024&kep=<?=$kep+1?>&valasz=Svájc&log=<?=$log?>">Svájc</a></li>
<li><a href="./feldolgoz.php?sz=1024&kep=<?=$kep+1?>&valasz=Törökország&log=<?=$log?>">Törökország</a></li>
<li><a href="./feldolgoz.php?sz=1024&kep=<?=$kep+1?>&valasz=Zambia&log=<?=$log?>">Zambia</a></li>

</ul>
</div>
css ben

#menu{
margin-left: auto;
margin-right: auto;
padding-left: auto;
white-space: nowrap;
position: relative;
height: 27px;
width: 728px;

}
#menu li{
display: inline;
list-style-type: none;
}
#menu a {
padding: 3px 10px;
background-image: url(kepek/button.gif);
height: 20px;
width: 101px;
display: inline;
position: absolute;
text-align: center;
color: lightgreen;
text-decoration: none;
}
#menu a:hover{
background-image: url(kepek/buttonover.gif);
color: white;
}
#n1{left: 0px;}
#n2{left: 121px;}
#reklambal{
margin-right: 120;
margin-left: 0;
margin-top: 20px;
position: absolute;
width: 120px;
text-align: left;
}
#reklamjobb{
margin-left: auto;
margin-right: 1024;
padding-left: 904;
white-space: nowrap;
position: absolute; //itt van a gond !!!!!!!!!!!!!!!!!!
width: 105px;
font-weight:bold;
text-align: center;
}

#orszagmenu li{
list-style-type: none;
}
#orszagmenu a{
  display:block;
  font-weight:bold;
  width:105px;
  height:20px;
  background:url(kepek/button.gif) no-repeat;
  padding-top:2px;
  text-align:left;
  color:lightgreen;
  font-size:16px;
  /*letter-spacing:-0.001em;*/
  /*font-family:arial;*/
  /*font-weight:bold;*/
}
#orszagmenu li a:hover {
  background:url(kepek/buttonover.gif) no-repeat;
  color:#FFE081;
  color:white;
  cursor:pointer;
}

három fő div rész van.
1-1 két oldalt a kissebb dolgoknak és egy rész középpütt a tartalomnak.
Szerintem akkor akár mehetne az összes div-ed absolute pozicioval, és az ilyenekre figyelj oda:


#menu{
margin-left: auto;
margin-right: auto;
padding-left: auto;
white-space: nowrap;
position: relative;
height: 27px;
width: 728px;

}
hogy mindig a position legyen elől, IE nekem csinált emiatt érdekes dolgokat.


#menu{
position: relative;
margin-left: auto;
margin-right: auto;
padding-left: auto;
white-space: nowrap;
height: 27px;
width: 728px;

}

meg az n1, n2 nek se ártana position-t beállítani.
Szia!

Alakítottam a kódon. De nem igen változik.
Az oldalt Itt tudod megnézni. A felső két gomb nem működik, oldalt meg igen.
Nem szúrom be a teljes kódot mert a böngészővel úgyis megtudod nézni.
ennyit változtattam és szerintem jó lett
#reklamjobb {
font-weight:bold;
margin-left:100px;
margin-right:1024px;
position:absolute;
text-align:center;
white-space:nowrap;
width:105px;
}

a padding-left nem volt jó hatással a kódra.
Köszönöm. Így tényleg megy.
Megintcsak figyelmetlenség miatt szívattam magam.
margin-left helyett padding-left volt beírva. Így lett egy 900 pixeles rész ahol nem csinál semmit.
Mégegyszer köszönöm
Nagyon szivesen!
Oszd meg másokkal is!iWiWWindows LiveGoogle BookmarksBlogtérLinktérStartlapUrlguruDiggDeliciousTumblrStumbleUponYahoo!NetVibes
Belépés
E-mail cím:
Jelszó:

RSS források
-Hírek
-Cikkek
-Fórumok
-Állás/munka
Top pontgyűjtők
»Micu1.030
»Interlock280
»mezofi150
»Pitta_100
»Frostech0100
»szbzs.2100
»Riha60
»Akhiles50
»mrchandra50
»Bakter50
Top wikieditorok
»Sting
»Doi
»FlamingClaw
»Argathron
»Csaboka2
»Vodka
»Joexy
»Ivn
»Balucinho
»Kelemzol
» ugrás a wikire
A nap kifejezései
»Algoritmus
»Hogyan kezdjem el
»Perl
» ugrás a wikire
Hírek
»Megérkezett a PostgreSQL 9.0 kiadásra jelölt változata
»Letölthető az új Rad Studio XE és Delphi XE
»Function-X digitális művészeti találkozó és demoscene party
»Webfejlesztőknek szóló közösségi oldalt indított a Microsoft
»Letölthető a hardvergyorsított Chrome 7 első fejlesztői kiadása
» több hír
PC Fórum hírek
»Itt az első kép az AMD nyolcmagos processzoráról
»"Szuperdizájnos" érintő-egeret mutatott be a Microsoft
»Szabadalmaztatta a számítógép kikapcsolását a Microsoft
»Vírusriadót váltott ki a webezőknél a Google
»Ingyen iWiW-ezhetnek mobiljaikról a T-Mobile-osok
»Automatikusan kiválogatja legfontosabb leveleink a Google
»OOo4Kids - ingyenes Office csomag gyerekeknek
»Új, gyorsabb Core i3 és Pentium processzorokat jelentett be az Intel
Tagi blogok
»PSP
»Első Programozó
»USB
»PHP, mint sablonmotor egyszerűen
Copyright (C) 2001-2005 DevWorxEszköztár  |  RSS hírek  |  A használat feltételei  |  GY.I.K  |  Impresszum  |  Médiaajánlat