Foros del Web » Creando para Internet » CSS »

Imagen pegada arriba

Estas en el tema de Imagen pegada arriba en el foro de CSS en Foros del Web. Bueno del titulo no se si sera descriptivo xD pero no sabia como explicarlo en pocas palabras. Se que esto se hace en CSS pero ...
  #1 (permalink)  
Antiguo 26/09/2008, 18:31
 
Fecha de Ingreso: febrero-2008
Mensajes: 269
Antigüedad: 16 años
Puntos: 5
Imagen pegada arriba

Bueno del titulo no se si sera descriptivo xD pero no sabia como explicarlo en pocas palabras.

Se que esto se hace en CSS pero como no se CSS pues no se hacerlo. Lo que quería es que mi logo, ubicado en el overall_header.tpl (uso phpbb2) quede 'pegado al explorador', es decir, siempre queda un corto espacio del navegador hasta la primera imagen de la pagina y lo que yo queria es que la primera imagen salga pegada, que no haya espacio alguno del navegador hasta el logo.

El logo ocupara todo el ancho de la ventana, simplemente por estetica. Seria el mismo efecto que tienen la mayoria de webs, solo que yo quiero hacerlo en phpbb.

No se si me he explicado...si no se entiende algo decidmelo e intentare explicarlo mejor pero me resulta dificil explicar algo asi >.<
  #2 (permalink)  
Antiguo 26/09/2008, 18:41
Avatar de kaninox  
Fecha de Ingreso: septiembre-2005
Ubicación: In my House
Mensajes: 3.597
Antigüedad: 18 años, 6 meses
Puntos: 49
Respuesta: Imagen pegada arriba

podrias poner el codigo de como lo pones?

esque me pregunto si tienes el logo en una tabla o en un div y las soluciones serian diferetntes, todo caso con css puedes poner el margin y padding en 0 para que todo quede pegado...
__________________
Gokuh Salvo al mundo. PUNTO!!!!
  #3 (permalink)  
Antiguo 27/09/2008, 03:02
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Imagen pegada arriba

Seguramente se solucionará con algo como esto en tu css:

html, body {mrgin:0; padding:0;}
__________________
Visita mi nueva web idplus.org
  #4 (permalink)  
Antiguo 27/09/2008, 12:23
 
Fecha de Ingreso: febrero-2008
Mensajes: 269
Antigüedad: 16 años
Puntos: 5
Respuesta: Imagen pegada arriba

Como no sabia hacerlo pues tampoco sabia que tenia que poner xD

Como uno de los menus tiene desplegable y los demas botones tienen hover en CSS, esta todo en div, dejo el codigo porque no tengo ni idea de donde meter el codigo que me decis xD :P

Código PHP:
div.indicediv.faqdiv.miembrosdiv.gruposdiv.mensajeriadiv.staffdiv.logodiv.m1div.reglasdiv.bancodiv.trabajosdiv.tiendadiv.m2 {displayblock;floatleft;}
div.indice {width139pxheight55px;backgroundurl(../images/menu/indice-r.pngno-repeat;}
div.faq {width91pxheight55px;backgroundurl(../images/menu/faq-r.pngno-repeat;}
div.miembros {width153pxheight55px;backgroundurl(../images/menu/miembros-r.pngno-repeat;}
div.grupos {width127pxheight55px;backgroundurl(../images/menu/grupos-r.pngno-repeat;}
div.mensajeria {width179pxheight55px;backgroundurl(../images/menu/mensajeria-r.pngno-repeat;}
div.staff {width111pxheight55px;backgroundurl(../images/menu/staff-r.pngno-repeat;}
div.logo {width800pxheight180px;backgroundurl(../images/menu/logo-r.pngno-repeat;}
div.m1 {width72pxheight61px;backgroundurl(../images/menu/m1-r.pngno-repeat;}
div.reglas {width123pxheight61px;backgroundurl(../images/menu/reglas-r.pngno-repeat;}
div.banco {width141pxheight61px;backgroundurl(../images/menu/banco-r.pngno-repeat;}
div.trabajos {width177pxheight61px;backgroundurl(../images/menu/trabajos-r.pngno-repeat;}
div.tienda {width158pxheight61px;backgroundurl(../images/menu/tiendas-r.pngno-repeat;}
div.m2 {width112pxheight61px;backgroundurl(../images/menu/m2-r.pngno-repeat;}
div:hover {background-positionleft bottom;}
#cabeza {display:block; width: 800px;}

#indice_list, #faq_list, #miembros_list, #grupos_list, #mensajeria_list, #staff_list
{
    
margin:0px;
    
padding:0px;
    list-
stylenone;
    
text-aligncenter;
                
color#5B280D;
    
border-left2px solid #5B280D ;
    
border-bottom2px solid #5B280D ;
    
border-right2px solid #5B280D ;
                
background-color#5B280D;

}

#indice_list li, #faq_list li, #miembros_list li, #grupos_list li, #mensajeria_list li, #staff_list li
{
    
margin:2px;
    
padding:0px;
    list-
stylenone;
    
text-aligncenter;
        
color#5B280D;
    
background-color:#b29F78;

}

#indice_list
{
    
width:110px;
    
left:22px;
}


#faq_list
{
    
width:85px;
}

#miembros_list
{
    
width:147px;
}


#grupos_list
{
    
width:127px;
}

#mensajeria_list
{
    
width:179px;
}


#staff_list
{
    
width:95px;
    
left:1px;
}

a:link,a:active,a:visited
{
color #5B280D; text-decoration: none; 
/* #FFFFCC */
a:hover
{
color #000000; text-decoration:line-through;

  #5 (permalink)  
Antiguo 27/09/2008, 12:30
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Imagen pegada arriba

Simplemente ponlo como el primero de tus estilos, encima de div.indice;

html, body {mrgin:0; padding:0;}
div.indice, div.faq, ...
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 27/09/2008, 14:46
 
Fecha de Ingreso: febrero-2008
Mensajes: 269
Antigüedad: 16 años
Puntos: 5
Respuesta: Imagen pegada arriba

Lo he puesto donde me has dicho pero no sale bien...

Pongo la pagina para que lo veas pero avisame en cuanto lo veas pls, que no quiero que mucha gente lo vea, este es un foro conocido y cualquiera de mi pagina podria verlo...

Edited

Ademas no sale pegado arriba, sigue quedando el espacio que queria quitar u.u

Y gracias por responder a ambos ^^

Última edición por Vendetta; 01/10/2008 a las 01:33
  #7 (permalink)  
Antiguo 27/09/2008, 15:11
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Imagen pegada arriba

A ver: yo te he puesto que pusieras:

html, body {margin:0; padding:0;}
(había un pequeño error, porque faltaba la "a")

Pero tú has puesto

html, body {padding:0pt;}

Imagino por qué: al ponerlo en dreamweaber o así, al estar mal escrito margin te lo ha elimnado.

Pon exactamente lo que te pongo arriba y resuelto.
__________________
Visita mi nueva web idplus.org
  #8 (permalink)  
Antiguo 27/09/2008, 19:10
 
Fecha de Ingreso: febrero-2008
Mensajes: 269
Antigüedad: 16 años
Puntos: 5
Respuesta: Imagen pegada arriba

Edito desde el FTP y el FTP no me abre el dream, me abre el editor del FlashFXP aunque preferia antes cuando me habria el dream x.x me era mas facil con los colorcitos y esas cosas XD pero ahora no hay manera pero bueno ese no es el caso xD

Realmente no se porque se ha ido esa parte si yo he puesto ambas palabras, imagino que es por lo que tu dices, al estar mal escrito se borraria pero no se...es raro porque no use ningun programa tipo dream. Igualmente ya esta y funciona! El unico problema es que el menu de abajo sale al lado del logo en vez de debajo de este...

Y Gracias! ^^
  #9 (permalink)  
Antiguo 29/09/2008, 19:39
 
Fecha de Ingreso: febrero-2008
Mensajes: 269
Antigüedad: 16 años
Puntos: 5
Respuesta: Imagen pegada arriba

Up...

Necesito solución al problema, por favor u.u
  #10 (permalink)  
Antiguo 30/09/2008, 01:30
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Imagen pegada arriba

Añade al div logo esto:

div.logo {background:transparent url(../images/menu/logo-r.png) no-repeat scroll 0%;
clear:both;
float:none;

height:180px;
width:800px;
}
__________________
Visita mi nueva web idplus.org
  #11 (permalink)  
Antiguo 30/09/2008, 14:36
 
Fecha de Ingreso: febrero-2008
Mensajes: 269
Antigüedad: 16 años
Puntos: 5
Respuesta: Imagen pegada arriba

Ah, coño solo salen problemas! xD

Ahora el logo sale centrado y las barras alineadas a la izquierda...u.u...

Gracias por responder Mikmoro.

Si puedes solucionarme tambien este problema te lo agradeceria >.< y espero no salgan mas xD

Un saludo ó.ò
  #12 (permalink)  
Antiguo 30/09/2008, 15:16
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Imagen pegada arriba

Ya lo sabía, pero no te lo he puesto para que intentaras resolverlo tú.

Cambia el <center> incial por un envoltorio como <div id="contenedor">. También el de cierre </center> por </div>

Ahora añade a la css

#contenedor {margin: 0 auto;width: 800px;}

Ahora verás que tus botones de abajo no son tan anchos como la imagen.

Antes de la próxima consulta deberás haber buscado bien la respuesta, porque "cómo centrar mi web" es algo que podías haber encontrado muy fácil aquí en el foro.
__________________
Visita mi nueva web idplus.org
  #13 (permalink)  
Antiguo 01/10/2008, 01:28
 
Fecha de Ingreso: febrero-2008
Mensajes: 269
Antigüedad: 16 años
Puntos: 5
Respuesta: Imagen pegada arriba

Cita:
Iniciado por Mikmoro Ver Mensaje
Ya lo sabía, pero no te lo he puesto para que intentaras resolverlo tú.

Cambia el <center> incial por un envoltorio como <div id="contenedor">. También el de cierre </center> por </div>

Ahora añade a la css

#contenedor {margin: 0 auto;width: 800px;}

Ahora verás que tus botones de abajo no son tan anchos como la imagen.

Antes de la próxima consulta deberás haber buscado bien la respuesta, porque "cómo centrar mi web" es algo que podías haber encontrado muy fácil aquí en el foro.
He mirado de hacerlo...he mirado el html si...y he visto que tenia las etiquetas <centrar> y al ver eso ya me he perdido...yo de CSS lo justo, asi que ni sabia que eso servia para centrar...

No he utilizado el buscador porque tengo un tema iniciado y el problema de centrar ha salido despues de arreglar otro...no habia pensado en el buscador, normalmente lo uso.

Gracias por responder
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 20:58.