Conflitto di CSS

[Noctua]

Salve, premetto che sono un'autoditta e ho 20 anni. Ho un problema con un conflitto di due css. Il primo css riguarda un menù dropdown, mentre il secondo riguarda una contact form. I due file lì ho scaricati entrambi dai download di html.it. Il mio problema consiste: se trattengo entrambi i css nel codice, il css del menù fa si che i campi della form non funzionano! Quindi io ho cercato di unire i fogli di stile in un unico css, ma invano... Ringrazio in anticipo chi mi aiuterà! Allego anche il mio codice della css:


*{
margin:0;
padding:0;
}
body{ /* casella-testo */
background:#000;
font-family:"Trebuchet MS", Helvetica, sans-serif;
font-size:15px;
color: #fff;
text-transform:uppercase;
overflow-x:hidden;
text-align: center;
letter-spacing:4px;
}
.oe_overlay{
background:#000;
opacity:0;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
}
ul.oe_menu{ /* casella */
list-style:none;
position:relative;
margin:30px 0px 0px 40px;
width:200px;
float:right;
clear:both;
}
ul.oe_menu > li{
width:112px;
height:101px;
padding-bottom:2px;
float:left;
position:relative;
}
ul.oe_menu > li > a{ /* casella */
display:block;
background-color:#101010;
color:#aaa;
text-decoration:none;
font-weight:bold;
font-size:12px;
width:150px;
height:150px;
padding:10px;
margin:1px;
text-shadow:0px 0px 1px #000;
opacity:0.8;
}
ul.oe_menu > li > a:hover,
ul.oe_menu > li.selected > a{
background:#fff;
color:#101010;
opacity:1.0;
}
.oe_wrapper ul.hovered > li > a{ /* casella piccolo dropdown */
background:#fff;
text-shadow:0px 0px 1px #FFF;
}
ul.oe_menu div{
position:absolute;
top:103px;
left:1px;
background:#fff;
width:498px;
height:180px;
padding:30px;
display:none;
}
ul.oe_menu div ul li a{
text-decoration:none;
color:#222;
padding:2px 2px 2px 4px;
margin:2px;
display:block;
font-size:12px;
}
ul.oe_menu div ul.oe_full{
width:100%;
}
ul.oe_menu div ul li a:hover{
background:#000;
color:#fff;
}
ul.oe_menu li ul{
list-style:none;
float:left;
width: 150px;
margin-right:10px;
}
li.oe_heading{ /* testo casella dropdown */
color:#aaa;
font-size:16px;
margin-bottom:10px;
padding-bottom:6px;
border-bottom:1px solid #ddd;
}

p{
margin: 0 0 5px 0;
color:#5F6565;
font-family:"Trebuchet MS", Helvetica, sans-serif;
}
form#formail{
margin:0 auto;
width: 315px;
background-color: #39C;
border: 1px solid #dbdbdb;
padding: 10px;
}
input[type=text]{
background:#FFFFFF none repeat scroll 0 0;
border:1px solid #CED0D0;
color:#5F6565;
font-family:"Trebuchet MS", Helvetica, sans-serif;;
margin-bottom:10px;
padding:4px 5px;
width:300px;
}
textarea{
background:#FFFFFF none repeat scroll 0 0;
border:1px solid #CED0D0;
color:#5F6565;
font-family:"Trebuchet MS", Helvetica, sans-serif;
padding:4px 5px;
width:300px;
height: 160px;
}
#risposta{
display: none;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
}

[fcaldera]

ciao

1. quando si posta codice, soprattutto se è molto lungo, è meglio usare i tag [ code ] e [ / code ] che daranno una formattazione più idonea e leggibile. Così com'è rischia di non essere letto praticamente da nessuno
2. visto che il css va applicato a del markup bisogna postare anche il markup, altrimenti si tira solo ad indovinare cosa non va

quindi integra il tuo post iniziale inserendo almeno un link in cui vedere la pagina in questione, grazie

[Noctua]

ok, riposto il codice coretto, ma il link della pagina non posso darlo perchè non è sul server...mi spiace

css del menù dropdown:

*{
	margin:0;
	padding:0;
}
body{ /* casella-testo */
	background:#000;
	font-family:"Trebuchet MS", Helvetica, sans-serif;
	font-size:15px;
	color: #fff;
	text-transform:uppercase;
	overflow-x:hidden;
	text-align: center;
	letter-spacing:4px;
}
.oe_overlay{
	background:#000;
	opacity:0;
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}
ul.oe_menu{ /* casella */
	list-style:none;
	position:relative;
	margin:30px 0px 0px 40px;
	width:200px;
	float:right;
	clear:both;
}
ul.oe_menu > li{
	width:112px;
	height:101px;
	padding-bottom:2px;
	float:left;
	position:relative;
}
ul.oe_menu > li > a{ /* casella */
	display:block;
	background-color:#101010;
	color:#aaa;
	text-decoration:none;
	font-weight:bold;
	font-size:12px;
	width:150px;
	height:150px;
	padding:10px;
	margin:1px;
	text-shadow:0px 0px 1px #000;
	opacity:0.8;
}
ul.oe_menu > li > a:hover,
ul.oe_menu > li.selected > a{
	background:#fff;
	color:#101010;
	opacity:1.0;
}
.oe_wrapper ul.hovered > li > a{ /* casella piccolo dropdown */
	background:#fff;
	text-shadow:0px 0px 1px #FFF;
}
ul.oe_menu div{
	position:absolute;
	top:103px;
	left:1px;
	background:#fff;
	width:498px;
	height:180px;
	padding:30px;
	display:none;
}
ul.oe_menu div ul li a{
	text-decoration:none;
	color:#222;
	padding:2px 2px 2px 4px;
	margin:2px;
	display:block;
	font-size:12px;
}
ul.oe_menu div ul.oe_full{
	width:100%;
}
ul.oe_menu div ul li a:hover{
	background:#000;
	color:#fff;
}
ul.oe_menu li ul{
	list-style:none;
	float:left;
	width: 150px;
	margin-right:10px;
}
li.oe_heading{ /* testo casella dropdown */
	color:#aaa;
	font-size:16px;
	margin-bottom:10px;
	padding-bottom:6px;
	border-bottom:1px solid #ddd;
}
[/code ]


css della form:
[ code2 ]
p{
margin: 0 0 5px 0;
color:#5F6565;
font-family:"Trebuchet MS", Helvetica, sans-serif;
}
form#formail{
	margin:0 auto;
	width: 315px;
	background-color: #39C;
	border: 1px solid #dbdbdb;
	padding: 10px;
}
input[type=text]{
background:#FFFFFF none repeat scroll 0 0;
border:1px solid #CED0D0;
color:#5F6565;
font-family:"Trebuchet MS", Helvetica, sans-serif;;
margin-bottom:10px;
padding:4px 5px;
width:300px;
}
textarea{
background:#FFFFFF none repeat scroll 0 0;
border:1px solid #CED0D0;
color:#5F6565;
font-family:"Trebuchet MS", Helvetica, sans-serif;
padding:4px 5px;
width:300px;
height: 160px;
}
#risposta{
display: none;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
}

[fcaldera]

Originariamente inviato da Noctua
ok, riposto il codice coretto, ma il link della pagina non posso darlo perchè non è sul server...mi spiace

potresti andare su jsfiddle.net, poi scrivi il codice che riproduce il problema e posti il link,
diversamente nessuno potrà rispondere alla tua domanda

[Noctua]

ok, sono riuscita a caricare la pagina sul server...ecco il link: http://www.keyemotions.it/contacts.html

Vi prego aiutatemi, sono giorni ormai che non riesco a risolvere il problema!! Vi ringrazio di cuore!!

[fcaldera]

il tuo problema è dato dall'elemento

.oe_overlay

che risulta essere sovrapposto al form anche quando non è visible (ha un'opacità pari a 0 ma essendo posizionato si trova sempre sopra il form pertanto quando ci clicchi in realtà clicchi sul div) e ciò dipende non solo dal css ma da javascript

qui

$oe_menu.bind('mouseenter',function(){
	var $this = $(this);
	$oe_overlay.stop(true,true).fadeTo(200, 0.6);
        $this.addClass('hovered');
}).bind('mouseleave',function(){
        var $this = $(this);
	$this.removeClass('hovered');
	$oe_overlay.stop(true,true).fadeTo(200, 0);
	$oe_menu_items.children('div').hide();
})

prova a cambiare in

$oe_menu.bind('mouseenter',function(){
	var $this = $(this);
	$oe_overlay.show().stop(true,true).fadeTo(200, 0.6);
        $this.addClass('hovered');
}).bind('mouseleave',function(){
        var $this = $(this);
	$this.removeClass('hovered');
	$oe_overlay.stop(true,true).fadeTo(200, 0 , function() { $oe_overlay.hide(); });
	$oe_menu_items.children('div').hide();
})

e a riga 15 di style.css aggiungi

.oe_overlay {
    background: none repeat scroll 0 0 #000000;
    height: 100%;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    width: 100%;

    display : none;
}

[Noctua]

oh, grazie 1000!!!!! risolto!!! thank you very much!!!