Du bist nicht angemeldet.

Stilllegung des Forums
Das Forum wurde am 05.06.2023 nach über 20 Jahren stillgelegt (weitere Informationen und ein kleiner Rückblick).
Registrierungen, Anmeldungen und Postings sind nicht mehr möglich. Öffentliche Inhalte sind weiterhin zugänglich.
Das Team von spieleprogrammierer.de bedankt sich bei der Community für die vielen schönen Jahre.
Wenn du eine deutschsprachige Spieleentwickler-Community suchst, schau doch mal im Discord und auf ZFX vorbei!

Werbeanzeige

franz-21

Treue Seele

  • »franz-21« ist der Autor dieses Themas

Beiträge: 101

Wohnort: Bayern

Beruf: Schüler

  • Private Nachricht senden

1

24.01.2010, 20:08

Javascript Problem

Hallo Leute!

Möchte gerne über Javascript die Auflösung des Users abfragen und dann be einer Tabelle den linken Abstand dementsprechend verändern, weiß leider nicht was ich in die if's reinschreiben muss um das margin-left anzusprechen. Hoffe das mir jemand helfen kann.


Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script language="JavaScript">
<!--
ScreenRes = screen.width;
ScreenHeight = screen.height;
if (ScreenRes <= "800") aufloesung = "res800";
if (ScreenRes <= "1024") aufloesung = "res1024";


if (aufloesung == "res800")
{
//??????
}
if (aufloesung == "res1024")
{
//??????
}
-->
</script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Photoshop4.psd) -->
<table id="Tabelle_01" width="1600" height="1200" border="0" cellpadding="0" cellspacing="0" style=" margin-left:-13.5%;">

2

24.01.2010, 20:20

Nun ja, Du könntest dort entweder über #Tabelle_01 oder über table die css-Attribute anpassen.

So ungefähr:

Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
13
<style type="text/css">
if (aufloesung == "res800") 
{
   <!-- eins von den beiden --> 
  #Tabelle_01 {
     width: 800px;
  }

  table {
     width: 800px;
  } 
}
</style>

xardias

Community-Fossil

Beiträge: 2 731

Wohnort: Santa Clara, CA

Beruf: Software Engineer

  • Private Nachricht senden

3

25.01.2010, 00:48

Das wird nicht funktionieren. Du kannst Javascript nicht in CSS einbetten.

Die eleganteste Lösung wäre denke ich folgende:

Quellcode

1
2
3
4
if (aufloesung == "res800") 
{ 
document.body.className="res800";
} 

Analog für andere Auflösungen.

Dann kannst du in CSS die Eigenschaften der Tabelle abhängig von der Auflösung verändern.

z.b. mit folgendem CSS code:

Quellcode

1
body.res800 #Tabelle_01 { margin-left: xxx; }


ABER:
Es ist in der Regel nicht empfehlenswert auf Auflösungen spezifisch zu gestalten. Da gibt es meist flexiblere Möglichkeiten in CSS. Was ist z.B. wenn ein Nutzer eine hohe Auflösung hat, aber den Browser nicht im Vollbild?

franz-21

Treue Seele

  • »franz-21« ist der Autor dieses Themas

Beiträge: 101

Wohnort: Bayern

Beruf: Schüler

  • Private Nachricht senden

4

26.01.2010, 18:43

Danke für die Antworten!

Naja, hab die Seite mit Photoshop vorgestalltet und zwar in 1600x1200. In der Mitte ist ein weißes Feld welches immer in der Mitte sein sollte, mit der großen Auflösung ist sie zwar dort aber mit kleineren verschiebt sie sich immer weiter nach rechts. Um das weiße Feld ist der Hintergrund. Wie könnte ich das vernünftig wieder ins Lot bringen?

Möchte es ungefähr wie hier machen und wenn man die Auflösung verändert bleibt das in der Mitte!?!?!

http://www.htlball.at/

mfg

Sylence

Community-Fossil

Beiträge: 1 663

Beruf: Softwareentwickler

  • Private Nachricht senden

5

26.01.2010, 19:55

Im Prinzip gibts für ein CSS Layout eigentlich nur 2 Möglichkeiten:
a) Alle größenangaben fixed. Garantiert dir, dass deine Seite bei jeder Auflösung immer gleich aussieht
b) Alle größenangaben relativ. Garantiert dir, dass deine Seite bei jeder Auflösung immer relativ gleich aussieht ^^

Je nachdem wie die Seite aussehen soll muss man sich für eine Entscheiden. Einfacher ist natürlich alles mit fixed anzugeben, da man so das Layout 1:1 aus Photoshop oder ähnlichem Übernehmen kann.

6

26.01.2010, 20:35

http://www.htlball.at/ verwendet Tabellen für das Layout.
Kein guter Ansatz.

Der Großteil der User dürfte wohl mit 1024x768 (600) oder größer unterwegs sein. Mal abgesehen von Geräten wie Smartphones usw..

Wenn du den Contentbereich zentrierst und 900 - 1000px breit machst,
dürftest du auf der sicheren Seite sein.

Das sieht dann ungefähr so aus:

Zitat

CSS:

#content_wrap
{
width: 1000px;
height: 100%;
position: relative;
margin: 0 auto; /* Hier wird zentriert */
}

HTML:
<body>

<div id="content_wrap">

Inhalt hier

</div>

</body>

Werbeanzeige