Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Größenausrichtung automatisch anpassen
#1
Hallo Wink

ich finde nichts wirkliches zu meinem Problem.

Ich möchte, dass die Größe meiner Webseite auf jeden Bildschirm gleich angepasst ist, nicht das wenn ich eine Auflösung von 1024x768 habe, dass es komplett verschoben ist bei 800x600 (jetzt nur ein Beispiel)

Wie funktioniert das?

lg Daniel
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#2
Moin,

Das "Zauberwort" ist wohl Responsives Webdesign, da sich dort alle Bildschirmgrößen anpassen lassen, vor allem das darstellen auf Smartphones und Pad's.
Mit NOF ist das machbar, aber über Umwege, es gibt Vorlagen von Tommy und Doris aus dem Forum.

http://www.nof-tutorials.com/Responsive-Website/

und

http://www.fotoatelier-essen.de/Responsi...t-mit-NOF/

Smiling
mfg.
|---------------------------------
|Glück ist ... kein Pech zu haben.
|---------------------------------
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
Hallo,

ausnahmsweise werde ich aus dem Tutorial nicht schlau. Bei den anderen sind immer Bilder mit bei, wo man etwas nachvollziehen kann, hier leider nicht.

Wie ich es verstanden habe, gibt es dort Unterschiede bei Navi oben oder Navi links.

Für mich käme Navi oben in Betracht.

Dann ist mir aufgefallen, dort gibt es garkeinen Master Rahmen, es wird immer von 2 Layouts gesprochen, aber nicht erklärt, wie man das überhaupt einstellt, bzw, den Master Rahmen wegbekommt und das 2. Layout einpflegt.

Bei mir ist es so, ich möchte meine Webseite für jeden Bildschirm ausrichten, sprich auch den Banner oben, sowie das gesamte Layout.

Vielleicht gibt es noch eine etwas einfachere Erklärung?

Liebe Grüße
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
Hallo,

ich hatte diese responsive Seite auch nur mal so "aus einer Laune" heraus erstellt und das Tutorial eigentlich eher für den fortgeschrittenen User erstellt - daher recht knapp mit nur den wichtigsten Bemerkungen

NOF wird wohl an einem responsiven Design arbeiten und man kann nur hoffen, dass das bald von NOF kommt - daher habe ich das nun auch nicht wirklich intensiv weiter vertieft.

Vielleicht hilft Dir ja meine "Vorlage", die ich hier im Forum zur Verfügung gestellt habe:

http://www.nof-schule.de/forum/t-respons...3#pid85883


P.S.:

einen Master-Rahmen hat jede NOF-Seite, auch wenn diese nur aus Layout-Bereichen besteht. Dieser wird aber in meinen Anleitungen nicht verwendet, da das Layout auf eine Breite von 100% umgestellt werden muss um responsive zu sein.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
Okay okay, also wo ich einen neuen Layoutbereich hinzufügen kann, weiß ich, aber.

Wie kann ich das Responsives Webdesign auf eine schon bestehende mit NOF gemacht Webseite einrichten?
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#6
gar nicht Sad
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#7
Habe mir deine Vorlagenseite gedownloaded, nur leider sagt er, es wäre die falsche NOF Version installiert .... Sad

wie kann ich jetzt weiter verfahren?

liebe grüße
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#8
... indem Du die Vorlage mit NOF2015 öffnest ... Wink lt. Deinen Postings hast Du nur die 12er?
Gruß
Motto: carpe diem
Werbeagentur Luchs  Karlsruhe
NOF-Forum
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#9
Hallo,

ja hab die 12.00 Version
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#10
... also kannst Du Tommys Vorlage nicht einlesen, da das eine 15er Vorlage ist.
Gruß
Motto: carpe diem
Werbeagentur Luchs  Karlsruhe
NOF-Forum
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#11
Ja das war mir klar, es war mehr oder weniger, eine verzweiflungsantwort von mir  Huh  :D

das ganze sieht jetzt so aus bei mir. im hintergrund ist ein banner, wie man sieht.

wie soll ich jetzt weiterverfahren?

Habe 2 Bereiche die übereinander liegen mit 2 verschiedenen Hintergründen, die aber jetzt zentriert im Bildschirm passen, was ja auch so gewollt ist.

Meine Frage:

Wo muss ich jetzt alle Texte, die Navischaltleiste, den Banner etc, einfügen?


Angehängte Dateien
.png  layout.png (Größe: 297,09 KB / Downloads: 24)

Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#12
Moin,

also es könnte sein, dass das jetzt (ohne "Vorlage") ein wenig zu aufwendig wird das zu erklären.

Wenn Du das wirklich nachbauen willst, dann solltest Du mal total einfach und Schritt für Schritt beginnen. Ich spreche jetzt über diese Seite von mir:

http://www.nof-tutorials.com/Responsive-Website/

*) Öffne ein neues Projekt

1.) Stelle die Master-Rahmen-Eigenschaften auf "ZeroMargins" (keine Ränder)

2.) Stelle die Layoutbreite meinetwegen (Beispiel) auf 990px

3.) Ziehe einen Layout-Bereich auf Deinem Layout auf, der ganz oben auf dem Layout sitzt. Ziehe diesen zunächst auch auf die gesamte Breite von 990px vom Layout auf und auf irgendeine Höhe (später auf die gesamte Höhe, die Du für den Inhalt Deiner Seite benötigst). Der Layout-Bereich sollte oben ganz bündig am Rand des Layouts sitzen.

4.) Ziehe im Layout-Bereich irgendwo ein Textfeld auf die volle Breite von 990px auf.

Klicke im Fenster "Layout-Bereich-Eigenschaften" auf den Button "HTML" und füge diese Style-Anweisung als <div> "vorher" (vor dem Tag) ein. Diese Anweisung stellt den Layout-Bereich auf eine Breite von 100%

Code:
<div style="position:absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width:100%;">

"nachher" (nach dem Tag) schließt Du das <div> wieder mit

Code:
</div>

.jpg  Layout-Brreich-DIV.JPG (Größe: 208,34 KB / Downloads: 29)



5.) Schreibe einen etwas längeren Text in das Textfeld

6.) Gebe dem Textfeld eine Breite (width) von 100% in den Style-Anweisungen.

.jpg  Textfeld-Breite.JPG (Größe: 180,98 KB / Downloads: 13)


... wobei ich jetzt kein NOF 12 hier habe und nicht mehr weiß, ob es dieses Fenster in NOF 12 überhaupt schon gab!?

Publiziere zunächst dieses Seite lokal. Schiebe das Browser-Fenster zusammen und gucke, ob sich der eingegebene Text responsive verhält und nach unten umbricht, wenn Du das Fenster seitlich zusammen schiebst. Wenn das erst einmal geht, dann können wir weiter machen.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#13
... warte mal - bin gerade im Büro wo ich NOF 12 noch habe.

Ich erstelle Dir mal schnell eine responsive Website (allerdings sehr einfach) als "Vorlage" für NOF 12 und melde mich dann wieder.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#14
Ich habe mal eine kleine responsive Website in NOF 12 erstellt.

Das geht ebenso wie mit NOF 2015, allerdings nur mit der HTML-Ausgabe "XHTML 1.0" (da NOF 12 noch kein HTML5 zur Verfügung stellt).

Hier eine Ansicht dieser "Vorlage":

http://www.nof-tutorials.com/NOF12-Responsive-Website/


Download "Vorlage" ab NOF 12 (Update 3):

.zip   2015-06-30-Responsive-Vorlage-Tommy-NOF12.zip (Größe: 482,64 KB / Downloads: 11)


P.S.:

hier noch der Google-Test auf optimierte Websites für meine "Vorlage":

https://www.google.com/webmasters/tools/...Website%2F
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#15
Erstmal vielen vielen Dank, dass du Dir die Mühe gemacht hast....

wenn ich das alles in deinem dokument mache, funktioniert das ... keine ahnung, habe jetzt mal eine neue leere vorlage erstellt. und nach deiner anleitung vorgegangen.

irgendwie funktioniert das nicht, mein problem ist, das nichts zentriert ist und das es irgendwie nicht responsive ist, in deinem dokument funktionierts aber? Huh


Angehängte Dateien
.png  nr0.png (Größe: 612,63 KB / Downloads: 16)

.png  nr1.png (Größe: 438,58 KB / Downloads: 12)

.png  nr2.png (Größe: 640,29 KB / Downloads: 8)

.png  nr3.png (Größe: 759,36 KB / Downloads: 9)

Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren


Möglicherweise verwandte Themen...
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Termin Agenda automatisch in Handys einpflegen LeoNov 9 171 17.05.2019, 06:23
Letzter Beitrag: Tommy Herrmann
  Layout-Höhe verstellt sich immer automatisch Hannes 9 2.924 20.12.2018, 15:33
Letzter Beitrag: barbara0701
  Navibutton an Textlänge anpassen Bagpipedisaster 6 679 07.10.2017, 22:57
Letzter Beitrag: Bagpipedisaster
  NOF 12 - Formatvorlage - Schriftart springt von selbst auf Automatisch zurück selbstmacher 4 1.014 23.03.2017, 14:29
Letzter Beitrag: AndyNeu
  Film schliesst nicht automatisch schiko 6 980 12.01.2017, 16:10
Letzter Beitrag: postler1972
  Widget von Fupa bearbeiten/anpassen Agent-Smith 20 4.183 16.04.2016, 13:50
Letzter Beitrag: Doris Rehhausen
  Header und Footer Background unter Responsive anpassen Ronny2005 20 3.892 28.12.2015, 17:26
Letzter Beitrag: AndyNeu
  Kann man Bilder automatisch (Textlinks) einfügen? Miaminice 42 5.069 26.06.2015, 05:42
Letzter Beitrag: inku
  Schriftart wechselt mal wieder automatisch karl001 5 2.056 22.06.2015, 17:31
Letzter Beitrag: Pittiplatsch
  Alttext optisch anpassen Doris Rehhausen 13 1.792 10.03.2015, 19:28
Letzter Beitrag: Tommy Herrmann



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!