Foro css

Ciao

Estoy haciendo una grafica en la cual el background és un swf que ocupa todo el navegador y encima va el texto html del contenido.

El fondo en swf lo he conseguido y el html por encima en Google Chrome va bien, pero en Firefox e Iexplorer todo el html se pone debajo del video, adjunto el css por si le veis algun defecto o solucion:

Código: 
#contenedor general{
width: 100%;
height: 100%;
}
#fondo swf{
position:fixed; top: 0px; left: 0px;
height:100%;  
width: 100%; 
z-index: 1;
}
#contenedor html{
position: relative; top: 50px;
margin-left: auto; margin-right: auto;
z-index: 2;
width: 500px;
}
#titulo html{
position: relative; top: 50px;
margin-left: auto; margin-right: auto;
z-index: 2;
width: 500px;
text-align: center;
}
 
Federico Piccol dijo:
Ciao

Estoy haciendo una grafica en la cual el background és un swf que ocupa todo el navegador y encima va el texto html del contenido.

El fondo en swf lo he conseguido y el html por encima en Google Chrome va bien, pero en Firefox e Iexplorer todo el html se pone debajo del video, adjunto el css por si le veis algun defecto o solucion:

Código: 
#contenedor general{
width: 100%;
height: 100%;
}
#fondo swf{
position:fixed; top: 0px; left: 0px;
height:100%;  
width: 100%; 
z-index: 1;
}
#contenedor html{
position: relative; top: 50px;
margin-left: auto; margin-right: auto;
z-index: 2;
width: 500px;
}
#titulo html{
position: relative; top: 50px;
margin-left: auto; margin-right: auto;
z-index: 2;
width: 500px;
text-align: center;
}
Haz clic para expandir...

Hola federico, seria chevere que nos dejaras una url de eso, para ver todo el codigo completo y con firebug es mas facil encontrarle solucion...

Saludos
 
Hola peke

La tengo en local porque está aún muy verde (tengo demasiadas cosas sin resolver) para subirla a un servidor, de todos modos un pantallazo lo puedo postar
 

Archivos adjuntos

  • Sintítulo.jpg
    Sintítulo.jpg
    83.6 KB · Visitas: 170
Ciao

El sitio está en la demo

En chrome está como debería pero en Firefox tengo:

un problema de css: las clases contentheading y componentheading (la zona en color #444444) se salen del div contenedor a la derecha y no se ven en la pantalla pero si en los screenshot (ver imagen adjunta) y no entiendo porque

Sintitulo4.jpg


un problema de flash: en Chrome el flash se estira al 100% del alto y ancho de la pantalla, en cambio en Firefox e Iexplorer solo a lo alto
 
Ciao

Bueno en local ya funciona tanto en Chrome, como Iexplorer 6 como Firefox

Sintitulo5.jpg


La solución del css la he conseguido poniendo un clear both al principio del div, la del escalado del swf modificando algun parámetro del flasf.

Ahora me voy a dormir, mañana lo publicaré en la web de demo

Buenas noches
 
Hola a tod@s.... Les traigo este pequeño aporte.


Adapt.js - Adaptive CSS

Adapt.js is a lightweight (845 bytes minified) JavaScript file that determines which CSS file to load before the browser renders a page. If the browser tilts or resizes, Adapt.js simply checks its width, and serves only the CSS that is needed, when it is needed.


Espero les sirva :)
 
Tengo un banner como en 500 paginas de un sitio (q se creció)...

ahora ese banner hay q cambiarlo....

Cómo le hago para cambiar el banner en el css y q cambie en el resto del sitio....

Es q ahora mismo me toca insertar la imagen dentro del contenedor en el html...

Osea tengo esto en el css:

div#mi_banner
{
width:860px;
margin:0px auto;
margin-top:15px;
}


y en el html:

<div id="mi_banner">
<img src="images/banner.jpg" border="0" />
</div>



Que hago??? :S

Además necesito que el banner puede agregarsele un MAP..... osea q no puede estar como background...

Espero se entienda algo.... :p
 
Buenas buenas... vuelvo por acá.

Lo que pasa es que necesito una ayudita, estoy trabajando con jquery porque quiero hacer que unas imagenes en miniaturas al darle click me abran en un video flotante...

Estoy trabajando con éste plugin:
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#!prettyPhoto
(ahi donde dice: Youtube Content pueden ver maso o menos lo que quiero hacer)

Ya monté el plugin en la pagina la libreria de jquery, una hoja de estilo que tambien venia ahi ... y enlace la imagen y todo.

El problema que tengo es que cuando abre el lightbox con el video de youtube, éste carga 1 o 2 segundos y se reinicia y así constantemente por lo que no deja ver el video, no se sí es que tengo que ponerle algun parametro mas o cual será.

Les agredezco la ayuda.

Saludos.

Aqui adjunto lo que tengo el head de la pagina...
Código: 
<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<link type="text/css" href="css/style.css" rel="stylesheet" media="screen" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
Lo que tengo como imagen en miniatura...
Código: 
          <ul class="gallery clearfix">
            <li><a href="http://www.youtube.com/watch?v=rbdjyqNE9SA?rel=0" title="YouTube demo Prointek" rel= "prettyPhoto"><img src="image/temp3.jpg" alt="Youtube"/></a></li>
Y el script que creo es el que ejecuta el lightbox...
Código: 
<script charset="utf-8" type="text/javascript">
$(document).ready(function(){
$("area[rel^='prettyPhoto']").prettyPhoto();
$(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'normal',theme:'light_square',slideshow:3000, autoplay_slideshow: true});
$(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'fast',slideshow:10000, hideflash: true});
$("#custom_content a[rel^='prettyPhoto']:first").prettyPhoto({
custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',
changepicturecallback: function(){ initialize(); }
});
$("#custom_content a[rel^='prettyPhoto']:last").prettyPhoto({
custom_markup: '<div id="bsap_1259344" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div><div id="bsap_1237859" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6" style="height:260px"></div><div id="bsap_1251710" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div>',
changepicturecallback: function(){ _bsap.exec(); }
});
});
</script>
 
Parece que vincula el evento muchas veces; si ese es TODO el html que hay solo tiene que vincular el envento una sola vez

Código: 
$(".gallery: a").prettyPhoto({theme:'light_square',slideshow:3000, autoplay_slideshow: true});
 
Entonces como quedaria?

..asi:

Código: 
<script charset="utf-8" type="text/javascript">
$(document).ready(function(){
$("area[rel^='prettyPhoto']").prettyPhoto();
$(".gallery: a").prettyPhoto({animation_speed:'normal',theme:'light_square',slideshow:3000, autoplay_slideshow: true});
$("#custom_content a[rel^='prettyPhoto']:first").prettyPhoto({
custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',
changepicturecallback: function(){ initialize(); }
});
$("#custom_content a[rel^='prettyPhoto']:last").prettyPhoto({
custom_markup: '<div id="bsap_1259344" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div><div id="bsap_1237859" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6" style="height:260px"></div><div id="bsap_1251710" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div>',
changepicturecallback: function(){ _bsap.exec(); }
});
});
</script>
Así igual se me repite,

Agradezco la ayuda

EDITO: ya lo arreglé, le cambié el parametro Autoplay a False y listo, se reproduce sin problemas, de todas formas muchas gracias.

Saludos.
 
hola a todos alguno me puede ayudar?? he querido ponerle algunos stilos a unos cuadros de texto (textbox) y a unos combobox que uso con el ajax en asp.net pero no veo que los estilos apliquen, por lo menos, no como deberian quedar que me recomiendan, el estilo lo copio tal cual como lo presentan algunas paginas y en el archivo principal donde se usa el codigo lo llamo pero los cambios que tiene el textbox son minimos y en nada se parecen al que deberia....por ejemplo en la pagina de http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/ComboBox/ComboBox.aspx presentan un ejemplo con el estilo del ajaxtoolkit y se ve azul y esas cosas...al aplicar el mismo codigo con el mismo estilo obtengo algo totalmente distinto.....alguien me puede ayudar??
 
Al ajaxToolkit:ComboBox le modifican la propiedad CssClass y le ponen el nombre de la clase CSS que modifica el estilo del control, te tienes que asegurar de que tu pagina aspx este haciendo referencia a esa clase CSS en particular, ahi mismo en la pagina que pusiste explican detalladamente lo que te digo en la parte que dice " ComboBox Theming" pero si te quieres sacar el estilo de algo que ves en alguna pagina te recomiendo que uses el firebug de firefox y así vas sacando las clases de cualquier pagina para que las pegues en tu propio archivo de estilos.

Por ejemplo lo que tendrias que poner en tu hoja de estilos para que se vea azul es

.AquaStyle .ajax__combobox_inputcontainer .ajax__combobox_textboxcontainer input {
background-image: url("ComboBox/images/aqua-bg.gif");
background-position: left top;
border: 0 none;
font-size: 11px;
height: 17px;
margin: 0;
padding: 2px 0 0 8px;
width: 150px;


}

.AquaStyle .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button {
background-image: url("ComboBox/images/aqua-arrow.gif");
background-position: left top;
border: 0 none;
height: 19px;
width: 19px;


}

.AquaStyle .ajax__combobox_itemlist {
background-color: #FFFFFF;
border-color: #000000;


}

y hacer referencia a la clase AquaSyle en el control ajaxToolkit CssClass="AquaStyle" y también sacar las 2 imágenes que contiene la clase.
 
  • Me gusta
Reacciones: 2 personas
hegom dijo:
Al ajaxToolkit:ComboBox le modifican la propiedad CssClass y le ponen el nombre de la clase CSS que modifica el estilo del control, te tienes que asegurar de que tu pagina aspx este haciendo referencia a esa clase CSS en particular, ahi mismo en la pagina que pusiste explican detalladamente lo que te digo en la parte que dice " ComboBox Theming" pero si te quieres sacar el estilo de algo que ves en alguna pagina te recomiendo que uses el firebug de firefox y así vas sacando las clases de cualquier pagina para que las pegues en tu propio archivo de estilos.

Por ejemplo lo que tendrias que poner en tu hoja de estilos para que se vea azul es

.AquaStyle .ajax__combobox_inputcontainer .ajax__combobox_textboxcontainer input {
background-image: url("ComboBox/images/aqua-bg.gif");
background-position: left top;
border: 0 none;
font-size: 11px;
height: 17px;
margin: 0;
padding: 2px 0 0 8px;
width: 150px;


}

.AquaStyle .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button {
background-image: url("ComboBox/images/aqua-arrow.gif");
background-position: left top;
border: 0 none;
height: 19px;
width: 19px;


}

.AquaStyle .ajax__combobox_itemlist {
background-color: #FFFFFF;
border-color: #000000;


}

y hacer referencia a la clase AquaSyle en el control ajaxToolkit CssClass="AquaStyle" y también sacar las 2 imágenes que contiene la clase.
Haz clic para expandir...


hola muchas gracias por tu ayuda, en cuanto a la clase donde estan los estilos asi la tenia yo tal cual me faltaba era agregar las imagenes a la carpeta del proyecto :nervios:
muchas gracias!
 
"Pregunta Tecnica Maicol Giovany"...

Yo puedo hacer que todo el texto de una determinada clase sea un link a alguna URL?
 
Como así? lo que quieres es que un texto especifico se vea en color azul y con subrayado al pasar el cursor? o modificar una clase que ya tienes para agregarle este efecto?
 
hegom dijo:
Como así? lo que quieres es que un texto especifico se vea en color azul y con subrayado al pasar el cursor? o modificar una clase que ya tienes para agregarle este efecto?
Haz clic para expandir...

No, la pregunta no es sobre lograr el efecto, sino saber si puedo hacer que redireccione a una url...

Es que estoy usando un Jquery que muetra un cartelito en una esquina de la pagina, pero necesito hacer que al clickear en el cartel me redirija a otra parte.

Entonces como no pude hacerlo por html, pensé en alguna forma de usar CSS para que al hacer click en el texto del cartelito o en cualquier parte del div me redijera a donde quiero,

si se puede hacer esto con CSS? ...ahora que lo pienso... existe la posibilidad de crearle una capa transparente encima del div? y que ésta sea la que contenga el enlace?... o un .PNG transparente... No se cual serà la forma correcta de hacerlo, o como lo harian uds?
 
JF.atuesta dijo:
"Pregunta Tecnica Maicol Giovany"...

Yo puedo hacer que todo el texto de una determinada clase sea un link a alguna URL?
Haz clic para expandir...

Buena pregunta, pero la respuesta es mucho mejor! xD novelero! jaja

JF.atuesta dijo:
No, la pregunta no es sobre lograr el efecto, sino saber si puedo hacer que redireccione a una url...

Es que estoy usando un Jquery que muetra un cartelito en una esquina de la pagina, pero necesito hacer que al clickear en el cartel me redirija a otra parte.

Entonces como no pude hacerlo por html, pensé en alguna forma de usar CSS para que al hacer click en el texto del cartelito o en cualquier parte del div me redijera a donde quiero,

si se puede hacer esto con CSS? ...ahora que lo pienso... existe la posibilidad de crearle una capa transparente encima del div? y que ésta sea la que contenga el enlace?... o un .PNG transparente... No se cual serà la forma correcta de hacerlo, o como lo harian uds?
Haz clic para expandir...

Bueno, con CSS no se puede agregar lo que quieres, quizas con jquery podrias agregar el enlace pero no es mi campo, asi que no podria ayudarte de ese modo, lo que yo haria es con CSS mas o menos como dijiste...

Agrega un <a href="laurl" class="enlacefijo"></a> dentro de tu documento html, puede ser al inicio de todo, despues de <body>

Luego en el CSS le damos la instruccion, creas la clase.

Código: 
.enlacefijo {
position: absolute;
top: 0;
right: 0;
z-index: 9999;
width: 200px;
height: 200px;
display: block;
}

Ese css tiene una posicion absoluta, que es el que lo ubicara de manera fija en el navegador, con top 0, y right 0, lo ubicara en la esquina superior derecha del navegador... estoy suponiendo que el cartelito esta ubicado en esa esquina.... tambien tiene un z-index bastante superior para garantizar que el elemento <a> se coloque totalmente arriba del cartelito, tambien tiene un ancho y alto suponiendo que eso es lo que mide el cartelito para cubrir toda su zona... y por ultimo display: block para hacer que el elemento <a> simule ser un bloque.

ojala me haya explicado bien, estoy un poco de afan, y ademas un poco perdido de estos lados.... pero pronto volvere activamente como antes compartiendo...

Por cierto hace poquito me juaquearon y me quede sin blog, volvio nuevamente con nuevo theme basado en el anterior pero mejorado (eso creo) les dejo la url pa que le hechen un vistaso:

http://www.abreo.co

Bienvenidos los comentarios...

Por cierto, Feliz Año!!

Saludos!!!
 
  • Me gusta
Reacciones: 2 personas

Los últimos mensajes

Los últimos temas

Arriba Pie
Atrás