Foros del Web » Creando para Internet » CSS »

Posicionamiento de una tabla dentro de una imagen

 Estas en el tema de Posicionamiento de una tabla dentro de una imagen en el foro de CSS en Foros del Web. Muy buenas, que tal? Os quería hacer una consulta. Tengo que modificar un plugin de wordpress el cual es un calendario con un listado de ...
  #1 (permalink)  
Antiguo 11/08/2010, 01:49
Avatar de Jask  
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 773
Antigüedad: 18 años, 7 meses
Puntos: 15
De acuerdo Posicionamiento de una tabla dentro de una imagen
Muy buenas, que tal?
Os quería hacer una consulta. Tengo que modificar un plugin de wordpress el cual es un calendario con un listado de imágenes que cambian (ajax) y encima de la imagen va una tabla la cual tiene unos inputs type text para rellenarlos y posteriormete editarlos. El problema que tengo es que cuando no está la tabla puesta, está todo pefecto (la imagen de abajo)



Código:

Código PHP:
<?php

// Include wordpress API functions
if (!function_exists('add_action')) {
        $wp_root = $_SERVER['DOCUMENT_ROOT'];
        if (file_exists($wp_root.'/wp-load.php')) {
                require_once($wp_root.'/wp-load.php');
        } else {
                require_once($wp_root.'/wp-config.php');
        }
}

### Function: Adding in the head an external js
add_action('init', calendarBravo_init_method);
function calendarBravo_init_method(){
 $calendarBravoJSfile = WP_PLUGIN_DIR.'/wp-calendarBravo/wp-calendarBravo.js';
 if( file_exists($calendarBravoJSfile) )
    wp_enqueue_script('wp-calendarBravo.js', WP_PLUGIN_URL.'/wp-calendarBravo/wp-calendarBravo.js');
}

### Function: Adding in the head an external css
add_action('wp_print_styles', 'calendarBravo_stylesheet');
function calendarBravo_stylesheet() {
  $calendarBravoCSSurl = WP_PLUGIN_URL.'/wp-calendarBravo/wp-calendarBravo.css';
  $calendarBravoCSSfile = WP_PLUGIN_DIR.'/wp-calendarBravo/wp-calendarBravo.css';
  if( file_exists($calendarBravoCSSfile) ) {
    wp_register_style('wp-calendarBravo.css', $calendarBravoCSSurl);
    wp_enqueue_style( 'wp-calendarBravo.css');
  }
}

// Set 'manage_calendarBravo' Capabilities To Administrator     
$role = get_role('administrator');
if(!$role->has_cap('manage_calendarBravo')) {
    $role->add_cap('manage_calendarBravo');
}

### Function:  Creating 
add_action('admin_menu', 'calendarBravo_menu');

function calendarBravo_menu() {

 if (function_exists('add_menu_page')) {
   add_menu_page('Calendar Bravo', 'Calendar Bravo','manage_calendarBravo','wp-calendarBravo/calendarBravo_manager.php');
 }

}

### Function: Short Code For inserting Calendar Bravo in a Page
add_shortcode('page_calendarBravo', 'calendarBravo_shortcode');
function calendarBravo_shortcode($atts) {
        return calendarBravo_archieve($atts);
}

### Displays Club Bravo content archieve and the form for sending the content.
function calendarBravo_archieve($atts){
 getSelectCalendar();
 echo "<div id=\"calendarDiv\" name=\"calendarDiv\" style=\"background:url('".getFirstBackgroundImage()."') no-repeat; height:1000px; width:1000px;\"></div>\n"; 

}

### Displays a select with the available background images
function getSelectCalendar(){
 $xmlsrc = $_SERVER['DOCUMENT_ROOT']."/wp-content/plugins/wp-calendarBravo/calendarBravo.xml";
 $xml = simplexml_load_file($xmlsrc);
 $cont = 1;
 foreach ($xml->children() as $calendarImage){
  if($cont == 1)
   $selected = "selected";
  else
   $selected = "";

  $options = $options. "<option value=\"".$calendarImage->url."\"".$selected.">".basename($calendarImage->url)."</option>\n";

  $cont += 1; 
 }

    if($options <> "")
          echo "<select id=\"BackgroundSelect\" name=\"BackgroundSelect\" onchange=\"ChangeCalendarBackground()\">\n".$options."</select>\n";
        
    }


### Get the first url background image
function getFirstBackgroundImage(){
 $xmlsrc = $_SERVER['DOCUMENT_ROOT']."/wp-content/plugins/wp-calendarBravo/calendarBravo.xml";
 $xml = simplexml_load_file($xmlsrc);
 return $xml->children()->children()->url;
}


?>
Pero cuando pongo la tabla, con un position absolute, queda bastante descuageringado. Os dejo una imagen para que lo véan:



Código:

Código PHP:
<?php

// Include wordpress API functions
if (!function_exists('add_action')) {
        $wp_root = $_SERVER['DOCUMENT_ROOT'];
        if (file_exists($wp_root.'/wp-load.php')) {
                require_once($wp_root.'/wp-load.php');
        } else {
                require_once($wp_root.'/wp-config.php');
        }
}

### Function: Adding in the head an external js
add_action('init', calendarBravo_init_method);
function calendarBravo_init_method(){
 $calendarBravoJSfile = WP_PLUGIN_DIR.'/wp-calendarBravo/wp-calendarBravo.js';
 if( file_exists($calendarBravoJSfile) )
    wp_enqueue_script('wp-calendarBravo.js', WP_PLUGIN_URL.'/wp-calendarBravo/wp-calendarBravo.js');
}

### Function: Adding in the head an external css
add_action('wp_print_styles', 'calendarBravo_stylesheet');
function calendarBravo_stylesheet() {
  $calendarBravoCSSurl = WP_PLUGIN_URL.'/wp-calendarBravo/wp-calendarBravo.css';
  $calendarBravoCSSfile = WP_PLUGIN_DIR.'/wp-calendarBravo/wp-calendarBravo.css';
  if( file_exists($calendarBravoCSSfile) ) {
    wp_register_style('wp-calendarBravo.css', $calendarBravoCSSurl);
    wp_enqueue_style( 'wp-calendarBravo.css');
  }
}

// Set 'manage_calendarBravo' Capabilities To Administrator     
$role = get_role('administrator');
if(!$role->has_cap('manage_calendarBravo')) {
    $role->add_cap('manage_calendarBravo');
}

### Function:  Creating 
add_action('admin_menu', 'calendarBravo_menu');

function calendarBravo_menu() {

 if (function_exists('add_menu_page')) {
   add_menu_page('Calendar Bravo', 'Calendar Bravo','manage_calendarBravo','wp-calendarBravo/calendarBravo_manager.php');
 }

}

### Function: Short Code For inserting Calendar Bravo in a Page
add_shortcode('page_calendarBravo', 'calendarBravo_shortcode');
function calendarBravo_shortcode($atts) {
        return calendarBravo_archieve($atts);
}

### Displays Club Bravo content archieve and the form for sending the content.
function calendarBravo_archieve($atts){
 getSelectCalendar();
 echo "<div id=\"calendarDiv\" name=\"calendarDiv\" style=\"background:url('".getFirstBackgroundImage()."') no-repeat; height:1000px; width:1000px;\"></div>\n"; 

}

### Displays a select with the available background images
function getSelectCalendar(){
 $xmlsrc = $_SERVER['DOCUMENT_ROOT']."/wp-content/plugins/wp-calendarBravo/calendarBravo.xml";
 $xml = simplexml_load_file($xmlsrc);
 $cont = 1;
 foreach ($xml->children() as $calendarImage){
  if($cont == 1)
   $selected = "selected";
  else
   $selected = "";

  $options = $options. "<option value=\"".$calendarImage->url."\"".$selected.">".basename($calendarImage->url)."</option>\n";

  $cont += 1; 
 }

    if($options <> "")
          echo "<select id=\"BackgroundSelect\" name=\"BackgroundSelect\" onchange=\"ChangeCalendarBackground()\">\n".$options."</select>\n";
        ?>
        
            <style type="text/css">
    
        .tablaGeneral{
            position:relative;
            top:278px;
            left:109px;
        }
        
        .tablaGeneral td{
            height:25px;
            /*width:103px;
            border:2px solid green;*/
        }
        
        .tablaGeneral input{
            background-color:none;
            border:1px dashed #aaaaaa;
            width:95px;
            height:20px;
        }
        
        .tablaGeneral .espaciado{
            width:23px;
        }

    </style>
<table border='0px' class='tablaGeneral' >
      <tr>
        <td><input type='text' name='A1'value="A1"></td>
        <td class="espaciado"></td>
        <td ><input type='text' name='B1'></td>
        <td class="espaciado"></td>
        <td><input type='text' name='C1'></td>
        <td class="espaciado"></td>
        <td><input type='text' name='D1'></td>
        <td class="espaciado"></td>
        <td><input type='text' name='E1'></td>
        <td class="espaciado"></td>
        <td><input type='text' name='F1'></td>
    </tr>
      <tr>
        <td><input type='text' name='A2' value="A2"></td>
        <td class="espaciado"></td>
        <td ><input type='text' name='B2'></td>
        <td class="espaciado"></td>
        <td><input type='text' name='C2'></td>
        <td class="espaciado"></td>
        <td><input type='text' name='D2'></td>
        <td class="espaciado"></td>
        <td><input type='text' name='E2'></td>
        <td class="espaciado"></td>
        <td><input type='text' name='F2'></td>
    </tr>
    <tr>
        <td><input type='text' name='A3' value="A3"></td>
        <td class="espaciado"></td>
        <td ><input type='text' name='B3'></td>
        <td class="espaciado"></td>
        <td><input type='text' name='C3'></td>
        <td class="espaciado"></td>
        <td><input type='text' name='D3'></td>
        <td class="espaciado"></td>
        <td><input type='text' name='E3'></td>
        <td class="espaciado"></td>
        <td><input type='text' name='F3'></td>
    </tr>
    <tr>
        <td><input type='text' name='A4' value="A4"></td>
        <td class="espaciado"></td>
        <td ><input type='text' name='B4'></td>
        <td class="espaciado"></td>
        <td><input type='text' name='C4'></td>
        <td class="espaciado"></td>
        <td><input type='text' name='D4'></td>
        <td class="espaciado"></td>
        <td><input type='text' name='E4'></td>
        <td class="espaciado"></td>
        <td><input type='text' name='F3'></td>
    </tr>
</table>
        
        <?php
    }


### Get the first url background image
function getFirstBackgroundImage(){
 $xmlsrc = $_SERVER['DOCUMENT_ROOT']."/wp-content/plugins/wp-calendarBravo/calendarBravo.xml";
 $xml = simplexml_load_file($xmlsrc);
 return $xml->children()->children()->url;
}


?>
Como pueden ver en la segunda imagen, entre el select y la imagen en si queda un espacio en blanco, y cada vez que voy añandiendo más filas se va haciendo más grande. Alguna idea de lo que puede estar pasando ?

Muchas gracias !!!
__________________
Os iusti meditabitur sapientiam
Si te he ayudado, por qué no un poquito de Karma :) ?

Etiquetas: posicionamiento, tablas
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 03:28.