Forum Auflösung wird nicht übernommen
12.10.2015 17:29 (zuletzt bearbeitet: 12.10.2015 17:34)
#1 Forum Auflösung wird nicht übernommen
Hallo,
ich habe da ein kleines Problem mit meinem Forum.
Ich habe dort alles nach meinem Bildschirm angepasst so das es dort ist wo es hingehört.
Bei meinem 23 Zoll Bildschirm mit Full HD Auflösung und im Browser Standard Zoom 100% wird alles normal angezeigt.
Siehe Bild 
Nun gibt es Leute die benutzen so Mega Bildschirme mit 2K Auflösung 21:9 oder eben kleine Bildschirme und bei denen wird das ganze dann so angezeigt:
Siehe Bild 2: http://i.imgur.com/zk7ib4X.png
Wieso wird das nicht Automatisch an den Bildschirm des Nutzers angepasst?
MFG
Pascal
12.10.2015 17:51
#3 RE: Forum Auflösung wird nicht übernommen
12.10.2015 18:02
#5 RE: Forum Auflösung wird nicht übernommen
Okay, dann bedanke ich mich schonmal für die Mühe und hoffe das es geht 
Gruß
Pascal
13.10.2015 06:55 (zuletzt bearbeitet: 13.10.2015 07:05)
#7 RE: Forum Auflösung wird nicht übernommen
Mitglied
Also ich habe heute Früh mal ein wenig Probiert. Mit dem Image Over Header geht es derzeit nicht so einfach.
Habe dann mal einen anderen Ansatz genommen. Mit ein wenig HTML und CSS habe ich es dann hin bekommen.
http://ofn-testforum.xobor.de/
Hier im Anhang mal eine Grafik der Seite
Muss nun noch ein wenig Probieren um zu sehen ob es in allen Auflösungen gleich aus schaut.
Da ich mein PI ungerne Umbauen möchte (Zeitlich keine Möglichkeit) oder ein neues Bauen möchte stelle ich den Code hier mal zur Verfügung. Getestet in Business Templates.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<body>
<div id="spaltelinks">
</div>
<div id="spalterechts">
</div>
<div id="main">
</div>
</body>
<style>
#spaltelinks {
background: #ffd5ee;
padding: 0;
border: 1px solid #f09;
margin: 10px;
width: 325px !important;
position: absolute;
top: 200;
left: 0;
}
#spalterechts {
background: #fff7d5;
padding: 0;
border: 1px solid #fc0;
margin: 10px;
width: 325px !important;
position: absolute;
top: 200;
right: 0;
}
</style>
<div id="spaltelinks">Testbereich<br>Testbereich2<br><center><img src='http://up.picr.de/23162762zl.png' border='0' /></center>
<br>Weitere Informationen. Wie man sieht geht hier auch HTML.<br><br><br>Testbereich<br>Testbereich2<br><center><img src='http://up.picr.de/23162762zl.png' border='0' /></center>
<br>Weitere Informationen. Wie man sieht geht hier auch HTML.<br>Testbereich<br>Testbereich2<br><center><img src='http://up.picr.de/23162762zl.png' border='0' /></center>
<br>Weitere Informationen. Wie man sieht geht hier auch HTML.<br>Testbereich<br>Testbereich2<br><center><img src='http://up.picr.de/23162762zl.png' border='0' /></center>
<br>Weitere Informationen. Wie man sieht geht hier auch HTML.<br>Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte! Hatte einer seiner zahllosen Kollegen dieselbe Idee gehabt, ihn beobachtet und abgewartet, um ihn nun um die Früchte seiner Arbeit zu erleichtern?</div>
<div id="spalterechts">Testbereich<br>Testbereich2<br><center><img src='http://up.picr.de/23162762zl.png' border='0' /></center>
<br>Weitere Informationen. Wie man sieht geht hier auch HTML.<br><br><br>Testbereich<br>Testbereich2<br><center><img src='http://up.picr.de/23162762zl.png' border='0' /></center>
<br>Weitere Informationen. Wie man sieht geht hier auch HTML.<br>Testbereich<br>Testbereich2<br><center><img src='http://up.picr.de/23162762zl.png' border='0' /></center>
<br>Weitere Informationen. Wie man sieht geht hier auch HTML.<br>Testbereich<br>Testbereich2<br><center><img src='http://up.picr.de/23162762zl.png' border='0' /></center>
<br>Weitere Informationen. Wie man sieht geht hier auch HTML.<br>Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte! Hatte einer seiner zahllosen Kollegen dieselbe Idee gehabt, ihn beobachtet und abgewartet, um ihn nun um die Früchte seiner Arbeit zu erleichtern?</div>
Ich habe nun das Forum unter Admin/Layout auf 75% stehen und dann die Boxen in der Breite angepasst. Passt nun bei mir ich weiß nicht wie das mit Kleineren Monitoren ist. Als Breite der Box habe ich 325px genommen eventuell geht da auch der befehl auto?
Denke so kannst du schon was mit Anfangen. Wenn du das nicht hin bekommen solltest sag wieder Bescheid. Dann finden wir sicher einen weg dir zu Helfen, oder jemand hat Lust ein PI daraus zu machen.
13.10.2015 07:34 (zuletzt bearbeitet: 13.10.2015 07:46)
#8 RE: Forum Auflösung wird nicht übernommen
Mitglied
Weiterer Ansatz
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<body>
<div id="spaltelinks">
</div>
<div id="spalterechts">
</div>
<div id="main">
</div>
</body>
<style>
#spaltelinks {
float:left !important;
background: #ffd5ee;
padding: 0;
border: 1px solid #f09;
margin-left: auto;
max-width: 12% !important;
position: absolute;
top: 200;
left: 0;
}
#spalterechts {
float:right !important;
background: #fff7d5;
padding: 0;
border: 1px solid #fc0;
margin-right: auto;
max-width: 12% !important;
position: absolute;
top: 200;
right: 0;
}
</style>
<div id="spaltelinks">Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten aus einer Webseite den größten Nutzen ziehen. Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz funktioniert, aber ebenso gut für den Ausdruck oder</div>
<div id="spalterechts">Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten aus einer Webseite den größten Nutzen ziehen. Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz funktioniert, aber ebenso gut für den Ausdruck oder</div>
Problematisch wird es sobald Bilder ins Spiel kommen. Im Oberen ersten Ansatz sieht es bei mir auf dem Handy so aus das die Linke Spalte sich unter den AF schiebt. Die konnte ich bisher noch nicht so erstellen das auch die sich Automatisch an die Breite anpassen. Eventuell hat ja jemand einen Ansatz. Muss nun erst mal zur Arbeit. Bin gespannt ob jemand eine Idee hat.
Edit
Nun ist mir selber noch eine Idee gekommen die wohl Funktioniert
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<body>
<div id="spaltelinks">
</div>
<div id="spalterechts">
</div>
<div id="main">
</div>
</body>
<style>
#spaltelinks {
float:left !important;
background: #ffd5ee;
padding: 0;
border: 1px solid #f09;
margin-left: auto;
max-width: 12% !important;
position: absolute;
top: 200;
left: 0;
}
#spalterechts {
float:right !important;
background: #fff7d5;
padding: 0;
border: 1px solid #fc0;
margin-right: auto;
max-width: 12% !important;
position: absolute;
top: 200;
right: 0;
}
</style>
<div id="spaltelinks"><img src="http://up.picr.de/23162762zl.png" width="100%" height="100%">Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten.
Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext.
Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen.
Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen,
sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen.
So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten aus einer Webseite den größten Nutzen ziehen.
Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren.
Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz funktioniert, aber ebenso gut für den Ausdruck oder<img src="http://up.picr.de/23162762zl.png" width="100%" height="100%"></div>
<div id="spalterechts"><img src="http://up.picr.de/23162762zl.png" width="100%" height="100%">Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten.
Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal,
wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen,
Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen.
So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten aus einer Webseite den größten Nutzen ziehen.
Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren.
Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz funktioniert, aber ebenso gut für den Ausdruck oder<img src="http://up.picr.de/23162762zl.png" width="100%" height="100%"></div>
Füge ich die Bilder so ein
1
<img src="http://up.picr.de/23162762zl.png" width="100%" height="100%">
Scheint es zu gehen. Sie werden Automatisch an die Breite angepasst die in der Box zur Verfügung steht.
Nicht Täuschen Lassen, bei mir ist der Header nur 92% Breit daher habe ich rechts und links neben dem Header noch je 4% zum Rand.
Wieder zu sehen in meinen Test Business
http://ofn-testforum.xobor.de/
Und hier als Grafik
Ähnliche Themen
Das Thema ist geschlossen
Sie haben keine Rechte zu antworten
Bereits Mitglied?
Jetzt anmelden!
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!
Jetzt registrieren!