Text ganz oben bei Website HTML?

... komplette Frage anzeigen

3 Antworten

Ich grusele mich gerade extrem vor den beiden vorausgegangenen Antworten: Beide (Tabellenlayouts und absolute Positionierung) sind ziemlich veraltet, für dein Beispiel gar nicht nötig und sind heute nicht mehr empfehlenswert. Bootstrap erscheint mir für so eine Kleinigkeit eher als "mit Tauben auf Spatzen schießen".

Willst du ein zentriertes Layout? Dann kannst du das recht einfach erreichen, indem du den Seiteninhalt zentrierst und ein gefloatetes (display:float) oder flexibles (display:flex) Layout verwendest (siehe Beispiel):

http://codepen.io/Minilexikon/pen/oYwaLz
http://codepen.io/Minilexikon/pen/VmWEjP

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von medmonk
25.11.2016, 23:27

Danke, kann mich dem vorbehaltlos anschließen und nicht besser hätte schreiben können. Tabellen ausschließlich für die Darstellung tabellarischer Daten verwenden, jedoch nicht zum Layouten einer Website.  

eher als "mit Tauben auf Spatzen schießen".

Nur so am Rande, es heißt mit »Kanonen auf Spatzen schießen«. ;)

LG medmonk 

0

Markup:

<div class="container">
 <h2>**title**</h2>
 <ul class="btn-bar">
   <li><button>button-1</button></li>
   <li><button>button-2</button></li>
   <li><button>button-3</button></li>
 </ul>
</div>

CSS:

.container {max-width: 800px; margin: 0 auto;}
.container h2 {text-align: center;}

.btn-bar {
  list-style: none;
  display: flex;
  justify-content: center;
  padding: 0;
}

.btn-bar li {margin-right: 10px;} .btn-bar li:last-child {margin-right: 0px;} .btn-bar button {padding: 5px 15px;}

Statt des Button-Tags auch direkt die Bilder einbinden kannst. Kommt halt darauf an, was du genau machen möchtest und wie das Klicken mit JavaScript verarbeitest. Bezüglich CSS zur besseren Übersicht die Browser-Prefixes weggelassen habe. 

LG medmonk 

Antwort bewerten Vielen Dank für Deine Bewertung

du kannst auch eine tabelle mit zwei zeilen und 3 spalten machen.
in der ersten zeile verbindest du die zellen.
im anschluss zentrierst du alle inhalte der zellen.

elegant wäre es z.b. mit bootstrap zu machen und das gridsystem dafür zu nutzen.

auch kannst du ein <div> machen in dem du dein <h1> reinmachst und unter das <h1> drei <span> welche die <button> enthalten
wenn du dann den inhalt des divs zentrierst, sollte alles passen.

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von medmonk
25.11.2016, 23:23

Eine Tabelle hat hier nicht zu suchen. Tabellen ausschließlich zur Darstellung tabellarischer Daten verwenden, jedoch nicht zum Layouten einer Website!

0

Was möchtest Du wissen?