Foros del Web » Creando para Internet » HTML »

Centrar el cuerpo de un layout.

Estas en el tema de Centrar el cuerpo de un layout. en el foro de HTML en Foros del Web. Hola, bueno mi rpoblema es con un tema 'layout'. Simplemente he intentado lo que me es posible, quitar 'float' poner <center> en 'body' [Cosa que ...
  #1 (permalink)  
Antiguo 29/04/2011, 12:41
Avatar de jagaciaks  
Fecha de Ingreso: abril-2011
Mensajes: 2
Antigüedad: 13 años, 6 meses
Puntos: 0
Centrar el cuerpo de un layout.

Hola, bueno mi rpoblema es con un tema 'layout'. Simplemente he intentado lo que me es posible, quitar 'float' poner <center> en 'body' [Cosa que quito el fondo]

Este es el 'Custom HTML'
Ignoren los datos con -----XXXX------ originalmente son links a otras paginas o no tienen que ver.


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="image:Header" content=""/>
<meta name="font:Body" content="Times New Roman", Times, serif"/>
<meta name="color:Font" content="#000"/>
[XXXXXX---Random]


<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}" />
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}
<meta name="description" content="{MetaDescription}" />


{/block:Description}

<style type="text/css">

a:link {text-decoration:none}
a:visited {text-decoration:none}
a:hover{text-decoration:none}
a:active{text-decoration:none}

<!--
body {
font-family: {font:Body};
font-size: 13px;
font-style: normal;
background: #fff;
background-image: url("-----image link-----------");
background-position: bottom right;
background-attachment: fixed;
background-repeat: no-repeat;
margin: 0;
padding: 0;
color: {color:Font};
}

ul, ol, dl {
padding: 0;p
margin: 0;
list-style-type: none;

[XXX_Random styles]

}
.container {
width: 560px;
background: #fff;
margin: 0 30px;
padding: 10px;
}

.header {
padding: 5px 0 10px 0;
margin: 0;
clear: both;
text-align: center;
}
.description {
padding: 5px;
min-height: 55px;
text-align: left;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
}
.description img {
float: left;
width: 48px;
height: 48px;
padding: 2px;
border: 1px solid #ededed;
margin-right: 5px;
}

.content {
clear: both;
padding: 10px 0;
}
.page {
margin: 20px 30px;
}
.perma {
text-align: right;
clear: both;
padding: 5px 0;
}

.post {
float: left;
width: 500px;
margin: 20px 30px;
}
.text {
}
.title {
font-size: 19px;
font-weight: normal;
border-bottom: 1px solid #000;
margin-bottom: 2px;
}
.title a {
font-family: Monotype Corsiva,cursive
}

[XXXXX____Random blocks]

.nav {
margin: 10px;
padding: 0;
font-size: 16px;
clear: both;
text-align: center;
text-transform: lowercase;

[XXXXX____ Random Hover]

-->
</style>

</head>

<body>

<div class="container">

[IMAGEN HEADER-----]
</div>

<div class="description"> {Description}
</div>

[XXXX__ If:Options]

<div class="content">
<div class="autopagerize_page_element">
{block:Posts}

{block:IndexPage}

{block:Text}
<div class="post">
<div class="text">
{block:Title}<div class="title"><a href="{Permalink}">{Title}</a></div>{/block:Title}
{Body}
</div>
<div class="perma">
[------PERMALINK options]
</div>
</div>
{/block:Text}



[XXXXXX___Random Blocks]


{block:Link}
<div class="post">
<div class="link">
<a href="{URL}" target="_blank">{Name} ?</a>
</div>
{Block:Description}
<div class="text">
{Description}
</div>
{/block:Description}
<div class="perma">
<a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};">Reblog</a> / <a href="{Permalink}">Permalink</a> {block:NoteCount}/ <a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}
</div>
</div>
{/block:Link}


[X_Random Blocks]
[XXX__blocks text]
[XXXX_____Blocks]

{/block:Posts}

[-----Pagination-------]
[-----Sources-----------]
</div>
</div>
</div>
</body>
</html>


Sé que puso ser más resumido pero ya ni sé donde empezar :P


Este es el resultado original
[El mío es iual solo tiene unas opciones diferentes; cambie la imagen de fondo por otra. no se subrayan links.. etc]
http://bpttheme.tumblr.com/
  #2 (permalink)  
Antiguo 29/04/2011, 14:12
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 8 meses
Puntos: 1146
Respuesta: Centrar el cuerpo de un layout.

Código CSS:
Ver original
  1. .container {
  2. width: 560px;
  3. background: #fff;
  4. margin: 0 30px;/*cambia esto por margin:0 auto;*/
  5. padding: 10px;
  6. }
  #3 (permalink)  
Antiguo 29/04/2011, 20:11
Avatar de jagaciaks  
Fecha de Ingreso: abril-2011
Mensajes: 2
Antigüedad: 13 años, 6 meses
Puntos: 0
De acuerdo Respuesta: Centrar el cuerpo de un layout.

Gracias =)
  #4 (permalink)  
Antiguo 29/04/2011, 23:58
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 16 años, 8 meses
Puntos: 21
Respuesta: Centrar el cuerpo de un layout.

Creo que deberías separar la estructura de tu documento por un lado y tus estilos a un archivo con extensión .css, por otro.

Se vería todo más ordenado y prolijo y sería mucho más fácil para todos ayudarte. Incluso más fácil para vos.

Saludos.
__________________
_
  #5 (permalink)  
Antiguo 04/09/2011, 19:30
 
Fecha de Ingreso: agosto-2011
Ubicación: Málaga
Mensajes: 10
Antigüedad: 13 años, 2 meses
Puntos: 1
Respuesta: Centrar el cuerpo de un layout.

Hola,
No deberias de tocar el body, para centrar las capas solo hay que menterlas en un contenedor.
Un abrazo.

Etiquetas: cuerpo, layout
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 13:17.