Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Textteile rechtsbündig mit CSS
#1
Moin Tommy,

wo wir gerade von purem CSS sprechen, ich versuche mich gerade an einer Gastroseite,
wo ich die Angaben zur Speisekarte beeinflussen möchte.
Ich möchte nur die Preisangaben VORSPEISEN rechtsbündig setzen können, Zeile 1 bis Zeile 12. Soll dann so aussehen wie unter SALATE, was aber händisch mit Punkt, Punkt unsachgemäß ist, nicht genau genug, Pfusch eben.

Quasi so, das es aussieht wie in der darunterliegenden Tabelle als Beispiel
(Die Tabelle will der Kunde nicht haben)



Tante Go habe ich schon durchsucht, ...Textelemente, Textteile rechtsbündig mit CSS ausrichten, habe nichts Brauchbares gefunden. Hast du vielleicht eine Lösung???
Oder wird das zu aufwendig, zu kompliziert???

Hier die TESTSEITE:
http://mixx.agentur28.de/Gastronomie-Lis...nthal.html
Mit freundlichen Grüßen
Claus aus dem hohen Norden

(Berge sind ja ganz schön, nur platt müssen sie sein!)
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#2
Moin, Moin,

z.B. so?!

... unten auf dieser Seite:

http://www.mobirise-tutorials.com/Lawyer...rticle6-4j

Code:
<div style="width: 100%; background-color: #e2e2e2;">
   <p>01. Insalata Mista -gemischte grüne Salate mit Tomaten, Gurken, Zwiebeln<span style="float: right;"><b>7,50 €</b></span></p>
   <p>02. Chicken Walnut Salat, verschiedene Blattsalate mit kalten Hähnchenbruststreifen, Walnüssen und Apfelspalten<span style="float: right;"><b>12,50 €</b></span></p>
   <p>03. Ensalada de la Casa, riesige Tacoschale gefüllt mit Blattsalat, Mais, Tomaten, Gurken, Paprika, geriebenen Käse<span style="float: right;"><b>1,50 €</b></span></p>                    
</div>


.jpg  Preis_rechts.JPG (Größe: 130,46 KB / Downloads: 8)
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
... oder so:

https://www.w3.org/Style/Examples/007/leaders.de.html
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
Danke dur Tommy. Paßt. Auch auf dem Handy
Claus
Mit freundlichen Grüßen
Claus aus dem hohen Norden

(Berge sind ja ganz schön, nur platt müssen sie sein!)
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
... nun ja, es gibt viele Wege, die nach Rom führen Smiling

Den hatte ich mir gerade selbst ausgedacht - geht vielleicht noch optimaler - kommt aber immer darauf an wie kompliziert es sein darf/soll oder auch nicht.

Ich finde auch den Weg über eine Tabelle wahrscheinlich (gerade für eine Speisekarte) sehr gut. Denn die scrollt man dann am Handy mit dem Finger auch quer.

Bei den Bootstrap-Tabellen hatte ich hier mal beschrieben, wie man die Sortierung bedingt oder auch ganz abschalten kann, dann sind auch diese hoch/runter Pfeile ↑↓ weg:

http://www.mobirise-tutorials.com/Tabellen/

Natürlich könnte man diese so vorgefertigten Tabellen auch noch via CSS oder in der HTML selbst weiter manipulieren und seinen Bedürfnissen anpassen.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#6
Die Tabellen eignen sich als Standard nicht so gut, denn die unterschiedliche Textlänge, stellt dann die Tabellen nicht gleichmäßi in der Breite dar.
Habe gefummelt und probiert...alles wieder verworfen, mehr Zeit will ich für diese Seite auch nicht einsetzen....

Dein erster Vorschlag war ja prima, habe noch Striche drunter gesetzt, so sieht es dezent und übersichtlich aus. Danke nochmal. thumbs up
Das mit den Punkten...auch nicht so wie ich (mein Kunde) sich das wünscht

Link:
http://mixx.agentur28.de/Gastronomie-Lis...nthal.html
Mit freundlichen Grüßen
Claus aus dem hohen Norden

(Berge sind ja ganz schön, nur platt müssen sie sein!)
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#7
Hallo Claus

Ich würde es über css flexbox lösen.

Siehe hier Speisekarte

User:Test
PW:frei123

Hier der Code vom html
Code:
<div class="container ">
      <div class="abteilung">
         
          <div class="gericht">
             
             
         
              <ul>
                   <h3 class="rubrik">Vorspeise</h3>
                  <li><span class="fett">01. Insalata Mista -</span>gemischte grüne Salate mit Tomaten, Gurken, Zwiebeln</li>
                  <li><span class="fett">02. Chicken Walnut Salat-</span> verschiedene Blattsalate mit kalten Hähnchenbruststreifen, Walnüssen und Apfelspalten</li>
                  <li><span class="fett">03. Ensalada de la Casa-</span> riesige Tacoschale gefüllt mit Blattsalat, Mais, Tomaten, Gurken, Paprika, geriebenen Käse</li>
                  <li><span class="fett">04. Ofenkartoffel, -</span> gefüllt mit Kräuterrahm, belegt mit Hähnchenbruststreifen</li>
                  <li><span class="fett">05. Nachos Tortillachips, -</span> mit Jalapenos und Käse überbacken, dazu Dips</li>
              </ul>
          </div>
          <div class="preis">
              <ul>
                 <h3 class="rubrik">Preise</h3>
                  <li class="fett"> 7,50€</li>
                  <li class="fett">12,50€</li>
                  <li class="fett">11,50€</li>
                  <li class="fett"> 7,50€</li>
                  <li class="fett"> 5,90€</li>
              </ul>
          </div>
      </div>
     
             <div class="abteilung">
         
          <div class="gericht">
             
             
         
              <ul>
                   <h3 class="rubrik">Hauptgerichte</h3>
                  <li><span class="fett">01. Insalata Mista -</span>gemischte grüne Salate mit Tomaten, Gurken, Zwiebeln</li>
                  <li><span class="fett">02. Chicken Walnut Salat-</span> verschiedene Blattsalate mit kalten Hähnchenbruststreifen, Walnüssen und Apfelspalten</li>
                  <li><span class="fett">03. Ensalada de la Casa-</span> riesige Tacoschale gefüllt mit Blattsalat, Mais, Tomaten, Gurken, Paprika, geriebenen Käse</li>
                  <li><span class="fett">04. Ofenkartoffel, -</span> gefüllt mit Kräuterrahm, belegt mit Hähnchenbruststreifen</li>
                  <li><span class="fett">05. Nachos Tortillachips, -</span> mit Jalapenos und Käse überbacken, dazu Dips</li>
              </ul>
          </div>
          <div class="preis">
              <ul>
                 <h3 class="rubrik">Preise</h3>
                  <li class="fett"> 7,50€</li>
                  <li class="fett">12,50€</li>
                  <li class="fett">11,50€</li>
                  <li class="fett"> 7,50€</li>
                  <li class="fett"> 5,90€</li>
              </ul>
          </div>
      </div>
     
      <div class="abteilung">
         
          <div class="gericht">
             
             
         
              <ul>
                   <h3 class="rubrik">Nachtisch</h3>
                  <li><span class="fett">01. Insalata Mista -</span>gemischte grüne Salate mit Tomaten, Gurken, Zwiebeln</li>
                  <li><span class="fett">02. Chicken Walnut Salat-</span> verschiedene Blattsalate mit kalten Hähnchenbruststreifen, Walnüssen und Apfelspalten</li>
                  <li><span class="fett">03. Ensalada de la Casa-</span> riesige Tacoschale gefüllt mit Blattsalat, Mais, Tomaten, Gurken, Paprika, geriebenen Käse</li>
                  <li><span class="fett">04. Ofenkartoffel, -</span> gefüllt mit Kräuterrahm, belegt mit Hähnchenbruststreifen</li>
                  <li><span class="fett">05. Nachos Tortillachips, -</span> mit Jalapenos und Käse überbacken, dazu Dips</li>
              </ul>
          </div>
          <div class="preis">
              <ul>
                 <h3 class="rubrik">Preise</h3>
                  <li class="fett"> 7,50€</li>
                  <li class="fett">12,50€</li>
                  <li class="fett">11,50€</li>
                  <li class="fett"> 7,50€</li>
                  <li class="fett"> 5,90€</li>
              </ul>
          </div>
      </div>    
   <div id="boxKlein">
       <div class="abteilungKlein">
         
          <div class="gerichtKlein">
             
             
         
              <ul>
                   <h3 class="rubrik">Hauptgerichte</h3>
                  <li><span class="fett">01. Insalata Mista -</span>gemischte grüne Salate mit Tomaten, Gurken, Zwiebeln<br><span class="fettP"> 7,50€</span></li>
                  <li><span class="fett">02. Chicken Walnut Salat-</span> verschiedene Blattsalate mit kalten Hähnchenbruststreifen, Walnüssen und Apfelspalten<br><span class="fettP"> 12,50€</span></li>
                  <li><span class="fett">03. Ensalada de la Casa-</span> riesige Tacoschale gefüllt mit Blattsalat, Mais, Tomaten, Gurken, Paprika, geriebenen Käse<br><span class="fettP"> 11,50€</span></li>
                  <li><span class="fett">04. Ofenkartoffel, -</span> gefüllt mit Kräuterrahm, belegt mit Hähnchenbruststreifen<br><span class="fettP"> 7,50€</span></li>
                  <li><span class="fett">05. Nachos Tortillachips, -</span> mit Jalapenos und Käse überbacken, dazu Dips<br><span class="fettP"> 5,90€</span></li>
              </ul>
          </div>
         
      </div>
     
      <div class="abteilungKlein">
         
          <div class="gerichtKlein">
             
             
         
              <ul>
                   <h3 class="rubrik">Nachtisch</h3>
                  <li><span class="fett">01. Insalata Mista -</span>gemischte grüne Salate mit Tomaten, Gurken, Zwiebeln<br><span class="fettP"> 7,50€</span></li>
                  <li><span class="fett">02. Chicken Walnut Salat-</span> verschiedene Blattsalate mit kalten Hähnchenbruststreifen, Walnüssen und Apfelspalten<br><span class="fettP"> 12,50€</span></li>
                  <li><span class="fett">03. Ensalada de la Casa-</span> riesige Tacoschale gefüllt mit Blattsalat, Mais, Tomaten, Gurken, Paprika, geriebenen Käse<br><span class="fettP"> 11,50€</span></li>
                  <li><span class="fett">04. Ofenkartoffel, -</span> gefüllt mit Kräuterrahm, belegt mit Hähnchenbruststreifen<br><span class="fettP"> 7,50€</span></li>
                  <li><span class="fett">05. Nachos Tortillachips, -</span> mit Jalapenos und Käse überbacken, dazu Dips<br><span class="fettP"> 5,90€</span></li>
              </ul>
          </div>
         
      </div>    
   </div>      
   </div>

Hier der Code von der CSS
Code:
*/Style.css Speisekarte*/


.container{
   
}


.abteilung {
   margin-top: 10%;
   border:1px solid #41aa4d;
   display:flex;
   flex-direction: row;
   flex:1 1 auto;
   justify-content: space-around;
   flex-wrap:nowrap;
}
li{list-style: none;}

.fett {
   font-weight:500;
}

.preis {
   display:flex;
   flex-direction: row;
   
   
}

.gericht {
   display:flex;
   flex-direction: row;
   
}

.rubrik  {
   color:#ff6100;
   font-style: italic;
}
h3{
   font-size:1.5em !important;
   
}
@media (min-width: 991px) {
   #boxKlein{display:none;}
}
@media (max-width: 991px) {
   .abteilung{display:none;}
}

.abteilungKlein {
   margin-top: 10%;
   border:1px solid #41aa4d;
   display:flex;
   flex-direction: column-reverse;
   flex:1 1 auto;
   justify-content: space-around;
   flex-wrap:nowrap;
}
.fettP{
   font-weight:400;
   color:blue;
}
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#8
@Tommy
hoch/runter-Pfeile weg

Danke für den Tipp!
Wenn Dein Pferd tot ist, steig ab.

Hab auf dem Rechner: NOF11, NOF12, NOF2015, Windows 7 Professionnel, Mozilla Firefox  Java 7 32bit, IE11, Chrome, GIMP 2.10.10; Mobirise 4.10.6, den Code-Editor habe ich natürlich auch, aber sonst kein Schnickschnack
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#9
Hallo Andy,

habe ich probiert. Der CSS-Code stimmt nicht, bzw. ich kann diesen nicht reinsetzen.


.jpg  Flexbox.jpg (Größe: 78,15 KB / Downloads: 8)


Sorry, funzt jetzt. Mein Fehler. Danke dir.
Sehe ich jetzt erst, Handy: Fehlanzeige....
Mit freundlichen Grüßen
Claus aus dem hohen Norden

(Berge sind ja ganz schön, nur platt müssen sie sein!)
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#10
Doris hatte mal (für Thomas) eine Pseudotabelle geschrieben. Die fande ich genial (und habe sie in abgewandleter Form weiterverwendet!
http://www.vogtland-geschichte.de/Veranstaltungen.html
Ihr Orginal müsstest Du mal hier im Forum suchen!
Keine Zeit, muss Haare machen!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#11
Danke Martin,

ich mag es lieber schlicht und dezent, nicht so bunt Mad
Mit freundlichen Grüßen
Claus aus dem hohen Norden

(Berge sind ja ganz schön, nur platt müssen sie sein!)
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#12
Deine Einstellung kenne ich! :D  Das Original ist schlicht:
https://www.nof-schule.de/forum/t-respon...#pid114092
http://fotoatelier-essen.de/mobirise/Tabellen/
Man kann auch die Farben ganz wegnehmen!
Keine Zeit, muss Haare machen!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#13
@claus
aber der Link funzt auf dem Handy.
Wenn es bei dir in Mobi anders dargestellt wird muss man gucken was dir dazwischen funkt das kann ich so von hier natürlich nicht.
Wie sieht denn deine Version auf dem Handy aus?
Hast du einen Link?
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#14
(05.06.2019, 18:28)Martin73 schrieb: Deine Einstellung kenne ich! :D  Das Original ist schlicht:
...
Man kann auch die Farben ganz wegnehmen!
thumbs up :lachtot:
Wenn Dein Pferd tot ist, steig ab.

Hab auf dem Rechner: NOF11, NOF12, NOF2015, Windows 7 Professionnel, Mozilla Firefox  Java 7 32bit, IE11, Chrome, GIMP 2.10.10; Mobirise 4.10.6, den Code-Editor habe ich natürlich auch, aber sonst kein Schnickschnack
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#15
Jo...es gibt unendlich viele Möglichkeiten...jeder soll es sp machen...wie er es mag.
Ich habe es jetzt fertig und so bleibt es auch...
Danke aber für deinen Beitrag.
Mit freundlichen Grüßen
Claus aus dem hohen Norden

(Berge sind ja ganz schön, nur platt müssen sie sein!)
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Mobirise-Textteile farbig machen Thomas Saake 2 672 28.11.2017, 13:40
Letzter Beitrag: Thomas Saake
  Mobirise - Textteile farbig machen? stobi_de 22 2.248 24.05.2017, 20:57
Letzter Beitrag: stobi_de



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!