Slycen? Wie realisieren?

Hey ihr Hilfsbereiten. xD Schon mal danke im Voraus, dass ihr in den Tread reinguckt.
Ich hab eine Frage. Und zwar möchte ich mir mit bescheidenen Mitteln (GIMP und Nvu - quasi die kleinen Freeware-schwestern von Photoshop und Dreamweaver xD) eine kleine Page aufbauen. Diese würde allerdings teilweise auf Bildern aufbauen, und macht mir desswegen ein wenig Sorgen (bezüglich Bildschirmauflösung und Text).

Wenn das hier: http://i936.photobucket.com/albums/ad202/ketru/Page.jpg

Mein Design-vorschlag wäre, wie würdet ihr diesen Realisieren? So dass sich möglichst nichts verschiebt, wenn die Auflösung verändert wird… Ich möchte unter den “News” kasten kleine Einträge posten können, und IN den “Gigs” kasten einen kleinen Kalender. In Nvu kann ich aber nicht über grafiken schreiben, oder? Und den Kasten zum Hintergrund zu nehmen ist ziemlich suboptimal…
Die Elemente hab ich als GIMP-Datei, und kann sie zerschnipseln wie gewünscht.
Habt ihr irgend eine Idee, oder müsste ich mich da tiefergehend mit HTML und PHP befassen?

Vielleicht wäre es ja auch einfacher, einen (Hobby-)Webdesigner in der Nähe zu suchen, aber ich möchte es schon gerne erst mal selbst probieren. ^^

Also sind meine Ziele hoffnungslos gesteckt, oder gibt es da daurchaus einen Weg, die Page so erscheinen zu lassen?

Guten Rutsch, Ketru

Hi,

da gibt es eigentlich nur 2 Möglichkeiten…

entweder du passt alles prozentual an - da spielt die Bildschirmauflösung nurnoch eine untergeordnete Rolle, oder du zentrierst alles bspw. in einem wrapper-div. Damit wird halt einfach links und rechts der Seite nix angezeigt wenn die Auflösung höher ist als die für die Seite optimierte.

Also dein “Design” ist jetzt nicht wirklich problematisch umzusetzen. Problematisch wirds erst, wenn sich das ganze dynamisch erhöhen soll.

Das einfachste ist es du:
[ul]
[li]Zentrierst den Inhaltsteil in der Mitte[/li]
[li]Verwendest nur das Schwarze mit transparentem Hintergrund als Hintergrund des Inhalts[/li]
[li]Verwendest das Hintergrundmuster des Rahmens als Seitenhintergrund[/li][/ul]

Der Inhalt selbst ist keine große Herausforderung.

Was würde das dann bewirken? Dass die Page immer die Gleiche grösse hätte?
Müsste mann dann nicht immer nach links und rechts scrolen?

Das ist mir zu hoch. xD Also das “Pergament” wäre dann der eigendliche Hintergrund der Page, oder? Und wie mach ich dann den “verzerrten” schwarzen Hintergrund?
Über Grafiken schreiben geht ja eben nicht, oder?

Danke, Ketru

Hallo ketru

GIMP und Nvu sind schon keine schlechten Programme,würde dir aber zum Nachfolger von NVU raten zu KompoZer!Das ist ein stabileres und mit weniger Fehlern behaftetes Programm.Hier der link zum Download Hier das Forum!

Zu Gimp gibt es auch ein Forum und eine Gimp Werkstatt mit vielen Anleitungen.
Du kannst dann selber alles erstellen,für das ausgefranste musst du in Gimp mit ebenen Arbeiten,dann funktioniert das auch!Also schau mal in beiden Foren vorbei!
Da findest du sicher etwas!

Gruß Camou !coffee

@camou: Vielen Dank für den Tipp mit KompoZer! Werd ich mir gleich mal anschauen.
Das mit Gimp ist mir allerdings klar, denn das “design” stammt von mir selbst, und wurde mit GIMP erstellt. :wink:
Nun frage ich mich einfach, wie ich es vernünftig und ohne es von verschiedenen Bildschirmauflösungen verwurschteln zu lassen online bringe. Beim PC meiner Schwester rutscht z.B. der Menüpunkt “Guestbook” eine Zeile nach unten, was natürlich sehr unschön aussieht.
Dennoch danke schon mal für den Tipp!!!

ketru

Hallo ketru

Dann hat sie also einen kleineren Bildschirm (breite) und deshalb rutscht der Menüpunkt „Guestbook“ nach unten!
Verkleinere doch einfach die leiste der Menüpunkte.
Wenn du es in einen Div gemacht hast wäre es besser die Größe in % anzugeben dann verkleinert oder vergrößert sich die Menü-leiste je nachdem wie breit der Bildschirm ist!
Es wäre hilfreich wenn du den Quellcode deiner Menü-leiste posten würdest :slight_smile: .

Gruß Camou !coffee

Mach ich, sobald ich KompoZer hab! :wink:
Ich glaub den Hintergrund lass ich weg (also den “Pergament-rand”). Der wär eh zu schwierig anzupassen.
Vielleicht mach ich noch was anderes, damits nicht nur schwarz bleibt. ^^
Aber wenn das Menü prozentual angepasst werden kann, dann mach ich das.
Wie schon gesagt, ich guck mir jetzt erst mal KompoZer an.
Die “Kästen” werd ich dann wohl so gut wies irgendwie geht als Tabellen nachbauen,
da sie ja -wie bereits erwähnt- als Grafik nicht zu überschreiben sind.

code wird folgen!
ketru

Edit:

<br>
<table style="text-align: left; width: 100%;" border="0"
 cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="width: 126px;"></td>
      <td style="width: 1059px;"><a
 href="file:///C:/Users/Ketru/Desktop/bandz%FCg/Website/Data/index.html"><img
 style="border: 0px solid ; width: 213px; height: 104px;"
 alt="Home" src="Home.jpg"></a><a
 href="Bio.html"><img
 style="border: 0px solid ; width: 150px; height: 105px;"
 alt="Band" src="Band.jpg"></a><img
 style="width: 154px; height: 105px;" alt="Media"
 src="Media.jpg"><img style="width: 186px; height: 104px;"
 alt="Contact" src="Contact.jpg"><img
 style="width: 286px; height: 107px;" alt="Guestbook"
 src="Guestbook.jpg"></td>
    </tr>
  </tbody>
</table>
<br>

Here we go: Hab das ganze in eine Tabelle gepackt, mit 2 Spalten. Eine als “Platzhalter” und die andere in der die ganzen Bilder fürs Menü sind.
Wo muss ich was verändern, damit das ganze sich prozentual verhält?

Hallo ketru

Da sehe ich schon wo der haken ist.
Du hast die Bilder als link-Element genommen,leider sind alle unterschiedlich groß :neutral_face:
Ich würde dir empfehlen alles erst mal auf eine gleiche Größe zu bringen.Wenn man jetzt hier mit % arbeitet wird alles nur gestaucht oder in die länge gezogen!
Es ist ja schon Standard 1000 bis 1200 px als wert für die breite zu nehmen.Die meisten User benutzen diese Größe :slight_smile: ,da muss der andere Bildschirm klein sein :smiley: .
Ich würde dir empfehlen das nochmal zu überarbeiten!
Es wäre auch hilfreich wenn du dich in html und css ein wenig auskennst!Es ist besser manche Sachen mit divs zu gestalten da sie mehr Möglichkeiten bieten!

Hier eine Anleitung zum arbeiten mit divs für KompoZer :wink:

Gruß Camou

Wow, hatte gerade das absolute Aha-erlebnis! xD
Ich versuchs doch nochmal selbst. Mal schauen was ich alles selber realisieren kann.
Ein wenig vom Design wird wohl sterben müssen, aber einen grossen Teil kann ich wohl doch verwenden. Vielen Dank Camou, kerbination und michi7x7!

Falls ich wieder probleme habe, werd ich mich melden, aber bis dahin habt ihr eure Ruhe. :wink:
Das Tutorial ist übrigens in witzigem (google?-)Deutsch geschriben, aber super hilfreich. =)

Frohes neues Jahr, ketru

Edit: Hat sich erledigt! Hab den Banner einfach neu eingefügt. Muss wohl was im Code gewesen sein. :wink:

Sorry für den Doppelpost, aber es ist ja eine “neue Frage”, und da scheint mir ein Edit unangebracht.
Dank eurer Hilfe geht alles so weit Wunderbar. Hab das ganze ein wenig anders gemacht, und so gefällts mir sogar noch besser!
Ich hab den “Banner” oben bei “inline Styles” mit width 100% angegeben, und bei height nichts, damit diese immer relativ dazu bleibt. Klappt auch wunderbar, sobald ich das Fenster verkleinere, “schrumpft” auch der Banner. Allerdings passiert es ab und zu (zufällig?), dass -wenn ich die Seite online aufrufe- sich der banner nach unten verzieht, und auch das Menü verzieht sich seltsam in der höhe (immer anderst)
Woran könnte das liegen?

[code]

Banner
[/code]

Falls das helfen sollte. :wink:
Vor allem das es so “zufällig” auftritt, verwirrrt mich… bei drücken von F5 passiert es allerdings immer! Ein Poltergeist? xD

Vielen Dank, ketru