HTML - Fenster richtig positionieren

damomo3392 · 11. Februar 2013

Hallo, wie schon aus einem anderem Thread zu entnehmen, beschäftige ich mich seit kurzer Zeit mit HTML und CSS. Ich habe mal Testweise jetzt versucht, eine Seite zu erstellen, was so weit kein Problem war.

Diverse Boxen habe ich mit Hilfe von "div" festgelegt und über den Befehl "Absolute" positioniert - Einheit Pixel. Wenn ich jetzt jedoch die Größe meines Browserfensters ändere, passt alles ganz und gar nicht mehr.

Mit welchem Befehl bleiben die Elemente alle an ihrer Stelle, auch wenn ich das Fenster verkleinere?

Tumbleweed · 11. Februar 2013

Wenn du es vernünftig machen willst, musst du dich ein bisschen mehr einlesen.

http://de.wikipedia.org/wiki/Responsive_Design

http://www.yaml.de/ - Beispielframework

DHundt · 11. Februar 2013

Mahlzeit,

poste doch einfach mal einen Link zu deiner Seite.
Ohne Quelltext lässt sich das schwer abschätzen.

Absolut positionierte Elemente beziehen sich immer auf das erste relativ positionierte Parent-Element bzw. den BODY
und sind nur in Ausnahmefällen sinnvoll.

Gruß

Lavaground · 11. Februar 2013

die positionierung kann absolut am rand fetgelegt werden, nur sollten dann die maße der boxen prozentual festgelegt werden, damit sie sich der größe des browsers anpassen. ansonsten wie oben genannt: responsive desgin, heißt soviel wie: hat der browser x pixel in der breite, benutze entsprechende css einträge für x, d.h. es ist nicht unbedingt 100% dynamisch, sondern reagiert auf bestimmte gegebenheiten.

DHundt · 11. Februar 2013

Vielleicht hilft dir auch
min-height und min-width
weiter?

damomo3392 · 11. Februar 2013

Beispiel:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Titel</title>

<link rel="stylesheet" type="text/css" href="../CSS/Layout.css" />
</head>

<body>
<p>Testdkfprkmflodmmgfkopmcgföpc,mlo oekfo opkfmo mdfmo40i9fjdvpfm 3e9jiofdmf o4jfodfm e0ujr90wjapdomlc 903ujfsopdmpmf 49jed0pmfespjfsdm p4r9ejfmndso 93rnsmd0sdfuijn43ei90or4i9jioefkopsfdsfdsfdsfdsfdsfdjlsfdsfdsfdsfd90ß30ijeo340ju243rfijdewijhfioesjdnolaknfigjnoslnd3298urfs8u90j90jmnrelksmlmcoldewgfesffd</p>
</body>

</html>

CSS:

Code:

html {
	background-color: white;
	width: 100%;}

body {
	background-color: black;
	width: 80%;
	margin: 10px auto;}

Wenn ich jetzt die größe meines Browserfensters verändere und zur Seite schieben, verschiebt sich der Text nach unten, um alles noch im Fenster darzustellen - Das soller aber nicht, alles soll so positioniert bleiben wie im "Vollbildmodus"

DHundt · 11. Februar 2013

Wenn du eine feste Breite möchtest, solltest du diese auch einstellen ;-)
100% = 100% der verfügbaren Breite

Du müsstest statt den % Angaben einen festen px Wert einstellen (entsprechend deiner Bildschirm-Breite).

Dass das ganze nicht besonders toll ist, da es verschiedene Bildschirmgrößen und -auflösungen gibt,
muss ich dir ja sicherlich nicht sagen ;-)

palace4d · 11. Februar 2013

CSS + feste größen

Code:

p {
white-space: nowrap;
}

Geht ab IE8 und natürlich in modernen Browsern wie Firefox, Opera, Chrome, Safari und IE9+

Jubel #1000 ... darauf ein Ur-Krostitzer

damomo3392 · 11. Februar 2013

Glückwunsch zum 1000sten ;-)

Fehler behoben - Ich die Angabe in Pixeln kann natürlich nicht richtig klappen (Klarer Fehler von mir) - Zudem habe ich im Vorfeld jetzt noch im CSS die Mindestgröße der Seite über Min-height/width definiert

Suche

HTML - Fenster richtig positionieren

damomo3392

Cadet 4th Year

Tumbleweed

Captain

DHundt

Cadet 4th Year

Lavaground

Lt. Commander

DHundt

Cadet 4th Year

damomo3392

Cadet 4th Year

DHundt

Cadet 4th Year

palace4d

Lt. Commander

damomo3392

Cadet 4th Year

Ähnliche Themen