Automatische anpassung der Größe / Auflösung

Status
Nicht offen für weitere Antworten.
D

djsubotage

Grünschnabel
Hallo, ich bin momentan dabei, eine Homepage auf PHP-Basis zu "basteln" - möchte jetzt gerne noch, das sich diese Homepage automatisch der jeweiligen Auflösung des Betrachters anpasst. (Beispiel-Seite)

Wie kann ich das machen (ggf. kurze Erklärung oder Quelltextauszüge)

Danke! :)
 
Moin.....

also du kannst die Auflösungen abfragen und dann auf eine passende Seite weiterleiten, macht aber viel arbeit.

Es gibt ein Modul für Webserver das auch alles können soll, frag mich aber bitte nicht nach dem Namen... :)
 
Hallo!

Dass geht mit JavaScript, ich meine "resize to" nennt sich dass.
Ich würde aber auf JavaScript verzichten, siehe hierzu dein Menü.
Da ist dann der schöne "onMouseOver" Effekt futsch. Diese würde ich lieber versuchen mit CSS (a:hover) umzusetzen. Ausserdem würde ich die CSS-Anweisungen auch in eine externe CSS-Datei auslagern.
Was die Auflösung betrifft, kannst Du die einzelnen Elemente in DIV-Boxen setzen und diese entsprenchend positionieren.
Menü = links oben (feste Grösse)
Logo-Bild = rechts oben (feste Grösse)
Anschriften-Bild = rechts oben + rechts unten (Abstand oben z.b. 200px, feste Breite, für die Höhe in 3 Teile aufteilen, Höhe für das Mittelteil variabel)
Seiteninhalt = links oben (Abstand oben z.b. 200px, Breite und Höhe variabel)
blaue Trennlinie = als separates Bild (Breite variabel)
So sollte der Inhalt über die ganze Browserbreite angezeigt werden.
Oder du macht den ganzen Kram in eine Tabelle, davon halten hier aber viele Leute nichts.
Ich weiss ja nicht wie der Rest der Seite aussehen soll. Aber so wie es jetzt aussieht, würde ich Tabellen bevorzugen

Gruss Dr Dau
 
Hi !

Jap ich hab auch sowas auf meiner Page.
Hier leitet ein Javascript auf die richtige .css Datei weiter.

Auszug:
Code: 
<!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>Unbenanntes Dokument</title>
<link rel="stylesheet" href="1024x768.css" type="text/css" title="1024x768" media="screen, projection" />
<script language="JavaScript" type="text/javascript">
<!--
if (screen.width <= 800)
document.write('<link rel="stylesheet" href="800x600.css" type="text/css">'); 
if (screen.width > 800 && screen.width < 1024)
document.write('<link rel="stylesheet" href="1024x768.css" type="text/css">');
if (screen.width >= 1024)
document.write('<link rel="stylesheet" href="1024x768.css" type="text/css">');
if (screen.width >= 1152)
document.write('<link rel="stylesheet" href="1152x864.css" type="text/css">');
 
if (screen.width >= 1280)
document.write('<link rel="stylesheet" href="1280x1024.css" type="text/css">');
 
//-->
</script>
</head>
<body>
[......]

Meine Seite, wenn du's probieren willst: http://djmg.dj.funpic.de/ :)
Du musst dir aber klar sein, dass das nur funktioniert, wenn der User
JavaScript aktiviert hat - ich hab als alternative noch nen manuellen .php switcher
der auch die .css verändert. (funktioniert gerade nicht, weil datei .html und nicht .php heißt -.- )

Mit freundlichem Gruß
DjMG
 
Bitte keine JavaScript-Lösung. Probier mal Folgendes:
HTML: 
<body>
<div id="container">
	[…]
</div>
</body>
Code: 
body {
	text-align:			center;
}
#container {
	margin:				0 auto;
	width:				[…];
	text-align:			left;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück