CSS Text unten zentrieren, wie?

Antoniker · 13. Mai 2008

Text und Bild zentrieren, wie?

Hi Leute,
leider ist mein CSS nicht das gelbe vom Ei, jedoch versuche ich es ständig zu erweitern (auch wenn nicht immer viel Zeit dafür vorhanden ist

).
Ich habe jetzt das Problem, dass ich ein Bild habe, welche im Hintergrund liegt und ich darüber einen Text schreiben möchte.
Der Text passt, jedoch bekomme ich den Text nicht nach unten

Er ist über dem Bild, er ist zentriert, aber leider noch immer oben.
Mache ich etwas falsch?
Die Funktion hierfür lautet doch "vertical-align" oder etwa nicht? (Habe auf http://www.css4you.de/ nachgeforscht, ich mache etwas falsch, finde den Fehler jedoch nicht...)

Hier mein Code:

HTML:

<div style="BACKGROUND-IMAGE: url(Bilddatei); WIDTH: 121px; HEIGHT: 270px; 
FLOAT: left; MARGIN-RIGHT: 5px; TEXT-ALIGN: center; VERTICAL-ALIGN: bottom;"> 
	test
</div>

claW. · 13. Mai 2008

AW: [CSS] Text unten zentrieren, wie?

Die Eigenschaft vertical-align beeinflusst die vertikale Ausrichtung von Text in einer Zeile, bezogen auf das Elternelement, das ein Inline-Element sein muß.

div-blöcke sind block-elemente, du müsstest die eigenschaft display also auf inline(-block) setzen.

Antoniker · 13. Mai 2008

AW: [CSS] Text unten zentrieren, wie?

Hi,
danke für deine Antwort. Versucht habe ich nun DISPLAY: inline und DISPLAY: inline-block.
Beides hat nicht funktioniert, daher habe ich mich mal gleich dazu umentschlossen es wie folgt zu machen: (und so gefällt es mir jetzt besser)

HTML:

<div style="FLOAT: left; MARGIN-RIGHT: 5px; BORDER: 1px solid #8b4513; PADDING: 1px 1px 1px 1px">
	<div style="BACKGROUND-IMAGE: url(Bilddatei); WIDTH: 121px; HEIGHT: 270px;"> </div>
	<div style="WIDTH: 121px; TEXT-ALIGN: center; MARGIN-TOP: 1px; BACKGROUND: #cd853f; FONT-SIZE: 8pt;">
		Lorem Ipsum, ...
	</div>
</div>

Trotzdem danke für deine Bemühungen.

mfg Michael

Kampfgnom · 13. Mai 2008

AW: [CSS] Text unten zentrieren, wie?

Deine Lösung mit dem Wrapper-Div ist schon sehr richtig.
Allerdings ist der richtige Weg zu zentrieren margin-left: auto; und margin-right: auto;
Dann ist nicht der Inhalt des Divs Zentriert sondern der Container selber.

Antoniker · 13. Mai 2008

AW: [CSS] Text unten zentrieren, wie?

Hi Kampfgnom,
tut mir leid, aber ich weiß nicht was ein Wrapper-Div ist. Aber ich finds gut das du mich belobigst

Wo soll ich die Werte auf Auto stellen? Also in welchen der nun 3 Container?

Der Große soll ja die beiden zusammenhalten, der erste kleine ist das Bild und der 2te kleine ist dann der Kommentar dazu (soll für meine Homepage werden)

Bitte um Erklärung, danke

mfg Michael

Darii · 13. Mai 2008

AW: [CSS] Text unten zentrieren, wie?

Ich würde dir übrigens mal empfehlen, die CSS-Eigenschaften klein zu schreiben, könnte mit XML-Dateien evtl zu Problemen führen. Kannst dich zumindest nicht drauf verlassen, dass jeder Browser das einfach so frisst.

claW. · 14. Mai 2008

AW: [CSS] Text unten zentrieren, wie?

Antoniker schrieb:
Wo soll ich die Werte auf Auto stellen? Also in welchen der nun 3 Container?

das gehört in den container den du zentrieren willst. z.b. wenn du ein design machst, welches max 700px breit ist und nicht größer werden soll, zudem auch noch zentriert auf dem bildschirm erscheinen soll, nimmst du am einfachsten und elegantesten folgendes:

Code:

<head>
<style type="text/css">
#page {
  width: 700px;
  margin: 0px auto;
}
</style>
</head>
<body>
  <div id="page">
    ...content...
  </div>
</body>

mit diesem div stellst du dann sicher, dass der inhalt nicht über 700px breit ist (ausnahmen bestätigen die regeln) und alles darin zentriert dargestellt wird.

edit:

"alles darin zentriert" ist falsch, besser heißt es "der container zentriert dargestellt wird"

Antoniker · 14. Mai 2008

AW: [CSS] Text unten zentrieren, wie?

Hi,
ok claW3581, leuchtet ein

Werde ich gleich umschreiben!

@Darii:
Ich versuch immer meinen Code übersichtlich zu halten, wusste aber nicht das CSS-Befehle kleingeschrieben werden

Danke für die Info

mfg Michael

Backslash · 14. Mai 2008

AW: [CSS] Text unten zentrieren, wie?

Gerade wegen der Übersichtlichkeit solltest du deinen CSS Code eigentlich immer in eine externe Datei auslagern. (nur weil es jetzt immer als style="" in den HTML-Tags stand.

Darii · 14. Mai 2008

AW: [CSS] Text unten zentrieren, wie?

Antoniker schrieb:
Ich versuch immer meinen Code übersichtlich zu halten, wusste aber nicht das CSS-Befehle kleingeschrieben werden

Werden sie auch nicht, hatte eben einen Denkfehler... vergiss also was ich geschrieben habe.

PS: Ich finde es trotzdem groß unübersichtlicher.

Antoniker · 14. Mai 2008

AW: [CSS] Text unten zentrieren, wie?

Hi Backslash,
natürlich lagere ich das noch in eine externe CSS-Datei aus. Weiß ja auch das das mehr Vorteile mit sich bringt

Aber wenn ich an einem kleinen Projekt sitze, fange ich immer so an und lager das dann irgendwann in ein internes CSS um und lager es anschließend (wenn dann mehrere Dateien diese verwenden sollen bzw. wenn es dann ins Internet kommt o.ä.) in eine externe CSS-Datei aus

Trotzdem Danke ^^

@Darii:
Also doch egal?
Ich schreibe die CSS-Befehle ja auch nur im style="" groß, damit ich Attribute und Parameter leichter und schneller erkennen kann, und anschließend kommt es ja eh in ein externen CSS-File und was da dann drinn steht (Groß-/Kleinschreibungs-mäßig) ist mir barre

mfg Michael

Darii · 14. Mai 2008

AW: [CSS] Text unten zentrieren, wie?

Ja ist egal. Bist auf die Sachen, die nicht CSS betreffen. Also Elementnamen, Klassen, IDs, etc. Hatte da was durcheinandergebracht.

Antoniker · 14. Mai 2008

AW: [CSS] Text unten zentrieren, wie?

Irren ist menschlich, also keine Sorge

Außerdem habe ich ein neues Problem bzgl CSS.
Ich habe ein Bild, dessen Größe bekannt ist, und ich möchte per a:hover das das Bild genau darüber in Originalgröße (etwa 50-70% größer) erscheint. Ich habe nun auch schon etwas, doch leider bin ich nicht zuhause und kann daher noch nichts dazu posten, vielleicht später.

Hoffe ihr könnt mir sagen was ich falsch mache, da ich das Bild einfach nicht richtig positionieren kann.

EDIT:
Hi, ok, ich habe es doch wieder ein wenig umgebastelt und möchte jetzt das große Bild links daneben anzeigen. Also auf gleicher Höhe, aber eben links davon.
Hat jemand eine Idee? Ich poste auch meinen bisherigen Code wenn ihr den braucht.

Danke im Voraus!

mfg Michael

Antoniker · 16. Mai 2008

Hi Leute,
bevor ich einen neuen Thread aufmache, mache ich liebe einen Doppelpost um hinzuweißen das ich vor dem nächsten Problem stehe

Ich möchte ein Bild über ein anderes zentrieren, also per Mousehover. Soweit bin ich ja schon. Seht selbst:

HTML:

<style type="text/css">
#picture-hover
{
	BORDER: 1px solid #8b4513;
	PADDING: 1px;
}

#picture-hover a
{
	cursor: default;
	text-decoration: none;
}

#picture-hover img
{
	border: 0px;
	vertical-align: top;
}

#picture-hover .preview
{
	display: none;
}

#picture-hover a:hover .preview
{
	display: block;
	position: absolute;
	z-index: 1;
	width: auto;
	border: 1px solid #8b4513;
	background-color: white;
	padding: 1px;
}

#picture-hover #comment
{
	TEXT-ALIGN: center; 
	MARGIN-TOP: 1px; 
	BACKGROUND: #cd853f; 
	FONT-SIZE: 8pt;
}

</style>
<div style="FLOAT: right; MARGIN-LEFT: 5px;" id="picture-hover">
	<a href="#"><img src="thumb.jpg"><img src="big.jpg" class="preview"></a>
	<div style="WIDTH: 197px;" id="comment">
		Lorem ipsum, und so weiter...
	</div>
</div>

Aber beim besten Willen, ich habe keine Ahnung wie ich das Bild über das angezeigte darüber zentrieren soll, da ja die Größe des Bildes variabel ist.

Die Idee für solch ein Mousehover habe ich von hier bekommen: http://host.sonspring.com/hoverbox/
Doch auch hier ist alles mit gleichen, fixen Größen gebaut, was jedoch bei mir nicht möglich ist.
Hoffe ihr könnt mir helfen.

claW. · 17. Mai 2008

ich poste einfach mal den css-code, dadurch wirst du durchaus schlauer als durch 100 sätze. eigenschaften wie float o.ä. kannst du ja ganz einfach unter css4you.de nachsehen.

Code:

/* =Hoverbox Code
----------------------------------------------------------------------*/

.hoverbox
{
	cursor: default;
	list-style: none;
}

.hoverbox a
{
	cursor: default;
}

.hoverbox a .preview
{
	display: none;
}

.hoverbox a:hover .preview
{
	display: block;
	position: absolute;
	top: -33px;
	left: -45px;
	z-index: 1;
}

.hoverbox img
{
	background: #fff;
	border-color: #aaa #ccc #ddd #bbb;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	padding: 2px;
	vertical-align: top;
	width: 100px;
	height: 75px;
}

.hoverbox li
{
	background: #eee;
	border-color: #ddd #bbb #aaa #ccc;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	display: inline;
	float: left;
	margin: 3px;
	padding: 5px;
	position: relative;
}

.hoverbox .preview
{
	border-color: #000;
	width: 200px;
	height: 150px;
}

Antoniker · 17. Mai 2008

Sehr schlau, mir den Quelltext zu posten den ich als Vorlage genommen habe um das ganze bei mir aufzubauen.
Doch ich habe das Problem das ich keine fixe-Bildgröße habe, sprich sie ist Variabel.
Und in der Hoverbox ist sie fix und von daher auch so geschrieben.

Ich meine folgendes:

HTML:

.hoverbox a:hover .preview
{
	display: block;
	position: absolute;
	top: -33px;
	left: -45px;
	z-index: 1;
}

Und hier liegt mein Problem. Wenn ich top oder left so angebe, kommt das in den Negativen Bereich der ganzen Seite. Verstehst du was ich meine?

claW. · 17. Mai 2008

dann füg sie doch dynamisch zu den bildern in das style attribut von jedem bild hinein

Antoniker · 17. Mai 2008

und wie mache ich das?
immerhin ist a:hover eine Pseudofunktion bei der ich nicht weiß, wie ich das in das Style-Attribut bringen soll. Noch dazu wüsste ich dabei trotzdem nicht, wie ich die Werte angeben soll. Immerhin wird da nämlich die Größe des Browserfensters genommen und nicht von der aktuellen Position

mfg Michael

claW. · 17. Mai 2008

wenn du php am laufen hast, sollte das ohne weiteres machbar sein die breite/höhe und was noch dazugehört ins jeweilige style-tag unterzubringen.

hast du es auch schonmal mit %-angaben versucht?

CSS Text unten zentrieren, wie?

Lt. Junior Grade

claW.

Gast

Lt. Junior Grade

Lt. Commander

Lt. Junior Grade

Lt. Junior Grade

claW.

Gast

Lt. Junior Grade

Captain

Lt. Junior Grade

Lt. Junior Grade

Lt. Junior Grade

Lt. Junior Grade

Lt. Junior Grade

claW.

Gast

Lt. Junior Grade

claW.

Gast

Lt. Junior Grade

claW.

Gast

Ähnliche Themen