Foros del Web » Creando para Internet » CSS »

Ayuda con el alto de mi pagina

 Estas en el tema de Ayuda con el alto de mi pagina en el foro de CSS en Foros del Web. Hola a todos tengo un problema con el estylo de mi them de wordpress, aqui els mando el ejemplo Este es cuando tiene dos widgets,el ...
  #1 (permalink)  
Antiguo 26/02/2011, 11:47
Avatar de Farookh_Bulsara  
Fecha de Ingreso: mayo-2004
Mensajes: 1.185
Antigüedad: 20 años, 5 meses
Puntos: 2
Ayuda con el alto de mi pagina
Hola a todos tengo un problema con el estylo de mi them de wordpress, aqui els mando el ejemplo
Este es cuando tiene dos widgets,el estilo parece estar bien:

Estes es cuando solo tiene 1 widget,aqui ya se nota mi problema,esa franja blanca al pie de la pagina se supone q no debia existir:

Como Hago para solucionar el problema?,les dejo el codigo HTML cuando esta solo 1 widget y mi hoja de estilo,porfavor ayudenme,me urge arreglar esto:
Código HTML:
<!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" xml:lang="en-US" lang="en-US" dir="ltr" >



<head>



  <base href="http://localhost/wordpress3" /> 

  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 

  <meta name="robots" content="index, follow" /> 

  <meta name="keywords" content="" /> 

  <meta name="description" content="Just another WordPress site" />

  <meta name="generator" content="WordPress 3.0" /> 

  <title>Sozo wordpress 3</title> 

  <link href="http://localhost/wordpress3/feed/rss/" rel="alternate" type="application/rss+xml" title="RSS 2.0" /> 

  <link href="http://localhost/wordpress3/feed/atom/" rel="alternate" type="application/atom+xml" title="Atom 1.0" /> 

  <script src="http://localhost/wordpress3/wp-content/themes/maryanne/js/functions.js" type="text/javascript"></script>

  <link rel="stylesheet" href="http://localhost/wordpress3/wp-content/themes/maryanne/style.css" type="text/css" media="screen" />

<link rel="alternate" type="application/rss+xml" title="Sozo wordpress 3 &raquo; About Comments Feed" href="http://localhost/wordpress3/about/feed/" /> 
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/wordpress3/xmlrpc.php?rsd" /> 
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/wordpress3/wp-includes/wlwmanifest.xml" /> 
<link rel='index' title='Sozo wordpress 3' href='http://localhost/wordpress3/' /> 
<link rel='next' title='Sub Page 1' href='http://localhost/wordpress3/about/sub-page-1/' /> 
<meta name="generator" content="WordPress 3.0" /> 
<link rel='canonical' href='http://localhost/wordpress3/about/' /> 
</head>



	<body>



	<div class="main">



  <!--header-->



  <div class="header">



    <div class="head">

      <div class="logo"><img src="http://localhost/wordpress3/wp-content/themes/maryanne/images/big-logo.png"  /></div>

  <div class="photo"><img src="http://localhost/wordpress3/wp-content/themes/maryanne/images/small-photo.jpg"  /></div>

        

    </div>

    

<div class="strip"></div>

<ul class="menu-nav"><li class="page_item page-item-2 current_page_item"><a href="http://localhost/wordpress3/about/" title="About">About</a></li> 
<li class="page_item page-item-91"><a href="http://localhost/wordpress3/archive-pages/" title="Archive Pages">Archive Pages</a></li> 
<li class="page_item page-item-187"><a href="http://localhost/wordpress3/checkout/" title="Checkout">Checkout</a></li> 
<li class="page_item page-item-90"><a href="http://localhost/wordpress3/contact/" title="Contact">Contact</a></li> 
<li class="page_item page-item-203"><a href="http://localhost/wordpress3/search/" title="Search">Search</a></li> 
<li class="page_item page-item-179"><a href="http://localhost/wordpress3/shop-2/" title="Shop">Shop</a></li> 
</ul>

  </div>

<div id="wrapper">

<div id="content-wrapper">

<div id="content-head"><img src="http://localhost/wordpress3/wp-content/themes/maryanne/images/arc-top.png" width="36" height="20" /></div>

	

		



		<div id="content">

<div class="title">About</div>

<span class="post-date">July 23, 2010</span>

<div class="paragraph"><p>This is an example of a WordPress page, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many pages like this one or sub-pages as you like and manage all of your content inside of WordPress.</p> 
</div>

<div style="clear:both"></div>

</div>



			

<div id="content-foot"><img src="http://localhost/wordpress3/wp-content/themes/maryanne/images/arc-bottom.png" width="36" height="20" /></div>

<div class="shared-area">&nbsp;<br /><br /><br /><br /></div>

</div>

<div id="sidebar">

<div class="search-area">

<form role="search" method="get" id="searchform" action="http://localhost/wordpress3">

	<div>

	<input type="text" value="search" name="s" id="s">

    <input type="image" id="searchsubmit" src="http://localhost/wordpress3/wp-content/themes/maryanne/images/search-btn.png" />

	</div>

	</form>

    </div> <div class="widget widget_recent_entries"> <div class="widgettitle">Recent Posts</div> <ul> 
				<li><a href="http://localhost/wordpress3/strasbourg/" title="Strasbourg">Strasbourg</a></li> 
				<li><a href="http://localhost/wordpress3/travel-to-ammerschwihr/" title="travel to Ammerschwihr">travel to Ammerschwihr</a></li> 
				<li><a href="http://localhost/wordpress3/travel-to-france/" title="travel to france">travel to france</a></li> 
				<li><a href="http://localhost/wordpress3/yash-plaza/" title="Yash Plaza">Yash Plaza</a></li> 
				<li><a href="http://localhost/wordpress3/jolly-plaza/" title="Jolly Plaza">Jolly Plaza</a></li> 
				</ul> 
		</div><div class="widget widget_categories"><div class="widgettitle">Categories</div> <ul> 
	<li class="cat-item cat-item-3"><a href="http://localhost/wordpress3/articles/blog/" title="View all posts filed under Blog">Blog</a> 
</li> 
	<li class="cat-item cat-item-6"><a href="http://localhost/wordpress3/articles/feature/" title="View all posts filed under Feature">Feature</a> 
</li> 
	<li class="cat-item cat-item-7"><a href="http://localhost/wordpress3/articles/properties/" title="View all posts filed under Properties">Properties</a> 
</li> 
	<li class="cat-item cat-item-4"><a href="http://localhost/wordpress3/articles/blog/sub-category-1/" title="View all posts filed under Sub Category 1">Sub Category 1</a> 
</li> 
	<li class="cat-item cat-item-5"><a href="http://localhost/wordpress3/articles/blog/sub-category-2/" title="View all posts filed under Sub Category 2">Sub Category 2</a> 
</li> 
	<li class="cat-item cat-item-1"><a href="http://localhost/wordpress3/articles/uncategorized/" title="View all posts filed under Uncategorized">Uncategorized</a> 
</li> 
		</ul> 
</div></div><div style="clear:both"></div>

</div>

<div id="footer"><div id="container-footer"><div class="container-footer-head"><img src="http://localhost/wordpress3/wp-content/themes/maryanne/images/arc-top.png" width="36" height="20" /></div><div class="content-footer">&nbsp;</div></div>

<div style="clear:both;"></div>

<div class="strip-footer"></div>

</div>

</div>

</body>

</html>
__________________
"Todas las cosas deben mostrarse primero con mascaras tetricas y terrorificas para que puedan inscribirse a si mismas en el corazon de la humanidad"
  #2 (permalink)  
Antiguo 26/02/2011, 11:48
Avatar de Farookh_Bulsara  
Fecha de Ingreso: mayo-2004
Mensajes: 1.185
Antigüedad: 20 años, 5 meses
Puntos: 2
Respuesta: Ayuda con el alto de mi pagina
aqui les dejo la hoja de estilos:
Código: 
/*  
Theme Name: MaryAnne
Theme URI: http://www.farook.com
Description: A customise theme
Author: Farook
Author URI: http://www.farook.com
Version: 1.0
Tags: white, gray, black, white, light, three-columns, two-columns, fixed-width,  right-sidebar, sticky-post
*/
/*For your sake, try not to make any changes in here. This will be updated every time a new version of WordPress comes out. Add all your customizations to the custom.css*/

/* CSS Document */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td		{
	padding:0px 0px 0px 0px; 
	margin:0px 0px 0px 0px;
}
html	{
	height:100%;
}

body 	{
	text-align:center;
		height:100%;

}
.main 	{
	width:100%;
	position:relative;
	margin:0 auto;
	padding:0 0 0 0;
	height:100%;

}
.header {
	position:relative;
	width:100%;
	margin:0 auto;
	z-index:15000;
	height:350px;
}
.head {
	position:relative;
	width:100%;
	height:200px;
	margin:0 auto;
	z-index:150	;
	background:#FFF url(images/header_bg.jpg)  repeat-x; 
}
.strip {
	position:relative;
	width:100%;
	height:50px;
	margin:0px;
	background:#FFF url(images/strip.jpg)  no-repeat; 
}
.menu-nav {
	/*position:relative;*/
	width:100%;
	height:100px;
	margin:0px;
	
}
.logo,.photo,.headline
{
	float:left;
	margin:20px 0px 20px 20px;
	text-align:left;
}
.logo
{
	
}
.headline span
{
color:#4a4a4a;
font:15px  Verdana, Geneva, sans-serif  italic;
text-align:left;
}
/********Menu*******/
.menu-nav-container {
	position:relative;
	width:100%;
	height:100px;
	margin:0px;

}
 ul.menu-nav {
	padding:0 50px 0  50px !important;
	margin:0 0 0 0 !important;
	/*zoom:0;*/
	z-index:90;
    width:auto;
	background-color:#f4f2e8;
}
 ul.menu-nav li {

	display:block; 
	padding:0 0 0 0;
	float:left;
	margin: 20px ;
	padding:0 0 0 0 !important;
	position:relative;
	text-align:center;

}
 ul.menu-nav li a  {
	display:block;
	font-size:20px;
	text-decoration:none;

	position:relative;
	color:#012b70;
	float:left;
	text-transform:uppercase;
	text-align:center;
/*	width:145px;*/
	/*background:url(images/spacer.gif) 100% 0% no-repeat;*/
	padding:21px 0 18px 0
}
/*********Content section ********/
#wrapper
{
	display:block;
	position:relative;	
	background-color:#f4f2e8;
	width:100%;
	margin:0px;
	padding:0px;
	height:auto;
	text-align:left;
}
#wrapper #content-wrapper
{
	float:left;
	width:auto;
	margin:0 0 0 20px;
	padding:0px;
	background-color:#f4f2e8;
	width:60%;
	height:100%;
}

#wrapper #sidebar
{
	float:left;
	width:auto;
	margin:0px;
	padding:0px;
	width:35%;
}

#content-wrapper #content
{
	position:relative;
	border:#a0da5c 2px solid;
	background-color:#f4f2e8;
}
#content-wrapper #content .content-left, #content-wrapper #content .content-right{
float:left;
position:relative;
text-align:left;
}
#content-wrapper #content .content-right{
	margin:10px 10px 10px 5px;
}
#content-wrapper #content .content-left{
	margin:10px 5px 10px 10px;
}

#content-wrapper #content .content-right .title, .title{
	color:#698e3d;
	font-family:Verdana, Geneva, sans-serif;
	font-size:18px;
	font-weight:bold;
}
span.post-date
{
	color:#4b4b4b;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;

}

#content-wrapper #content .content-right .paragraph, .paragraph
{
	color:#4b4b4b;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	font-weight:bold;
	line-height:1.5em;
}

#content-wrapper #content-head,#content-wrapper #content-foot
{
 margin:0 auto;
 width:36px;
}

span.image-label
{
	display:block;
	color:#698e3d;
	font-family:Verdana, Geneva, sans-serif;
	font-size:8px;
	font-weight:bold;
	line-height:1.5em;

}
span.cover-book-label
{
	display:block;
	color:#012b70;
	font-family:Verdana, Geneva, sans-serif;
	font-size:18px;
	font-weight:bold;
	line-height:1.5em;
margin: 20px auto;
width:250px;
}
#wrapper #sidebar .cover-book
{
margin: 20px auto;
width:250px;
}
/**********Footer***********/
#footer
{
	display:block;
	position:relative;	
	background-color:#f4f2e8;
	width:100%;
	margin:0px;
	padding:0px;
	height:auto;
	text-align:left;
}
#footer #container-footer
{
	float:left;
	width:auto;
	margin:0 0 0 20px;
	padding:0px;
	background-color:#f4f2e8;
	width:60%;
	height:100%;
}

#footer #sidebar
{
	float:left;
	width:auto;
	margin:0px;
	padding:0px;
	width:35%;
}

#container-footer .container-footer-head
{
 margin:0 auto;
 width:36px;

}
#container-footer .content-footer
{
position:relative;
border-top:#a0da5c 2px solid;
border-left:#a0da5c 2px solid;;
border-right:#a0da5c 2px solid;;

	background-color:#f4f2e8;
}
.strip-footer {
	position:relative;
	width:100%;
	height:50px;
	margin:0px;
	background:#FFF url(images/strip-footer.jpg)  no-repeat; 
}
/************Form Style************/
input#s
{
border:#a6a6a6 1px solid;
color:#a6a6a6;
width:250px;
height:23px;
margin:auto 0px;
}
input#searchsubmit
{
height:23px;
margin:auto 0px;
}

/****Widgets Style********/
.widgettitle
{
height:35px;
vertical-align:middle;
font-family:Verdana, Geneva, sans-serif;
font-size:15px;
color:#FFF;
text-transform:uppercase;
}

.widget_recent_entries .widgettitle
{
background-color:#00b0d3;
text-align:center;
}

.widget_categories .widgettitle
{
background-color:#a0da5c;
text-align:center;
}
.widget, .search-area{
width:300px;
margin:20px auto;
}
.widget ul
{
list-style-image:url(images/green-bullet.png);
margin-left:20px;
}
.widget ul li a
{
color:#698e3d;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
font-weight:normal;
text-decoration:none;
}
__________________
"Todas las cosas deben mostrarse primero con mascaras tetricas y terrorificas para que puedan inscribirse a si mismas en el corazon de la humanidad"
  #3 (permalink)  
Antiguo 26/02/2011, 11:53
Avatar de Farookh_Bulsara  
Fecha de Ingreso: mayo-2004
Mensajes: 1.185
Antigüedad: 20 años, 5 meses
Puntos: 2
Respuesta: Ayuda con el alto de mi pagina
Cita:
Iniciado por Farookh_Bulsara Ver Mensaje
Hola a todos tengo un problema con el estylo de mi them de wordpress, aqui els mando el ejemplo
Este es cuando tiene dos widgets,el estilo parece estar bien:
http://awesomescreenshot.com/0d689ksfd
Estes es cuando solo tiene 1 widget,aqui ya se nota mi problema,esa franja blanca al pie de la pagina se supone q no debia existir:
http://awesomescreenshot.com/0e889kx53
Como Hago para solucionar el problema?,les dejo el codigo HTML cuando esta solo 1 widget y mi hoja de estilo,porfavor ayudenme,me urge arreglar esto:
Código HTML:
<!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" xml:lang="en-US" lang="en-US" dir="ltr" >



<head>



  <base href="http://localhost/wordpress3" /> 

  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 

  <meta name="robots" content="index, follow" /> 

  <meta name="keywords" content="" /> 

  <meta name="description" content="Just another WordPress site" />

  <meta name="generator" content="WordPress 3.0" /> 

  <title>Sozo wordpress 3</title> 

  <link href="http://localhost/wordpress3/feed/rss/" rel="alternate" type="application/rss+xml" title="RSS 2.0" /> 

  <link href="http://localhost/wordpress3/feed/atom/" rel="alternate" type="application/atom+xml" title="Atom 1.0" /> 

  <script src="http://localhost/wordpress3/wp-content/themes/maryanne/js/functions.js" type="text/javascript"></script>

  <link rel="stylesheet" href="http://localhost/wordpress3/wp-content/themes/maryanne/style.css" type="text/css" media="screen" />

<link rel="alternate" type="application/rss+xml" title="Sozo wordpress 3 &raquo; About Comments Feed" href="http://localhost/wordpress3/about/feed/" /> 
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/wordpress3/xmlrpc.php?rsd" /> 
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/wordpress3/wp-includes/wlwmanifest.xml" /> 
<link rel='index' title='Sozo wordpress 3' href='http://localhost/wordpress3/' /> 
<link rel='next' title='Sub Page 1' href='http://localhost/wordpress3/about/sub-page-1/' /> 
<meta name="generator" content="WordPress 3.0" /> 
<link rel='canonical' href='http://localhost/wordpress3/about/' /> 
</head>



	<body>



	<div class="main">



  <!--header-->



  <div class="header">



    <div class="head">

      <div class="logo"><img src="http://localhost/wordpress3/wp-content/themes/maryanne/images/big-logo.png"  /></div>

  <div class="photo"><img src="http://localhost/wordpress3/wp-content/themes/maryanne/images/small-photo.jpg"  /></div>

        

    </div>

    

<div class="strip"></div>

<ul class="menu-nav"><li class="page_item page-item-2 current_page_item"><a href="http://localhost/wordpress3/about/" title="About">About</a></li> 
<li class="page_item page-item-91"><a href="http://localhost/wordpress3/archive-pages/" title="Archive Pages">Archive Pages</a></li> 
<li class="page_item page-item-187"><a href="http://localhost/wordpress3/checkout/" title="Checkout">Checkout</a></li> 
<li class="page_item page-item-90"><a href="http://localhost/wordpress3/contact/" title="Contact">Contact</a></li> 
<li class="page_item page-item-203"><a href="http://localhost/wordpress3/search/" title="Search">Search</a></li> 
<li class="page_item page-item-179"><a href="http://localhost/wordpress3/shop-2/" title="Shop">Shop</a></li> 
</ul>

  </div>

<div id="wrapper">

<div id="content-wrapper">

<div id="content-head"><img src="http://localhost/wordpress3/wp-content/themes/maryanne/images/arc-top.png" width="36" height="20" /></div>

	

		



		<div id="content">

<div class="title">About</div>

<span class="post-date">July 23, 2010</span>

<div class="paragraph"><p>This is an example of a WordPress page, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many pages like this one or sub-pages as you like and manage all of your content inside of WordPress.</p> 
</div>

<div style="clear:both"></div>

</div>



			

<div id="content-foot"><img src="http://localhost/wordpress3/wp-content/themes/maryanne/images/arc-bottom.png" width="36" height="20" /></div>

<div class="shared-area">&nbsp;<br /><br /><br /><br /></div>

</div>

<div id="sidebar">

<div class="search-area">

<form role="search" method="get" id="searchform" action="http://localhost/wordpress3">

	<div>

	<input type="text" value="search" name="s" id="s">

    <input type="image" id="searchsubmit" src="http://localhost/wordpress3/wp-content/themes/maryanne/images/search-btn.png" />

	</div>

	</form>

    </div> <div class="widget widget_recent_entries"> <div class="widgettitle">Recent Posts</div> <ul> 
				<li><a href="http://localhost/wordpress3/strasbourg/" title="Strasbourg">Strasbourg</a></li> 
				<li><a href="http://localhost/wordpress3/travel-to-ammerschwihr/" title="travel to Ammerschwihr">travel to Ammerschwihr</a></li> 
				<li><a href="http://localhost/wordpress3/travel-to-france/" title="travel to france">travel to france</a></li> 
				<li><a href="http://localhost/wordpress3/yash-plaza/" title="Yash Plaza">Yash Plaza</a></li> 
				<li><a href="http://localhost/wordpress3/jolly-plaza/" title="Jolly Plaza">Jolly Plaza</a></li> 
				</ul> 
		</div><div class="widget widget_categories"><div class="widgettitle">Categories</div> <ul> 
	<li class="cat-item cat-item-3"><a href="http://localhost/wordpress3/articles/blog/" title="View all posts filed under Blog">Blog</a> 
</li> 
	<li class="cat-item cat-item-6"><a href="http://localhost/wordpress3/articles/feature/" title="View all posts filed under Feature">Feature</a> 
</li> 
	<li class="cat-item cat-item-7"><a href="http://localhost/wordpress3/articles/properties/" title="View all posts filed under Properties">Properties</a> 
</li> 
	<li class="cat-item cat-item-4"><a href="http://localhost/wordpress3/articles/blog/sub-category-1/" title="View all posts filed under Sub Category 1">Sub Category 1</a> 
</li> 
	<li class="cat-item cat-item-5"><a href="http://localhost/wordpress3/articles/blog/sub-category-2/" title="View all posts filed under Sub Category 2">Sub Category 2</a> 
</li> 
	<li class="cat-item cat-item-1"><a href="http://localhost/wordpress3/articles/uncategorized/" title="View all posts filed under Uncategorized">Uncategorized</a> 
</li> 
		</ul> 
</div></div><div style="clear:both"></div>

</div>

<div id="footer"><div id="container-footer"><div class="container-footer-head"><img src="http://localhost/wordpress3/wp-content/themes/maryanne/images/arc-top.png" width="36" height="20" /></div><div class="content-footer">&nbsp;</div></div>

<div style="clear:both;"></div>

<div class="strip-footer"></div>

</div>

</div>

</body>

</html>
__________________
"Todas las cosas deben mostrarse primero con mascaras tetricas y terrorificas para que puedan inscribirse a si mismas en el corazon de la humanidad"
Última edición por Farookh_Bulsara; 26/02/2011 a las 12:00
  #4 (permalink)  
Antiguo 27/02/2011, 14:44
Avatar de Farookh_Bulsara  
Fecha de Ingreso: mayo-2004
Mensajes: 1.185
Antigüedad: 20 años, 5 meses
Puntos: 2
Respuesta: Ayuda con el alto de mi pagina
ayuda porfavor me urge entregar este proyecto y ya ando retrasado
__________________
"Todas las cosas deben mostrarse primero con mascaras tetricas y terrorificas para que puedan inscribirse a si mismas en el corazon de la humanidad"
  #5 (permalink)  
Antiguo 27/02/2011, 15:45
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 10 meses
Puntos: 36
Respuesta: Ayuda con el alto de mi pagina
¿Podrías colocar un enlace a tu página? Sería la mejor opción para poder ayudarte.
  #6 (permalink)  
Antiguo 28/02/2011, 08:55
Avatar de Farookh_Bulsara  
Fecha de Ingreso: mayo-2004
Mensajes: 1.185
Antigüedad: 20 años, 5 meses
Puntos: 2
Respuesta: Ayuda con el alto de mi pagina
es q todavia lo tengo en mi maquina local , es por eso q todavia no lo subo al server porq no puedo subirlo asi, tengo q arreglar esto, el codigo html y css q envie no es suficiente? pueden ver las imagenes? estan en el post q edite
__________________
"Todas las cosas deben mostrarse primero con mascaras tetricas y terrorificas para que puedan inscribirse a si mismas en el corazon de la humanidad"
  #7 (permalink)  
Antiguo 28/02/2011, 09:03
Avatar de Farookh_Bulsara  
Fecha de Ingreso: mayo-2004
Mensajes: 1.185
Antigüedad: 20 años, 5 meses
Puntos: 2
Respuesta: Ayuda con el alto de mi pagina
el estilo q puse es q en el wrapper (donde va el contenido del post, osea el medio de la pagina) tenga un alto de acuerdo al contenido q tenga osea puse algo asi:
<div class="wrapper">
AQUI VA EL CONTENIDO
<div style="clear:both"></div>
</div>

Esto me funciona muy bien cuando el contenido es grande y asi se va incrementando el alto de la pagina ,pero el problema surge cuando el contenido es muy poco, como podran ver aparece la linea blanca al pie de la pagina (creo q esa linea blanca es background-color del div "main" q esta justo despues de la etiqueta BODY)
__________________
"Todas las cosas deben mostrarse primero con mascaras tetricas y terrorificas para que puedan inscribirse a si mismas en el corazon de la humanidad"
  #8 (permalink)  
Antiguo 28/02/2011, 13:39
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 10 meses
Puntos: 36
Respuesta: Ayuda con el alto de mi pagina
Una manera habitual de conseguirlo es sacar el div#footer fuera de div#main y ponerlo a continuación:
<body>
<div id="main"></div>
<div id="footer"></div>
</body>

Deberás hacer además varios cambios en el CSS.
En #footer debes usar una altura fija y un margen negativo con el fin de situar el pie dentro de la ventana del navegador, ya que main ocupa el 100% de ésta.
Puedes añadir, por ejemplo, las siguientes propiedades:
#footer {
height: 200px;
margin-top: -200px ; /*La altura del pie*/
}
La altura debes ajustarla según tu contenido.
Seguro que deberas modificar algunos colores de fondo. El de footer puede que debas quitarlo y añadir ese color en el background de body.
Es cuestión sólo de hacer algunas pruebas para que todo encaje de nuevo.
  #9 (permalink)  
Antiguo 02/03/2011, 14:11
Avatar de Farookh_Bulsara  
Fecha de Ingreso: mayo-2004
Mensajes: 1.185
Antigüedad: 20 años, 5 meses
Puntos: 2
Respuesta: Ayuda con el alto de mi pagina
muchas gracias sanzuan,ahora lo probare,desafortunadamente me cerraron el proyecto por no entregarlo a tiempo
Tengo una duda
es posible meter div#footer dentro de div#main? vi muchas paginas q usan un contenedor principal y dentro lo meten el header, el contenido y el footer, si es asi como lo hago?
__________________
"Todas las cosas deben mostrarse primero con mascaras tetricas y terrorificas para que puedan inscribirse a si mismas en el corazon de la humanidad"
  #10 (permalink)  
Antiguo 02/03/2011, 14:50
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 10 meses
Puntos: 36
Respuesta: Ayuda con el alto de mi pagina
Esta es otra alternativa que incluye footer dentro de main:
Código CSS: 
Ver original
  1. .main {
  2.     margin: 0 auto;
  3.     min-height: 100&#37;;
  4.     padding: 0;
  5.     position: relative;
  6.     width: 100%;
  7.     padding-bottom:72px;/* El ancho del footer. Es necesario para que footer no se superponga al contenido de main */
  8. }
  9. #footer {
  10.     background-color: #F4F2E8;
  11.     margin: 0;
  12.     padding: 0;
  13.     position: absolute;
  14.     bottom: 0; /* Usamos posición absoluta para colocar el pie al final de main */
  15.     text-align: left;
  16.     width: 100%;
  17.     height:72px; /* Es necesario dar un alto fijo al pie para usar un padding en main*/
  18. }

Te pongo sólo las reglas que varian respecto al código que incluiste al principio.
  #11 (permalink)  
Antiguo 02/03/2011, 14:51
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 10 meses
Puntos: 36
Respuesta: Ayuda con el alto de mi pagina
Aunque lo incluí en el código CSS anterior, se me olvidó decir que se debe sustituir height:100% por min-height:100%. De otra forma el pie aparece en el borde de la página en lugar de al final del contenido.
Es necesario también que main tenga la propiedad position:relative que tú ya incluías en el código.
Última edición por sanxuan; 02/03/2011 a las 15:12
  #12 (permalink)  
Antiguo 03/03/2011, 08:11
Avatar de Farookh_Bulsara  
Fecha de Ingreso: mayo-2004
Mensajes: 1.185
Antigüedad: 20 años, 5 meses
Puntos: 2
Respuesta: Ayuda con el alto de mi pagina
pero el min-height no es una propiedad q funcione en todos los exploradores
__________________
"Todas las cosas deben mostrarse primero con mascaras tetricas y terrorificas para que puedan inscribirse a si mismas en el corazon de la humanidad"
  #13 (permalink)  
Antiguo 03/03/2011, 13:50
Avatar de jomaruro
Colaborador
  
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 22 años, 4 meses
Puntos: 361
Respuesta: Ayuda con el alto de mi pagina
Hola:

No funciona en IE6 en el resto de navegadores si funciona.

Saludos.

Etiquetas: alto
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


« Tema Anterior | Próximo Tema »


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