Fixed position μενου

[Redshift]

Fixed position μενου για το blog της υπογραφης μου

 

κατι σαν αυτο δλδ

http://blog.lacymorrow.com/projects/xspf-jukebox/

 

any tips?

[thanocaster]

Σαν τί tips δηλαδή;

[Redshift]

πως γινεται αυτο μωρε

[thanocaster]

css:

 

>
div#fixed-banner {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100px;
}

 

Αυτό νομίζω είναι cross browser.

[Redshift]

θενκς αλλα δεν δουλευει αυτο

 

ο κωδικας του μενου

 

><script src="http://dl.dropbox.com/u/47365411/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
   var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
   if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
 var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
   d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
 if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_effectShake(targetElement)
{
Spry.Effect.DoShake(targetElement);
}
</script>


<div align="center"><a href="http://nefelisdreams.blogspot.com/search/label/Παραμύθια#order=ASC" target="_self" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('par','','http://3.bp.blogspot.com/-lr7f2jpKXXE/Tp7yKHyGASI/AAAAAAAAAHE/YpVY3_60wwc/s1600/Παραμύθια+2.png',0)"><img src="http://4.bp.blogspot.com/-Ek9LLdBMoCM/Tp7yJrWOrGI/AAAAAAAAAG8/uIaMwr0uK9A/s1600/%25CE%25A0%25CE%25B1%25CF%2581%25CE%25B1%25CE%25BC%25CF%258D%25CE%25B8%25CE%25B9%25CE%25B1+1.png"  alt="Παραμύθια" name="par" width="133" height="128" border="0" id="par" onclick="MM_effectShake('par')" /></a><a href="http://nefelisdreams.blogspot.com/search/label/Παιχνίδια#order=ASC" target="_self" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('paixn','','http://4.bp.blogspot.com/-TUaq9IZwnHA/Tp7yJEmdXsI/AAAAAAAAAG0/yXdR6Yn0zf4/s1600/Παιχνίδια+2.png',0)"><img src="http://1.bp.blogspot.com/-hEqXdAfnMl8/Tp7yIRV3P3I/AAAAAAAAAGs/-KpGbsfVC5Q/s1600/%25CE%25A0%25CE%25B1%25CE%25B9%25CF%2587%25CE%25BD%25CE%25AF%25CE%25B4%25CE%25B9%25CE%25B1+1.png"  alt="Παιχνίδια" name="paixn" width="133" height="163" border="0" id="paixn" onclick="MM_effectShake('paixn')" /></a><a href="http://nefelisdreams.blogspot.com/search/label/Ζωγραφική#order=ASC" target="_self" onclick="MM_effectShake('Zograf')" onmouseover="MM_swapImage('Zograf','','http://1.bp.blogspot.com/-isLXfMNZ6qI/Tp7yE77thqI/AAAAAAAAAGE/PljhupSjtqI/s1600/%CE%96%CF%89%CE%B3%CF%81%CE%B1%CF%86%CE%B9%CE%BA%CE%AE+2.png',0)" onmouseout="MM_swapImgRestore()"><img src="http://3.bp.blogspot.com/-vYRUbJPKQTU/Tp7yEcMP5KI/AAAAAAAAAF8/GjBPgcA97Aw/s1600/%25CE%2596%25CF%2589%25CE%25B3%25CF%2581%25CE%25B1%25CF%2586%25CE%25B9%25CE%25BA%25CE%25AE+1.png"  alt="Ζωγραφικη" name="Zograf" width="133" height="149" border="0" id="Zograf" /></a><a href="http://nefelisdreams.blogspot.com/search/label/Καρτούνς#order=ASC" target="_self" onclick="MM_effectShake('kart')" onmouseover="MM_swapImage('kart','','http://2.bp.blogspot.com/-QAurKajjzzg/Tp7yGUX-bqI/AAAAAAAAAGU/8dTgkoUu-C0/s1600/%CE%9A%CE%B1%CF%81%CF%84%CE%BF%CF%8D%CE%BD%CF%82+2.png',0)" onmouseout="MM_swapImgRestore()"><img src="http://3.bp.blogspot.com/-4KECN9YGAb8/Tp7yFjBRXbI/AAAAAAAAAGM/DcuJid1uxDc/s1600/%25CE%259A%25CE%25B1%25CF%2581%25CF%2584%25CE%25BF%25CF%258D%25CE%25BD%25CF%2582+1.png"  alt="Καρτούνς" name="kart" width="133" height="130" border="0" id="kart" /></a><a href="http://nefelisdreams.blogspot.com/search/label/Διάφορα#order=ASC" target="_self" onclick="MM_effectShake('diaf')" onmouseover="MM_swapImage('diaf','','http://1.bp.blogspot.com/-PG6-1Qc7kGA/TskwUw1yeGI/AAAAAAAABTs/boDgkT6SWL8/s1600/%25CE%2594%25CE%25B9%25CE%25AC%25CF%2586%25CE%25BF%25CF%2581%25CE%25B1+2.png',0)" onmouseout="MM_swapImgRestore()"><img src="http://2.bp.blogspot.com/-2vXg93pNCs8/TskwUl6EvbI/AAAAAAAABTo/8_zAFFemC8s/s1600/%25CE%2594%25CE%25B9%25CE%25AC%25CF%2586%25CE%25BF%25CF%2581%25CE%25B1+1.png"  alt="Διάφορα" name="diaf" width="133" height="144" border="0" id="diaf" /></a><a href="http://nefelisdreams.blogspot.com/2011/01/blog-post_5022.html" target="_self" onclick="MM_effectShake('leyk')" onmouseover="MM_swapImage('leyk','','http://3.bp.blogspot.com/-Nfz6ktuRCQ0/Tp7yHyhvh3I/AAAAAAAAAGk/4CPRiukj3QQ/s1600/%CE%9B%CE%B5%CF%8D%CE%BA%CF%89%CE%BC%CE%B1+2.png',0)" onmouseout="MM_swapImgRestore()"><img src="http://4.bp.blogspot.com/-ODaj4m1hPIg/Tp7yHKMPcsI/AAAAAAAAAGc/Fuz208HUAHI/s1600/%25CE%259B%25CE%25B5%25CF%258D%25CE%25BA%25CF%2589%25CE%25BC%25CE%25B1+1.png"  alt="Λεύκωμα" name="leyk" width="133" height="149" border="0" id="leyk" /></a></div>
<center><b>Παραμύθια         Παιχνίδια         Ζωγραφική       &nbsp &nbsp  Καρτούνς   &nbsp &nbsp   Διάφορα   &nbsp &nbsp   Λεύκωμα  </b></center>

[thanocaster]

Χμμ... Απ' ότι βλέπω μια χαρά σου δουλεύει...

 

>
#fixed-banner {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 50px;
background: red;
z-index: 10000;
}

 

Επίσης, πρέπει να βάλεις στον κώδικά σου ένα div με id "fixed-banner" κάτω από το body tag:

 

>
<body>
<div id="fixed-banner">fixed position</div>

[Redshift]

ok thanks

 

http://testnefeli.blogspot.com/

 

τωρα πως βαζω transparent background πισω απο το μενου?

[thanocaster]

Χμμ... Δεν καταλαβαίνω ακριβώς τί εννοείς. Απ' ότι βλέπω, θέλεις να είναι εκεί τα κουμπιά του navigation. Η λευκή ημιδιάφανη εικόνα που έχεις βάλει, υποθέτω πως θέλεις να είναι το background των κουμπιών.

 

Άρα, βγάλε το img tag με το φόντο, και δώσε στο css του #fixed-banner αυτά τα properties:

>
#fixed-banner {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 185px;
background: url(http://4.bp.blogspot.com/-gGuNQxZJZ9k/TtIp9A0GZiI/AAAAAAAABYA/fq1TMCg6FtQ/s1600/Untitled-1.png);
z-index: 10000;
}

 

 

EDIT: Ο κώδικας που σου παρέθεσα, έχει αυτό το αποτέλεσμα:

 

 

Αν δεν είναι αυτό που θέλεις να κάνεις, εξήγησέ μου λίγο πιο αναλυτικά τί θέλεις να κάνεις, ή φτιάξτο στο περίπου στο photoshop και ανέβασε screenshot.

[Redshift]

το εφτιαξα μονος μου μαν

 

θενκς να σαι καλα

[thanocaster]

Και κάτι που παρατήρησα μόλις: όταν κάνω κλικ στο μπλέ πετούμενο, με πάει στο λινκ: http://twitter.com/Your%20Twitter%20User%20Name%20Here!, το οποίο φυσικά δεν υπάρχει. Ψάξε στο widget που έχεις και βάλε το σωστό λινκ για το twitter σου.

[Redshift]

οχι μωρε απλα δεν εχω twitter για το blog, μου αρεσει το animated πουλακι πολυ στην σελιδα και φυσικα μπορεις να κανεις tweet την σελιδα στο δικο σου twitter

 

ευχαριστω μαν

 

 

 

 

2 προβληματα

 

το z index δεν δουλευει με τον internet explorer

 

και επισης χανω την autohide μπαρα του blogger

 

http://nefelisdreams.blogspot.com/