Blog.hu CSS menüsor rendezés

**luv3rboy** · 2011-09-14, 16:52

Sziasztok,

Egy CSS menügyártó oldalon legyártottam egy menüsort a blogomhoz. Automatikusan az oldal tetejéhez igazítja. Szeretném ha a menüsor az első blogpost tetejére csúszna, bonyolult ezt megcsinálni? Valaki tudna segíteni ha nem túl macerás? Köszönöm.

Hasonló témák:

**ceto** · 2011-09-14, 17:25

beidézhetnéd a html-t meg a css-t úgy talán egyszerűbb lenne megoldást találni mert ezerféle lehetőség van

**luv3rboy** · 2011-09-14, 17:36

Igaz így talán egyszerűbb

Ez a HTML kód:

Kód:

<div id="tabs27"> <ul> <li><a href='httphttp://nvyv.blog.hu/tags/vicces_vide%C3%B3' title='VICCES VIDE&#195;“K' class='current'><span>VICCES VIDE&#195;“K</span></a></li> <li><a href='http://nvyv.blog.hu/tags/vicces_k%C3%A9p' title='VICCES K&#195;‰PEK'><span>VICCES K&#195;‰PEK</span></a></li> <li><a href='http://nvyv.blog.hu/tags/vicc' title='VICCEK'><span>VICCEK</span></a></li> </ul> </div>

Ez a CSS kód:

Kód:

/* ---------------------- Redslate nav ---------------------- */
#tabs27{position:inherit;top:30px;left:5px;display:block;height:42px;font-size:12px;font-weight:bold;background:transparent url(http://cggrafikus.blog.hu/media/image/images/redslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
#tabs27 ul{margin:0px;padding:0;list-style-type:none;width:auto;}
#tabs27 ul li{display:block;float:left;margin:0 1px 0 0;}
#tabs27 ul li a{display:block;float:left;color:#FECCC3;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
#tabs27 ul li a:hover,#tabs27 ul li a.current{color:#fff;background:transparent url(http://cggrafikus.blog.hu/media/image/images/redslate_backgroundOVER.gif) no-repeat top center;}
/* ---------------------- END Redslate nav ---------------------- */

**kozmaaguru** · 2011-09-15, 01:28

Üdv!

Nem tudom, mennyire szabadon szerkeszthető a blog.hu, már, hogy mennyire lehet változtatni a html és a css -t.

Ha van rá mód, akkor jó.

De egy kis ötlet:

A css-t egészítsed ki ezzel:

.menupozicio666{
position: absolute;
float: left;
left: 0px;
top: XXXXpx;
}

Ha megvagy, akkor akkor a tap27 záró és nyitó div jeit, tedd bele, így:

<div class="menupozicio666">

<div id="tabs27">......</div>

</div>

Ha megvagy, akkor a top: XXXpx , helyébe írj egy számot. pl (,ár az XXX helyébe) 10px, vagy 80px vagy -80 px. Azért, hogy lássad, hová pozicionálja, ez ugye függ attól, milyen
egyéb div -ekben van. (ehhez ismerni kéne jobban, a blog.hu felépítését)

"z-index: 1000 !important;" -al is kiegészítheted, nehogy eltakarja egy meglévő div. (akár régebbi böngészőkben)

De ezzel a módszerrel, láthatod azt, hogyan változik a a tab27 osztály helye, benne a menüvel. És innen már a top -al tudod pozicionálni.

(Hidd el, könnyebb lenne, ha meg is adnád a blog.hu oldalad, mert akkor látnám a felépítését. )

Ü: kozmaaguru

**luv3rboy** · 2011-09-15, 13:34

kozmaaguru eredeti hozzászólása

(Hidd el, könnyebb lenne, ha meg is adnád a blog.hu oldalad, mert akkor látnám a felépítését. )

Íme a blog oldalam:
Köszönöm szépen a segítséget!!!!
http://nvyv.blog.hu/

**kozmaaguru** · 2011-09-15, 18:04

Szia!

Jó az oldal, vicces. Sajnos nem volt időm foglalkozni vele, ezért csak most írok, ugyanis az oldal lekötötte a figyelmem.

A menu pozicionálására pedig próbáld, ki ezt (nem tudom, elsőre ok lesz-e, de majd lehet változtatni):

1. Csináld azt, hogy lemásolod a mostani sablonodat, egy másik néven. Mert akkor bármikor vissza tudod állítani a jelenlegi állapotokat, ha valami nem lenne jó.

2. Ha ez kész, akkor tedd aktívvá ezt a másolt sablont, hogy ezt használja a próbára.

3. Menj be a sablonod css fájljába. Itt keresd meg ezt a #tabs -részt, ahová beszúrtad.

És most változtasd meg a #tabs és a #tabs ul -részeket, ilyenre:

#tabs27{position:left; margin-left:30px; top:0px;left:5px;display:block;height:42px;font-size:12px;font-weight:bold;background:transparent url(hXXp://cggrafikus.blog.hu/media/image/images/redslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}

#tabs27 ul{margin:0px;padding:0;list-style-type:none; width:620px;}

FIGYELEM! a >tabs27 ben az url(hxxp:// -t direkt tettem xx -eket, mert nem engedi ez fórum motor, hogy linket beletegyek a hozzászólásomba! Írd át http -re!

#tabs27 ul{margin:0px;padding:0;list-style-type:none; width:620px;}

Itt történt pár változtatás (position, margin-left, top, a #tabs27 nél meg adtunk neki width 620px et, ezek történtek)

Ha ez kész, akkor már csak 1 lépés:

4. Menj be "a sablon szerkesztése" -be (</> ikon)

Jelöld ki ezt: <div id="tabs27">...</div> , a menut, a tabs27 divekben, majd töröld ki onnan, ahol most van. Áttesszük máshová!

5. Ezt a tabs27 div es részt másold be a <div id="wrapper3"> után, közvetlenül, de úgy, hogy az egészet beletesszük egy másik div be.

Tehát ez megy a <div id="wrapper3"> után:

<div style="position: absolute; top:350px;">
<div id="tabs27">....</div>
</div>

Elvileg kész.

Ha minden igaz, akkor a megfelelő width mérettel átkerül a menu. Nem tudom, pont jó lesz e pozíciója de itt:

<div style="position: absolute; top:350px;">

a top értékével tudod pontosítani, ha pl feljebb szeretnéd, hogy megjelenjen, akkor top:310px et írsz pl. Vagy kipróbálgatod, ennek a változtatásával, hol mutat a legjobban.

Próbáld ki, hátha jó lesz.

**luv3rboy** · 2011-09-16, 18:23

kozmaaguru eredeti hozzászólása

Szia!

Próbáld ki, hátha jó lesz.

Szuper jó lett!!!! Millióóóóóóóó köszönet neked!!!! Remélem meghálálhatom neked egyszer. Ha valami segítség kell és tudok segíteni akkor szívesen megteszem!!!