Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] No entiendo como funciona width:100%

Estas en el tema de No entiendo como funciona width:100% en el foro de CSS en Foros del Web. Hola a todos, tengo un problema con un div y el width 100% de ese. He estado buscando info y he encontrado que los elementos ...
  #1 (permalink)  
Antiguo 30/01/2015, 04:21
Avatar de maiksix  
Fecha de Ingreso: noviembre-2014
Ubicación: Sabadell
Mensajes: 124
Antigüedad: 10 años
Puntos: 1
No entiendo como funciona width:100%

Hola a todos,

tengo un problema con un div y el width 100% de ese. He estado buscando info y he encontrado que los elementos superiores pueden limitar el width de los elementos contenidos, cosa que es muy lógica, así que modifique los width de los contenedores para ver si funcionaba, pero no consigo de ninguna manera que el div coga el 100% de la pantalla...

Os pongo el código, he marcado en rojo el div que me da el problema. Puede ser que veáis algún tag mal cerrado, ya que he borrado contenido de la página para evitar poner mucho código.

A ver si podéis echarme una mano con esto, que ando un poco perdido.

Gracias y un saludo!

Código:
<?php
include("mysqlcon.php");
header('Content-Type: text/html; charset=UTF-8');
?>

<html>

<head>
<link href='http://kartingrfeda.com/RFEDA/Imagenes/rfeda.ico' rel='shortcut icon' type='image/x-icon'>
<title>Karting Real Federeaci&oacute;n espa&ntilde;ola de automovilismo</title>
<meta name="description" content="Ofrecemos todas aquellas noticias de karting espa&ntilde;ol que os interesan, adem&aacute;s de fotos exclusivas, entrevistas, videos y otros materiales"></meta>
<link href="style.css" rel="stylesheet" type="text/css" />
<meta name="tipo_contenido"  content="text/html;" http-equiv="content-type" charset="utf-8">
</head>

<body link="#000000" vlink="#000000" alink="#000000" style="background:#FFFFFF;width:100%; height:auto;">
<div id="content" style="background:#223D6E;width:1024px; height:auto;margin-top:-10px;padding-bottom:100px;margin-left:auto;margin-right:auto;padding-left: 50px;padding-right: 50px;">
<table>		
                    
        <a href="index.php"><img style="margin-left:-210px;width:1358px;height:230px;" alt="Campeontato de Espa&ntilde;a de karting" title="RFEDA" src="logos_rfeda/CEK.jpg"/></a>
        <div style="background:#C0C0C0; margin-left:-210px;width:1358px;height:30px ">
        <tr style="width:1358px;height:30px;">
         <td><b><a href="circuitos-karting.php" style="text-decoration:none"><p style="margin-top:-40px;margin-right:40px;"><font>Circuitos</font></p></a></b></td>
         <td><b><a href="reglamentos-karting.php" style="text-decoration:none"><p style="margin-top:-40px;margin-right:40px;"><font face="arial,helvetica">Reglamentos</font></p></a></b></td>
         <td><b><a href="calendarios-karting.php" style="text-decoration:none"><p style="margin-top:-40px;margin-right:40px;"><font face="helvetica">Calendario</font></p></a></b></td>
         <td><b><a href="clasificaciones-karting.php" style="text-decoration:none"><p style="margin-top:-40px;margin-right:40px;"><font face="helvetica">Clasificaciones</font></p></a></b></td>
         <td><b><a href="revistas-karting.php" style="text-decoration:none"><p style="margin-top:-40px;margin-right:40px;"><font face="helvetica">Revista</font></p></a></b></td>
         <td><a href="http://www.cronosystem.es/cek2014/" style="text-decoration:none"><img style="margin-top:-47px;margin-left:80px; width:250px; height:30px" alt="Campeontato de Espa&ntilde;a de karting" title="RFEDA" src="logos_rfeda/livetiming.png"/></a></td>
			<td><a href="https://www.facebook.com/KartingNacional?fref=ts" style="text-decoration:none"><img style="margin-top:-46px;margin-left:0px; width:30px; height:30px" alt="Campeontato de Espa&ntilde;a de karting" title="RFEDA" src="logos_rfeda/contacto-facebook.png"/></a></td>
         <td><img style="margin-top:-46px;margin-left:40px; width:30px; height:30px" alt="Campeontato de Espa&ntilde;a de karting" title="RFEDA" src="logos_rfeda/contacto-twitter.png"/></td>
        </tr>
          </div>

        <table style="width:1024px; border:black 0px solid; margin-top:-30px;">
        
            <td style="vertical-align:top">
                <div style="float:right; width:256px; height:auto; border:black solid 0px;">
                     <a href="formulario_inscripcion.php"><img style="float:left;width:256px; height:180px; margin-top:30px;"alt="No se puede abrir esta imagen." title="RFEDA" src="Imagenes/boletin5.jpg"/></a><br>
                    <img style="width:256px; height:120px; margin-top:25px;"alt="No se puede abrir esta imagen." title="RFEDA" src="logos_rfeda/racingforspain.png"/>
						  <a href="revistas-karting.php"><div style="height:10px;width:256px;margin-top:-35px;"></div></a>
						  <a href="clasificaciones-karting.php"><div style="height:10px;width:256px;margin-top:7px;"></div></a>
						  <br>
                    <a style="text-decoration:none;" href='formulario_prensa.php'><img style="width:64px; height:80px; margin-top:25px; float:left;"alt="No se puede abrir esta imagen." title="RFEDA" src="logos_rfeda/pase1.png"/>
                    <img style="width:64px; height:80px; margin-top:25px;float:left;"alt="No se puede abrir esta imagen." title="RFEDA" src="logos_rfeda/pase2.png"/>
                    <img style="width:64px; height:80px; margin-top:25px;float:left;"alt="No se puede abrir esta imagen." title="RFEDA" src="logos_rfeda/pase3.png"/>
                    <img style="width:64px; height:80px; margin-top:25px; margin-bottom:25px;float:left;"alt="No se puede abrir esta imagen." title="RFEDA" src="logos_rfeda/pase4.png"/></a>
                    <center>
                     <div style="width:196; height:500;">
                                                <a  class="twitter-timeline"  href="https://twitter.com/Eskarting" data-widget-id="497771211137359873">Tweets por @Eskarting </a>
                                                <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
                                                </div>
                    </center>
                </div>
            </td>
            
            

        </table>

</table>
</div>
</body>

</html>
__________________
Going hard for too long... Can't get enough
  #2 (permalink)  
Antiguo 30/01/2015, 05:17
Avatar de garciasanchezdani  
Fecha de Ingreso: noviembre-2011
Mensajes: 429
Antigüedad: 13 años
Puntos: 51
Respuesta: No entiendo como funciona width:100%

Hola @maiksix , estoy viendo tu código, y entiendo que lo que buscas es ajustar el menú.

Al div que has marcado en rojo, quítale el margen izq y pon el width al 100%:

Código CSS:
Ver original
  1. margin-left: -210px;
  2. width: 100%;

Luego, al contenedor padre de este div, que es el div con id="content", quítale el padding-left y el padding-right, y así tu menú se ajustaría bien.

Saludos ;)
__________________
Diseño Web Jaén
  #3 (permalink)  
Antiguo 30/01/2015, 05:30
Avatar de maiksix  
Fecha de Ingreso: noviembre-2014
Ubicación: Sabadell
Mensajes: 124
Antigüedad: 10 años
Puntos: 1
Respuesta: No entiendo como funciona width:100%

Hola @garciasanchezdani,

Muchas gracias por tu respuesta, lo he hecho y estaba perfecto. Porque afectaba de esa manera los padding?

Un saludo y gracias
__________________
Going hard for too long... Can't get enough
  #4 (permalink)  
Antiguo 30/01/2015, 05:37
Avatar de garciasanchezdani  
Fecha de Ingreso: noviembre-2011
Mensajes: 429
Antigüedad: 13 años
Puntos: 51
Respuesta: No entiendo como funciona width:100%

Esos padding lo que hacían es posicionar el div con id="content", con un espacio izquierdo 20px y por la derecha, otro espacio de 20px.
Entonces, el menú, ocupando el 100%, como bien has dicho antes, ocupa todo el ancho de su contendor padre, que es div id="content", no sé si me explico...
Saludos
__________________
Diseño Web Jaén
  #5 (permalink)  
Antiguo 30/01/2015, 06:08
Avatar de maiksix  
Fecha de Ingreso: noviembre-2014
Ubicación: Sabadell
Mensajes: 124
Antigüedad: 10 años
Puntos: 1
Respuesta: No entiendo como funciona width:100%

Si! Te has explicado perfectamente. Muchas gracias!

Doy el post como solucionado :)

Un saludo.
__________________
Going hard for too long... Can't get enough

Etiquetas: ancho, body, html, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:34.