WinFuture-Forum.de: Text Per Html/css Zentrieren. - WinFuture-Forum.de

Zum Inhalt wechseln

Nachrichten zum Thema: Entwicklung
Seite 1 von 1

Text Per Html/css Zentrieren.


#1 Mitglied ist offline   Islander 

  • Gruppe: aktive Mitglieder
  • Beiträge: 621
  • Beigetreten: 29. Juli 03
  • Reputation: 0
  • Geschlecht:Männlich
  • Wohnort:Las Palmas

geschrieben 13. Juli 2006 - 00:32

Halli hallo.

Ich habe einen Text in einem kleinen Dokument, in etwa folgendes:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Seite</title>
</head>
<body>

Dies ist ein Beispieltext, könnte ja aber auch eine Textbox oder ein anderes Objekt sein.

</body>
</html>


Ich möchte das dieser Text perfekt zentriert auf dem Bildschirm erscheint, bzw. im Browser. Ich habe schon stundenlang mit den Attributen von CSS herumgespielt, Position hier, Absolut da... Prozente dort... aber es klappt einfach nicht. Entweder der Text ist nur vertikal zentriert aber oben am Screen, oder er ist vertikal leicht verschoben weil die Mitte angeblich am Textbeginn ist... aber genau funktioniert es nie.

Geht das überhaupt? Wieso wurde nicht ein ganz simples und einfaches "horizontal-align"-Attribut in den CSS eingebaut? Das "text-align" auf jeden Fall halte ich für absolut nutzlos. Wie bekomme ich das nun hin? Vielen Dank im Voraus für die Antwort.
0

Anzeige



#2 Mitglied ist offline   Slim01 

  • Gruppe: Verbannt
  • Beiträge: 316
  • Beigetreten: 01. Juni 06
  • Reputation: 0
  • Wohnort:Koblenz
  • Interessen:Informatik

geschrieben 13. Juli 2006 - 02:34

Das gehört hier hin.
0

#3 Mitglied ist offline   Witi 

  • Gruppe: aktive Mitglieder
  • Beiträge: 5.701
  • Beigetreten: 13. Dezember 04
  • Reputation: 43
  • Geschlecht:Männlich
  • Wohnort:Kingsvillage
  • Interessen:Frickeln

geschrieben 13. Juli 2006 - 08:09

meinst du sowas?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Universal vertical center with CSS</title>
  <style>
	.greenBorder {border: 1px solid green;} /* just borders to see it */
  </style>
</head>

<body>
  <div class="greenBorder" style="display: table; height: 400px; _position: relative; overflow: hidden;">
	<div style=" _position: absolute; _top: 50%;display: table-cell; vertical-align: middle;">
	  <div class="greenBorder" style=" _position: relative; _top: -50%">
		any text<br>
		any height<br>
		any content, for example generated from DB<br>
		everything is vertically centered
	  </div>
	</div>
  </div>
</body>
</html>
Quelle: http://www.jakpsatweb.cz/css/css-vertical-...r-solution.html
[email protected] 0xAAE321A2

50226 - Witis Blog
0

#4 Mitglied ist offline   Islander 

  • Gruppe: aktive Mitglieder
  • Beiträge: 621
  • Beigetreten: 29. Juli 03
  • Reputation: 0
  • Geschlecht:Männlich
  • Wohnort:Las Palmas

geschrieben 13. Juli 2006 - 08:59

Beitrag anzeigenZitat (Slim01: 13.07.2006, 02:34)

Das gehört hier hin.


Oh... ups... war wohl doch schon etwas zu müde als ich das gepostet habe, sorry.


Beitrag anzeigenZitat (Witi: 13.07.2006, 08:09)

meinst du sowas?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Universal vertical center with CSS</title>
  <style>
	.greenBorder {border: 1px solid green;} /* just borders to see it */
  </style>
</head>

<body>
  <div class="greenBorder" style="display: table; height: 400px; _position: relative; overflow: hidden;">
	<div style=" _position: absolute; _top: 50%;display: table-cell; vertical-align: middle;">
	  <div class="greenBorder" style=" _position: relative; _top: -50%">
		any text<br>
		any height<br>
		any content, for example generated from DB<br>
		everything is vertically centered
	  </div>
	</div>
  </div>
</body>
</html>
Quelle: http://www.jakpsatweb.cz/css/css-vertical-...r-solution.html

Nein, da wird der Text zwar innerhalb der Box zentriert... aber nur vertikal, nicht horizontal. Und die Box ist oben rechts in der Ecke, womit wir wieder am Anfang wären.
0

#5 Mitglied ist offline   Witi 

  • Gruppe: aktive Mitglieder
  • Beiträge: 5.701
  • Beigetreten: 13. Dezember 04
  • Reputation: 43
  • Geschlecht:Männlich
  • Wohnort:Kingsvillage
  • Interessen:Frickeln

geschrieben 13. Juli 2006 - 09:31

ach...jetzt versteht ich was du willst. Sag das doch direkt :lol:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Seite</title>
<style>
.box { 	
  position:absolute;
  height:200px; 
  width:400px;
  margin:-100px 0px 0px -200px;
  top: 50%; 
  left: 50%;
  border: 1px dotted #000000;
}
</style>
</head>
<body>
	<div class="box">
		Dies ist ein Beispieltext, könnte ja aber auch eine Textbox oder ein anderes Objekt sein.
	</div>
</body>
</html>

[email protected] 0xAAE321A2

50226 - Witis Blog
0

#6 Mitglied ist offline   axx 

  • Gruppe: aktive Mitglieder
  • Beiträge: 487
  • Beigetreten: 19. Mai 05
  • Reputation: 0

geschrieben 13. Juli 2006 - 09:32

Nun, ich halte nicht viel von solcherart Positionierung, aber hier mal ein Anwendungsbeispiel:
.greenBorder {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40em;
	height: 20em;
	margin-top: -10em;
	margin-left: -20em;
	padding:0;
	border: 1px solid green;
}


Edit: Witi war schneller.

Dieser Beitrag wurde von axx bearbeitet: 13. Juli 2006 - 09:34

0

#7 Mitglied ist offline   Islander 

  • Gruppe: aktive Mitglieder
  • Beiträge: 621
  • Beigetreten: 29. Juli 03
  • Reputation: 0
  • Geschlecht:Männlich
  • Wohnort:Las Palmas

geschrieben 13. Juli 2006 - 10:29

Vielen Dank. Zwar bin ich jetzt an Maße gebunden, aber da muss ich wohl durch. Oder geht das auch ohne spezielle Maße anzugeben?

Ich verstehe nicht wieso in der CSS-Spezifikation nicht so etwas grundlegendes wie eine horizontale Zentrierung respektive der Screengrösse existiert. Ich kann zwar verstehen dass das hinfällig wird in dem Moment wo die Seite so gross ist das man scrollen muss, aber es gibt ja auch Seiten bei denen das nicht nötig ist.

In meinem Fall wollte bzw. will ich einfach nur eine Javasscript-Ansage zentriert auf einer ansonst leeren Webpage positionieren, ähnlich einem "Hier wird umgebaut".
0

#8 Mitglied ist offline   flo 

  • Gruppe: aktive Mitglieder
  • Beiträge: 7.922
  • Beigetreten: 14. November 04
  • Reputation: 1
  • Geschlecht:Männlich

geschrieben 13. Juli 2006 - 15:41 

<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>xxxx</title> 

<style type="text/css" media="screen,projection" title="Druckvorschau-semantic-Test">
/*<![CDATA[*/ 

* html div	{
			/* Star-Hack fuer InternetExplorer
			 * individuelle Anpassung
			 * je nach Hoehe des Inhaltes
			 *
			 * fuer IE Win \*/
			height: 60%;
			padding: 20% 0 0 0;
			/* */ /* for Mac IE */
			}			
		
*			{ 
			margin:  0; 
			padding: 0;
			
			border-collapse:collapse; 
			border-spacing: 0; 
			} 

			
html,
body		{ 
			height:  100%;
			width:   100%;
			
			color:				#000000; 
			background-color:	#FF9922;
			
			line-height: 1.45;
			} 
			
body		{ 
			display: table;

			font-size:   100.01%;
			font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
			}


div			{
			display: table-cell;
			
			background-color:	#FFFFFF;
			
			vertical-align: middle;
			text-align: 	center;
			
			font-size: .8em;
			}			

			
		


/*]]>*/ 
</style> 


</head> 
<body>

<div>
	Hallo ich bin Zentriert, vertikal und horizontal
	

	


</div>

</body> 
</html>



So gehts auch

Hier wird man immer fündig

http://xhtmlforum.de/34945-middle-und-cent...ormatieren.html

Dieser Beitrag wurde von Flo bearbeitet: 13. Juli 2006 - 15:41

0

Thema verteilen:


Seite 1 von 1

1 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0