CSS, Tabelle, Text mittig

[5kyy]

Morgen,

ich habe eine DIV Ebene, welche von unten 50px vom Bildschirm Abstand hat und von links ebenfalls 50px. Die Ebene hat eine Höhe von 100px und eine Breite von 500px.

In dieser Ebene will ich nun den beinhalteten Text vertikal mittig darstellen. mit line-height kann ich ab 2 Zeilen nicht arbeiten und manuell gegebene Abstände muss ich auch jedesmal anpassen, wenn er nen Zeilenumbruch macht. Vertical Align geht bei DIVs sowiso nicht.

Ich habe bereits versucht, im DIV eine Tabelle mit 1 Zeile und 1 Spalte zu erstellen. Tabelle selbst 100% Höhe und Breite. Da geht natürlich vertical-align. Allerdings schneidet er mir die Hälfte einfach ab. Die Textzeichen sind abgeschnitten und wenn ich Ränder einstelle, hören die ebenfalls einfach mittendrin auf.

Wie kann ich das einfach und vor allem SAUBER umsetzen, dass mein Text mittig ist.

MfG
5ky

 

[exo]

AW: CSS, Tabelle, Text mittig

Hmm kann man sich das vielleicht irgendwo mal anschauen? Oder bisschen Quellcode wäre auch nicht schlecht

 

[5kyy]

AW: CSS, Tabelle, Text mittig

Moin,

puh. Meine Sachen liegen lokal auf nem Lampp. Werd aber mal den Code posten.

index.php

...
<link rel="stylesheet" href="template.css" type="text/css" />
...
  <div id="test">Text . . .<br>2. Zeile . . .</div>
...

template.css

#test {
  border:1px solid #cccccc;
  bottom:50px; left:50px;
  width:600px; height:150px;
  background-color:#ffffff;
  font-family:sans-serif; font-weight:bold; font-size:24px; text-align:center; color:#000000;
  position:absolute;
}

MfG
5ky

 

[hubspe]

AW: CSS, Tabelle, Text mittig

Meine Sachen liegen lokal auf nem Lampp. Werd aber mal den Code posten.

Das hilft nicht wirklich weiter.

Was aber auffällt:
position:absolute ist i.d.R. keine gute Idee.
height zu vergeben ebenfalls nicht.

Das kann auch ein Problem der falschen Schichtungsreihenfolge auf der z-Achse sein.

Das Beste ist du baust ein Testcase was den Fehler zeigt und läds es hoch.
Oder du stellst hier ein lauffähiges Codebeispiel ein.

Es gibt z.B. auch ein CSS-Tabellenmodell mit display:table/table-row/table-cell; Damit klappts dann auch mit verical-align.

Das versteht allerdings der IE6/7 nicht.
Dem kann man aber durch display:inline; und zoom:1; per Conditional Comment auf die Sprünge helfen. Dadurch erzeugt man ein inline-block-ähnliches Verhalten für den IE.

 

[5kyy]

AW: CSS, Tabelle, Text mittig

Hey,

auf:


habe ich eine einfache php Datei hochgeladen. Die CSS Befehle habe ich ins HTML eingefügt.

In diesem Fall handelt es sich lediglich um eine Class, welche ich dem Link Befehl mitgebe. Der HOVER müsste natürlich erhalten bleiben.

Vielen Dank.

MfG
5ky

 

[hubspe]

AW: CSS, Tabelle, Text mittig

habe ich eine einfache php Datei hochgeladen. Die CSS Befehle habe ich ins HTML eingefügt.

was soll man denn damit anfangen???

Kein Doctype drin, nur ein a-Tag was alleine im Gelände steht.

Du hast doch gepostet, dass das ne div-Ebene sein soll.

Positioniere das div absolute (obwohl position:absolute; wie schon gesagt sicher Unfug ist!) und gib ihm eine Breite und text-align:center;
Das a bekommt display:block;. Dann kannst du es über vertikale paddings
innerhalb des div positionieren.

 

[serverhombre]

AW: CSS, Tabelle, Text mittig

Hallo 5kyy,
eine mögliche Lösung:

<div id="test">
    <span>
      <p>Text ...</p>
      <p>2. Zeile ...</p>
    </span>
 </div>

#test {  width:600px; height:150px; text-align:center; background:#fff;}
#test span { display:table-cell; vertical-align:middle; width:600px; height:150px; }

IE 6/7 kommen damit zwar nicht klar aber naja.........:muede:

 

[5kyy]

AW: CSS, Tabelle, Text mittig

Hey,
sollte erwähnen, dass es AUSSCHLIEßLICH um Firefox geht. Deshalb habe ich mir über DocType auch nicht weiter Gedanken gemacht. Zugegeben habe ich mich mit DocType noch nicht wirklich intensiv beschäftig. Wenn das aber der Lösung beiträgt werde ich dies wohl machen.

Habe eine Aktuelle Version hochgeladen.

Ich habe das A nun in einen DIV gemacht. Das mit den Paddings kann ich jedoch noch nicht nachvollziehen. Auto wie jetzt funktioniert nicht und 50% macht er mir das DIV wesentlich Größer.

MfG
5ky

@
Funktioniert wohl bezüglich dem LINK nicht, oder?

 

[nickido]

AW: CSS, Tabelle, Text mittig

Hallo 5kyy,
eine mögliche Lösung:

<div id="test">
    <span>
      <p>Text ...</p>
      <p>2. Zeile ...</p>
    </span>
 </div>

#test {  width:600px; height:150px; [COLOR=Red]text-align:center;[/COLOR] background:#fff;}
#test span { display:table-cell; vertical-align:middle; width:600px; height:150px; }

IE 6/7 kommen damit zwar nicht klar aber naja.........:muede:

Das halte ich für die Lösung.
Kennst du die Add-ons Firebug und HTML-Validator? Html-Validator hilft dir Fehler zu finden und mit Firebug knnst du sogar Änderungen im Browser machen. Nützliche Dinger.

Viele Grüße

 

[5kyy]

AW: CSS, Tabelle, Text mittig

Hey,

danke euch erstmal für eure Unterstützung. Echt klasse.


Also prinzipiell gehts. Nur mit den Links habe ich noch meine Schwierigkeiten, da ich die komplette Fläche als Link haben wollte, nicht nur den Text.

Firefox und Firebug kenn ich und setz ich auch ein. Dass ich hier ganz einfach auch solche Sachen ändern kann, weiß ich auch. Warum ich es bisher bei diesem Thema noch nicht angewendet habe ... weiß ich ned. Werd ich aber machen.

Wie gesagt, wenn jetzt noch die Links damit funktionierten, dann währ ich wunschlos glücklich.

MfG
5ky

 

[hubspe]

AW: CSS, Tabelle, Text mittig

Hallo 5kyy,
eine mögliche Lösung:

<div id="test">
    <span>
      <p>Text ...</p>
      <p>2. Zeile ...</p>
    </span>
 </div>

#test {  width:600px; height:150px; text-align:center; background:#fff;}
#test span { display:table-cell; vertical-align:middle; width:600px; height:150px; }

IE 6/7 kommen damit zwar nicht klar aber naja.........:muede:

sorry, aber bei dieser Lösung würde das gesamte W3C-Präsidium vor Entsetzen aus dem Fenster springen. :mrorange:

Blockelemente innerhalb von Inline-Elemente sind verboten.
Sowas ist absolutes Anfängerwissen.

Habe eine Aktuelle Version hochgeladen.
Ich habe das A nun in einen DIV gemacht. Das mit den Paddings kann ich jedoch noch nicht nachvollziehen. Auto wie jetzt funktioniert nicht und 50% macht er mir das DIV wesentlich Größer.

*umkipp*

Das div und a bekommen keine Höhe!!
a bekommt deshalb display:block; damit es sich wie ein Blockelement verhält.
Blockelemente werden automatisch so breit wie es geht und nehmen im Gegensatz zu Inline-Elemente vertikale paddings an.

Also nochmal:
Das div wird positioniert, bekommt eine Breite, keine Höhe und text-align:center;
a bekommt display:block, keine Breite, keine Höhe und z.B. padding: 2em 0;

Das funktioniert problemlos in allen wichtigen Browsern!

edit. Das ganze div ist somit anklickbar. Außer im IE6. Der bräuchte per Conditional Comment HasLayout:

* html div a  {
       height:1px;
}

Gewöhn dir doch bitte an zumindest einen Doctype und den Zeichensatz bei Testcases anzugeben. Es ist mühsam das immer wieder da reinzukopieren.

 

[5kyy]

AW: CSS, Tabelle, Text mittig

UPS...

Das von funktioniert halt wirklich... GEIL. Danke

Was für einen DocType empfiehlst du mir? Da gibts ja X-Varianten. Für dieses Thema brauch ich zwar nur den Firefox. Aber für Templates, die auch mit anderen Browsern kompatibel sein sollen habe ich bisher mit:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

hantiert.

Ein Thema hab ich allerdings noch.

Die Höhe es Links wird ja über das 2em gegeben.
Wenn ich jedoch Links mit lediglich EINER Zeile habe, müsste ich 2.5em eintragen, um die gleiche Höhe zu haben. Sofern die Links später mal aus der Datenbank ausgelesen werden, kann man natürlich schlecht sagen, ob er in eine Zeile passt oder ob er einen Umbruch macht. Deshalb hatte ich auch die feste Höhe drin.

Aber schon mal klasse dass es bis hierher funktioniert. War schon kurz vorm aufgeben.

MfG
5ky

 

[serverhombre]

AW: CSS, Tabelle, Text mittig

AW: CSS, Tabelle, Text mittig
Zitat:
Zitat von serverhombre
Hallo 5kyy,
eine mögliche Lösung:

HTML-Code:
<div id="test">
<span>
<p>Text ...</p>
<p>2. Zeile ...</p>
</span>
</div>
Code:
#test { width:600px; height:150px; text-align:center; background:#fff;}
#test span { display:table-cell; vertical-align:middle; width:600px; height:150px; }
IE 6/7 kommen damit zwar nicht klar aber naja.........:muede:

sorry, aber bei dieser Lösung würde das gesamte W3C-Präsidium vor Entsetzen aus dem Fenster springen. :mrorange:

Blockelemente innerhalb von Inline-Elemente sind verboten.
Sowas ist absolutes Anfängerwissen.

... bin dann in diesem Profi-Forum falsch, sorry .

 

[hubspe]

AW: CSS, Tabelle, Text mittig

Was für einen DocType empfiehlst du mir?

Ich schreib das immer so:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

Damit spare ich mir auch den metatag für die Sprache.
Mit dem strict-Doctype bin ich im always-standard-mode.
Bei transitional wäre ich nur im almost-standard-mode

Ein Link dazu.

Wenn ich jedoch Links mit lediglich EINER Zeile habe, müsste ich 2.5em eintragen, um die gleiche Höhe zu haben. Sofern die Links später mal aus der Datenbank ausgelesen werden, kann man natürlich schlecht sagen, ob er in eine Zeile passt oder ob er einen Umbruch macht.

Du könntest den einzeiligen o. zweizeiligen Links ne Klasse geben und da die abweichende Formatierung fürs padding hinterlegen.

Hast du denn mehrere Links in dem Container??
Die gehörten dann in eine ul.

Wenn die immer gleichhoch sein sollen, egal ob ein oder zweizeilig, käme vielleicht das CSS-Tabellenmodell in Frage (Tutorial dazu)

Aber das ist nur geraten, da ich nicht weiß wie dein komplettes Layout aussieht.

... bin dann in diesem Profi-Forum falsch, sorry .

du bist nicht falsch, sofern du lernbereit bist.

 

[5kyy]

AW: CSS, Tabelle, Text mittig

COOOL

schon wieder viel gelernt heute. Denke dein Link ist gold wert. Die Sache werd ich mir genauer ansehen.

Derzeit gehts zwar wirklich über den ganzen Bildschirm lediglich um 2 Links, welche ich auch vorgeben kann über EM, aber die späteren Links, wenns an die Datenbank geht, werd ich dann über die Tabellenlösung machen müssen.

Denke ich bin für heute bedient.

DANKESCHÖN euch ALLEN!!!

MfG
5ky