|
|||
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> Vielen Dank schonmal! |
Sponsored Links |
|
|||
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:
Ich sehe deshalb aktuell eher folgenden Quelltext: Code:
<div class="rc"> <p>rc1n</p> <p>rc2n</p> <p>rc2</p> <p>rc3</p> </div> 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> Gruss MrMurphy Geändert von MrMurphy (30.03.2016 um 03:47 Uhr) |
Sponsored Links |
|
|||
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! |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |