Foros del Web » Creando para Internet » CSS »

¿Que estoy haciendo mal?

Estas en el tema de ¿Que estoy haciendo mal? en el foro de CSS en Foros del Web. Hola, me inicie en esto del CSS hace relativamente poco, y estoy intentando maquetar con capas, pero por mas que lo intento no me sale, ...
  #1 (permalink)  
Antiguo 16/11/2005, 18:55
 
Fecha de Ingreso: noviembre-2005
Mensajes: 2
Antigüedad: 12 años
Puntos: 0
¿Que estoy haciendo mal?

Hola, me inicie en esto del CSS hace relativamente poco, y estoy intentando maquetar con capas, pero por mas que lo intento no me sale, lo que quiero hacer es mas o menos esto:

http://img473.imageshack.us/full.php...opagina1zy.jpg

Pero no puedo lograrlo, aca esta el codigo:

<html>
<head>
<title>Probando</title>
<style type="text/css">
#container {
position: absolute;
width: 100%;
left: 0px;
top: 0px;
margin: 0px;
padding: 0px;
}
#menu {
float: right;
width: 6%;
margin: 0px;
padding: 0px;
border-left: 1px solid;
}
ul li {
list-style-type: none;
margin: 0px;
padding: 0px;
text-align: center;
}
li {
background-color: #f0f0f0;
}
li:hover {
background-color: #fff0f0;
}
a:link {
color: #000000;
}
a:visited {
color: #000000;
}
a:hover {
color: #ff0000;
}
#contenido {
float: left;
width: 93%;
margin: 0px;
border-bottom: 1px solid;
padding: 0px;
}
</style>
</head>
<body>
<div id="container">
<div id="contenido">
<p>Contenido</p>
</div>
<div id="menu">
<ul>
<li><a href="http://www.google.com">Menu</a></li>

<li><a href="http://www.google.com">Menu</a></li>
</ul>
</div>
</div>
</body>
</html>

Obviemente lo probe en el firefox, pero se ve mas ancho de lo que deberia y el fondo del menu se ve gris hasta la mitad , pero mejor copien el codigo y guardenlo como un documento HTML para que entiendan cual es el problema exactamente, y si alguien sabe como solucionarlo le estaria muy agradecido

Saludos
  #2 (permalink)  
Antiguo 18/11/2005, 00:44
 
Fecha de Ingreso: noviembre-2005
Mensajes: 2
Antigüedad: 12 años
Puntos: 0
Cambio los % por poxeles y ahora esta mejor, solo que los menues (li) se ven como afuera del div menu, osea, se ven mas a la derecha como saliendose de la capa menu

Aca esta el codigo:

<html>
<head>
<title>Asiendo algunas pruebas</title>
<style type="text/css">
#body {
text-align: center;
}
#container {
width: 700px;
margin: 0px auto;
padding: 0px;
}
#menu {
float: right;
width: 149px;
margin: 0px;
padding: 0px;
border-left: 1px solid;
background-color: #f0f0f0;
taxt-align: center;
}
ul li {
list-style-type: none;
margin: 0px auto;
padding: 0px;
text-align: center;
background-color: #f0f0f0;
width: 149px;
}
li {
background-color: #f0f0f0;
margin: 0px;
}
li:hover {
background-color: #fff0f0;
}
a:link {
color: #000000;
}
a:visited {
color: #000000;
}
a:hover {
color: #ff0000;
}
#contenido {
float: left;
width: 550px;
margin: 0px;
border-bottom: 1px solid;
padding: 0px;
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<div id="contenido">
<p>Contenido</p>
</div>
<div id="menu">
<ul>
<li><a href="http://www.google.com">Menu</a></li>

<li><a href="http://www.google.com">Menu</a></li>
</ul>
</div>
</div>
</body>
</html>

Y por ultimo, ¿alguien me puede aclarar por que con porcentaje no funciona pero con pixeles si?

Saludos

Última edición por Freek; 18/11/2005 a las 22:49
  #3 (permalink)  
Antiguo 24/11/2005, 19:21
 
Fecha de Ingreso: julio-2005
Mensajes: 54
Antigüedad: 12 años, 5 meses
Puntos: 0
Tal vez esto te sirva como guía para que puedas afinarlo a tu gusto:
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>Menu superior derecho</title>

<style>
html, body {
	margin: 0;
	padding: 0;
}

#menu {
	width: 180px;
	background-color: black;
	float: right;
}

.elemento {
	background-color: #F5F5F5;
	padding: 2px;
	font: 10pt arial;
	border: 1px solid gray;
	text-align: center;
}

#contenido {
	font: 10pt arial;
	margin-right: 180px;
	border-right: 1px solid black;
}
</style>
</head>

<body>
<div id="menu">
	<div class="elemento">Uno</div>
	<div class="elemento">dos</div>
	<div class="elemento">tres</div>
	<div class="elemento">cuatro</div>
</div>

<div id="contenido">
<div align="center"><b>Contenido</b></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis t vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>

</body>
</html> 
Espero que te ayude, saludos!
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 04:48.