Zelle zu Tabelle hinzugefügt! kann das Ergebnis nicht verstehen

Emess · 15. November 2023

Habe auf der Seite eines Freundes eine Zelle zu Tabelle hinzugefügt! kann das Ergebnis nicht verstehen.

Auf der Speisekarte sollen vor den eigentlichen Essen eine Nr. stehen. Kann ja nicht so schwer sein. Dachte ich.

Aber die 1. Rubrik lässt sich den anderen nicht anpassen. ( Also jedenfalls nicht von mir )

Vielleicht findet einer von euch den Fehler, der sich meiner Wahrnehmung beharrlich verweigert.

Code

.modal-content{
     background-color: #f2dd59;
      color: rgb(2, 0, 0);
  }
  
.modal-header {
  background-color: #DAA900;
  }

  .modal-title {
  color: #fff;
  font-size: 20px;
  font-weight: 400;
  }

  .modal h2 {
  color: #860303;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-style:italic;
  }

  .modal h4 {
    font-size: 2.5em;
    color: #860303;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-style:italic; 
} 
  
  .modal p {
  margin-left: 10px;
  text-align: center;
  }
 
  .modal hr {
    height: 2px;
    width: 96%;
    border: 0;
    border-top: none;
    text-align: center;
    position: relative;
    background: #860303;
    }

.table{
  width:100%;
}
  
.table>tbody>tr>td{
      border:none;
    }

.sp1{
  width: 10%;
  text-align:  left;
  font-weight: bold;
}
.sp2{
  width: 20%;
  text-align:  left;
  font-weight: bold;
}
.sp3{
  width: 60%;
  text-align:  left;
}
.sp4{
  width: 10%;
  text-align:  right;
}
  

  .center {
    text-align: center;
  }

  .mitte {
    font-weight: bold;
    text-align: center;
    }

   .mitte-bolder {
      font-size: 1.5em;
      font-weight: bolder;
      text-align: center;
      color: #1c1c1c;
      }


  @media screen and (max-width: 500px) {
  .table .modal tr, .modal th, .modal td {
   display:block;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   font-size: large;
       
  }
  
  .modal tr {
  border-top: 0 none;
  }
  
  .sp1{
    text-align:center;
    width: 100%;
  }
  .sp2{
    text-align:center;
    width: 100%;
  }
  .sp3{
    text-align:center;
    width: 100%;
  }
.sp4{
    text-align:center;
    width: 100%;
  }


  }

Alles anzeigen

HTML

 <a href="#" class="menu-link" data-toggle="modal" data-target="#myModal"><h2>Ausführliche Speisekarte</h2></a>
                                         
                                   <!-- The Modal -->
                                     <div class="modal fade" id="myModal">
                                         <div class="modal-dialog modal-lg">
                                                <div class="modal-content">
                                        <!-- Modal Header -->
                                   <div class="modal-header">
                                       <h5 class="modal-title">Speisekarte</h5>
                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                </div>
                               
                               <!-- Modal body -->
                               <div class="modal-body">
                                 <table class="table">
                                     <tbody>
                                       <div class="text-center">
                                         <h4>Zuppe</h4></div>
                                        <hr>
                                    
                                       <tr>
                                         <td class="sp1">Nr. 121</td>
                                         <td class="sp2">Minestrone</td>
                                         <td class="sp3">Suppe mit geschlagenem Ei</td>
                                         <td class="sp4">7,00€</td>
                                     </tr>
                                     <tr>
                                         <td class="sp1">Nr. 122</td>
                                         <td class="sp2">Stracciatella </td>
                                         <td class="sp3">Fischsuppe</td>
                                         <td class="sp4">7,00€</td>
                                     </tr>
                                     <tr>
                                         <td class="sp1">Nr. 123</td>
                                         <td class="sp2">Zuppa chipolla</td>
                                         <td class="sp3">Zwiebelsuppe</td>
                                         <td class="sp4">7,00€</td>
                                     </tr>
                                     <tr>
                                         <td class="sp1">Nr. 125</td>
                                         <td class="sp2">Tomatencremesuppe </td>
                                         <td class="sp3"></td>
                                         <td class="sp4">7,50€</td>
                                     </tr>
                                 </tbody>
                             </table>
                              
                            <hr>
                                 <table class="table">
                                 <tbody>
                                   <div class="text-center">
                                     <h4>Insalate</h4></div>
                                    <hr>
                                   <tr>
                                       <td class="sp1">Nr.86</td>
                                       <td class="sp2">Tomate Uno</td>
                                       <td class="sp2">Tomaten und Zwiebel </td>
                                       <td class="sp4">8,00€</td>
                                   </tr>
                                   <tr>
                                       <td class="sp1">Nr. 88</td>
                                       <td class="sp2">Insalata Italiana</td>
                                       <td class="sp2">Mit Thunfisch,Gurken, Tomaten, Ei, Paprika und Oliven</td>
                                       <td class="sp4">9,50€</td>
                                   </tr>
                                   <tr>
                                       <td class="sp1">Nr. 90</td>
                                       <td class="sp2">Insalata Sicilia</td>
                                       <td class="sp2">mit Schinken,Gurkrn, Tomaten,Thunfisch, Zwiebeln und Käse</td>
                                       <td class="sp4">9,50€</td>
                                   </tr>
                                   <tr>
                                     <td class="sp1">Nr. 92</td>
                                     <td class="sp2">Insalata Mista</td>
                                     <td class="sp2">Mais, Paprika, Gurken, Karotten, Zwiebeln und Tomaten</td>
                                     <td class="sp4">9,00€</td>
                                 </tr>
                                 <tr>
                                     <td class="sp1">Nr. 93</td>
                                     <td class="sp2">Insalata Fantasia</td>
                                     <td class="sp2">Mit Morzzarella Ei, Krabben,Thunfiscch und Tomaten</td>
                                     <td class="sp4">10,50€</td>
                                 </tr>
                                 <tr>
                                     <td class="sp1">Nr. 94</td>
                                     <td class="sp2">Insalata con Tacchino</td>
                                     <td class="sp2">Mit Putenstreifen, Mais, Karotten, Gurken, Oliven, Schafskäse und Buschetta</td>
                                     <td class="sp4">13,50€</td>
                                 </tr>
                                 </tbody>
                             </table>

Alles anzeigen

und noch ein Bildchen

lecker1.jpeg

Die Abstände von Zuppe sind ok. Die Beschreibung könnte mehr Plat belegen.

Unter " Insalata sind die Abstände insgesamt zu groß

m.scatello · 15. November 2023

Vielleicht erst einmal den HTML-Code sauber machen?

Das

Code

<div class="text-center">
    <h4>Zuppe</h4>
</div>
<hr>

gehört nicht in eine Tabelle.

Emess · 15. November 2023

Das kann ich machen. Aber das ist nicht das Problem. Oder?

Wenn doch! Kannst du das näher erklären.?

Wenn es aber nur Kosmetik ist, mache ich mir anschließend Gedanken.

m.scatello · 15. November 2023

Zitat von Emess

mache ich mir anschließend Gedanken.

Warum nicht sofort? Ich glaube zwar nicht, dass dies das Problem lösen wird, aber wenn man auf defekten HTML-Code hingewiesen wird, sollte man dies auch korrigieren.

Ist die Seite online? Wenn ja, post mal einen Link.

m.scatello · 15. November 2023

1.Tabelle

Code

<tr>
 <td class="sp1">Nr. 121</td>
 <td class="sp2">Minestrone</td>
 <td class="sp3">Suppe mit geschlagenem Ei</td>
 <td class="sp4">7,00€</td>
</tr>

2. Tabelle

Code

<tr>
  <td class="sp1">Nr.86</td>
  <td class="sp2">Tomate Uno</td>
  <td class="sp2">Tomaten und Zwiebel </td>
  <td class="sp4">8,00€</td>
 </tr>

Fällt dir was auf?

Emess · 15. November 2023

Tschuldiggung mein Fehler,

https://my2.emess62.de/

Das gebastel ist hier online- Und da unter ausfühliche Speisekarte

Emess · 15. November 2023

Zitat von m.scatello

1.Tabelle

Code

<tr>
 <td class="sp1">Nr. 121</td>
 <td class="sp2">Minestrone</td>
 <td class="sp3">Suppe mit geschlagenem Ei</td>
 <td class="sp4">7,00€</td>
</tr>

2. Tabelle

Code

<tr>
  <td class="sp1">Nr.86</td>
  <td class="sp2">Tomate Uno</td>
  <td class="sp2">Tomaten und Zwiebel </td>
  <td class="sp4">8,00€</td>
 </tr>

Fällt dir was auf?

noch nicht aber ich gehe jetzt bit für bit durch

Emess · 15. November 2023

Ok! das wird es wohl sein.

m.scatello · 15. November 2023

Du solltest die Seite auch mal mit https://validator.w3.org/ checken

Emess · 15. November 2023

Deshalb will ich ja selbst so nach und nach von Bootstrap weg und so langsam Pures HTML5 und CSS mit Flexbox nutzen.

Da bin ich aber erst noch am lernen.

Sempervivum · 16. November 2023

Bei so etwas offenbaren sich die Vorteile von Gridlayout: Kein zusätzlichen Container und Klassen, nur die Elemente aneinander gereiht und dann dieses CSS:

Code

        div.modal-body div.grid-container {
            display: grid;
            grid-template-columns: 1fr 2fr 6fr 1fr;
        }

Und das Umschalten auf vertikale Anordnung ist kinderleicht:

Code

            div.modal-body div.grid-container {
                grid-template-columns: 1fr;
            }

Aber auch bei der jetzigen Lösung mit Tabellen könntest Du es vereinfachen und auf die Klassen verzichten, wenn Du nth-of-type verwendest:

:nth-of-type | CSS-Tricks

The :nth-of-type selector allows you select one or more elements based on their source order, according to a formula. It is defined in the CSS Selectors Level

css-tricks.com

Emess · 16. November 2023

Das Problem wurde ja von m.scatello erfolgreich erkannt. Vielen Dank.

Die Sache mit dem grid anstatt table finde ich sehr interessant. und eröffne einen neuen Thread

Zelle zu Tabelle hinzugefügt! kann das Ergebnis nicht verstehen

Jetzt mitmachen!

Teilen

Tags