XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Text verticale Ausrichtung (http://xhtmlforum.de/showthread.php?t=70407)

hrohmann 14.12.2013 12:23

Text verticale Ausrichtung
 
Hallo und guten Morgen,

seit einiger Zeit versuche ich mich in CSS mit mässigem Erfolg. Da fehlt wohl noch Verständnis und Übung. Aber jetzt bin ich in Rente, da habe ich mehr Zeit.

Ich habe auch so meine Probleme mit dem verticalen Ausrichten von Text in einem DIV-Element. HTML-Code und CSS hänge ich hinten an. Ist eigentlich nichts besonderes. Ich habe einen Container mit zwei linksfloaten Divs. Im linken Div ist ein Bild und im rechten einen Text. Mir geht es um diesen Text. Ich hätte den gerne genau in der verticalen Mitte. Egal was ich anstelle, der bewegt sich kein Pixelchen. Deshalb die Frage an die Experten, ob ich verzweifelt aufgeben muss, oder ob es doch irgendwie geht, diesen Text zu bewegen.

Der Code:

<style type="text/css">

body {
margin: 0px;
padding: 0px;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
}

p {
color: #787070;
}

#container {
margin-right: auto;
margin-left: auto;
margin-top: 10px;
width:940px;
height: auto;
background:#fff;
}

.eins {
width:41px;
height: 60px;
background:#fff;
float:left;
margin: 1px 3px 0px 0px;
border: 1px dashed black;
}
.zwei {
width:220px;
height: 60px;
background:#fff;
float:left;
margin: 1px 3px 0px 0px;
border: 1px dashed black;
}

}

</style>
</head>

<body>

<div id="container">

<div class="eins"><img src="dieburg.gif"> </div>
<div class="zwei"><p>Das ist der TEXT</p></div>

</div>

</body>

MFG HR

gaby 14.12.2013 14:00

Zitat:

Zitat von hrohmann (Beitrag 535707)
Ich habe einen Container mit zwei linksfloaten Divs. Im linken Div ist ein Bild und im rechten einen Text. Mir geht es um diesen Text. Ich hätte den gerne genau in der verticalen Mitte.


Hallo,

Gib den beiden DIVs 'display: table-cell' und 'vertical-align: middle'

hrohmann 14.12.2013 14:27

Zitat:

Zitat von gaby (Beitrag 535709)
Hallo,

Gib den beiden DIVs 'display: table-cell' und 'vertical-align: middle'

Hallo und danke für die Antwort!

Ich habe jetzt folgendes getan:

.eins {
width:41px;
height: 60px;
background:#fff;
float:left;
margin: 1px 3px 0px 0px;
border: 1px dashed black;
display: table-cell;
vertical-align: middle;
}
.zwei {
width:220px;
height: 60px;
background:#fff;
float:left;
margin: 1px 3px 0px 0px;
border: 1px dashed black;
display: table-cell;
vertical-align: middle;
}

War das so gemeint? Aber da tut sich nix. Gar nix! Leider.

gaby 14.12.2013 14:32

Das 'float' kommt weg, das hatte ich vergessen zu sagen. :-/

hrohmann 14.12.2013 14:42

Zitat:

Zitat von gaby (Beitrag 535713)
Das 'float' kommt weg, das hatte ich vergessen zu sagen. :-/

Super Gaby, dass es an dem "float" hing, hätte ich nicht gedacht.

Eines habe ich am Anfang verschwiegen, dass ich sechs DIV´s nebeneinander habe, nicht nur zwei. Hätte ich wohl gleich angeben sollen. Das hielt ich aber für nicht so wichtig. Habe mich da wohl getäuscht.

Wie denn das dann mit dem float aus?

MfG Hans Rohmann

gaby 14.12.2013 15:04

Zitat:

Zitat von hrohmann (Beitrag 535714)
Eines habe ich am Anfang verschwiegen, dass ich sechs DIV´s nebeneinander habe, nicht nur zwei.

Wie denn das dann mit dem float aus?

Es gibt mehrere Möglichkeiten, Container nebeneinander darzustellen. Hier sind die gebräuchlichsten:
mit 'float: left' oder 'float:right' oder
mit 'display: inline' oder
mit 'display: inline-block' oder
mit 'display: table-cell'

Was bei dir in frage kommt, hängt von dem gewünschten Layout ab. Bitte lade deine Problemdatei (bei einem Freehoster) hoch, und poste dann den Link.

Grüße
gaby

hrohmann 14.12.2013 15:09

Zitat:

Zitat von gaby (Beitrag 535717)
Es gibt mehrere Möglichkeiten, Container nebeneinander darzustellen. Hier sind die gebräuchlichsten:
mit 'float: left' oder 'float:right' oder
mit 'display: inline' oder
mit 'display: inline-block' oder
mit 'display: table-cell'

Was bei dir in frage kommt, hängt von dem gewünschten Layout ab. Bitte lade deine Problemdatei (bei einem Freehoster) hoch, und poste dann den Link.

Grüße
gaby

Tut mir leid, aber ich stehe schon wieder auf dem berühmten Schlauch. Von einem Freehoster habe ich noch nie etwas gehört. Wenn sollte man denn da nehmen?

Manfred62 14.12.2013 15:18

wenn du noch keinen eigenen Hoster hast, nimmst halt einen Freehoster:
Free Hosting
bplaced - Webspace & Webhosting // 2GB Freehost :: The place for your webspace

zumindest diese beiden sind werbefrei

hrohmann 14.12.2013 16:02

Zitat:

Zitat von hrohmann (Beitrag 535718)
Tut mir leid, aber ich stehe schon wieder auf dem berühmten Schlauch. Von einem Freehoster habe ich noch nie etwas gehört. Wenn sollte man denn da nehmen?

So sollte das alles einmal aussehen:

http://hrohmann.alfahosting.org/test.html

Die mit "eins" bezeichneten DIVs bekommen immer eine Grafik. Die beiden anderen nur Text bzw. einen Link.

Da fällt mir noch ein, dass ich ja diese "Tabelle" als Tabelle unter Sepulcretum-Friedhof schon habe. Ich möchte aber keine Tabelle mer haben, sondern alles mit DIVs.

Manfred62 14.12.2013 16:46

dein html gibt keinen Sinn (Semantik). Einfach nur div statt table haben zu wollen ist Unsinn. In welchem Zusammenhang stehen denn 1, 2 und 3? Was ist/heisst z.B.:
Code:

Dieburg • D • Juli 2013
für das img braucht man imho kein extra html (div, p oder sonst was)

ein Vorschlag zum html, der Rest in css ist einfach:
HTML-Code:

<dl>
        <dt><img src="dieburg.gif" alt="Logo">Friedhof der Stadt Dieburg</dt>
        <dd>Dieburg • D • Juli 2013</dd>
</dl>



Alle Zeitangaben in WEZ +2. Es ist jetzt 14:22 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023