Ergebnis 1 bis 4 von 4

Thema: Tabelle mittig zentrieren

  1. #1
    HTML Newbie
    Registriert seit
    26.09.2016
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Tabelle mittig zentrieren

    Hallo Community,

    ich habe eine kleine Tabelle aus 3 Spalten, wobei die mittlere Spalte mehr als Leerspalte (Abstandshalter) gedacht ist.
    Ich möchte, dass die gesamte Tabelle auf der Seite mittig angezeigt wird und die Schrift normal linksbündig ist.
    Egal was ich eingebe, die Tabelle wird leider nicht mittig angezeigt.

    HTML-Code:
    <style>
    div.table {     display: table;     width: calc(100% -  10px);     padding: 5px;   }   div.spalte1 {      display: table-cell;      width: 350px;     padding: 5px;   }      div.spalte2 {      display:  table-cell;    width: 10px;     padding: 5px;   }      
    </style>
    <div class="table" align="center">       
    <div class="spalte1" align="center">
    <div align="left"><ul>
    <li><font size="3">1</font></li>
    <li><font size="3">2</font></li>
    <li><font size="3">3</font></li>
    <li><font size="3">4</font></li>
    </ul></div>
    </div>       
    <div class="spalte2" align="left">.</div>       
    <div class="spalte1" align="center">
    <div align="left"><ul>
    <li><font size="3">5</font></li>
    <li><font size="3">6</font></li>
    <li><font  size="3">7</font></li>
    <li><font size="3">8</font></li>
    </ul></div>
    </div>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Teeny
    Registriert seit
    23.05.2016
    Beiträge
    38
    Danke
    0
    Bekam 3 mal "Danke" in 3 Postings

    Standard AW: Tabelle mittig zentrieren

    Ich sehe da keine Tabelle, und der font-Tag ist veraltet, nutze auch da CSS

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    26.09.2016
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Tabelle mittig zentrieren

    das sind farblich unterlegte Abschnitte (Blöcke) und diese sollten mittig angezeigt werden.
    Ist für eine Darstellung in Ebay gedacht, daher nutze ich HTML nicht sonderlich häufig.
    Wie genau müsste es denn aussehen wen

  4. #4
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    419
    Danke
    0
    Bekam 44 mal "Danke" in 44 Postings

    Standard AW: Tabelle mittig zentrieren

    Probier mal
    Code:
    <style>
    .myebay {  
     margin:0 auto;   
     display: table;
     box-sizing:border-box;    
     background:#aaa; 
    }   
    
    .myebay ul {   
     margin:0;
     padding: 5px; 
     background:#dac;
     display: table-cell;  
     list-style:none;    
     width: 350px;     
    } 
    
    .myebay ul:nth-child(odd) {
     background:#abc;
    }
    
    .myebay li {
     padding:5px;
    }
    </style>
    <div class="myebay">       
    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    </ul>
    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    </ul>
    </div>
    Und hier noch auf die Schnelle eine Ebayvorlage. Wenn benötigt.
    http://gipspferd.de/forumhilfe/ebayvorlage1/index.html

    Und hier der relevante Code
    Code:
    <div id="mywrapper">
    <header><h1>Willkommen auf meiner Auktion</h1></header>
    <main>
     <section class="flex">
        <article class="descripe col-66 ">
          <h3>ARTIKELBESCHREIBUNG</h3>
           <p>
                Hier der text 
           </p>
            </article>
    
        <article class="col-33 info">
              <div>
            <h3 class="fa fa-5x fa-info-circle weiss"><b>Info</b></h3>
              <p>
                    Wichtige Information
                  </p>
          </div>
        </article>
     </section>
    
    
    <!--Nur wenn die Tabelle gebraucht wird ansonsten löschen -->
        <table>
        <caption>Techniche Daten</caption>
        <tr><th>Hersteller</th><td>HP</td></tr>
        <tr><th>Modell</th><td>Pavilion</td></tr>
        <tr><th>Prozessor</th><td>Celeron 1GHz</td></tr>
        <tr><th>Arbeitsspeicher</th><td>4 GB DDR3</td></tr>
        <tr><th>Festplatte</th><td>nicht vorhanden</td></tr>
        <tr><th>Netzteil</th><td>nicht vorhanden</td></tr>
        </table>
    
    <!-- Bilderauswahl-->
     <section class="gal">
        <ul>
        <li><a href="bildpfad"><img alt="" src="bildpfad/bild.jpg"></a></li>
        <li><a href="bildpfad"><img alt="" src="bildpfad/bild.jpg"></a></li>
        <li><a href="bildpfad"><img alt="" src="bildpfad/bild.jpg"></a></li>
        </ul>
     </section>
    
     <section class="flex">
        <article class="col-33">
          <h3 class="fa fa-5x fa-info-circle"><b>Info</b></h3>
            <p>
              Wegen der Gesetzesbestimmungen erfolgt die Auktion unter Ausschluss jeglicher Gewährleistung, Garantie und Rücknahme. Da es sich um Privatverkauf handelt. Ich hoffe potenzielle Käufer sind damit einverstanden.
            </p>
        </article>
    
        <article class="col-33">
          <h3 class="fa fa-5x fa-truck"><b>Versand</b></h3>
           <p>Schnelle Bearbeitung Ihrer Bestellung. Täglicher Versand außer Sonntags und Feiertags Top Kundenservice.</p>
        </article>
    
        <article class="col-33">
          <h3 class="fa fa-5x fa-euro "><b>Zahlung</b></h3>
            <p style="text-align:left;margin-right:10px;">Ich akzeptiere folgende Zahlungsarten:</p>
            <p style="text-align:left;margin-right:10px;"><i style="margin-right:10px;" class="fa fa-bank"></i>Banküberweisung.</p>
            <p style="text-align:left;margin-right:10px;"><i style="margin-right:10px;" class="fa fa-cc-paypal"></i>Paypal.</p>
        </article>
     </section>
    
     <section class="flex">
        <article class="col-33">
          <h3 class="fa fa-5x fa-question-circle"><b>Frage</b></h3>
            <p>Wenn Sie Fragen zum Artikel haben, können Sie mir gerne eine <a style="display:block;" href="http://contact.ebay.de/ws/HIER DEN REST EINTRAGEN>Nachricht</a> zukommen lassen.</p>
        </article>
    
        <article class="col-33">
          <h3 class="fa fa-5x fa-eye"><b>Meine Artikel</b></h3>
            <p>Hier gibt es noch <a style="display:block;" href="#pfadzuweiterenartikel">weitere Artikel</a> von mir.</p>
        </article>
    
        <article class="col-33">
          <h3 class="fa fa-5x fa-star"><b>Meine Bewertungen</b></h3>
            <p>Hie finden Sie meine aktuellen <a style="display:block;" href="#pfadzudeinenbewertungen">Bewertungen</a> von anderen Käufern.</p>
        </article>
     </section>
    
    </main><!--/main-->
    
     <footer>
      Weitere Vorlagen auf <a href="http://www.gipspferd.de">gipspferd.de</a>
     </footer>
    </div><!--/#mywrapper-->
    
    <link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    
    <style type="text/css">
    #mywrapper { background:#222;}
    #mywrapper main * { margin:0; padding:0;}
    #mywrapper main , header , footer { width:90%; margin:0px  auto; padding:10px; font-family: 'Poiret One'; line-height:20px;  letter-spacing:1px; box-sizing:border-box;}
    #mywrapper main { background: #fff;}
    #mywrapper header { background:url(deinegrafik) no-repeat right center #0c9; background-size:contain; padding:3em ; color:#fff; font-weight:bold;}
    #mywrapper section { padding:10px 0; text-align:center;}
    #mywrapper article { text-align:center; background:#eee; padding:20px; margin-right:10px;}
    #mywrapper article:last-child { margin-right:0;}
    #mywrapper article a { color:#FA335F; font-weight:bold;}
    #mywrapper .descripe h3 { padding:10px; font-weight:bold; font-size:1.5em;}
    #mywrapper h3 { padding:10px; font-weight:bold; font-size:5em;}
    #mywrapper p { padding:10px;}
    #mywrapper h3 b { display:none;}
    #mywrapper footer { padding:10px; background:transparent; text-align:right; color:#aaa;}
    #mywrapper footer a { color:#aaa; text-decoration:none; font-family:sans-serif;}
    #mywrapper table { width:100%; border-collapse:collapse; font-family:arial; border:1px solid #999; background:#fff;}
    #mywrapper th,#mywrapper td { padding:5px; border:1px solid #999;}
    #mywrapper th { width:30%;}
    #mywrapper caption{background:#0c9; color:#fff; padding:5px; text-align:left;}
    #mywrapper .gal { margin:50px 0; border-top:2px solid #eee; border-bottom:2px solid #eee;}
    #mywrapper .gal ul { margin:10px; list-style:none; display:flex;}
    #mywrapper .gal li { margin-right:10px; background:#eee; display: flex; align-items: center; width:33%;}
    #mywrapper .gal li:last-child { margin-right:0;}
    #mywrapper .gal img { width:100%;}
    #mywrapper .gal a { display:block;  padding:22px; outline:none;}
    #mywrapper .flex { display:flex;}
    #mywrapper .descripe { padding:1em ; text-align:left;}
    #mywrapper .info {  background:#FA335F; font-weight:bold; color:#fff; display: flex; align-items: center; font-family:sans serif;}
    #mywrapper .col-66 { width:66%;}
    #mywrapper .col-33 { width:33%;}
    #mywrapper .fa { color:#0c9;}
    #mywrapper .weiss { color:#fff;}
    #mywrapper .none { display:none;}
    
    
    @media (max-width: 800px) {
    #mywrapper main , #mywrapper header,#mywrapper footer{ width:100%;}
    #mywrapper .flex , #mywrapper .info , #mywrapper .col-66 , #mywrapper .col-33 { width:100%; flex-direction: column; margin:5px 0;border:none;box-sizing:border-box;} 
    }
    </style>
    Geändert von djheke (28.09.2016 um 10:55 Uhr)

Ähnliche Themen

  1. Hilfe Bild will nicht mittig (zentrieren)
    Von jakle im Forum HTML & CSS Forum
    Antworten: 18
    Letzter Beitrag: 20.07.2009, 19:34
  2. Ebene immer mittig auf dem Bildschirm zentrieren.
    Von krieger98 im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 18.06.2009, 08:08
  3. DIV Container mittig zentrieren
    Von martinfre im Forum HTML & CSS Forum
    Antworten: 11
    Letzter Beitrag: 14.01.2009, 12:32
  4. Website mittig auf Bildschirm zentrieren?
    Von Player140 im Forum HTML & CSS Forum
    Antworten: 36
    Letzter Beitrag: 20.01.2007, 20:05
  5. Seiteninhalt mittig zentrieren bei jeder Bildschirmauflösung
    Von darkblue im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 19.02.2005, 17:26

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •