zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Text verticale Ausrichtung

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.12.2013, 12:23
Benutzerbild von hrohmann
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.08.2013
Ort: Dieburg
Beiträge: 13
hrohmann befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.12.2013, 14:00
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von hrohmann Beitrag anzeigen
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'
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 14.12.2013, 14:27
Benutzerbild von hrohmann
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.08.2013
Ort: Dieburg
Beiträge: 13
hrohmann befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von gaby Beitrag anzeigen
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.
Mit Zitat antworten
  #4 (permalink)  
Alt 14.12.2013, 14:32
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard

Das 'float' kommt weg, das hatte ich vergessen zu sagen. :-/
Mit Zitat antworten
  #5 (permalink)  
Alt 14.12.2013, 14:42
Benutzerbild von hrohmann
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.08.2013
Ort: Dieburg
Beiträge: 13
hrohmann befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von gaby Beitrag anzeigen
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
Mit Zitat antworten
  #6 (permalink)  
Alt 14.12.2013, 15:04
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von hrohmann Beitrag anzeigen
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
Mit Zitat antworten
  #7 (permalink)  
Alt 14.12.2013, 15:09
Benutzerbild von hrohmann
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.08.2013
Ort: Dieburg
Beiträge: 13
hrohmann befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von gaby Beitrag anzeigen
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?
Mit Zitat antworten
  #8 (permalink)  
Alt 14.12.2013, 15:18
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

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
Mit Zitat antworten
  #9 (permalink)  
Alt 14.12.2013, 16:02
Benutzerbild von hrohmann
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.08.2013
Ort: Dieburg
Beiträge: 13
hrohmann befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von hrohmann Beitrag anzeigen
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.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 14.12.2013, 16:46
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

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>

Geändert von Manfred62 (14.12.2013 um 16:53 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Wrapper wächst nicht mit, keine Floats maclady CSS 11 10.02.2010 18:30
Wachsende Container Andy CD CSS 13 10.02.2010 14:08
DIV bis GANZ unten burnZ CSS 5 27.07.2008 14:14
Helft mir. Ich habe voll die Leseschwäche nick CSS 12 15.01.2008 21:52
Problem mit div und Höhe deep4 CSS 2 13.11.2007 21:03


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:32 Uhr.