• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Boxen erst nebeneinander, dann untereinander (float)

I

IceTigers

New member
Folgenden Code benutze ich um 2 Boxen nebeneinnader zu platzieren.

HTML: 
<ul>
  <li style="float:left; text-align:left;">
      TEXT
  </li>
  <li style="float:right; text-align:left;">
      TEXT
  </li>				
</ul>

Das funktioniert auch gut, allerdings nur wenn die Bildschirmauflösung es zulässt, dass beide Boxen nebeneinander stehen. Bei kleinerer Bildschirmgröße (Tablet, Smartphone) sollten die beiden Boxen untereinander erscheinen. Durch das "float: right;" ist die untere Box aber logischerweise nach rechts verschoben. Wie löse ich das am besten? :icon7:
 
Danke, das funktioniert bei kleinen Bildschirmen genau richtig. Bei größeren Bildschirmen hätte ich die Box aber gerne weiterhin rechts zentriert. Wie löse ich das? :)
 
Hallo,

das geht nur über die Viewports (obwohl "rechts zentriert" etwas widersprüchlich ist ;-) ).
Dabei müssen alle Styles in eine externe CSS und nicht in die HTML-Quellcode.

1) In den Head-Bereich des HTML-Codes:
Code: 
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

2) Du teilst den Listenpunkten eine Klasse zu:
Code: 
<ul>
  <li class="listenpunkt1">
      TEXT
  </li>
  <li class="listenpunkt2">
      TEXT
  </li>				
</ul>

3) In der externen CSS definierst du die Styles:
Code: 
.listenpunkt1 {float:left; text-align:left;}
.listenpunkt2 {float:right; text-align:left;}

4) Am Ende der CSS teilst du dann den unterschiedlichen Bildschirmbreiten unterschiedliche Styles zu:
Code: 
@media (max-width: 768px) {
 .listenpunkt1 {float: none; margin: 0 auto; width: 80%;}
 .listenpunkt2 {float: none; margin: 0 auto; width: 80%;}
}

@media (max-width: 533px) {}

@media (max-width: 320px) {
 .listenpunkt1 {width: 100%;}
 .listenpunkt2 {width: 100%;}
}
In den Viewports werden die oben notierten Styles nach unten vererbt.
Für meine responsiven Webseiten habe ich ca. 15 verschiedene Viewports zwischen 320 und 990 Pixel Bildschirmbreite ... musst du für deine Webseite individuell anpassen.

Gruß
 
(Noch als kleine Anmerkung)

Bitte fügt Zeilenumbrüche in die CSS-Regeln ein. Sonst wird der Code irgendwann immer schwerer zu lesen und dadurch unwartbar.

Code: 
@media (max-width: 768px) {
 .listenpunkt1 {
    float: none;
    margin: 0 auto;
    width: 80%;
  }

 .listenpunkt2 {
    float: none;
    margin: 0 auto;
    width: 80%;
  }
}

...
 
Das kann man auch ohne viewports lösen:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
ul {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: justify;
	position: relative;
}
ul li {
	display: inline-block;
	width: 200px;
	height: 30px;
	border: 1px solid black;
	margin: 2px;
}
.justifier {
	height: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	border: none;
}
</style>
</head>
<body>
<ul>
	<li></li>
	<li></li>
	<li class="justifier"></li>
</ul>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben