Zurück   Flashforum > Alternative Technologien > HTML und CSS

Antwort
 
LinkBack Themen-Optionen Ansicht
Alt 05-05-2010, 21:42   #1 (permalink)
Flasher
 
Benutzerbild von mauri2006
 
Registriert seit: Oct 2007
Ort: Niedersachsen
Beiträge: 505
Unhappy Sachen Mittig im Browser?

Hallo Flasher,

wie kann ich Sachen, wie Texte oder Bilder oder was auch immer
Mittig (horizontal und vertikal) im Browser anzeigen lassen?


Liebe Grüße,
mauri2006
__________________
Nützliches: Javascript-Detection | Flash-Detection | Java-Detection
Allgemein: Meine Webseite | Meine Fotogallerie (Auf's Eis gelegt)


RIP agedoubleju
mauri2006 ist offline   Mit Zitat antworten
Alt 05-05-2010, 22:20   #2 (permalink)
Neuer User
 
Benutzerbild von feivelmaus
 
Registriert seit: Jun 2007
Ort: Berlin
Beiträge: 1.217
Ich weiß nicht, ob es die schönste Lösung ist, aber ich mach es immer so, Div Container via css:
HTML-Code:
position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -50px;
	margin-top: -50px;
	width: 100px;
	height: 100px;
funzt zumindest.
__________________
Grüße, der Feivel

Showcase
feivelmaus ist offline   Mit Zitat antworten
Alt 05-05-2010, 22:47   #3 (permalink)
Neuer User
 
Benutzerbild von :: RK ::
 
Registriert seit: Jan 2002
Beiträge: 5.445
Ich denke, dass ist ne bessere Variante:

HTML-Code:
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css">
			body {
				text-align: center;
			}			
			#container {
				background-color: #f00;
				width: 900px; /* Beispiel */
				height: 300px; /* Beispiel */
				margin: 0 auto;
				text-align: left;
			}
		</style>
	</head>
	<body>
		<div id="container">Hallo Welt</div>
	</body>
</html>

Edit:
achso, du willst auch vertikal zentrieren ... hmm, dann kenn ich auch keine andere Variante als die von feivelmaus.
__________________
Das Glück im Leben hängt von den guten Gedanken ab, die man hat.

Easing_Equations / Flash Kontaktformular / FlashPlugin W3C konform / Nützliche Beiträge zu FAQs

Geändert von :: RK :: (05-05-2010 um 22:52 Uhr)
:: RK :: ist offline   Mit Zitat antworten
Alt 05-05-2010, 23:00   #4 (permalink)
Neuer User
 
Benutzerbild von :: RK ::
 
Registriert seit: Jan 2002
Beiträge: 5.445
Ok, hier ne Mischung aus meiner und feivelmaus's Varianten. Vorteile gibts bei der horizontalen Ausrichtung: verkleinert man den Browser soweit, dass ein horizontaler Scrollbalken erscheint, bleibt der gesamte Content sichtbar und wird nicht (wie bei feivelmaus's Variante) beschnitten.

HTML-Code:
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css">
			body {
				text-align: center;
				padding: 0;
				margin: 0;
			}			
			#container {
				position: relative;
				top: 50%;
				border: 1px solid #000;
				background-color: #f00;
				width: 900px;
				height: 300px;
				margin: -150px auto; /* Werte für top und bottom müssen jeweils height/2 sein
				text-align: left;
			}
		</style>
	</head>
	<body>
		<div id="container">Hallo Welt</div>
	</body>
</html>
__________________
Das Glück im Leben hängt von den guten Gedanken ab, die man hat.

Easing_Equations / Flash Kontaktformular / FlashPlugin W3C konform / Nützliche Beiträge zu FAQs
:: RK :: ist offline   Mit Zitat antworten
Alt 05-05-2010, 23:07   #5 (permalink)
Neuer User
 
Benutzerbild von feivelmaus
 
Registriert seit: Jun 2007
Ort: Berlin
Beiträge: 1.217
okok, ich geb mich geschlagen
Ich wollte ja auch nur einen Ansatz bieten
__________________
Grüße, der Feivel

Showcase
feivelmaus ist offline   Mit Zitat antworten
Alt 06-05-2010, 13:03   #6 (permalink)
Neuer Benutzer
 
Benutzerbild von webxvideo
 
Registriert seit: Nov 2003
Ort: berlin
Beiträge: 915
Also ich nehme für vertikale Zentrierungen immer noch die gute alte Tabelle.
Das vertikale Positionieren mit Position: relative oder absolute hat nämlich einen grossen Nachteil:
Wenn das Browserfenster kleiner als der Container ist wird der Inhalt oben und links abgeschnitten und lässt sich auch nicht durch Scrollbars erreichen.
Da ja im Moment viele Netbooks mit recht kleiner Bildschirmen im Einsatz sind ist das nicht zu vernachlässigen.

Natürlich könnte man mit JavaScript da ein Workaround basteln, aber dann kann ich auch gleich mit JavaScript zentrieren.

Geändert von webxvideo (06-05-2010 um 13:04 Uhr)
webxvideo ist offline   Mit Zitat antworten
Alt 23-05-2010, 16:28   #7 (permalink)
Neuer User
 
Registriert seit: May 2010
Beiträge: 65
ich verwende folgendes:

HTML-Code:
<html>

<head>

<style type="text/css">
#contentcenter	{
 
	width: 650px;
 
	position: absolute;
	left: 50%;
 
	margin-left: -325px;
	height: 400px;
	top: 50px;
</style>

</head>


<body style="background-image: url('asdasd.jpg'); background-repeat: no-repeat; background-color: #000000;">
 
<div id="contentcenter" 
 
 
style="background-image: url('asdasdsd.jpg'); background-repeat: no-repeat; text-align: left;">

</div>
</body>
</html>
Nico1994 ist offline   Mit Zitat antworten
Alt 25-05-2010, 15:18   #8 (permalink)
nobody is perfect
 
Benutzerbild von richtsteiger
 
Registriert seit: Jul 2004
Ort: munich
Beiträge: 874
Ohne Tabelle, funktioniert überall und setz ich auch selber ein:
shrink-to-fit and center

Sind zwar ein paar CSS-Hacks enthalten, dafür umgeht man aber den
unschönen Zustand, dass Content aus dem Viewport nach links und/oder oben
verschwindet, wenn das Fenster zu klein wird.

Mal 'nen kleines Beispiel, wo das "Shrink Wrapping" zum Einsatz kommt:
www.uebel-metallbildner.de
__________________
XING
richtsteiger ist offline   Mit Zitat antworten
Antwort

Lesezeichen

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 sind an
Pingbacks sind an
Refbacks sind an


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Cs4 swf mittig bei jedem browser maechtling HTML und CSS 4 19-04-2010 16:09
Bild im Browser mittig Flashdream Flash Einsteiger 2 18-02-2008 14:16
Flash Mittig (im Browser) groundhouse Flash Einsteiger 6 27-08-2006 17:04
übergroßer Film mittig im Browser Lousha Flash MX 2004 12 26-06-2004 14:46
Film mittig im Browser positionieren marc Programmieren 1 22-03-2002 09:09


Alle Zeitangaben in WEZ +1. Es ist jetzt 18:40 Uhr.

Domains, Webhosting & Vserver von Host Europe
Unterstützt das Flashforum!
Adobe User Group


Copyright ©1999 – 2014 Marc Thiele