webpage programmier-frage!

Tobi24

Aktives Mitglied
Thread Starter
Dabei seit
03.02.2005
Beiträge
787
Reaktionspunkte
13
hallo!


habe eine programmierfrage zu einem html-design, welches mir vorschwebt:

ich möchte gerne eine html-seite erstellen, in der sich der seiteninhalt in einem rechteckigen feld (frame?) in der mitte der seite abspielt.

wichtig: dieses feld soll immer schön zentral auf dem bildschirm sein, egal welchen browser und welchen monitor ich benutze!

wie geht das?

vielen dank für alle antworten!
 
aber jetzt noch mal was ganz doofes... ;)


habe eine seh brauchbare css datei gefunden und fange so langsam an, sie zu verstehen. wie kann ich die denn dann im browser darstellen? es muss doch erst noch eine html datei geben, oder?
 
Jo. Das HTML-Markup wird durch die CSS Selektoren und Attribute in der CSS Datei "gestyled". Diese CSS Datei wird im Head der HTML Seite eingebunden und gilt dann für das gesamte Dokument.

2nd
 
Ich nehme an, du kennst Selfhtml???
Wenn nicht -> Pflichtlektüre für (angehende) Webdesigner ;)
 
So z.B. könnte es gehen:

Code:
<!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">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>SeiteXYZ</title>
		<style type="text/css">
			.helpline {
			  position:absolute;
			  height:1px;
			  width:100%;
			  top:50%;
			}
			.cont {
			  position:absolute;
			  height:400px;
			  width:700px;
			  left:50%;
			  margin-left:-350px;
			  margin-top:-200px;
			  text-align:center;
			  border: #000000 1px solid;
			}
		</style>

	</head>
	<body>
		<div class='helpline'>
			<div class='cont'>
				<p>Das hier steht alles genau in einem zentrierten Kasten.</p>
	
			</div>
		</div>

	</body>
</html>

Erklärung dazu: Im HTML-Teil wird ein div-Container helpline geöffnet, darin ein div-Container "cont". Darin steht dann der Inhalt.
Zum CSS: .helpline befindet sich (von der Höhe her) genau in der Seitenmitte und ist 1px hoch. Dieser Container dienst nur als Positionierungshilfe für den inneren Container
.cont hat genaue Angaben, wie groß Dein Inhalt sein soll, in diesem Beispiel 400x700px. Wäre "cont" auch nur 1px breit, würde "left: 50%" ausreichen, da das genau die Mitte wäre. Der Inhalt ist aber 700px breit, also wird er um genau die Hälft der Breite nach links "rausgeschoben", die andere Hälfte lappt dann rechts über => margin-left: -350px. Gleiches Prinzip mit der Höhe...
Aber ich kann Lea nur beipflichten, HTML-Grundwissen ist eine tolle Sache, also ab zu SelfHTML. Und wenn Du da fertig bist ;-) und noch Hunger auf CSS hat, dann versuch mal http://www.csszengarden.com, da gibt es einen "resources"-Teil mit tollen und hilfreichen Links zu Seiten, die Dir CSS-Tricks beizubringen versuchen.

Liebe Grüße, der Graf.
 
margin-left: -350px
geht nicht beim Internet Explorer!!!
Naja ansonten machst du um den Bereich den du gern Zentriert haben willst ein <.center> <./center> [ohne Punkt versteht sich ;-)] und musst dann mit padding-top arbeiten. einfach rum probieren bis du denkst es ist horizontal zentriert, is ja ueberall anders.

wenn dir das gar nix sagt was ich geschrieben habe, dann benutzt mal die Suche bei SelfHTML und lies dir die Erklaerungen durch

mfg
 
Der Graf schrieb:
Aber ich kann Lea nur beipflichten, HTML-Grundwissen ist eine tolle Sache, also ab zu SelfHTML. Und wenn Du da fertig bist ;-) und noch Hunger auf CSS hat, dann versuch mal http://www.csszengarden.com, da gibt es einen "resources"-Teil mit tollen und hilfreichen Links zu Seiten, die Dir CSS-Tricks beizubringen versuchen.

Liebe Grüße, der Graf.


vielen dank! html grundwissen habe ich wirklich! es war dann doch eher der "css-hunger"! ;)
 
Tobi24 schrieb:
vielen dank! html grundwissen habe ich wirklich! es war dann doch eher der "css-hunger"! ;)
Da kann ich dir auch http://www.culturedcode.com/css/reference_app.html
empfehlen, gute Übersicht über die CSS2.1 Eigentschaften… (Selfhtml hat auch eine
ganz annehmbare CSS-Abteilung (; )
Und wirklich auch den Zengarden, der wurde aber eh schon vom Graf
glaub ich verlinkt.
 
lea schrieb:
Seit wann?
margin-left: auto; geht nicht (selfhtml).
Aber diese Ausrichtung versteht auch der IE soweit ich weiß…
weil das negative werte sind! -350 macht ja wenig sinn [rein logisch gedacht!] kannst ja schlecht koordinaten maessig sagen der punkt ist -350 wenn der kleinste punkt 1 / 1 [linke obere ecke] ist
 
Du darfst nicht von 1,1 bis maxScreenWidth, maxScreenHeight denken asylum.

Es macht schon Sinn, das Browserfenster bloss als "Maske" für eine größere Arbeitsfläche zu sehen.

In Flash z. B. ist es absolut notwendig und kreativ unheimlich fördernd, wenn man eine unendlich grosse Fläche zur Verfügung hat.

Und in den CSS ist das Konzept ebenso zum Glück umgesetzt. ich benutze negative Werte z. B. immer, um den "Wrapper" horizontal zu zentrieren.

2nd
 
Naja meine Erfahrung hat gezeigt das eben bei so einem Wrapper der Internetexplorer gern nichts anzeigt, da er die Negativen Koordinaten nicht verarbeiten kann [wobei ich ihn verstehen kann ^^]!
 
ich hatte bei meinen letzten 3 web-projekten auch dasselbe problem...

mit negativem margin scheint es eigentlich zu gehen, jedoch verschwindet die seite beim verkleinern übers fenster hinaus...

ich hab dann eine andere lösung gefunden, die in jedem browser super klappt. leider finde ich den ursprünglichen link nicht mehr...

jedoch könnt ihr hier abgucken:

http://www.igvelo-lenzburg.ch oder
www.kathwinznau.ch

quelltext ist ja zugänglich ;)

grüsse simu
 
asylum schrieb:
Naja meine Erfahrung hat gezeigt das eben bei so einem Wrapper der Internetexplorer gern nichts anzeigt, da er die Negativen Koordinaten nicht verarbeiten kann [wobei ich ihn verstehen kann ^^]!

Das kann ich so nicht bestätigen. In meinem letzten Projekt habe ich den Wrapper folgendermassen gebaut:

HTML:
#wrapper {
	position: absolute;
	left: 50%;
	width: 1000px;
	z-index: 1;
	margin-left: -500px;
}

Die Seite wird genau wie geplant zentriert angezeigt, das auf allen Plattformen und in den "grossen" Browsern.

Die Verkleiner Lösung von Simusch muss ich mir mal anschauen, danke für den Hinweis.

2nd
 
@2ndreality

wenn du aber das fenster unter 1000px breite verkleinerst, wird die box über den fensterrand hinausgehen? oder?

genau deshalb kam ich von dieser lösung auch ab...
 
Jup, deswegen schaue ich mir Deine Bsp. mal an :)

2nd
 
Der Graf schrieb:
So z.B. könnte es gehen:

Code:
<!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">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>SeiteXYZ</title>
		<style type="text/css">
			.helpline {
			  position:absolute;
			  height:1px;
			  width:100%;
			  top:50%;
			}
			.cont {
			  position:absolute;
			  height:400px;
			  width:700px;
			  left:50%;
			  margin-left:-350px;
			  margin-top:-200px;
			  text-align:center;
			  border: #000000 1px solid;
			}
		</style>

	</head>
	<body>
		<div class='helpline'>
			<div class='cont'>
				<p>Das hier steht alles genau in einem zentrierten Kasten.</p>
	
			</div>
		</div>

	</body>
</html>

Erklärung dazu: Im HTML-Teil wird ein div-Container helpline geöffnet, darin ein div-Container "cont". Darin steht dann der Inhalt.
Zum CSS: .helpline befindet sich (von der Höhe her) genau in der Seitenmitte und ist 1px hoch. Dieser Container dienst nur als Positionierungshilfe für den inneren Container
.cont hat genaue Angaben, wie groß Dein Inhalt sein soll, in diesem Beispiel 400x700px. Wäre "cont" auch nur 1px breit, würde "left: 50%" ausreichen, da das genau die Mitte wäre. Der Inhalt ist aber 700px breit, also wird er um genau die Hälft der Breite nach links "rausgeschoben", die andere Hälfte lappt dann rechts über => margin-left: -350px. Gleiches Prinzip mit der Höhe...
Aber ich kann Lea nur beipflichten, HTML-Grundwissen ist eine tolle Sache, also ab zu SelfHTML. Und wenn Du da fertig bist ;-) und noch Hunger auf CSS hat, dann versuch mal http://www.csszengarden.com, da gibt es einen "resources"-Teil mit tollen und hilfreichen Links zu Seiten, die Dir CSS-Tricks beizubringen versuchen.

Liebe Grüße, der Graf.

so gehts wunderbar! :)

nur noch eine frage: wie kann ich denn jetzt innerhalb dieses zentrierten bereichs frames einbinden. ich möchte eine obere reihe für die navigation, und ein hauptfeld darunter für den inhalt. mit den üblichen framesets habe ich das nicht hinbekommen!
 
Zurück
Oben Unten