• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Texte perfekt untereinander in die Mitte setzen?

M

MinO

Neues Mitglied
Hallo,

ich bin hier am verzweifeln, ich Google und Google und Google und mach das und das, aber nichts will wirklich funktionieren. Mein Problem ist folgendes: Ich möchte einen Text perfekt in die mitte machen so das er untereinander ist, mit einem normalen <center> ist es nicht gemacht da der es sich ja an die Satzgröße anpasst. Also bleibt nur Css übrig, aber ich kenne mich damit überhaupt nicht aus. Ich wäre euch so dankbar wenn ihr mir dabei helfen könntet was ich in die Css eintragen muss und wie ich es ausführen kann.

So soll es am ende aussehen:
 
Witschi262 schrieb:
Um eine Website erstellen zu können, mit einem anständigen Design, wirst du um CSS nicht herumkommen.
Zum Vergrößern anklicken....

Wir reden ja nicht vom Design, dafür habe ich einen Designer. Ich möchte ja nur den Text in der mitte haben:
xxx Paidbanner
xxx Paidlinks aufgerufen
xxx Autosurfs
xxx Bettelaufrufe

MinO schrieb:
Ich möchte einen Text perfekt in die mitte machen so das er untereinander ist
Zum Vergrößern anklicken....

Liebe Grüße.
 
Zuletzt bearbeitet:
Gib den Listenelementen eine feste Breite und
Code: 
li {margin: 0 auto;}
, dann werden sie zentriert.
 
_Thor_ schrieb:
Gib den Listenelementen eine feste Breite und
Code: 
li {margin: 0 auto;}
, dann werden sie zentriert.
Zum Vergrößern anklicken....

Das Problem ist das wenn ich das mache, wird mein anderer Content auch verschoben :), ich möchte ja nur diesen einen Text wo im Screen zusehen ist in der Mitte haben.

Also dieser Text soll in der mitte sein so wie im Screen:
xxx Paidbanner
xxx Paidlinks aufgerufen
xxx Autosurfs
xxx Bettelaufrufe

CSS:
PHP: 
body {background: url(../images/bg.jpg) repeat-x #3273b0; font-family: arial, helvetica, sans serif; font-size: 11px; color: #070707; margin: 0; text-align: center;}

a, a:active, a:visited {color: #444444;}
a:hover {text-decoration: none;}

form, p, ul {margin: 0;}

input {border: 1px solid #adadad; background: #f9f9f9; color: #070707; margin: 1px;}

/*Hauptseite*/

#wrapper{position: relative; width: 963px; margin: auto;}
#header {background: url(../images/header.gif) no-repeat; position: relative; top: 0px; left: 0px; height: 211px;}
#logo {display: block; position: absolute; top: 55px; left: 160px; width: 300px; height: 55px;}
#topLogin {background: url(../images/topLoginBg.gif); position: absolute; top: 11px; left: 432px; width: 502px; height: 24px;}
#topLoginUname {background: none; position: absolute; top: 2px; left: 116px; border: 0; width: 115px; height: 15px;}
#topLoginPword {background: none; position: absolute; top: 2px; left: 254px; border: 0; width: 115px; height: 15px;}
#topLoginSubmit {background: none; position: absolute; top: 2px; left: 388px; border: 0; width: 47px; height: 18px; color: #484848; font-weight: bold;}
#rotator {position: absolute; top: 45px; left: 469px; width: 465px; height: 60px;}
#GJP_1 {position: absolute; top: 136px; left: 377px; width: 138px; height: 35px; text-align: center; font-size: 14px; color: #FFF;}
#GJP_2 {position: absolute; top: 136px; left: 524px; width: 138px; height: 35px; text-align: center; font-size: 14px; color: #FFF;}
#GJP_3 {position: absolute; top: 136px; left: 671px; width: 138px; height: 35px; text-align: center; font-size: 14px; color: #FFF;}
#GJP_4 {position: absolute; top: 136px; left: 817px; width: 138px; height: 35px; text-align: center; font-size: 14px; color: #FFF;}
#nav_top {position: absolute; top: 180px; left: 5px; width: 953px; height: 29px;}
ul.nav {list-style-type: none; padding: 0; margin: 0;}
ul.nav li {float: left; display: inline;}
a.topButton, a.topButton:active, a.topButton:visited {background: url(../images/topButton.gif); display: block; line-height: 29px; height: 29px; width: 93px; color: #3e90dd; text-align: center; text-decoration: none; padding: 0;}
a.topButton:hover {background: url(../images/topButtonOver.gif); color: #fff;}

#main {background: url(../images/mainBg.gif) repeat-y; position: relative; top: 0px; left: 0px; width: 963px;}
#content {position: relative; top: 0px; left: 0px; width: 963px; float: left; margin: 5px 0 0 0;}
#left_column {position: relative; top: 0px; left: 11px; width: 162px; float: left;}
#center_column {position: relative; top: 0px; left: 19px; width: 602px; float: left;}
#right_column {position: relative; top: 0px; left: 27px; width: 162px; float: left;}
#footer {background: url(../images/footer.gif) no-repeat; position: relative; top: 0px; left: 0px; width: 963px; height: 42px; padding: 8px 0; color: #fff;}
#footer a, #footer a:active, #footer a:visited, #footer a:hover {font-size: 10px; color: #fff;}

/* Alle Klassen */
.displaynone {display: none;}
.clear {clear: both;}
.hide {position: absolute; top: -20px; left: -20px;}
.box_big_top {background: url(../images/contentTop.gif); width: 590px; height: 24px; text-align: left; padding: 7px 0px 0px 12px;}
.box_big_top h3 {margin: 0; font-size: 14px; color: #fff;}
.box_big_mid {background: url(../images/contentMid.gif); width: 572px; text-align: left; padding: 0px 15px;}
.box_Slot_mid {background: url(../images/contentslot.gif); width: 572px; text-align: left; padding: 0px 1px;}
.box_big_foot {background: url(../images/contentFoot.gif); width: 602px; height: 15px; margin: 0 0 5px 0;}
.box_small_top {background: url(../images/navTop.gif); width: 152px; height: 24px; padding: 7px 0px 0px 10px; text-align: left;}
.box_small_top h3 {margin: 0; font-size: 14px; color: #FFF;}
.box_small_mid {background: url(../images/navMid.gif); width: 162px; text-align: left; padding: 0; line-height: 25px;}
.box_small_mid a, .box_small_mid a:visited {background: url(../images/arrow.gif) no-repeat left; display: block; width: 140px; line-height: 24px; padding: 1px 2px 0 14px; text-decoration: none; color: #444444; margin: 0 0 0 4px;}
.box_small_mid a:hover {font-weight: bold; color: #3273b0;}
.box_small_foot {background: url(../images/navFoot.gif); width: 162px; height: 46px; margin: 0 0 10px 0;}
.box_counter_mid {background: url(../images/counter.gif); width: 162px; text-align: left; padding: 0px; line-height: 25px;}
.box_slot_foot {background: url(../images/slotFoot.gif); width: 602px; height: 15px; margin: 0 0 5px 0;}
 
Zuletzt bearbeitet:
Dann musst du den anderen Inhalt eben daran anpassen.

Text wird nunmal mit
Code: 
text-align: center;
zentriert und Blockelemente mit
Code: 
margin: 0 auto;

Wenn dadurch andere Elemente verschoben werden, musst du die eben anpassen. Da führt kein Weg dran vorbei.
 
_Thor_ schrieb:
Dann musst du den anderen Inhalt eben daran anpassen.

Text wird nunmal mit
Code: 
text-align: center;
zentriert und Blockelemente mit
Code: 
margin: 0 auto;
Wenn dadurch andere Elemente verschoben werden, musst du die eben anpassen. Da führt kein Weg dran vorbei.
Zum Vergrößern anklicken....

Okay, es wäre ja eigentlich dann möglich einfach eine neue zeile in die Css einzufügen mit diesen werten und dann einfach mit <div class="xxx"> ausführen? Richtig?

Wenn ja wie füge ich das dann in die Css ein?

So?:
Code: 
#xxx {text-align: center;margin: 0 auto;}
Wenn ja, da passiert nichts.


Das alles sieht nun bei mir so aus:

In der Css
Code: 
#Nickpage {text-align: center; margin: 0 auto;}
dort wo der Text ist:
Code: 
<div class="Nickpage">
<font face=Verdana size=2><img src="http://www.html.de/images/gt.gif"/> <font 

color="red"><b><?=$np['klicks'];?></b></font> Paidbannerklicks</font>
<br>


<font face=Verdana size=2><img src="http://www.html.de/images/gt.gif"/> <font 

color="red"><b><?=$np['textlinks'];?></b>
</font>Paidlinks aufgerufen</font>

<br>
<font face=Verdana size=2><img src="http://www.html.de/images/gt.gif"/> <font 

color="red"><b><?=$np['surfviews'];?></b></font> Autosurfs</font>

<br>

<font face=Verdana size=2><img src="http://www.html.de/images/gt.gif"/> <font 

color="red"><b><?=$np['angebettelt'];?> </b></font> Bettelaufrufe</font>
</div>
 
In deinem CSS sprichst du ja auch Elemente mit der ID Nickpage an, in deinem HTML steht aber ein div mit der Klasse Nickpage. Da kann auch nichts passieren.

Dein HTML ist auch alles andere als optimal, veraltete Elemente und die auch noch falsch eingesetzt, oder was macht es für einen Sinn, die Schriftgröße für ein Bild zu verändern, wenn dieses nichtmal einen Alternativtext besitzt, der Formatiert werden könnte?

<font>, <b> und <br> nutzt du als Layoutmittel, Layout wird aber mit CSS gemacht, nicht mit HTML. Diese Elemente haben also nichts in deinem HTML zu suchen.
 
Auch wenn ich es in der Css so umänder:
Code: 
#NTextPage {text-align: center; margin: 0 auto;}
und in die Nickpage so:
Code: 
<div class="NTextPage">
lalala
lalala
lalala
</div>
Es passiert nichts mit dem text.
 
Hallo.

_Thor_ hat es bereits gesagt, im CSS hast du eine ID NTextPage.
Im HTML hat du eine class NTextPage da kann nichts passieren.

Entscheide dich bitte ob du eine ID oder class verwenden willst.

Gruss
Elroy
 
Elroy schrieb:
Hallo.

_Thor_ hat es bereits gesagt, im CSS hast du eine ID NTextPage.
Im HTML hat du eine class NTextPage da kann nichts passieren.

Entscheide dich bitte ob du eine ID oder class verwenden willst.

Gruss
Elroy
Zum Vergrößern anklicken....

Okay, ich wollte mit dem <div class="NTextPage"> dem Text einfach klar machen das er dieses in der Css zu berücksichtigen hat bzw. auszuführen hat.. Sagen wir mal ich habe das hier in der Css:
Code: 
#NTextPage {text-align: center; margin: 0 auto;}
Dann mache ich doch mit:
Code: 
<div class="NTextPage">
lalala
lalal
alaa
</div>
Dem text in der Datei lalala.Html klar das er das auszuführen hat, oder wie mache ich das sonst? Meine lalala.Html ist ja kein Hellseher und weiß automatisch das er genau das jetzt ausführen soll ohne das man ihm einen befehl dazu gibt.
Ich versteh nur Bahnhof.
 
Nein machst du nicht. Es gibt in CSS verschiedene Selektoren, die verschiedene Elemente ansprechen. Wenn dir der Unterschied zwischen einer ID und einer Klasse noch nicht klar ist, fehlen dir eindeutig wichtige Grundlagen, mit denen du dich vertraut machen solltest, bevor du weiter machst. Finden kannst du diese Grundlagen auf folgender Seite CSS | Webdesign mit XHTML und CSS.

Lies sie dir durch, probier etwas herum und wenn du Fragen hast, frag.
 
_Thor_ schrieb:
Nein machst du nicht. Es gibt in CSS verschiedene Selektoren, die verschiedene Elemente ansprechen. Wenn dir der Unterschied zwischen einer ID und einer Klasse noch nicht klar ist, fehlen dir eindeutig wichtige Grundlagen, mit denen du dich vertraut machen solltest, bevor du weiter machst. Finden kannst du diese Grundlagen auf folgender Seite CSS | Webdesign mit XHTML und CSS.

Lies sie dir durch, probier etwas herum und wenn du Fragen hast, frag.
Zum Vergrößern anklicken....

Vielen dank für den Link, der hat mir echt sehr weitergeholfen, nun besteht das problem wo ich schon gesagt habe das die funktion Center nicht genau Untereinander macht sondern nach Texten anpasst und diese so in die mitte macht. Nun sieht es so aus:

 
Das kommt daher, weil du den Text zentriert hast, du müsstest aber das Element in dem der Text steht mit margin zentrieren.

Du hast dort eine Aufzählung, also verwendest du eine Liste
HTML: 
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>
Der Text in den Listenelementen ist standardmäßig nach links ausgerichtet, also musst du nur noch die Liste zentrieren. Das machst du, in dem du der Liste eine feste Breite gibst und diese dann mit margin: 0 auto; zentrierst.
 
In diesem fall:
HTML: 
<div class="NTextPage">
<ul>
<font face="Verdana" size="2">
<img src="images/gt.gif"/>
<font color="red"><b><?=$np['klicks'];?></b></font> Paidbannerklicks</font>

<br>
<font face="Verdana" size="2">
<img src="images/gt.gif"/>
<font color="red"><b><?=$np['textlinks'];?></b></font> Paidlinks aufgerufen</font>

<br>
<font face="Verdana" size="2">
<img src="images/gt.gif"/>
<font color="red"><b><?=$np['surfviews'];?></b></font> Autosurfs</font>

<br>
<font face="Verdana" size="2">
<img src="images/gt.gif"/>
<font color="red"><b><?=$np['angebettelt'];?> </b></font> Bettelaufrufe</font>
</ul>
</div>

und die Css:
Code: 
[FONT=monospace][/FONT].NTextPage {text-align: center; margin: 0 auto;}

Aber is immernoch so das es nicht perfekt untereinander ist.
Also immernoch so wie auf dem Screen oben.
 
Das div kann weg, da es nichts gruppiert, <font> gehört auch nicht ins HTML, das ist Sache von CSS, <b> hat ebenfalls keine semantische Bedeutung, Text in fetter Schrift wird durch CSS erzeugt, ausserdem hat deine Liste keine Listenelemente und in deinem CSS hast du noch das text-align drin.
 
_Thor_ schrieb:
Das div kann weg, da es nichts gruppiert, <font> gehört auch nicht ins HTML, das ist Sache von CSS, <b> hat ebenfalls keine semantische Bedeutung, Text in fetter Schrift wird durch CSS erzeugt, ausserdem hat deine Liste keine Listenelemente und in deinem CSS hast du noch das text-align drin.
Zum Vergrößern anklicken....

So alles übernommen, wenn ich nun aber das text-align entferne wird die Css wieder nicht ausgeführt :-(
 

Anhänge

  • okk.PNG
    okk.PNG
    7,7 KB · Aufrufe: 5
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben