Foros del Web

Foros del Web (http://www.forosdelweb.com/)
-   CSS (http://www.forosdelweb.com/f53/)
-   -   table o divs?? (http://www.forosdelweb.com/f53/table-divs-607499/)

samile 19/07/2008 18:32

table o divs??
 
Hola,

Esta vez necesito formar la siguiente estructura:
(ok sorry por el grafico)
Es una tabla de 3 filas
la primera columna abarca las tres columnas.
una primera fila en la segunda columna
una segunda fila con dos columnas
una tercera fila de una sola columna

(mejor??)

_________________________
__________________
________|_________
_________________________

No se si sea mejor usar una tabla o con divs, ya que con divs ha sido bastante comlicado, ademas no se como ubicarlos mejor si usando padding o position, por favor agradeciera cualquier ayuda con este, pues me cuesta muchismo esto de los estilos.

Muchas gracias

Mikmoro 19/07/2008 18:35

Respuesta: table o divs??
 
Hola, samile.

A mi con ese gráfico me resulta imposible imaginar qué quieres conseguir.

Mikel.

samile 19/07/2008 18:49

Respuesta: table o divs??
 
bueno mas o menos lo edite a ver si me hago entender mejor.
Gracias

luis_carlos 20/07/2008 13:57

Respuesta: table o divs??
 
Saludos, yo también me rompo la cabeza con div's, pero no hay otra, según lo que lei el la forma mas "profesional" de hacer web.

Si quires hacer con tablas (a lo que estoy acostumbrado) hazlo así:

<table width="500" border="0" cellspacing="3" cellpadding="3">
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td width="238">&nbsp;</td>
<td width="241">&nbsp;</td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
</table>

quisiera ayudarte con divs pero aun soy nuevo en eso

samile 20/07/2008 15:33

Respuesta: table o divs??
 
ok luis muchas gracias, algo muy parecido habia hecho una tabla. Gracias

Mikmoro 20/07/2008 15:52

Respuesta: table o divs??
 
Varias preguntas:

¿Tedrías forma de subir un dibujo para ver qué es lo que querrías hacer?
¿Es la misma esctructura de la tabla de luis_carlos?
¿Qué cosas va a contener cada bloque, tendrán fondos diferentes, etc.? (es que según lo que vaya a contener se puede hacer de una manera u otra).

Mikel.

samile 20/07/2008 15:57

Respuesta: table o divs??
 
el espacio grande (primera columna) debe incluir una imagen
segunda columna primera fila incluye un texto y llamado a una funcion java
segunda columna segunda fila incluye texto en la derecha y hacia la izquierda un menu

segunda columna tercera fila debe incluir una barra de busqueda y al final dos enlaces(con imagenes)

lo del dibujo estoy mirando si puedo incluirlo

Muchas gracias

PD No es igual a la tabal de Luis ya que le hace falta la primera columna donde va la imagen es una columna del alto de las tres filas

samile 20/07/2008 16:12

Respuesta: table o divs??
 
la tabla de luis es:
_________________
_________________
_______|_________
_________________

yo necesito algo como:

____________________
___________|
_____|_____ |
___________|________

Mikmoro 20/07/2008 16:31

Respuesta: table o divs??
 
Buf, intenta lo de la imagen con photoshop o algo porque no lo entiendo en absoluto. Me parece que estás llamando columnas a las filas y filas a las columnas (fila, es horizontal; columna, es vertical).

Col--Col2--Col3
Fila
Fila
Fila

Cita:

el espacio grande (primera columna) debe incluir una imagen
Te refieres a que la primera fila abarca todo el ancho, ¿no?

Una imagen o una tabla de lo que buscas ayudaría.

Mikel.

samile 20/07/2008 16:44

Respuesta: table o divs??
 
puedo mandarte la imagen a un correo?

Mikmoro 20/07/2008 18:13

Respuesta: table o divs??
 
Pongo la imagen que me ha mandado samile:

http://www.araudi.net/forosdelweb/img/tabka.jpg

De todas maneras, creo que hay servidores gratuitos (me suena el nombre imageshack o algo así), donde puedes subir tus imágenes.

Bueno, ahora se entiende mucho mejor tu idea.

Mañana miro si puedo hacerte un boceto con css y html.

Mikel.

samile 20/07/2008 18:27

Respuesta: table o divs??
 
Muchas gracias

Mikmoro 21/07/2008 11:34

Respuesta: table o divs??
 
Bueno, me iba a poner a hacer la estructura, que no es complicada, pero en realidad la cuestión es que hay un millón de formas de hacerlo, de cómo y por qué hacerlo, casi siempre en función del contenido y forma que éste vaya a tener (estático o dinámico, fluido o no, mayor que una pantalla y con scroll vertical pero no siempre, y un enorme montón más de variables).

Lo cierto es que dependiendo de estos factores se haría de una forma o de otra, y como para poder hacerlo vas a tener que estudiar un poco de css (aunque te hiciera la esctructura, tus necesidades concretas marcarán el desarrollo posterior), te recomiendo que lo hagas en tablas y cuando lo tengas hecho yo te ayudo a convertirlo a css y xhtml. Más que nada porque si no es casi perder el tiempo. Y mientras tanto, vas estudiando css, de manera que luego seas capaz de entender bien todo y seguir el desarrollo.

¿Te parece?

Mikel.

samile 21/07/2008 15:18

Respuesta: table o divs??
 
si, de hecho ya he podido acomodar algunas cosas y es cierto ya me ubico mas con cada uno de los tags de css. ya te contare como voy y si tengo uduas mas especificas
Muchas gracias

Carxl 22/07/2008 08:18

Respuesta: table o divs??
 
Hola a todos...

Samile me surgió una duda, que quieres presentar ahí?? Datos tabulados o contenido en general?? Dependiendo del contenido, sabrías que hacer...

Saludos:adios:

Jamati 24/07/2008 18:18

Respuesta: table o divs??
 
Menos mal que mandó un dibujo, sino era imposible de adivinar lo que quería la persona. Me intereó el tema, mas que nada porque desde que participo en el foro aprendí muchísimas cosas, pero a veces, tratando de hacer algo me surgen varias formas de desarrollarlo, y no se cual es la mejor.

Voy a tratar yo también de hacerte un modelo y luego Mike dirá que tal funciona. En estos días cuando tenga tiempo lo preparo.

samile 28/07/2008 09:32

Respuesta: table o divs??
 
bueno... tengo algo que todavia no se ve muy bien pero me esta funcionando:

Código HTML:

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <style>
        /* Header */

#header {
    margin: 0 px;
    border-bottom: 2px solid #ccc;
    width:100%;
    padding:0px;
   
}

#header * {
    text-decoration: none;
    /*color: #FF4430;*/
}

/* Welcome*/

#welcome p {
    padding: 2px 0 3px 228px;
    margin: 0;
   
}
#welcome span {
    color: red;
}

/* Logo */

#logo {
    float: left;
    padding: 0px 10px 5px 10px;
    background: #FFFFFF;
}

#logo h1 {
    float: left;
    margin: 0;
    padding: 0;
    letter-spacing: -2px;
    font-size: 3em;
}

#logo h2 {
    float: left;
    margin: 0;
    padding: 0 0 0 .5em;
    font-size: 1em;
}

/*Etiqueta*/

#etiqueta{
    font-size: 1em;
    background: #ccc;
    padding: 5px 0 0 0;
 
}

#etiqueta label{
    margin: 0 0 0 8px;
    padding: 0px;
    color: #FFFFFF;
    font-weight:bold;
    font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
}

/*formulario*/

#formulario{
    background: #ccc;
    padding: 2px 0px 5px 0px;
    margin-left:220px;
    font-size: 1em;
}

#formulario label{
    margin: 8px 0 0 8px;
    color: #FFFFFF;
    padding: 2px;
    background: #666666;
}
/* Menu */

#menusuperior {
    padding: 2px 0 0 0;
        float:right;
        background: #ccc;
}

#menusuperior ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#menusuperior li {
    display: inline;
}

#menusuperior a {
        color: #FFFFFF;
    display: block;
    float: left;
    padding: 0 1em;
    border-left: 1px solid #FFFFFF;
        font-weight: bold;
}

#menusuperior ul li a {display: block!important;display: none;float:left;
    /*  position: relative;*/
}

#menusuperior .first a {
    border: none;
}


/*Buttons*/
#buttons {
  float:right;
    background: #555;
    padding:0px;
    margin:0px;
}

#buttons a{
    color: #555;
    text-decoration:none;
    padding:0px;
}

       
    </style>
    <body>
        <div id="header">
            <div id="welcome">
                <p>Bienvenido(a)</p>
            </div>
           
            <div id="logo">
               
                <img src="images/logo.jpg" width="200" height="55" alt="logo"/>   
            </div>
           
           
           
            <div id="menusuperior" >
                <ul>
                    <li class="first"><a href="#" accesskey="1" title="">Opcion 1</a></li>
                    <li><a href="#" accesskey="2" title="">Opcion 2</a></li>
                    <li><a href="#" accesskey="3" title="">Opcion 3</a></li>
                    <li><a href="#" accesskey="4" title="">Opcion 4</a></li>
                </ul>
            </div>
           
           
            <div id="etiqueta" >
                <label class="titul">Mi ciudad, </label>
            </div>
           
           
           
           
            <div id="formulario"  >
                <!--FORM-->
                <form name="fbus" method="post" action="" style="z-index:2">
                    <label>Buscar</label>
                    <select name="Buscar" id="buscar" style="z-index:2">
                       
                       
                        <option>Seleccion 4</option>
                        <option>Seleccion 5</option>
                        <option>Seleccion 9</option>
                       
                       
                       
                    </select>
                    <input type="text" size="50" name="parametro">
                    <input name="enviar" type="image" src="imagenes/play.jpg" value="Ir">
                    <a href="#"><img src="images/cesta1.jpg" width="61" height="22" alt="imgen 1"/></a>
                    <a href="#"><img src="images/cesta1.jpg" width="61" height="22" alt="imagen 2"/></a>
                </form>
               
                <!--END FORM-->
            </div>     
        </div>
    </body>
</html>

Aun el menu superior no me funciona y hay muhco espacio entre la etiqueta y el form

Italico76 28/07/2008 20:57

Respuesta: table o divs??
 
Interesante! no conocia lo del accesskey :O


La zona horaria es GMT -6. Ahora son las 00:45.

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.