• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

HTML Tabelle Mittig

DJHeartFeelings

DJHeartFeelings

Neues Mitglied
Ich habe eine Tabelle angelegt, damit das Logo rechts vom Text ist. Jetzt bekomme ich das Logo aber nicht in die Mitte von der Spalte (siehe Bild) habe es mit Align center und Valign middle probiert was aber nichts gebracht hat. Oder gibt es eine andere Möglichkeit, das ganze so zu gestalten, dass der text links ist und das Bild rechts in der Mitte.
Zudem ist dort von der Tabelle noch eine Linie zu sehen (dünn) obwohl ich bei "border" 0 stehen habe.
Und ich hätte gerne, dass das Logo bis zum Rand vom Menü geht rechts.
Hier mal mein Code aus der header.php in Wordpress
Code: 
    <!-- Start of the Header Menu -->
    <table width="1000" border="0">
  <tbody>
    <tr>
      <td><header id="header" class="clearfix">
        <div class="sitetitle maxwidth grid">
            <div class="logo">
                <h1 id="logo"><a id="logo" href="<?php echo esc_url(home_url()); ?>"><?php echo esc_url(bloginfo('title')); ?></a></h1>
                <p class="sitedescription"><?php echo esc_url(bloginfo('description')); ?></p>
                (Am Aussehen der Seite wird noch gearbeitet)
            </div>
        </div></td>
      <td><img src="https://chor-lampenfieber.de/wp-content/uploads/2017/10/cropped-chorlogo-3.jpg" width="201" height="63" alt=""/></td>
    </tr>
  </tbody>
</table>
 

Anhänge

  • Unbenannt.PNG
    Unbenannt.PNG
    148,9 KB · Aufrufe: 8
Im Prinzip würde schon ein text-align: center; reichen.
Was mir aber aufgefallen ist, ist, dass du Tabellen als Seitenlayout missbrauchst :/. Das solltest du unter allen Umständen vermeiden.

Mach es bitte mit normalen Containern. Flexboxen würden dir da helfen!
 
Hallo

Als Anregung sehe ich das folgende HTML

Code: 
   <header class="pageheader">
      <figure>
         <img src="pfad/dateiname.jpg" alt="Logo">
      </figure>
      <div>
         <h1>Chor-Lampenfieber</h1>
         <p>... mit Vergnügen ansteckend</p>
      </div>
   </header>
   <nav class="navigation">
      <a href="">Startseite</a>
      <a href="">Über uns</a>
      <a href="">Aktuelles/Auftritte</a>
      <a href="">Repertoire</a>
      <a href="">Bilder</a>
      <a href="">Resonanz</a>
      <a href="">Links</a>
      <a href="">Mitglieder</a>
   </nav>

Der Rest ist dann CSS. Ich habe mal eine responsive Beispielseite erstellt:

http://boratb.bplaced.net/index90.html

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Aaron3219 schrieb:
Im Prinzip würde schon ein text-align: center; reichen.
Was mir aber aufgefallen ist, ist, dass du Tabellen als Seitenlayout missbrauchst :/. Das solltest du unter allen Umständen vermeiden.

Mach es bitte mit normalen Containern. Flexboxen würden dir da helfen!
Zum Vergrößern anklicken....
also mit Containern und Flexboxen habe ich mich noch nie beschäftigt, da ich selten in den Dateien von den WP-Themes rum bastel.
habe jetzt mal etwas mit CSS Flexible Boxen herumprobiert aber jetzt ist das Logo halt am oberen rand
Code: 
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <!--[if IE]>
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=edge" /><![endif]-->
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<!-- Startof the Wrapper Div -->  
<div class="wrapper cleafix">
    <!-- Start of the Header Menu -->

<style>
.flex-container {
  display: flex;
}

.flex-container>div {
  background-color:
  margin: 10px;
  padding:20px;
  font-size: 30px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div><header id="header" class="clearfix">
        <div class="sitetitle maxwidth grid">
            <div class="logo">
                <h1 id="logo"><a id="logo" href="<?php echo esc_url(home_url()); ?>"><?php echo esc_url(bloginfo('title')); ?></a></h1>
                <p class="sitedescription"><?php echo esc_url(bloginfo('description')); ?></p>
                <h6>
                    (Am Aussehen der Seite wird noch gearbeitet)
                </h6>
            </div>
        </div></div>
  <div><img src="https://chor-lampenfieber.de/wp-content/uploads/2017/10/cropped-chorlogo-3.jpg" width="201" height="63" alt=""/></div>
</div>
  
        <div class="topnav grid">
            <div id="mobile-menu" class="mm-active"><?php _e( 'Menu', 'little-jump' ); ?></div>
            <nav>
                <?php if ( has_nav_menu( 'top' ) ) :
                    wp_nav_menu( array(
                        'theme_location' => 'top',
                        'menu_id'        => 'navpages',
                        'container'      => false,
                        'items_wrap'     => '<ul class="top-menu maxwidth clearfix">%3$s</ul>'
                    ) );
                else : ?>
                    <ul class="top-menu maxwidth clearfix">
                        <?php if ( is_front_page() ) { ?>
                            <li class="page_item current_page_item"><span><?php _e( 'Home', 'little-jump' ); ?></span></li>
                        <?php } else { ?>
                            <li class="page_item">
                                <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php _e( 'Home', 'little-jump' ); ?></a>
                            </li>
                        <?php }
                        wp_list_pages( 'title_li=&depth=2' ); ?>
                    </ul>
                <?php endif; ?>
            </nav>
        </div>
    </header>
    <!-- End of the header Menu -->

    <!-- Start of te Content -->
    <div id="main" class="maxwidth clearfix">
www.chor-lampenfieber.de
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben