Problema con CSS + HTML

Agusx1211 · #1 (**permalink**) 05/02/2012, 09:29

Mi novia esta aprendiendo css y html :B el problema es que diseño una pagina con tres columnas, por ahora todo va bien, pero el Chrome toma como que la 2 columna no esta dentro del container principal, y si lo esta... les dejo el codigo

Código HTML:

 <HTML> 
<HEAD> 
<TITLE>Rol</TITLE> <!-- titulo de la pagina -->
<style>
body {
	font-family: Helvetica;
	margin: 0;
	background-image: url(http://dl.dropbox.com/u/39746348/fondotierra3columnas.jpg); 
	background-attachment: fixed;
	}
.heading {
	float: top;
	width: 100%;	
	padding-top: 1px;
	padding-bottom: 1px;
	border-radius: 2px; 
	}
.container {
	max-width: 1260px;
	min-width: 1100px;
	margin: 0 auto;	
	padding-top
}
.sidebar1 {
	float: left;
	width: 11%;
	padding-top: 25px;
	background: transparent url(http://www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left;	
	border: 3px solid #086A87;
	border-radius: 20px; 	
	margin-top: 40px; 
	margin-left: 30px;
	color: #848484;
	min-height: 60%	
}
.sidebar1:hover {
	float: left;
	width: 11%;
	padding-top: 25px;
	background: transparent url(http://www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left;	
	border: 3px solid #0B4C5F;
	border-radius: 20px; 
	margin-top: 40px; 
	margin-right: 0px;
	color: #848484;
	min-height: 60%	
}
.content {
	
	float: top;
	min-height: 100%;
	width: 60%;	
	margin-top: 200px
	border-radius: 2px; 
	margin: 0 auto;	
	color: #FBF2EF;
}
.sidebar2 {
	float: right;
	width: 10%;
	padding-top: 22px;
	background: transparent url(http://www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left;
	border: 3px solid #086A87;
	border-radius: 20px;	
	margin-top: 15px; 
	margin-right: 60px;
	color: #848484;
	min-height: 60%	
}
.sidebar2:hover {
	float: right;
	width: 10%; 
	padding-top: 22px;
	background: transparent url(http://www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left;
	border: 3px solid #0B4C5F;
	border-radius: 20px; 
	margin-top: 15px; 
	margin-left: 0px;
	color: #848484;
	min-height: 60%	
}

.menus {
	float: top;
	width: 62%;	
	padding-top: 5px;
	padding-bottom: 5px;
	border-radius: 2px; 
	margin: 0 auto;	
	cursor: pointer;

}

</style>
</HEAD> 
<body>

<div class="heading">
  <div style="margin-left: 400px;"> <IMG SRC="http://dl.dropbox.com/u/39746348/1.png" WIDTH=500 HEIGHT=100 BORDER=0 ALT="Rol Libre Online"> </div>
  <!-- parte de arriba --></div>
  
<div class="container">

	<div class="menus">
  <IMG SRC="http://dl.dropbox.com/u/39746348/dasdas%20copy.png" WIDTH=90 HEIGHT=50 BORDER=0 ALT="Inicio"> <!-- abajo--></div>
  
  <div class="sidebar1">
  barra 1  <!-- barra --></div>
  
  
  
  <div class="content"> <BR> <BR> <BR> Esto es el contenido
    <!-- content --></div>
 
  <div class="sidebar2"> barra 2
  <!-- otra barra --></div>
  
 
 <!-- container --></div>
</body>
</html>

emprear · #2 (**permalink**) 05/02/2012, 10:24

Si ese es el html que le están enseñando, lo primero sería decirle a tu novia que se busque otro lugar dónde aprender.

un correcto html sería

Código HTML:

Ver originalCopiar<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Rol
</title><!-- titulo de la pagina -->
 
<style type="text/css">
/*<![CDATA[*/
 
 div {
 border: solid 1px #000;
 padding: 5px;
 margin: 5px;
 }
 
/*]]>*/
</style>
</head>
<body>
<div class="heading">
<div style="margin-left: 400px;">
<img src="http://dl.dropbox.com/u/39746348/1.png" width="500" height="100" border="0" alt="Rol Libre Online" />
</div><!-- parte de arriba -->
</div>
<div class="container">
<div class="menus">
 
<img src="http://dl.dropbox.com/u/39746348/dasdas%20copy.png" width="90" height="50" border="0" alt="Inicio" /> <!-- abajo-->
</div>
<div class="sidebar1">
barra 1 <!-- barra -->
</div>
<div class="content">
<br />
<br />
<br />
Esto es el contenido <!-- content -->
</div>
<div class="sidebar2">
barra 2 <!-- otra barra -->
 
</div><!-- container -->
</div>
</body>
</html>

El css, tan solo ver un float:top; me lleva a repetirte la sugerencia inicial

Saludos

Agusx1211 · #3 (**permalink**) 05/02/2012, 12:04

jajaja la etiqueta float: top; la invento ella para probar, no es una pagina esta haciendo pruebas :P

emprear · #4 (**permalink**) 05/02/2012, 12:17

Grande Papá... eso es tener una novia creativa...

Agusx1211 · #5 (**permalink**) 05/02/2012, 12:20

Aftenerse de criticas sarcasticas... osea, es el primer dia que toca un CSS, ustedes tiene experiencia, ella no, y yo tampoco tengo mucha como para decirle bien que hacer, yo Programo no diseño :P

emprear · #6 (**permalink**) 05/02/2012, 13:20

Mil disculpas, retiro lo dicho.
Y ahora te hago una critica NO sarcástica.
El css se estudia y si es la primera vez que se toca, se leen los manuales, no se inventa, y si se recurre a un foro de css a sabiendas de que el valor "top" para la propiedad "float" es un invento, tenés que atenerte a las críticas, sarcásticas o no.

Agusx1211 · #7 (**permalink**) 05/02/2012, 14:28

Bueno flaco, se leyo un manual pero se equivoco e invento algo, no soy ella no se que decirte, pero me parece que tendrias que bajar un cambio, ya le avise que era un error y ya lo arreglo, me gustaria ver tus codigos el primer dia que empezaste, no creo que sean 100% limpios de errores estupidos

C2am · #8 (**permalink**) 05/02/2012, 17:27

Hola
Bueno, es mejor calmarse un poco y tomarlo con menos dramatismo.

Sugerencia: www.librosweb.es
Tienes dos manuales muy buenos y sencillos de entender Xhtml y css.
Saludos

webosiris · #9 (**permalink**) 05/02/2012, 19:59

Haya paz!! Haya paz!

Agusx1211, si la interesada es tu novia, si tu no sabes bien porqué hizo tal o cual cosa... no sería más conveniente que ella planteara sus dudas directamente?

por cierto, ese código que pusistes me da a mi que lo copió de algún lado, porque si no tiene los conocimientos suficientes como para saber lo de float, dudo mucho que conozca propiedades como max-width o border-radius

copiar código que no se entiende no es la mejor forma de empezar a estudiar un lenguaje.

marim · #10 (**permalink**) 05/02/2012, 20:05

Cita:

Iniciado por Agusx1211

Aftenerse de criticas sarcasticas... osea, es el primer dia que toca un CSS, ustedes tiene experiencia, ella no, y yo tampoco tengo mucha como para decirle bien que hacer, yo Programo no diseño :P

No entiendo por que te molestas, tu respondiste riendote de ti mismo (jajajaja, o de tu novia quizás), y el otro usuario te respondió con una humorada al respecto, pero para nada ofensiva (encima veo que te ha pasado el html correctamente corregido, porque el tuyo estaba lleno de errores).

Bueno, me sumo, a estudiar más (y menos mimos tal vez)

Bye bye

Agusx1211 · #11 (**permalink**) 05/02/2012, 20:08

y yo dandome mala fama en este foro por una mujer que siempre que puede se caga en mi ... :/

furoya · #12 (**permalink**) 25/04/2012, 08:10

Bienvenido al club. Aunque yo me cambiaría "este foro" por "esta vida".