# Checkbox Kästchen und Text mittels css sauber neben einander?



## Shorty1968 (24. August 2018)

Hallo ich nutze Folgenden Code für eine Checkbox und möchte die Box zum Anhacken sauber neben den Text haben bekomme es aber leider nicht alleine hin.

```
<p>
    <input id="privacy_accept" type="checkbox" required name="privacy_accept">
    <label id="privacy_accept" for="privacy_accept">
    Bitte best&auml;tigen Sie, dass Sie unsere Datenschutzrichtlinien zur Kenntnis genommen haben!<br />Ihre Daten Name, Adresse werden zum Zwecke der Buchhaltung von uns an den Steuerberater sowie zum Zwecke der Auslieferung an den Lieferanten oder Hersteller &uuml;bermittelt. <a href="https://schnaepchenpiet.shop/Privatsphaere-und-Datenschutz:_:2.html">[Mehr Info]</a> * 
    </label>
  </p>
```


```
#privacy_accept {
vertical-align:top;
padding-top:6px;
padding-right:5px;
}
```


----------



## Sempervivum (24. August 2018)

Zunächst: IDs müssen dokumentweit eindeutig sein. Du hast aber die selbe ID "privacy_accecpt" für zwei Elemente vergeben.

Für deine eigentliche Frage liefert Flexlayout die Lösung:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/


----------



## Shorty1968 (24. August 2018)

Danke für deinen Tipp aber ich weiss nicht woran es liegen könnte,egal was ich bei css angebe es ändert sich nichts?

```
<p>
    <input class="privacy_accept_checkbox" type="checkbox" required name="privacy_accept">
    <label class="privacy_accept" for="privacy_accept">
    Bitte best&auml;tigen Sie, dass Sie unsere Datenschutzrichtlinien zur Kenntnis genommen haben!<br />Ihre Daten Name, Adresse werden zum Zwecke der Buchhaltung von uns an den Steuerberater sowie zum Zwecke der Auslieferung an den Lieferanten oder Hersteller &uuml;bermittelt. <a href="https://schnaepchenpiet.shop/Privatsphaere-und-Datenschutz:_:2.html">[Mehr Info]</a> *
    </label>
  </p>
```


```
.privacy_accept_checkbox {
display: flex; /* or inline-flex */
}
.privacy_accept {
padding-top: 250px;
padding-right: 250px;
}
```


----------



## Sempervivum (24. August 2018)

Du musst das display:flex dem umgebenden Container geben, d. h. dem p-Element:

```
p {
  display: flex;
  align-items: flex-start;
}
```
Und wenn Du noch andere p-Elemente hast, diesem eine ID geben und es darüber ansprechen.

Außerdem muss das for-Attribut beim Label auf die Checkbox verweisen:
`for="privacy_accept_checkbox"`


----------



## Shorty1968 (24. August 2018)

Vielen dank das wusste ich nicht,aber wenn ich das nun so mache betrift es ja alles was mit <p um schliest wird?

Was auch merkwürdig ist egal was ich in diesem css code angebe,es wird nicht übernommen.

```
.privacy_accept_checkbox {
margin-top: -5px;
padding-left: 25px;
}
```


----------



## Sempervivum (24. August 2018)

> wenn ich das nun so mache betrift es ja alles was mit <p um schliest wird?


Um das zu verhindern, kannst Du dem p-Element eine ID oder eine Klasse geben:
`<p id="privacy">`

```
p#pricacy {
  display: flex;
  align-items: flex-start;
}
```



> Was auch merkwürdig ist egal was ich in diesem css code angebe,es wird nicht übernommen.


margin-top funktioniert bei mir. padding-left funktioniert deshalb nicht, weil padding den inneren Abstand des *Inhaltes* einstellt und den gibt es bei einer Checkbox nicht. Du musst den Abstand entweder durch ein Margin bei der Checkbox oder ein Padding beim p-Element angeben:
https://jsfiddle.net/Sempervivum/10ug2rya/6/


----------



## Shorty1968 (24. August 2018)

Vielen dank für deine Hilfe,aber ich verstehe es nicht ich habe es gerade in einer Datei angepasst und es sah gut aus und den HTML Code dann in die anderen Dateien übernommen aber es wir unterschiedlich dargestellt in jeder Datei anderst oder so als wenn der CSS Code nicht angenommen wird?


----------



## Sempervivum (24. August 2018)

Das müsste man dann von Fall zu Fall untersuchen. Poste das HTML und das CSS von einer Datei, wo es nicht funktioniert.


----------



## Shorty1968 (24. August 2018)

Ich dachte ich könnte das css nun in allen HTML Dateien nutzen,meinst du ich sollte für alle ein extra CSS machen?


----------



## Sempervivum (24. August 2018)

Auf  keinen Fall, wenn Du ein gemeinsames CSS hast, ist das gut so. Ich dachte nur, Du hättest es unterschiedlich, weil sich die Darstellung unterschiedlich verhält. Wenn es unterschiedlich dargestellt wird, kann es am HTML liegen oder daran, dass es durch ein anderes CSS beeinflusst wird.


----------



## Shorty1968 (24. August 2018)

Ich weiss nicht was es ist und habe auch keine Idee,aber anscheint stimmt da was nicht oder es hängt wirklich noch ein anderes CSS dazwischen.


----------



## Sempervivum (24. August 2018)

Am besten postest Du das CSS, das Du jetzt hast und das HTML, wo es nicht funktioniert. Oder noch besser die URL der Seite.


----------



## Shorty1968 (24. August 2018)

CSS was ich jetzt nutze:

```
.privacy_accept {
margin-top: -20px;
padding-left: 25px;
}
p#pricacy {
  display: flex;
  align-items: flex-start;
}
```
HTML Code in der Datei:

```
<p id="privacy">
    <input class="privacy_accept_checkbox" type="checkbox" required name="privacy_accept">
    <label class="privacy_accept" for="privacy_accept_checkbox">
    Bitte best&auml;tigen Sie, dass Sie unsere Datenschutzrichtlinien zur Kenntnis genommen haben!<br />Ihre Daten Name, Adresse werden zum Zwecke der Buchhaltung von uns an den Steuerberater sowie zum Zwecke der Auslieferung an den Lieferanten oder Hersteller &uuml;bermittelt. <a href="https://schnaepchenpiet.shop/Privatsphaere-und-Datenschutz:_:2.html">[Mehr Info]</a> *
    </label>
</p>
```


----------



## Sempervivum (24. August 2018)

Verstehe. Da ist auf der einen Seite Bootstrap beteiligt und zusätzlich das CSS aus mtheme.css. Kein Wunder, dass Du da den Überblick verlierst. Der Hauptgrund, warum es nicht funktioniert, ist jedoch, dass das p-Element, anders als in dem HTML, das Du gepostet hast, die Klasse privacy*1* hat, wodurch das CSS mit Flex nicht wirksam wird.


----------



## Shorty1968 (24. August 2018)

Das mit privacy*1*  war ein versehen ich hatte vergessen ab zu speichern nun ist es wie es sein soll privacy,was kann ich machen das es überall gleich aussieht?


----------



## Sempervivum (24. August 2018)

Ich rate mal: Du möchtest die Checkbox nach rechts verschieben, damit sie nicht so am Rand klebt? Das kannst Du erreichen, indem Du dem p-Element ein padding-left verpasst:


----------



## Shorty1968 (24. August 2018)

Ja im grunde ist es das was ich erreichen möchte so das Checkbox und Test neben einander sind wie im Sceen,aber sie dann überall wo sie zu sehen sein sollen gleich aussehen und das scheint aus irgendeinem grund nicht möglich.

Dem p-Element ein padding-left habe ich gemacht aber es änderte sich nichts.


----------



## Shorty1968 (24. August 2018)

Vielen dank für deine Hilfe,ich habe es nun mit Inline CSS gelöst.


----------

