Foros del Web » Creando para Internet » Diseño web »

Creacion de barras

Estas en el tema de Creacion de barras en el foro de Diseño web en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/09/2008, 20:43
 
Fecha de Ingreso: agosto-2008
Mensajes: 27
Antigüedad: 9 años, 3 meses
Puntos: 0
Creacion de barras

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.
  #2 (permalink)  
Antiguo 29/09/2008, 21:23
 
Fecha de Ingreso: septiembre-2008
Mensajes: 64
Antigüedad: 9 años, 3 meses
Puntos: 2
Respuesta: Creacion de barras

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:
<div id="barra_izquierda"></div>
<div id="barra_derecha"></div>
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... ^^

Última edición por nazareno59; 29/09/2008 a las 21:29
  #3 (permalink)  
Antiguo 29/09/2008, 21:49
 
Fecha de Ingreso: agosto-2008
Mensajes: 27
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Creacion de barras

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>

Última edición por doom12344; 29/09/2008 a las 22:10
  #4 (permalink)  
Antiguo 30/09/2008, 11:51
 
Fecha de Ingreso: septiembre-2008
Mensajes: 64
Antigüedad: 9 años, 3 meses
Puntos: 2
Respuesta: Creacion de barras

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 :)
  #5 (permalink)  
Antiguo 30/09/2008, 19:48
 
Fecha de Ingreso: agosto-2008
Mensajes: 27
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Creacion de barras

Gracias funciono de maravilla el error estaba en

margin:0 100%;

lo corregiste con

right:0px;

lo agregue al .css y va joya ;)
  #6 (permalink)  
Antiguo 01/10/2008, 16:13
 
Fecha de Ingreso: septiembre-2008
Mensajes: 64
Antigüedad: 9 años, 3 meses
Puntos: 2
Respuesta: Creacion de barras

de nada un gusto poder ayudar :D
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 21:36.