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, 02:49
Avatar de Jask  
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 768
Antigüedad: 11 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




La zona horaria es GMT -6. Ahora son las 05:32.