Creacion de barras

doom12344 · #1 (**permalink**) 29/09/2008, 19:43

Hola a todos, los molesto con mi pregunta, tengo mi pagina y quiero crearle 2 barras de cada lado como las creo?

Algo asi quiero hacer:

(disculpen que este hecho en paint :P pero asi me iban a entender)

Solamente es para estetica que las quiero, trate de añadirla de este modo:

<td background="imagen"><img src="imagen" alt="" border="0" width="29" height="100%"></td>

pero me queda algo asi:

Es decir me baja el contenido de la pagina.

PD:Perdonen el tamaño de las imagenes pero el foro no me deja usar Thumbnails

Desde ya muchas gracias.

nazareno59 · #2 (**permalink**) 29/09/2008, 20:23

creo que usando divs seria mas fácil ^^

creas dos divs de 20 px o no se cuanto tienen las barras rojas y a uno le das alineacion derecha y al otro izquierda y listo :)

en el BODY:

Cita:

en el CSS

Cita:

#barra_izquierda, #barra_derecha{
position:absolute;
width:20px;
height:100%;
z-index: 100;
background: #ff0000;
}
#barra_izquierda{
margin:100% 0;
}
#barra_derecha{
margin:0 100%;
}

emm crei que asi se podían alinear pero veo que no funciona si alguien sabe como... ^^

doom12344 · #3 (**permalink**) 29/09/2008, 20:49

solo la derecha queda bien, la izquierda la tira bien abajo. ;s

a ver si ayuda en algo, posteo el codigo de fuente:

Código:

<?
include "config.php";
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MegaImage - Hosting de imágenes</title>
</head>

<link rel="stylesheet" href="/images/style-def.css" type="text/css">
<link rel="stylesheet" href="lavalamp_test.css" type="text/css" media="screen">
    <script type="text/javascript" src="jquery-1.2.3.min.js"></script>
    <script type="text/javascript" src="jquery.easing.min.js"></script>
    <script type="text/javascript" src="jquery.lavalamp.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#1, #2, #3").lavaLamp({
                fx: "backout",
                speed: 700,
                click: function(event, menuItem) {
                    return false;
                }
            });
        });
    </script>

<body>

<div id="barra_izquierda"></div>
<div id="barra_derecha"></div>
<body bgcolor="#D8D8D8" text="#D8D8D8">
<body bgcolor="#f7f777"><table align="center" border="0" cellpadding="0" cellspacing="0" width="400">

<td align="left" valign="bottom">
<ul class="lavaLampWithImage" id="1">
    <li class="current"><a href="">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
</ul>
</tr></tbody></table>
&nbsp;

<table class="table_decoration" align="center" border="1" bordercolor="#cccccc" cellpadding="5" width="400"><tbody><tr><td valign="top">

  <form method="post" enctype="multipart/form-data" action="basic.php">
 
    <div align="center"> <br>
  
    
    <INPUT NAME="userfile" TYPE="file" class="asd" size="27">
    <br>
        <br>
        <input name="upload" type="submit" class="asd" value="Subir!">
        &nbsp;
        </p>
  </div></form>
  <p>
    <input name="MAX_FILE_SIZE" value="3145728" type="hidden">
    <input name="refer" value="" type="hidden">
    <input name="brand" value="" type="hidden">
    </p>
  
    
    <div id="filetypeerror" style="display: none;"> <b style="color: red;">Por favor selecciona un tipo de archivo permitido:</b><br></div>
<p>Permitidos: <b>jpg jpeg png gif bmp tif tiff swf</b> &lt; <b><? print("$max_size"); ?> kilobytes</b><em> (a.k.a <? print("$max_size_mb"); ?> megabytes)</em> </p>
  </form>
</td>

</tr></tbody></table>

<div class="links" align="center">
</div>
</body>
</html>

nazareno59 · #4 (**permalink**) 30/09/2008, 10:51

aqui encontre la respuesta xD

Cita:

<head>
<style type="text/css">
#barra_izquierda, #barra_derecha{
position:absolute;
width:20px;
height:100%;
z-index: 100;
background: #ff0000;
top:0px;
}
#barra_izquierda{
left:0px;
}
#barra_derecha{
right:0px;
}
</style>
</head>
<body>
<div id="barra_izquierda"></div>
<div id="barra_derecha"></div>
</body>

debería funcionar lo he probado y anda bien :)

doom12344 · #5 (**permalink**) 30/09/2008, 18:48

Gracias funciono de maravilla el error estaba en

margin:0 100%;

lo corregiste con

right:0px;

lo agregue al .css y va joya ;)

nazareno59 · #6 (**permalink**) 01/10/2008, 15:13

de nada un gusto poder ayudar :D