Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje21-04-2009, 10:49 (UTC)    
Título del mensaje: ¿cómo centrar esta web en css-Desin?

Bueno, mi pregunta era como centrar esta web diseñada por "todobanners"..

Aquí les dejo el codigo:

POR ENCIMA DE LA WEB:

Código:
<div id="tb">Diseño por <a href="http://todobanners.es.tl">todobanners</a> </div>
<div id="afilado1">Aca coloque la imagen del afiliado1 </div>
<div id="afilado2">Aca coloque la imagen del afiliado2 </div>
<div id="afilado3">Aca coloque la imagen del afiliado3 </div>
<div id="afilado4">Aca coloque la imagen del afiliado4 </div>
<div id="content"></div>
<div id="menu_tbcontenedor">
<div id="menu_tb">
<div id="menu">
<ul>
<li><a href="http://todobanners.es.tl">Link1</a></li>
<li><a href="http://todobanners.es.tl">link2</a></li>
<li><a href="http://todobanners.es.tl">link3</a></li>
<li><a href="http://todobanners.es.tl">link4</a></li>
<li><a href="http://todobanners.es.tl">link5</a></li>
<li><a href="http://todobanners.es.tl">link6</a></li>
<li><a href="http://todobanners.es.tl">link7</a></li>
<li><a href="http://todobanners.es.tl">link8</a></li>
<li><a href="http://todobanners.es.tl">link9</a></li>
<li><a href="http://todobanners.es.tl">link10</a></li>
<li><a href="http://todobanners.es.tl">link11</a></li>
<li><a href="http://todobanners.es.tl">link12</a></li>

</ul>
</div>
</div>
</div>
<div id="imagen1">Aca coloque una imagen2</div>
<div id="imagen2">Aca coloque una imagen3</div>
<div id="imagen3">Aca coloque una imagen4</div>
<div id="header_oben">Texto del cabezal </div>


CSS-Sin style tag

Código:
body {
background-image: url(http://img75.imageshack.us/img75/103/webdesing20zs7.png);
background-color: #0000FF;
background-repeat: no-repeat;
overflow: scroll;
}
#header {
visibility: hidden;
}
#nav_container {
visibility: hidden;
}
#tb {
position:absolute;
left:316px;
top:1322px;
width:285px;
height:-4px;
z-index:1;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;
color: #FF0000;
background-color: #666666;
}
a:link {
color: #FFCC00;
}
#afilado1 {
position:absolute;
left:31px;
top:1192px;
width:180px;
height:110px;
z-index:2;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
#afilado1 {
position:absolute;
left:33px;
top:1194px;
width:174px;
height:109px;
z-index:3;
overflow: auto;
}
#afilado2 {
position:absolute;
left:238px;
top:1192px;
width:177px;
height:108px;
z-index:4;
overflow: auto;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
#afilado3 {
position:absolute;
left:439px;
top:1191px;
width:179px;
height:110px;
z-index:5;
overflow: auto;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
#afilado4 {
position:absolute;
left:645px;
top:1192px;
width:176px;
height:110px;
z-index:6;
overflow: auto;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
#content {
position:absolute;
left:20px;
top:571px;
width:795px;
height:579px;
z-index:7;
vertical-align: 2%;
text-align: justify;
padding-left: 12px;
font-family: "Courier New", Courier, monospace;
font-weight: bold;
color: #FFFFFF;
overflow: auto;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
margin-top: 8px;
margin-right: 10px;
margin-bottom: 50px;
margin-left: 0px;
color: #CCCCCC;
}
#menu {
padding:50px 135px 0 0;
float:right;
position: absolute;
left: 2px;
top: 474px;
height: -2px;
width: 799px;
font-family: Arial, Helvetica, sans-serif;
}
#menu ul {margin-top:0;}
#menu ul li {display:inline;}
#menu a {font-size:14px; text-decoration:none; color:#FFFFFF; padding:5px 10px; text-transform:lowercase;}
#menu a:hover {border-bottom:2px solid #FFFF00;}
#counter {
visibility: hidden;
}

#sidebar_container {
position:absolute;
left:10px;
top:299px;
width:199px;
height:188px;
z-index:9;
background-image: url(boxdercho_imagen);
overflow: auto;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
#imagen1 {
position:absolute;
left:236px;
top:302px;
width:186px;
height:187px;
z-index:10;
background-image: url(imagen1fondo);
overflow: auto;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
#imagen2 {
position:absolute;
left:446px;
top:304px;
width:191px;
height:184px;
z-index:11;
background-image: url(imagen2fondo);
overflow: auto;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
#imagen3 {
position:absolute;
left:658px;
top:305px;
width:183px;
height:183px;
z-index:12;
background-image: url(imagen3fondo);
overflow: auto;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
#header_oben {
position:absolute;
left:68px;
top:59px;
width:230px;
height:46px;
z-index:13;
background-image: url(imagen_del_cabezal);
font-family: Arial, Helvetica, sans-serif;
padding-top: 150px;
padding-right: 12px;
padding-bottom: 12px;
padding-left: 500px;
color: #FFFFFF;
font-size: 24px;
overflow: auto;
}



Espero puedan ayudarme...
Mensaje21-04-2009, 19:39 (UTC)    
Título del mensaje:

Hola,
¿has probado utilizando este código en "Texto por encima de la página"?
Cita:
<div style="width:900px; position: relative; margin-left: auto; margin-right: auto;">

Puedes variar el centrado modificando el valor marcado en rojo.

Salu2!
Mensaje21-04-2009, 22:13 (UTC)    
Título del mensaje:

Si, pero me queda deforme la plantilla :S
mira: http://www.fileden.com/files/2008/4/18/1871745/staar.PNG

editado por javidj: si la imagen supera los 600px no puede estar visible en el foro, porque deforma


Ultima edición por stargroupp el Jue Abr 23, 2009 2:56 am; editado 2 veces
Mensaje23-04-2009, 01:15 (UTC)    
Título del mensaje:

Si alguien sabe como centrar esta web, le pido qu me deje el codigo. O alguna modificación al mismo código...
Desde ya muchas gracias
Mensaje23-04-2009, 01:32 (UTC)    
Título del mensaje:

PRUEBA ESTO EN TEXTO POR ENCIMA DE LA PAGINA

Código:
<!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">
<div style="width:900px; position: relative; margin-left: auto; margin-right: auto;">


SALU2
Mensaje23-04-2009, 06:55 (UTC)    
Título del mensaje:

no son ninguna de esas soluciones.

el mismo todobanners, te tuvo que reparar el fallo, tenias que haberle dicho que tu no lo ves centrado. seguramente porque usais distinto navegador o tamaño de monitor.
pon esto antes del codigo de "texto encima de la pagina" (el 1º):
<div style="position:absolute;left:90px;top:251px;">AQUI TODO EL CODIGO</div>

debes modificar, la parte:
left= margen desde la izquierda. a mayor numero, mas hacia la derecha
top= margen desde arriba. a mayor numero, mas hacia abajo.

nota: este codigo, no funciona bien para morcilla firefoso
______________

10 años ayudando a la comunidad!!
>las cuestiones de problemas con webs se atienden en el foro.
>Ticket a: ayuda@paginawebgratis.es -- Reportes a: support-es@webme.com
Mensaje23-04-2009, 16:32 (UTC)    
Título del mensaje:

Hola,
claro, el tema es que son codes medios inestables. Fíjate que tienes este code al inicio:
Código:
body {
background-image: url(http://img75.imageshack.us/img75/103/webdesing20zs7.png);
background-color: #0000FF;
background-repeat: no-repeat;
overflow: scroll;
}


Reemplazalo por este:
Código:
body {
background-image: url(http://img75.imageshack.us/img75/103/webdesing20zs7.png);
background-color: #0000FF;
background-repeat: no-repeat;
overflow: scroll;
margin-left:auto;
margin-right:auto;
position: relative;
}


Eso te va a ofrecer algo fijo y no flotante

Salu2!
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group