Auch auf die Klassen könntest Du verzichten wenn Du nth-of-type verwenden würdest. Allerdings ist es mit Klassen ein wenig klarer, was gestylt wird.
das geh ich an wenn ich das grid verstanden habe.
Jetzt schau ich erst mal wie sich dein Code bei mir verhält
So ich habe jetzt sehr viel gelesen und auf w3shool was antiquares gefunden mit dem ich gerne arbeiten würde.
Dabei ist mir aufgefallen, dass Modale mit Tabellen keine gute Idee ist und ohne Bootstrap schon garnicht.
Da ich aber eh Flexbox verwenden will. Hoffe ich auf Hilfe wie man von der Tabelle weg zum Grid kommt.
Ich brauch da ein Beispiel und sei es nur ein Teil der 1. Zeile wäre. Sonst kapier ich das nicht.. Bei geht das leider nich so schnell.
Unter miflo.de im Menue Modaltest könnte euch das misslungene Werk mit Tabelle ansehen.
Laut https://blog.webdevsimplified.com/2023-04/html-dialog/ sind Dialog und Modal zwei paar verschiedene Schuhe.
Ein Modal muss erst beendet werden und ein Dialog scrollt mit der Seite mit. Wenn ? würde ich das Modal für meine Zwecke bevorzugen.
Sonst gibt das Internet nicht viel begreifliches für mich her.
Also wenn ich in meinem Beispiel. Wie würde ich die Modale aufrufen und stylen? wenn ich auf die bootstrap.min.css verzichten will.
Ich hatte da was interessantes gefunden ist doch wohl das gleiche in deutsch.
https://kulturbanause.de/blog/css-grid-layout-module/.
Oder?
Ich geh erst mal was essen.
Hier habe ich 2 Modal die Mit Bootstrap css gestylt wurde
Kann mir erst mal jemand zeigen wie das ohne Bootstrap ganau so aussieht
Und anschließend fände ich beim 2. Modal die Sache mit dem grid interessant. Da würde ich mich über Hinweise und Hilfe freuen.
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
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.
Ok! das wird es wohl sein.
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 
Tschuldiggung mein Fehler,
Das gebastel ist hier online- Und da unter ausfühliche Speisekarte
Ok . Dann ist ja alles gteklärt.
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.
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.
.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%;
}
} <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">×</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>und noch ein Bildchen
Die Abstände von Zuppe sind ok. Die Beschreibung könnte mehr Plat belegen.
Unter " Insalata sind die Abstände insgesamt zu groß
AFAIK ist Axel der Admin. Ich kann schon so viel sagen, dass dieses Forum arg zu gespammt wurde durch Posten eines scheinbar harmlosen Beitrages und Hineineditieren von Links ein paar Tage später. Ich vermute stark, dass das Editieren deshalb gesperrt wurde.
Verstehe
Es kommt manchmal vor, dass ich meine eigen Beiträge nicht korrigieren kann, weil ich keine Rechte dazu habe.
Oh Mann! wie peinlich! Schon wieder!
Das mit dem .flex-container hatte ich auch schon probiert
Aber dann werden die -flex-items, außerhalb der @media querry nicht mehr als row angezeigt.
Habs mal neu hochgeladen, dass du sehen kannst was ich meine
Das hat gut geklappt
Die Bildverzerrung habe ich mit align-items : center; hinbekommen.
Was muss ich in die media querry eintragen, damit box2 (flex-itiem-left) nich aus dem flex-container sptingt
siehe
Worin besteht denn das Problem genau?
Nun ja auf einem Ipad sieht die Seite sch... also bescheiden aus. Muss es mal mit Chrome testen vielleicht liegt es auch an meinem Brave Browser
Demnach wird ein Prozentwert als flex-basis interpretiert. flex: 1000%; macht aber IMO keinen Sinn, was willst Du denn damit erreichen?
das war ein Fehler sollten 100% sein.
Wie würdest du das das Machen 2 Boxen mit 2/3 und 1/3 Aufteilung. Also so ungefähr.
Den Link von dir Zieh ich mir mal rein
So das Galerieprojekt ist erstmal zufrieden beendet
Jetzt habe ich ich Problem mit einer Flexbox in der es 2 weitere Flexboxen gibt. Die @media macht ja erst ab 700px reponsive.
Das liegt wahrscheinlich daran, dass meine Idee war für box1 65% und box2 35% vorgegeben habe.
Was kann ich da besser machen
/*-------------------------------------------
...............About.........................
--------------------------------------------*/
#about
{
min-height: 100vh;
background-color:grey;
justify-content: flex-start;
}
#about>p
{
font-weight: bold ;
color: fff;
width: 70%;
}
#about>h1{
font-family: Arial, Helvetica, sans-serif;
color:moccasin;
}
/* flexbox specific styles*/
.flex-container {
width: 80%;
padding: 5px;
display: flex;
flex-direction: row; /* Default */
gap: 1em 2em;
justify-content: center;
background: yellowgreen;
}
.flex-item-left{
justify-content: center;
padding: 10px;
font-family: sans-serif;
font-size: 2em;
color: #333;
flex:65%;
/* background: gray; */
background: burlywood;
}
.flex-item-left>h1{
font-size: 0.5em;
align-content: center;
}
.flex-item-right{
display: flex;
justify-content: center;
padding: 10px;
font-family: sans-serif;
font-size: 2em;
color: #333;
flex:35%;
/* background: gray; */
background: lightblue;
}
@media (max-width: 700px) {
.flex-item-right, .flex-item-left {
flex: 100%;
justify-content: center;
font-size: 1em;
}
.flex-container{
flex-wrap: wrap;
margin-bottom: 25px;
}
}einzusehen unter miflo.de