Wie bekomme ich diese Kästchen zentriert?

CSS · #1 (**permalink**) 25.07.2017, 16:44

Hallo!

ich habe mal eine Frage wo ich einfach nicht weiter komme. Hat jemand eine Idee wie ich diese Kästchen mittig bekomme? Habe schon vieles versucht, ohne Erfolg...

HTML-Code:

<style>
	
	
	.container_seiten {
  list-style:none;
  margin: 0;
  padding: 0;
  float: center;
}

.item {
  background: #dddddd;
  padding: 5px;
  width: 70px;
  height: 55px;
  margin: 10px;
  
  line-height: 50px;
  color: #1a9bfc;
  
  font-size: 1.3em;
  text-align: center;
  float: center;
}



/*float layout*/
.float {
  max-width: 100%;
  margin: 0 auto;
  
}
.float:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.float-item {
  float: left;
   
}



</style>



<ul class="container_seiten float"></ul>		
		
		<ul class="container_seiten float">
		<div class="rahmen_unten" ><li style="color:black;" class="item float-item">1</li>
 <a href="kategorie-.html"><li class="item float-item">2</li></a>
 <a href="kategorie-.html"><li class="item float-item">3</li></a>
 <a href="kategorie-.html"><li class="item float-item">4</li></a>
 <a href="kategorie-.html"><li class="item float-item">5</li></a>
 <a href="kategorie-.html"><li class="item float-item">6</li></a>
 <a href="kategorie-.html"><li class="item float-item"> » </li></a> <a href="kategorie-.html"><li class="item float-item">Letzte</li></a>
</div>
		</ul>

MrMurphy · #2 (**permalink**) 25.07.2017, 16:55

Hallo

float: center gibt es nicht.

Mein Vorschlag: Grundlagen lernen, Flexbox verwenden.

Gruss

MrMurphy

CSS · #3 (**permalink**) 25.07.2017, 16:56

Zitat:

Zitat von MrMurphy

Hallo

float: center gibt es nicht.

Mein Vorschlag: Grundlagen lernen, Flexbox verwenden.

Gruss

MrMurphy

Ich habe schon Erfahrungen mit CSS! Das war nur ein Versuch. Sry das ich gefragt habe!

MrMurphy · #4 (**permalink**) 25.07.2017, 22:12

Hallo

Das

Zitat:

Grundlagen lernen

bezog sich nicht nur auf das CSS, sondern auch auf das HTML.

Code:

<ul class="container_seiten float"></ul>

Solche leeren Container sind unsinnig und überflüssig.

Code:

      <ul class="container_seiten float">
         <div class="rahmen_unten">

ul-Elemente dürfen als direkte Kindelemente nur li-Elemente enthalten.

div-Elemente dürfen nur noch verwendet werden, wenn es keine geeigneteren Elemente gibt. Zum Beispiel das section-Element.

Code:

         <div class="rahmen_unten">
            <li style="color:black;" class="item float-item">1</li>

li-Elemente müssen wiederum direkte Kindelemente von ul-Elementen (oder ol-Elementen) sein.

Code:

            <a href="kategorie-.html">
               <li class="item float-item">2</li>
            </a>

li-Elemente dürfen keine Kindelemente von a-Elementen sein.

Insgesamt gilt mit dem aktuellen HTML, dass keine unnötigen Container verwendet werden sollen.

Nach deinen hier genannten Informationen (nur nach denen kann ich mich richten) ist nach den aktuellen HTML-Regeln auch die Liste überhaupt unerwünscht, zumal sie nur unnötiges zusätzliches CSS erfordert, welches auch vermieden werden soll.

Mit deinen Informationen sollte der HTML-Quelltext eher so aussehen:

Code:

      <section class="zahlen">
         <p>1</p>
         <a href="">2</a>
         <a href="">3</a>
         <a href="">4</a>
         <a href="">5</a>
         <a href="">6</a>
         <a href="">»</a>
         <a href="">Letzte</a>
      </section>

Danach folgt das CSS.

Code:

      .container_seiten {
         list-style: none;
         margin: 0;
         padding: 0;
         float: center;
      }

list-style beziehungsweise list-style-type sollte immer auf das betroffene Element angewandt werden, in diesem Fall dem li-Element.

list-style ist eine Kurzschreibweise, die nur verwendet werden sollte, wenn mehrere Angaben getätigt werden sollen. In diesem Fall wäre list-style-type auf das li-Element angewandt also besser.

margin: 0; und padding: 0; sollten nicht auf Verdacht vergeben werden, sondern nur wenn sie auch etwas bewirken.

float: center; gibt es nicht.

Code:

      .item {
         background: #dddddd;
         padding: 5px;
         width: 70px;
         height: 55px;
         margin: 10px;
         line-height: 50px;
         color: #1a9bfc;
         font-size: 1.3em;
         text-align: center;
         float: center;
      }

width-Angaben sollten nur dort erfolgen, wo sie auch sinnvoll sind. Für das Wort "Letzte" sind die 70px zu wenig. Deshalb ist es besser den Browser die Breite nach Möglichkeit selbst bestimmen zu lassen.

height-Angaben sollten grundsätzlich vermieden werden. Die Höhe bestimmt sich durch den Inhalt der Elemente.

line-height Angaben sollten nur verwendet werden um die Zeilenabstände innerhalb eines Absatzes zu beeinflussen. Sie sollten zudem grundsätzlich keine Einheiten enthalten.

text-align: center; sollte nur verwendet werden um längeren Text zu zentrieren. Innerhalb einzelner Elemente für einzelne Buchstaben / Worte ist es meist überflüssig und schafft nur unnötige Probleme.

float-center gibt es wie schon geschrieben nicht.

Code:

      .float::after {
         content: ".";
         display: block;
         height: 0;
         clear: both;
         visibility: hidden;
      }

Das ist kein sinnvolles Clearfix.

Code:

      .float-item {
         float: left;
      }

float ist zudem nur dafür gedacht, damit Text andere Elemente (meist Bilder) umfließt. Die Zeiten, in denen es für andere Lösungen mißbraucht werden musste, sind bereits seit Jahren vorbei.

Für andere Layoutaufgaben ist Flexbox speziell entwickelt worden.

Um die von gewünschte zentrierte Darstellung zu erreichen ist bei meinen Quelltext nur das folgende CSS notwendig:

Code:

      .zahlen {
         display: flex;
         justify-content: center;
      }
      .zahlen>* {
         background-color: #dddddd;
         font-size: 1.3rem;
         padding: 0.5rem 1rem;
         margin: 0.3rem 0.3rem;
      }
      .zahlen>a {
         color: #1a9bfc;
      }

Statt .zahlen kannst du natürlich andere Namen verwenden, der aber zu dem Inhalt deiner Seite passen sollte.

Komplett sieht mein Beispiel dann so aus:

Beispielseite

Gruss

MrMurphy

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
CSS tabelle wird im FF nicht zentriert dargestellt	neugierig_asdf	CSS	2	08.02.2009 13:23
Testcase Netscape: Box immer zentriert, daher unlesbar	Leeloo	CSS	0	08.09.2007 18:28
Tabellenloses Layout - Horizontal 100% vertikal zentriert. Probleme :(	strohy	CSS	8	23.02.2007 08:59
<hr> im ie 7 mal zentriert, mal nicht???	KungFuZius	CSS	1	08.01.2007 17:27
text zentriert über bild problem	clory	CSS	7	07.03.2005 10:37