CSS pasa de mi

maiksix · #1 (**permalink**) 04/03/2015, 14:42

Hola!

El otro día pregunte por el foro de html como hacer un menu desplegable y lo consegui! Ahora estoy intentando modificar el color, y que desaparezca los puntos que vienen por defecto delante de los li.
El problema es que si introduzco en el html el código de "list-style:none;" para que desaparezca el punto, y pongo "background-color: #656565;" para definir un color de fondo funciona perfecto. Pero, al ponerlo en el CSS no funciona...

Dejo el código del CSS y luego el del HTML para ver si hay algo que no está bien escrito.
Además adjunto una captura de lo que se ve actualmente en la web.

Muchas gracias, y un saludo!

Código:

li{
	list-style:none;
background-color: #656565;
}

.submenu{
	background-color: #656565;
	position:absolute;
	margin-top:-12px;
	padding-left:10px;
	padding-right:10px;
}

.nav_list > li{
background-color: #656565;
display:inline-block;
 margin: 0 1em;
}

Código:

<div style="background:#656565; margin-left:-190px;width:1378px;height:30px ">
			  <tr>
		  <nav>
		  	<ul id="lista" class="nav_list">
				<td><li style="margin-left:0px; margin-top:-55px;"class="home"><b><a href="campeonato-karting.php" style="text-decoration:none"><p style=""><font size="3"> Campeonato</font></p></a></b></li> </td>
				<td><li style="margin-left:20px; margin-top:-55px;"class="home"><b><a href="reglamentos-karting.php" style="text-decoration:none"><p style=""><font size="3"> Reglamentos</font></p></a></b></li> </td>
				<td><li style="margin-left:20px; margin-top:-55px;"class="home"><b><a href="calendarios-karting.php" style="text-decoration:none"><p style=""><font size="3"> Calendario</font></p></a></b></li> </td>
		       <td><li style="margin-left:20px; margin-top:-55px;"class="home"><b><a href="circuitos-karting.php" style="text-decoration:none"><p style=""><font size="3"> Circuitos</font></p></a></b></li>  </td>
				 <td><li style="margin-left:20px; margin-top:-55px;"class="home"><b><a href="clasificaciones-karting.php" style="text-decoration:none"><p style=""><font size="3"> Clasificaciones</font></p></a></b></li>  
		       <td><li style="margin-left:20px;margin-top:-55px;" class="media"><b><a href="reglamentos-karting.php" style="text-decoration:none"><p style=""><font size="3">Multimedia</font></p></a></b>
		           <ul class="submenu">
		              <li id="img" class="home"><i><a href="imagenes-karting.php" style="text-decoration:none"><p style=""><font size="3">Im&aacute;genes</font></p></a></i></li>
						  <div class="lista" style="background:#000000;width:80px;height:1px "></div>
		              <li style="list-style-type:none;" id="vdo" class="home"><i><a href="videos-karting.php" style="text-decoration:none"><p style=""><font size="3">Videos</font></p></a></i></li>
						  <div class="lista" style="background:#000000;width:80px;height:1px "></div>
						  <li style="background-color: #656565;" id="revista" class="home"><i><a href="revistas-karting.php" style="text-decoration:none"><p style=""><font size="3">Revistas</font></p></a></i></li>
						  <div class="lista" style="background:#000000;width:80px;height:1px"></div>
		           </ul>
		       </li></td>
		    </ul>	
		  </nav>
</tr>
		</div>

Cómo veis ni el fondo del desplegable es del color gris oscuro que le dijo en el CSS, ni desaparecen los puntos...

pzin · #2 (**permalink**) 04/03/2015, 14:45

Madre mía. Vaya código.

No puedes meter filas dentro de listas ordenadas o tablas dentro de aquí y aquello acá y… Madre mía.

Saca todas las tablas de ahí, sólo se usan para contenido tabulado que no es el caso, saca los elementos font que llevan 16 años descatalogados… Arregla primero el HTML y luego mira a ver si CSS te hace caso. Es que lo tratas muy mal. Una mujer tampoco te haría caso así.

maiksix · #3 (**permalink**) 04/03/2015, 15:25

Vale! Ya está hecho y ya funciona

Muchas gracias!!
Sólo tengo un problema... no me hace caso con el margin-top...

Código:

li{
	list-style:none;
	margin-top:20px;
}

AngelKrak · #4 (**permalink**) 04/03/2015, 18:39

Cita:

Iniciado por maiksix

Vale! Ya está hecho y ya funciona

Muchas gracias!!
Sólo tengo un problema... no me hace caso con el margin-top...

Código:

li{
	list-style:none;
	margin-top:20px;
}

agregale el Position: Relative... y en caso de que no funcione el margin top, cambialo por top: 20px;

Código:

li{
	list-style:none;
	margin-top:20px;
        position: relative;
}

Código:

li{
	list-style:none;
	top:20px;
        position: relative;
}

pzin · #5 (**permalink**) 05/03/2015, 11:54

La solución de AngelKrak es un parche bastante malo que genera otros problemas no deseados.

Pon el código HTML/CSS. Puede que ses un problema de colapsamiento CSS.

maiksix · #6 (**permalink**) 06/03/2015, 04:29

Aquí esta el css

Código:

.mce-tinymce.mce-container.mce-panel{
	width:30%;
}

<style type="text/css">   
a:link   
{   
 text-decoration:none;   
}   
</style>

html {
   width: 100%;
   heigth: 100%;
}
body {
   width: 100%;
   heigth: 100%;
   
    font-family: "Helvetica";
}

h1 {
    font-family: "Helvetica";
    font-size:20px;

}

h2 {
    font-family: "Helvetica";
    font-size:10px;
}

p {
    font-family: "Helvetica";
    font-size:14px;
}

li{
	list-style:none;
	margin-top:20px;
}

.submenu{
	background-color: #656565;
	position:absolute;
	margin-top:-12px;
	padding-left:10px;
	padding-right:10px;
}

.imagenes{
	margin-top:20px;
}

.nav_list > li{
display:inline-block;
 margin: 0 1em;
}

.lista{
	margin-top:-10px;
	margin-bottom:2px;
	
}

#lista {
        display: inline;
}

#demo{
	margin-top:-10px;
	margin-bottom:-8px;
	font-size:30px;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

li.home{
	padding-bottom:10px;
	margin-left:20px;
}

p.carrera{
	font-size:26px;
	margin-top: -20px;
	margin-left: 145px;
}

p.cierre{
	font-size:20px;
	margin-top: -20px;
	margin-left: 145px;
}

p.categoria{
	font-size:30px;
	padding-left:40px;
}

p.titulo{
	font-size:16px;
	margin-bottom:-20px;
	margin-top:10px;
}

p.importe{
	font-size:30px;
}
p.Acepto{
margin-top: -20px; 
margin-left:45px;
font-size:20px;
}

.tabla{
	margin-left:20px;
	
}

#separador{
background:#C0C0C0;
margin-top:30px;
width:100%;
height:5px 	
}

Y este es la parte html que no me hace ni caso

Código:

<center><a href="index.php"><img style="width:1024px;height:230px;" alt="Campeontato de Espa&ntilde;a de karting" title="RFEDA" src="logos_rfeda/CEK1.jpg"/></a>
		  </center>
        <div style="background:#656565;width:100%;height:30px ">
			  
		  <nav>
		  	<ul id="lista" class="nav_list">
				<li class="home"><b><a href="campeonato-karting.php" style="text-decoration:none"><p style=""> Campeonato</p></a></b></li>
			<li style="margin-left:20px; margin-top:-55px;"class="home"><b><a href="reglamentos-karting.php" style="text-decoration:none"><p style=""> Reglamentos</p></a></b></li>
				<li class="home"><b><a href="calendarios-karting.php" style="text-decoration:none"><p style=""> Calendario</p></a></b></li>
		       <li class="home"><b><a href="circuitos-karting.php" style="text-decoration:none"><p style="">Circuitos</p></a></b></li>
				 <li class="home"><b><a href="clasificaciones-karting.php" style="text-decoration:none"><p style="">Clasificaciones</p></a></b></li>  
		       <li class="media"><b><a href="reglamentos-karting.php" style="text-decoration:none"><p style="">Multimedia</p></a></b>
		           <ul class="submenu">
		              <li id="img" class="home"><i><a href="imagenes-karting.php" style="text-decoration:none"><p style="">Im&aacute;genes</p></a></i></li>
						  <div class="lista" style="background:#000000;width:80px;height:1px "></div>
		              <li  id="vdo" class="home"><i><a href="videos-karting.php" style="text-decoration:none"><p>Videos</p></a></i></li>
						  <div class="lista" style="background:#000000;width:80px;height:1px "></div>
						  <li  id="revista" class="home"><i><a href="revistas-karting.php" style="text-decoration:none"><p>Revistas</p></a></i></li>
						  <div class="lista" style="background:#000000;width:80px;height:1px"></div>
		           </ul>
		       </li>
		   
	 
 		 <li class="imagenes"><a href="http://www.cronosystem.es/cek2014/" style="text-decoration:none"><img style="width:250px; height:30px" alt="Campeontato de Espa&ntilde;a de karting" title="RFEDA" src="logos_rfeda/livetiming.png"/></a></li>
		 <li class="imagenes"><a href="" style="text-decoration:none"><img style="width:30px; height:30px" alt="Campeontato de Espa&ntilde;a de karting" title="RFEDA" src="logos_rfeda/youtube.png"/></a></li>
 			<li class="imagenes"><a href="https://www.facebook.com/KartingNacional?fref=ts" style="text-decoration:none"><img style=" width:30px; height:30px" alt="Campeontato de Espa&ntilde;a de karting" title="RFEDA" src="logos_rfeda/contacto-facebook.png"/></a></td></li>
          <li class="imagenes"><img style="width:30px; height:30px" alt="Campeontato de Espa&ntilde;a de karting" title="RFEDA" src="logos_rfeda/contacto-twitter.png"/></li>
	    </ul>	
	  </nav>
		</div>

Quiero subir un poco sólo los class="home" y class="media", las imágenes están perfectamente como están ahora.

Gracias, y un saludo!

AngelKrak · #7 (**permalink**) 06/03/2015, 10:19

amigo para empezar tu codigo tiene un monton de errores :/ y es imposible poder arreglartelo asi como lo tienes >_< deberias estudiar un poco mas HTML y volver a hacer esa pag >_< o ya de menos quitar ese menu que no sirve y hacer uno nuevo >_<

maiksix · #8 (**permalink**) 07/03/2015, 04:02

Errores de que tipo?

El menú está sacado de este propio foro... xD

Edito: Ya está arreglado ;) Ha resultado muy simple al final xD.

AngelKrak · #9 (**permalink**) 07/03/2015, 07:17

noose pero tiene muchos div, styles en html es muy complicado poder ver bien la pag y arreglarla asi >_< y para que tienes divs dentro del menu o.O y esto para que sirve ._.?
<div style="background:#656565;width:100%;height:30px ">
ya intente arreglarlo de muchas formas pero no se puede talves sea por el css que tienes en html

y esto del css lo puedes juntar amigo ;)

Cita:

html {
width: 100%;
heigth: 100%;
}
body {
width: 100%;
heigth: 100%;

font-family: "Helvetica";
}

y quedaria asi:

Cita:

html, body {
width: 100%;
heigth: 100%;
font-family: "Helvetica";
}

NueveReinas · #10 (**permalink**) 11/03/2015, 08:48

Cita:

Iniciado por pzin

Es que lo tratas muy mal. Una mujer tampoco te haría caso así.