πρόβλημα με το μενού και το photo slider sto blog μου

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
nikos1992
Δημοσιεύσεις: 12
Εγγραφή: 07 Ιούλ 2011 01:30
Επικοινωνία:

πρόβλημα με το μενού και το photo slider sto blog μου

Δημοσίευση από nikos1992 » 08 Οκτ 2011 20:26

Έχω φτιάξει ένα blog στο blogger με ένα έτοιμο template και επειδή δεν μου άρεσε το μενού που είχε βρήκα ένα άλλο που έχει και υποκαρτέλες. Το πρόβλημα είναι οτι οταν ανοίγουν οι υποκρτέλες μπαίνουν κάτω από το photo slider kai τις διαφημίσεις adsense, και δεν εμφανίζονται, το blog μου ειναι το www.zoomsports.gr
Προσπαθώ τόσες μέρες να βρω τι φταίει και δεν εχώ βρεί τιποτα, αυτό που θέλω είναι το μενού να εμφανίζετε πάνω από το slider και τις διαφημίσεις.

Αν μπορεί και ξέρει κάποιος να με βοηθήσει θα του ήμουν υπόχρεος

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6235
Εγγραφή: 30 Νοέμ 2004 03:09

πρόβλημα με το μενού και το photo slider sto blog μου

Δημοσίευση από fafos » 09 Οκτ 2011 00:01

vale sto #menu{...} tou style ena z-index:9999; kai ksanaprospathise..
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

nikos1992
Δημοσιεύσεις: 12
Εγγραφή: 07 Ιούλ 2011 01:30
Επικοινωνία:

πρόβλημα με το μενού και το photo slider sto blog μου

Δημοσίευση από nikos1992 » 11 Οκτ 2011 20:13

fafos σε ευχαριστώ πολύ για την απάντηση σου και δούλεψε μια χαρά αυτό που έδωσες, τώρα όμως έχω ένα άλλο περίεργο πρόβλημα, όταν ανοίγω την σελίδα με google chrome το meu φαίνεται μια χαρά, όταν όμως ανοίγω την σελίδα με firefox η μ ie9 τότε τα δύο πρώτα link εμφανίζοντα μια χαρά, τα επόμενα όμως εμφανίζονται περίπου μια γραμμή ποιο κάτω από τα δύο πρώτα και έτσι δεν εμφανίζονται στη ίδια γραμμή. Πραγματικά δεν μπορώ να καταλάβω τι φταίει και μου φαίνεται περίεργο να είναι μια χαρά με chrome και να έχει πρόβλημα με firefox και ie9.


ο κώδικας είναι αυτός:

Κώδικας: Επιλογή όλων


<style type="text/css">


body, ul, li &#123;
	font-size&#58;14px; 
	font-family&#58;Arial, Helvetica, sans-serif;
	line-height&#58;21px;
	text-align&#58;left;
&#125;

#menu &#123;

	list-style&#58;none;
	width&#58;958px;
	margin&#58;-5px auto 0px auto;
	height&#58;40px;
	padding&#58;0px 20px 0px 20px;

	/* Rounded Corners */
	
	-moz-border-radius&#58; 10px;
	-webkit-border-radius&#58; 0px;
	border-radius&#58; 0px;

	/* Background color and gradients */
	
	background&#58;url&#40;http&#58;//2.bp.blogspot.com/-2NpAshAQ0G8/TpHlrQYdPLI/AAAAAAAAAQE/lwa_6MEX7EE/s1600/Button%2B1_1.bmp&#41;;




	
	/* Borders */
	
	border&#58; 1px solid #002232;

	-moz-box-shadow&#58;inset 0px 0px 1px #edf9ff;
	-webkit-box-shadow&#58;inset 0px 0px 1px #edf9ff;
	box-shadow&#58;inset 0px 0px 1px #edf9ff;

&#125;

#menu li &#123;
	float&#58;left;
	display&#58;block;
	text-align&#58;center;
	position&#58; relative;
	padding&#58; 4px 10px 4px 10px;
	margin-right&#58;30px;
	margin-top&#58;7px;
	border&#58;none;
z-index&#58;9999;&#125;

#menu li&#58;hover &#123;
	border&#58; 1px solid #777777;
	padding&#58; 4px 9px 4px 9px;
	
	/* Background color and gradients */
	
	background&#58; #F4F4F4;
	background&#58; -moz-linear-gradient&#40;top, #F4F4F4, #EEEEEE&#41;;
	background&#58; -webkit-gradient&#40;linear, 0% 0%, 0% 100%, from&#40;#F4F4F4&#41;, to&#40;#EEEEEE&#41;&#41;;
	
	/* Rounded corners */
	
	-moz-border-radius&#58; 5px 5px 0px 0px;
	-webkit-border-radius&#58; 5px 5px 0px 0px;
	border-radius&#58; 5px 5px 0px 0px;
&#125;

#menu li a &#123;
	color&#58; #ffffff;

font-family&#58; Trebuchet MS, Arial, sans-serif, Helvetica;

font-size&#58;14px;

text-decoration&#58;none;

font-weight&#58; bold;
	display&#58;block;
	outline&#58;0;
	text-decoration&#58;none;
	text-shadow&#58; 1px 1px 1px #000;
&#125;

#menu li&#58;hover a &#123;
	color&#58;#161616;
	text-shadow&#58; 1px 1px 1px #ffffff;
&#125;
#menu li .drop &#123;
	padding-right&#58;21px;
	background&#58;url&#40;""&#41; no-repeat right 8px;
&#125;
#menu li&#58;hover .drop &#123;
	background&#58;url&#40;"http&#58;//2.bp.blogspot.com/-gjfjleKuHfo/TpMYeNkUa3I/AAAAAAAAAQM/V0Z7bHM3tow/s1600/Actions-arrow-down-icon.png"&#41; no-repeat right 7px;
&#125;

.dropdown_1column, 
.dropdown_2columns, 
.dropdown_3columns, 
.dropdown_4columns,
.dropdown_5columns &#123;
	margin&#58;4px auto;
	float&#58;left;
	position&#58;absolute;
	left&#58;-999em; /* Hides the drop down */
	text-align&#58;left;
	padding&#58;10px 5px 10px 5px;
	border&#58;1px solid #777777;
	border-top&#58;none;
	
	/* Gradient background */
	background&#58;#F4F4F4;
	background&#58; -moz-linear-gradient&#40;top, #EEEEEE, #BBBBBB&#41;;
	background&#58; -webkit-gradient&#40;linear, 0% 0%, 0% 100%, from&#40;#EEEEEE&#41;, to&#40;#BBBBBB&#41;&#41;;

	/* Rounded Corners */
	-moz-border-radius&#58; 0px 5px 5px 5px;
	-webkit-border-radius&#58; 0px 5px 5px 5px;
	border-radius&#58; 0px 5px 5px 5px;
&#125;

.dropdown_1column &#123;width&#58; 140px;&#125;
.dropdown_2columns &#123;width&#58; 280px;&#125;
.dropdown_3columns &#123;width&#58; 420px;&#125;
.dropdown_4columns &#123;width&#58; 560px;&#125;
.dropdown_5columns &#123;width&#58; 700px;&#125;

#menu li&#58;hover .dropdown_1column, 
#menu li&#58;hover .dropdown_2columns, 
#menu li&#58;hover .dropdown_3columns,
#menu li&#58;hover .dropdown_4columns,
#menu li&#58;hover .dropdown_5columns &#123;
	left&#58;-1px;
	top&#58;auto;
&#125;

.col_1,
.col_2,
.col_3,
.col_4,
.col_5 &#123;
	display&#58;inline;
	float&#58; left;
	position&#58; relative;
	margin-left&#58; 5px;
	margin-right&#58; 5px;
&#125;
.col_1 &#123;width&#58;130px;&#125;
.col_2 &#123;width&#58;270px;&#125;
.col_3 &#123;width&#58;410px;&#125;
.col_4 &#123;width&#58;550px;&#125;
.col_5 &#123;width&#58;690px;&#125;

#menu .menu_right &#123;
	float&#58;right;
	margin-right&#58;0px;
&#125;
#menu li .align_right &#123;
	/* Rounded Corners */
	-moz-border-radius&#58; 5px 0px 5px 5px;
    -webkit-border-radius&#58; 5px 0px 5px 5px;
    border-radius&#58; 5px 0px 5px 5px;
&#125;

#menu li&#58;hover .align_right &#123;
	left&#58;auto;
	right&#58;-1px;
	top&#58;auto;
&#125;

#menu p, #menu h2, #menu h3, #menu ul li &#123;
	font-family&#58;Arial, Helvetica, sans-serif;
	line-height&#58;21px;
	font-size&#58;12px;
	text-align&#58;left;
	text-shadow&#58; 1px 1px 1px #FFFFFF;
&#125;
#menu h2 &#123;
	font-size&#58;21px;
	font-weight&#58;400;
	letter-spacing&#58;-1px;
	margin&#58;7px 0 14px 0;
	padding-bottom&#58;14px;
	border-bottom&#58;1px solid #666666;
&#125;
#menu h3 &#123;
	font-size&#58;14px;
	margin&#58;7px 0 14px 0;
	padding-bottom&#58;7px;
	border-bottom&#58;1px solid #888888;
&#125;
#menu p &#123;
	line-height&#58;18px;
	margin&#58;0 0 10px 0;
&#125;

#menu li&#58;hover div a &#123;
	font-size&#58;12px;
	color&#58;#015b86;
&#125;
#menu li&#58;hover div a&#58;hover &#123;
	color&#58;#029feb;
&#125;


.strong &#123;
	font-weight&#58;bold;
&#125;
.italic &#123;
	font-style&#58;italic;
&#125;

.imgshadow &#123; /* Better style on light background */
	background&#58;#FFFFFF;
	padding&#58;4px;
	border&#58;1px solid #777777;
	margin-top&#58;5px;
	-moz-box-shadow&#58;0px 0px 5px #666666;
	-webkit-box-shadow&#58;0px 0px 5px #666666;
	box-shadow&#58;0px 0px 5px #666666;
&#125;
.img_left &#123; /* Image sticks to the left */
	width&#58;auto;
	float&#58;left;
	margin&#58;5px 15px 5px 5px;
&#125;

#menu li .black_box &#123;
	background-color&#58;#333333;
	color&#58; #eeeeee;
	text-shadow&#58; 1px 1px 1px #000;
	padding&#58;4px 6px 4px 6px;

	/* Rounded Corners */
	-moz-border-radius&#58; 5px;
    -webkit-border-radius&#58; 5px;
    border-radius&#58; 5px;

	/* Shadow */
	-webkit-box-shadow&#58;inset 0 0 3px #000000;
	-moz-box-shadow&#58;inset 0 0 3px #000000;
	box-shadow&#58;inset 0 0 3px #000000;
&#125;

#menu li ul &#123;
	list-style&#58;none;
	padding&#58;0;
	margin&#58;0 0 12px 0;
&#125;
#menu li ul li &#123;
	font-size&#58;12px;
	line-height&#58;24px;
	position&#58;relative;
	text-shadow&#58; 1px 1px 1px #ffffff;
	padding&#58;0;
	margin&#58;0;
	float&#58;none;
	text-align&#58;left;
	width&#58;130px;
&#125;
#menu li ul li&#58;hover &#123;
	background&#58;none;
	border&#58;none;
	padding&#58;0;
	margin&#58;0;
&#125;

#menu li .greybox li &#123;
	background&#58;#F4F4F4;
	border&#58;1px solid #bbbbbb;
	margin&#58;0px 0px 4px 0px;
	padding&#58;4px 6px 4px 6px;
	width&#58;116px;

	/* Rounded Corners */
	-moz-border-radius&#58; 5px;
    -webkit-border-radius&#58; 5px;
    -khtml-border-radius&#58; 5px;
    border-radius&#58; 5px;
&#125;
#menu li .greybox li&#58;hover &#123;
	background&#58;#ffffff;
	border&#58;1px solid #aaaaaa;
	padding&#58;4px 6px 4px 6px;
	margin&#58;0px 0px 4px 0px;
&#125;
</style>

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

πρόβλημα με το μενού και το photo slider sto blog μου

Δημοσίευση από apsuh0s » 11 Οκτ 2011 20:58

Για πρόσθεσε στο #menu:

Κώδικας: Επιλογή όλων

#menu &#123; display&#58; inline-block; &#125;
.ninja { color: black; visibility: hidden !important; }

nikos1992
Δημοσιεύσεις: 12
Εγγραφή: 07 Ιούλ 2011 01:30
Επικοινωνία:

πρόβλημα με το μενού και το photo slider sto blog μου

Δημοσίευση από nikos1992 » 11 Οκτ 2011 22:08

ευχαριστώ πολύ
αυτό ήταν, τώρα δουλεύει μια χαρά

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες