Foros del Web » Creando para Internet » CSS »

Posicionar imagen CSS/html

Estas en el tema de Posicionar imagen CSS/html en el foro de CSS en Foros del Web. Hola a todos! Soy nuevo en el foro... Estoy modificando un template CSS e hice un copy paste de un JScript para un slideshow (añadiendo ...
  #1 (permalink)  
Antiguo 10/05/2010, 17:42
 
Fecha de Ingreso: mayo-2010
Mensajes: 24
Antigüedad: 7 años, 7 meses
Puntos: 0
Posicionar imagen CSS/html

Hola a todos! Soy nuevo en el foro...

Estoy modificando un template CSS e hice un copy paste de un JScript para un slideshow (añadiendo código en el style.css y en el index.html. He colocado el slideshow (son imágenes superpuestas) donde quería, donde antes estaba una imagen fija, pero se ha descuadrado la imagen del logo/nombre de la página que iba a su derecha, he probado cerrar el </div> en varias posiciones pero sólo consigo subir la imagen una tabla por encima o por debajo de la imagen del slideshow...También podría ser el .css seguro que es una tontería...
A ver si alguien puede ayudarme...GRACIAS de antemano!

BIEN

MAL


--------------STYLE.CSS------------------
#slideshow {
position:relative;
height:299px;
width: 291px;
}

#slideshow IMG {
position:absolute;
height:299px;
width: 291px;
top:0;
left:0;
z-index:8;
opacity:0.0;
}

#slideshow IMG.active {
z-index:10;
opacity:1.0;
}

#slideshow IMG.last-active {
z-index:9;
}


-----------INDEX.HTML------------
(EL CÓDIGO DEL SCRIPT...)

<div id="wrapper">
<div id="header">
<div id="slideshow">
<img src="image1.jpg" alt="Slideshow Image 1" class="active" />
<img src="image2.jpg" alt="Slideshow Image 2" />
<img src="image3.jpg" alt="Slideshow Image 3" />

<h1><a href="http://www."><img src="images/logo.jpg" alt="Petit Cafe" /></a></h1>
<ul id="nav">
<li><a href="http://www.">INICIO</a> &nbsp;|&nbsp; </li>
<li><a href="http://www.">CARTA</a> &nbsp;|&nbsp; </li>
<li><a href="http://www.">POSTRES</a> &nbsp;|&nbsp; </li>
<li><a href="http://www.">VINOS</a> &nbsp;|&nbsp; </li>
<li><a href="http://www.">RESERVAS</a> &nbsp;|&nbsp; </li>
<li><a href="http://www.">CONTACTO</a></li>
</ul><!-- end nav -->
<div id="welcome">
<h2><img src="images/title_welcome_es.gif" alt="Bienvenidos" /></h2>
<p>Situados en Santa .................</p>
</div><!-- end welcome -->
</div><!-- end slideshow -->
</div><!-- end header -->
.........
</div><!-- end wrapper -->

Última edición por xyz3d; 10/05/2010 a las 17:53
  #2 (permalink)  
Antiguo 10/05/2010, 18:10
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 9 años, 4 meses
Puntos: 105
Respuesta: Posicionar imagen CSS/html

Intenta asi:
Código HTML:
Ver original
  1. <div id="wrapper">
  2. <div id="slideshow">
  3. <img src="image1.jpg" alt="Slideshow Image 1" class="active" />
  4. <img src="image2.jpg" alt="Slideshow Image 2" />
  5. <img src="image3.jpg" alt="Slideshow Image 3" />
  6. </div><!-- end slideshow -->
  7. <div id="header">
  8. <h1><a href="http://www."><img src="images/logo.jpg" alt="Petit Cafe" /></a></h1>
  9. <ul id="nav">
  10. <li><a href="http://www.">INICIO</a> &nbsp;|&nbsp; </li>
  11. <li><a href="http://www.">CARTA</a> &nbsp;|&nbsp; </li>
  12. <li><a href="http://www.">POSTRES</a> &nbsp;|&nbsp; </li>
  13. <li><a href="http://www.">VINOS</a> &nbsp;|&nbsp; </li>
  14. <li><a href="http://www.">RESERVAS</a> &nbsp;|&nbsp; </li>
  15. <li><a href="http://www.">CONTACTO</a></li>
  16. </ul><!-- end nav -->
  17. </div><!-- end header -->
  18. <div id="welcome">
  19. <h2><img src="images/title_welcome_es.gif" alt="Bienvenidos" /></h2>
  20. <p>Situados en Santa .................</p>
  21. </div><!-- end welcome -->
  22. .........
  23. </div><!-- end wrapper -->

y eso es todo lo que puedo ayudar........ si no te sale..... tendrias que postear tambien los css de header, nav, welcome, otros.

suerte.
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #3 (permalink)  
Antiguo 11/05/2010, 12:59
 
Fecha de Ingreso: mayo-2010
Mensajes: 24
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Posicionar imagen CSS/html

Gracias por tu respuesta MasterOjitos. He probado esos cambios y la imagen y el texto se pasan a la tabla de abajo del slideshow. Te copio todo el código para que lo veas más claro.

En el index.html copié el <script> y el <div id="slideshow">, el archivo del .js no lo he modificado...

Código HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Petit Cafe</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>

<script type="text/javascript">

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    // uncomment the 3 lines below to pull the images in random order
    
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );


    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

</script>

</head>

<body>
  <div id="wrapper">
  <div id="slideshow">
    <img src="image1.jpg" alt="Slideshow Image 1" class="active" />
    <img src="image2.jpg" alt="Slideshow Image 2" />
    <img src="image3.jpg" alt="Slideshow Image 3" />
	</div><!--end slideshow -->
    <div id="header">
      <h1><a href="http://www.petitcafe."><img src="images/logo.jpg" alt="Petit Cafe" /></a></h1>
      <ul id="nav">
        <li><a href="http://www.petitcafe.">INICIO</a> &nbsp;|&nbsp; </li>
        <li><a href="http://www.petitcafe.">CARTA</a> &nbsp;|&nbsp; </li>
        <li><a href="http://www.petitcafe.">POSTRES</a> &nbsp;|&nbsp; </li>
        <li><a href="http://www.petitcafe.">VINOS</a> &nbsp;|&nbsp; </li>
        <li><a href="http://www.petitcafe.">RESERVAS</a> &nbsp;|&nbsp; </li>
        <li><a href="http://www.petitcafe.">CONTACTO</a></li>
      </ul><!-- end nav -->
      <div id="welcome">
        <h2><img src="images/title_welcome_es.gif" alt="Bienvenidos" /></h2>
        <p>Situados en Santa Pon&ccedil;a desde 19xx. Ofrecemos comida internacional y autoctona con los ingredientes m&aacute;s fresos y naturales. Local climatizado, con TV, m&uacute;sica y WI-FI abierto, y terraza con vistas al mar, para disfrutar de un ambiente familiar y agradable.</p>
	<p>Abrimos de Lunes a Viernes de xxxxxxxx y los xxxxxxx.
      </div><!-- end welcome -->
	</div><!-- end header -->
    <div id="body"><div id="body-i">
      <h2 id="hspecials"><img src="images/title_menus.gif" alt="Our Special Menus" /></h2>
      <div id="specials">
        <div style="background-image: url(images/picture_1.jpg);" class="imagebox">
          <h3><a href="http://www.petitcafe.">Ensalada Vegetariana</a></h3>
          <p>Arroz, tom&aacute;te, lechuga, xxxxxxxxxx........</p>
          <p><h3>6,00 &euro;</h3></p>
          <p class="readmore"><a href="http://www.petitcafe.">... +</a></p>
        </div>
        <div style="background-image: url(images/picture_2.jpg);" class="imagebox">
          <h3><a href="http://www.petitcafe.">Nombre menu</a></h3>
          <p>Texto de prueba. Texto de prueba. Texto de prueba. </p>
          <p class="readmore"><a href="http://www.petitcafe.">... +</a></p>
        </div>
        <div style="background-image: url(images/picture_3.jpg);" class="imagebox">
          <h3><a href="http://www.petitcafe.">Nombre menu</a></h3>
          <p>Texto de prueba. Texto de prueba. Texto de prueba. </p>
          <p class="readmore"><a href="http://www.petitcafe.">... +</a></p>
        </div>
      </div><!-- end specials -->
      <h2 id="hevents"><img src="images/title_events.gif" alt="Special Events" /></h2>
      <div id="events">
        <h3><a href="http://www.petitcafe.">11.06.2010</a></h3>
        <p>Empieza el Mundial Sud&aacute;frica 2010. </p>
        <p class="readmore"><a href="http://www.petitcafe.">... +</a></p>
        <h3><a href="http://www.petitcafe.">03.04.2010</a></h3>
        <p>Texto de prueba. Texto de prueba. Texto de prueba. </p>
        <p class="readmore"><a href="http://www.petitcafe.">... +</a></p>
        <h3><a href="http://www.petitcafe.">04.04.2010</a></h3>
        <p>Texto de prueba. Texto de prueba. Texto de prueba. </p>
        <p class="readmore"><a href="http://www.petitcafe.">... +</a></p>
        <h3><a href="http://www.petitcafe.">05.04.2010</a></h3>
        <p>Texto de prueba. Texto de prueba. Texto de prueba. </p>
        <p class="readmore"><a href="http://www.petitcafe.">... +</a></p>
      </div><!-- end events -->
      <div class="clear" id="spacer"></div>
    </div></div><!-- end body -->
    <div id="hotstuff">
      <h2><img src="images/title_hot.gif" alt="Today's Hot" /></h2>
      <div style="background-image: url(images/spotify.png);" id="hot-one" class="imagebox">
        <h3><a href="http://www.petitcafe.">M&uacute;sica ambiental</a></h3>
        <p>La mejor m&uacute;sica ambiente con Spotify.</p>
<br><br>
      </div>
      <div style="background-image: url(images/wifi.png);" id="hot-two" class="imagebox">
        <h3><a href="http://www.petitcafe.">Wi-Fi Gratis</a></h3>
        <p>Disponemos de zona Wi-Fi abierta de alta velocidad para nuestros clientes.</p>
      </div>
      <div style="background-image: url(images/facebook.png);" id="hot-three" class="imagebox">
        <h3><a href="http://www.petitcafe.">S&iacute;guenos en Facebook</a></h3>
        <p>Nuestros enlaces:</p>
	<h3><a href="http://www.motoclubmallorca.com">MotoClub Mallorca</a></h3>
      </div>
      <div class="clear"></div>
    </div><!-- end hotstuff -->
  </div><!-- end wrapper -->
  <div id="footer">
    (c) <a href="http://www.petitcafe.">www.petitcafe.<a> 2010. Rei Jaume I , 88 Santa Pon&ccedil;a - 07180 Calvi&agrave - (Baleares) Tel. 971 695 136<br><br>
	Web creada por <a href="http://www.xyzdesign.es">XYZdesign</a>
  </div><!-- end footer -->
</body>
</html> 

Última edición por xyz3d; 11/05/2010 a las 13:23
  #4 (permalink)  
Antiguo 11/05/2010, 13:17
 
Fecha de Ingreso: mayo-2010
Mensajes: 24
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Posicionar imagen CSS/html

En este style.css copié la parte del slideshow...

Código CSS:
Ver original
  1. body {
  2.     font-family: tahoma, helvetica, arial, sans-serif;
  3.     font-size: 11px;
  4.     text-align: center;
  5.     background: url(images/page_bg.jpg);
  6.     color: #6f6f6f;
  7. }
  8.  
  9. html, body, #wrapper, h1, #nav-top, #nav-top li, #nav-left, #nav-top li {
  10.     margin: 0;
  11.     padding: 0;
  12.     list-style: none;
  13. }
  14.  
  15. th, td {
  16.     font-size: 11px;
  17. }
  18.  
  19. img { border: 0; }
  20.  
  21. #wrapper {
  22.     margin: 16px auto;
  23.     text-align: left;
  24.     width: 750px;
  25.     position: relative;
  26. }
  27.  
  28. h1, h2, h3 {
  29.     font-size: 12px;
  30. }
  31.  
  32.  
  33. h1 {
  34.     margin: 0;
  35.     padding: 0;
  36. }
  37.  
  38. h2 {
  39.     margin: 0 0 0 0;
  40.     padding: 0;
  41. }
  42.  
  43. h3 {
  44.     padding: 4px 0 0 0;
  45. }
  46.  
  47. p {
  48.     margin: 1em 0;
  49.     padding: 0;
  50. }
  51.  
  52. .block {
  53.     display: block;
  54. }
  55.  
  56. .clear {
  57.     clear: both;
  58.     height: 1px;
  59.     padding-top: 0;
  60.     margin-top: 0;
  61.     margin-bottom: 0;
  62.     font-size: 1px;
  63.     line-height: 1px;
  64. }
  65.  
  66. * html .clear {
  67.     margin-top: -5px;
  68.     margin-bottom: -4px;
  69. }
  70.  
  71. .left {
  72.     float: left;
  73.     margin: 1px 8px 0px 0px;
  74. }
  75.  
  76. .softright {
  77.     text-align: right;
  78. }
  79.  
  80. .readmore {
  81.     text-align: right;
  82. }
  83.  
  84. /* ***** */
  85.  
  86. body {
  87.     background: #212e16;
  88.     color: #251200;
  89. }
  90.  
  91. #wrapper {
  92.     width: 780px;
  93.     background: #AD803D;
  94. }
  95.  
  96. a {
  97.     color: #422100;
  98. }
  99.  
  100. a:hover {
  101.     color: #231201;
  102. }
  103.  
  104. #body #events .readmore a, #body .readmore a, #hotstuff .readmore a {
  105.     color: #e2c3a5;
  106.     text-decoration: none;
  107. }
  108.  
  109. #body .readmore a:hover, #body #events .readmore a:hover, #hotstuff .readmore a:hover {
  110.     text-decoration: underline;
  111. }
  112.  
  113. /* header */
  114.  
  115. #slideshow {
  116.     position:relative;
  117.     height:299px;
  118.     width: 291px;
  119. }
  120.  
  121. #slideshow IMG {
  122.     position:absolute;
  123. height:299px;
  124. width: 291px;
  125.     top:0;
  126.     left:0;
  127.     z-index:8;
  128.     opacity:0.0;
  129. }
  130.  
  131. #slideshow IMG.active {
  132.     z-index:10;
  133.     opacity:1.0;
  134. }
  135.  
  136. #slideshow IMG.last-active {
  137.     z-index:9;
  138. }
  139.  
  140.  
  141. #header h1 {
  142.     text-align: right;
  143. }
  144.  
  145. #header #nav {
  146.     font-size: 9px;
  147.     text-align: center;
  148.     background: #170E01;
  149.     color: #D4A66F;
  150.     font-weight: bold;
  151.     width: 489px;
  152.     position: absolute;
  153.     top: 86px;
  154.     left: 291px;
  155.     padding: 9px 0 10px 0;
  156.     margin: 0;
  157.     border-top: 1px solid white;
  158.     border-bottom: 1px solid white;
  159. }
  160.  
  161. #header #nav li {
  162.     display: inline;
  163. }
  164.  
  165. #header #nav a {
  166.     color: #D4A66F;
  167.     text-decoration: none;
  168. }
  169.  
  170. #header #nav a:hover {
  171.     color: #fff;
  172.     text-decoration: underline;
  173. }
  174.  
  175. #header #welcome {
  176.   position: absolute;
  177.   top: 122px; left: 291px;
  178.   width: 470px; height: 173px;
  179.   overflow: auto;
  180. }
  181.  
  182. #header #welcome h2 {
  183.     padding: 0.2em 0 0 0;
  184.     margin: 0;
  185.     line-height: 1;
  186. }
  187.  
  188. #header #welcome p {
  189.     margin: 0.5em 0;
  190. }
  191.  
  192. * html #header #welcome p {
  193.     margin: 0.5em 0;
  194. }
  195.  
  196. #header #welcome p {
  197.     padding-left: 2em;
  198. }
  199.  
  200. /* body */
  201.  
  202. #body {
  203.     position: relative;
  204.     color: #251200;
  205.     background: url(images/body_bg.gif) repeat-y;
  206. }
  207.  
  208. #body-i {
  209.     width: 100&#37;;
  210.     background: url(images/photo.jpg) top right no-repeat;
  211. }
  212.  
  213. #body #hevents {
  214.     position: absolute;
  215.     top: 0; left: 291px;
  216. }
  217.  
  218. * html #body #hevents {
  219.     position: relative;
  220.     top: 0; left: 0;
  221.     margin-top: -32px;
  222. }
  223.  
  224. #body #specials {
  225.     float: left;
  226.     width: 286px;
  227.     margin-left: 2px;
  228.     display: inline;
  229. }
  230.  
  231. #body #events {
  232.     float: left;
  233.     width: 235px;
  234.     margin-left: 10px;
  235.     display: inline;
  236. }
  237.  
  238. #body .imagebox {
  239.     padding: 2px 8px 2px 100px;
  240.     margin: 2px 0;
  241.     background: #9b6f2d 4px no-repeat;
  242. }
  243.  
  244. #body h3, #body p {
  245.     margin: 0 0 0.2em 0;
  246. }
  247.  
  248. #body #events a {
  249.     color: #ce9b5e;
  250. }
  251.  
  252. #body #events a:hover {
  253.     color: #fff;
  254. }
  255.  
  256. #events .readmore {
  257.     margin-bottom: 0;
  258. }
  259.  
  260. /* hotstuff */
  261.  
  262. #hotstuff {
  263.     width: 100%;
  264.     background: url(images/hotstuff_bg.gif) repeat-y;
  265. }
  266.  
  267. * html #hotstuff {
  268.     padding-bottom: 10px;
  269. }
  270.  
  271. #hotstuff h2 {
  272.     background: #3b2000;
  273.     border-top: 1px solid #fff;
  274. }
  275.  
  276. * html #hotstuff h2 {
  277.     width: 100%;
  278. }
  279.  
  280. #hotstuff .imagebox {
  281.     padding: 2px 8px 2px 103px;
  282.     margin: 2px 0;
  283.     background: 4px no-repeat;
  284.     float: left;
  285.     width: 200px;
  286. }
  287.  
  288. #hotstuff #hot-one   { width: 180px; }
  289. #hotstuff #hot-two   { width: 140px; margin-left: 2px; }
  290. #hotstuff #hot-three { width: 120px; margin-left: 2px; }
  291.  
  292. * html #hotstuff #hot-one   { width: 290px; w\idth: 180px; }
  293. * html #hotstuff #hot-two   { width: 250px; w\idth: 140px; }
  294. * html #hotstuff #hot-three { width: 230px; w\idth: 120px; }
  295.  
  296. #hotstuff h3, #hotstuff p {
  297.     margin: 0 0 0.2em 0;
  298. }
  299.  
  300. * html #spacer {
  301.     margin-top: 8px;
  302. }
  303.  
  304. /* footer */
  305.  
  306. #footer {
  307.     padding-bottom: 2em;
  308. }
  309.  
  310. #footer, #footer a {
  311.     color: #986D6D;
  312. }
  313.  
  314. #footer a:hover {
  315.     color: #fff;
  316. }
  #5 (permalink)  
Antiguo 12/05/2010, 13:57
 
Fecha de Ingreso: mayo-2010
Mensajes: 24
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Posicionar imagen CSS/html

No consigo arreglarlo... ayuda
  #6 (permalink)  
Antiguo 14/05/2010, 04:12
 
Fecha de Ingreso: mayo-2010
Mensajes: 24
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Posicionar imagen CSS/html

Dejo el enlace a los archivos de prueba que he subido para que se vea mejor...

http://

sólo quiero volver a colocar la imágen de titulo como se ve en la primera captura de arriba del post... Gracias

Última edición por xyz3d; 17/05/2010 a las 05:06
  #7 (permalink)  
Antiguo 14/05/2010, 09:54
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 9 años, 4 meses
Puntos: 105
Respuesta: Posicionar imagen CSS/html

a tu div header, cambia esto:

Código CSS:
Ver original
  1. header h1 {
  2.     text-align: right;
  3. }

por:

Código CSS:
Ver original
  1. header h1 {
  2.     position: absolute;
  3.     top: 0;
  4.     left: 191px;
  5. }


suerte.
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #8 (permalink)  
Antiguo 14/05/2010, 14:40
 
Fecha de Ingreso: mayo-2010
Mensajes: 24
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Posicionar imagen CSS/html

Cita:
Iniciado por masterojitos Ver Mensaje
a tu div header, cambia esto:

Código CSS:
Ver original
  1. header h1 {
  2.     position: absolute;
  3.     top: 0;
  4.     left: 191px;
  5. }

Gracias de nuevo... He probado eso y ha subido la imagen arriba pero centrada y se han descolocado las imágenes del slideshow (http://) pero ya se va acercando... puede que el fallo esté en algo que cambiara yo en las medidas del slideshow?

Última edición por xyz3d; 17/05/2010 a las 05:07
  #9 (permalink)  
Antiguo 14/05/2010, 16:00
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 9 años, 4 meses
Puntos: 105
Respuesta: Posicionar imagen CSS/html

Ah, disculpa, me confundi, escribi mal, no era 191px sino 291px......... te era dificil probar :

Bueno suerte !!
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #10 (permalink)  
Antiguo 15/05/2010, 10:21
 
Fecha de Ingreso: mayo-2010
Mensajes: 24
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Posicionar imagen CSS/html

Ahora sí! va perfecto! muchas gracias master! te debo una

Etiquetas: posicionar
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 11:26.