table o divs??

[samile]

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]

Hola, samile.

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

Mikel.

[samile]

bueno mas o menos lo edite a ver si me hago entender mejor.
Gracias

[luis_carlos]

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]

ok luis muchas gracias, algo muy parecido habia hecho una tabla. Gracias

[Mikmoro]

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]

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]

la tabla de luis es:
_________________
_________________
_______|_________
_________________

yo necesito algo como:

____________________
___________|
_____|_____ |
___________|________

[Mikmoro]

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

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]

puedo mandarte la imagen a un correo?

[Mikmoro]

Pongo la imagen que me ha mandado samile:



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]

Muchas gracias

[Mikmoro]

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]

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]

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

[Jamati]

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]

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]

Interesante! no conocia lo del accesskey :O