Css frage bzg zentrieren

06/06/2015 00:30 False#1
Hey zusammen,

vorab die Seite : [Only registered and activated users can see links. Click Here To Register...] .....

Also wie man oben in der mitte sieht steht dort "Du bist momentan nicht eingeloggt, einloggen!".

Mein Problem ist nun, wie bekomme ich das mittig?
Aber nicht nur für meine auflösung(bzw Browsergröße) sondern für jede?

danke schonmal vorab

lg
false
06/06/2015 01:51 OfficialiSEVEN#2
Media queries :)

Solltest auch mal an responsive Design denken :)
06/06/2015 07:57 Serraniel#3
Dem Container wo es drin steht die volle breite geben und dann margin-left und margin-right jeweils auf auto setzen.
Edit: Zentrieren von Texten geht in CSS mit text-align: center; auf der Containerklasse.
06/06/2015 10:42 False#4
Quote:
Originally Posted by FrickXHD View Post
Media queries :)

Solltest auch mal an responsive Design denken :)
Hast du ein Beispiel in dem Fall für meine Seite ?

Quote:
Originally Posted by Serraniel View Post
Dem Container wo es drin steht die volle breite geben und dann margin-left und margin-right jeweils auf auto setzen.
Edit: Zentrieren von Texten geht in CSS mit text-align: center; auf der Containerklasse.
Wenn ich es so mache passiert das :
[Only registered and activated users can see links. Click Here To Register...]
06/06/2015 10:43 OfficialiSEVEN#5
Guck dir mal Skeleton.css an die haben die Media queries schon drin da Ch gerade die meiste Zeit nur am Handy unterwegs bin ^^
06/06/2015 11:15 Serraniel#6
Quote:
Originally Posted by .ƒaℓsє. View Post
Wenn ich es so mache passiert das :
[Only registered and activated users can see links. Click Here To Register...]
PHP Code:
<div id="login" class="center">
  <p>Du bist momentan nicht eingeloggt, <a href="">einloggen</a>!</p>
</div> 
PHP Code:
.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

#login {
  color: rgba(0, 216, 255, 0.82);
  margin-top: 18px;
}

#navigation {
  margin-top: -18px;
  margin-right: 50px;
  float: right;
} 
Das zentriert das ganze. Weil ich jetzt nicht alles verbessern wollte hab ich das, was nachher dadurch depositioniert wurde auf "schnellen weg" wieder dahin gesetzt wo es hin soll.
06/06/2015 12:01 • Craix •#7
Einfachste Methode: <center> Dein Text </center>
06/06/2015 12:02 False#8
Quote:
Originally Posted by Serraniel View Post
PHP Code:
<div id="login" class="center">
  <p>Du bist momentan nicht eingeloggt, <a href="">einloggen</a>!</p>
</div> 
PHP Code:
.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

#login {
  color: rgba(0, 216, 255, 0.82);
  margin-top: 18px;
}

#navigation {
  margin-top: -18px;
  margin-right: 50px;
  float: right;
} 
Das zentriert das ganze. Weil ich jetzt nicht alles verbessern wollte hab ich das, was nachher dadurch depositioniert wurde auf "schnellen weg" wieder dahin gesetzt wo es hin soll.
Selbes Ergebnis wie ich es jetzt habe, verkleinert man die Seite geht das login nur ein wenig nach links und damit verschiebt sich das menü nach unten
[Only registered and activated users can see links. Click Here To Register...][Only registered and activated users can see links. Click Here To Register...]

vollstellen das deins sauber geschrieben ist kann ich mir nicht wirklich, glaube nicht das margin-top: -18px; korrekt ist^^


Quote:
Originally Posted by FreezyTV View Post
Einfachste Methode: <center> Dein Text </center>
dadurch würde das menü trotzdem nach unten rücken....
06/06/2015 12:45 Serraniel#9

Die Anpassung mit dem -18 war, weil sich das rechts sonst nach unten verschiebt.
Ich habe gesagt das diese Anpassung mit der -18 der schnelle Weg war (und somit nicht sauber). Es sollte nur demonstrieren wie du den Text zentrierst, Rest muss man halt selber anpassen. Noch mal nen Screen wie das aussieht....
06/06/2015 13:09 False#10
Quote:
Originally Posted by Serraniel View Post

Die Anpassung mit dem -18 war, weil sich das rechts sonst nach unten verschiebt.
Ich habe gesagt das diese Anpassung mit der -18 der schnelle Weg war (und somit nicht sauber). Es sollte nur demonstrieren wie du den Text zentrierst, Rest muss man halt selber anpassen. Noch mal nen Screen wie das aussieht....
Das Zentrieren an sich war ja nicht das Problem...
Das Problem war ja das Zentrieren und das es auch so bleibt wenn man den Browser z.b kleiner zieht...

sprich 3 divs nebeneinander und das mittlere soll immer mittig sein auch wenn man das fenster kleiner zieht.
06/06/2015 13:23 Serraniel#11
Dann machst du einen Container mit 100% Breite, und gibst den Texten (ggf. wenn benötigt mit Containern drum herum) Klassen, welche diese platzieren.
Mit
PHP Code:
text-align: center; 
zentrierst du. Wie du weitern Text anschließend rechtsbündig darstellst, kannst du dir denken.
Willst du Container platzieren geschiet das über Margin:
PHP Code:
  margin-left: auto;
  margin-right: auto; 
zentriert Container.

PHP Code:
margin-left: 0 
ist linksbündig und
PHP Code:
margin-right: 0 
rechtsbündig. Für Abstand zum Rand dann z.B. 10px nehmen oder mit Paddings arbeiten.
06/06/2015 22:31 False#12
Quote:
Originally Posted by Serraniel View Post
Dann machst du einen Container mit 100% Breite, und gibst den Texten (ggf. wenn benötigt mit Containern drum herum) Klassen, welche diese platzieren.
Mit
PHP Code:
text-align: center; 
zentrierst du. Wie du weitern Text anschließend rechtsbündig darstellst, kannst du dir denken.
Willst du Container platzieren geschiet das über Margin:
PHP Code:
  margin-left: auto;
  margin-right: auto; 
zentriert Container.

PHP Code:
margin-left: 0 
ist linksbündig und
PHP Code:
margin-right: 0 
rechtsbündig. Für Abstand zum Rand dann z.B. 10px nehmen oder mit Paddings arbeiten.
Genau das versuche ich doch oder nicht ?

1div für die Komplette leiste oben mit width = 100% und dann halt der login div...
gebe ich ihn nun aber marfin-left/right: auto und text-align: center, verutscht ja das menü....
06/06/2015 22:58 Lucky´s#13
Unschöne Lösung, aber sollte momentan passen:

HTML Code:
#login{
  color: rgba(0, 216, 255, 0.82);
  position: absolute;
  margin-top: 18px;
  width: 100%;
  text-align: center;
}
Dann bleibt die Schrift mittig und auch dein kleines "Menu" rechts rutscht dir nicht nach unten.