zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Best Practice für Auflistung

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.03.2016, 16:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.03.2016
Beiträge: 2
bobmorane3000 befindet sich auf einem aufstrebenden Ast
Standard Best Practice für Auflistung

Grüßt euch,

ich möchte ein kleine Auflistung (siehe Anhang) realisieren und frage mich gerade was dafür die best Practice wäre.

Umsetzen würde ich das ganze gerne mit HTML/CSS - in den Sinn gekommen wäre mir hier jetzt einfach in <div> mit width/height und einem background, oder eine Liste..

Allerdings wüsste ich bei der Umsetzung von beiden Vorgehensweisen nicht, wie man den Umbruch am besten realisiert. -> Also dass das Viereck über dem Content angezeigt wird.

Konkret wäre mein erster Ansatz folgender gewesen:

Code:
<div class="viereck"></div></br>
<p>RC1N</p>
Kann mir wer weiterhelfen?

Vielen Dank schonmal!
Angehängte Grafiken
Dateityp: jpg example.jpg (6,1 KB, 8x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 29.03.2016, 17:17
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Für eine konkrete Lösung sind deine Angaben zu dünn. Es ist noch nicht mal ersichtlich ob es sich zwangsweise um eine Liste handelt.

Zitat:
mit width/height
Die width-Angabe kann sinnvoll sein. height-Angaben hingegen sollten so weit wie möglich vermieden werden. Die Höhe von Elementen wird im Regelfall von deren Inhalt bestimmt. Unbedachte height-Angaben führen grade bei Anfängern später regelmäßig zu Problemen.

Ich sehe deshalb aktuell eher folgenden Quelltext:

Code:
<div class="rc">
   <p>rc1n</p>
   <p>rc2n</p>
   <p>rc2</p>
   <p>rc3</p>
</div>
Der Rest dann mit CSS. Der gesamte Quelltext könnte dann folgendermaßen aussehen:

Code:
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Quellcode 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>

   @import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);
   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body {
         margin: 0;
      }
      .rc {
         display: flex;
         padding: 0;
         margin: 0;
      }
      .rc>* {
         color: black;
         text-decoration: none;
         text-transform: uppercase;
         outline: none;
         list-style-type: none;
         padding: 0.3rem 1rem;
         margin: 0;
      }
      .rc>*::before {
         color: #03A671;
         font-family: FontAwesome;
         content: "\f0c8";
         text-align: center;
         display: block;
      }
   }

   </style>
</head>
<body>
   <div class="rc">
      <p>rc1n</p>
      <p>rc2n</p>
      <p>rc2</p>
      <p>rc3</p>
   </div>
   <nav class="rc">
      <a href="">rc1n</a>
      <a href="">rc2n</a>
      <a href="">rc2</a>
      <a href="">rc3</a>
   </nav>
   <ul class="rc">
      <li>rc1n</li>
      <li>rc2n</li>
      <li>rc2</li>
      <li>rc3</li>
   </ul>
</body>
</html>
Ich habe das CSS so flexibel gestaltet, dass im Quelltext im body-Bereich verschiedene Kombinationen möglich sind. Drei habe ich mal als Beispiel eingefügt: div+p, nav+a, ul+li. Natürlich sind auch viele andere möglich ohne das CSS ändern zu müssen.

Gruss

MrMurphy

Geändert von MrMurphy (30.03.2016 um 03:47 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 30.03.2016, 10:51
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.03.2016
Beiträge: 2
bobmorane3000 befindet sich auf einem aufstrebenden Ast
Standard

Grüß dich MrMurphy,

Sportliche Uhrzeit und super Antwort, vielen Dank!

Funktioniert genauso wie ich es mir vorgestellt hatte und dass du auch gleich noch mehrere Wege mit einbezogen hast..

War sehr hilfreich!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
logische tabellarische auflistung von Daten ganz anders darstellen dermitdemfeuerfuchs CSS 0 03.07.2015 18:08
Bei best. Scrolllevel Klasse zu Element hinzufuegen NomisTrebla Javascript & Ajax 2 23.07.2014 11:46
Alphabetische Auflistung Kipperdesign Serveradministration und serverseitige Scripte 5 22.09.2012 16:38
PHP - Best Practice - Klassenkonstanten lolDog Serveradministration und serverseitige Scripte 8 17.12.2011 15:25
Auflistung in IE guenterfrosch CSS 3 08.01.2008 23:48


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:46 Uhr.