Autor |
Nachricht |
-
testinternet
|
13.09.2014 um 14:35 (UTC) Titel: [erledigt] CSS-Design Windows 8 |
|
|
Hallo Zusammen,
ich habe eine Seite auf Templatemo gefunden das mir sehr gefällt, und ich gerne für mein Portfolio nutzen würde.
http://www.templatemo.com/templates/templatemo_405_matrix/
Die Seite ist mit Java ausgestattet, dies würde ich weg lassen (weil ich damit noch keine Erfahrung habe) d.h. ich würde nur die Bilder haben, die wiederrum verlinkt sind und zu den jeweiligen Seiten führen. Meint Ihr das würde so klappen??
Oder gibt es noch einfachere, bessere Wege, es zu machen????
Falls Ihr eine Idee habt würde ich mich drüber sehr freuen.
Danke im Vorraus.
Gruß
Zuletzt bearbeitet von testinternet am 06.10.2014, 13:32, insgesamt 2-mal bearbeitet
|
|
↑
|
|
|
-
testinternet
|
14.09.2014 um 15:04 (UTC) Titel: |
|
|
Hat den keiner ne Meinung dazu bzw. kleine Hilfe
Oder ist das mit viel Arbeit verbunden
Gruß |
|
↑
|
|
|
-
SIreles
|
14.09.2014 um 16:36 (UTC) Titel: |
|
|
DU kannst ruhig das Komplette design nehmen,
mit java brauchst du garnichts machen, da meist die Java script für direkte Design einstellungen da ist. da die einstellungen ja da sind, brauchst du nix am Java script verändern. |
|
↑
|
|
|
-
testinternet
|
|
↑
|
|
|
|
14.09.2014 um 19:33 (UTC) Titel: |
|
|
Guten Abend,
dieses Template ist ein wenig, sagen wir, speziell.
Normalerweise gibt es ja eine (meist links und/oder oben) feststehende Menüleiste und der Inhaltsbereich ist immer an der selben Stelle. Das ist hier nicht der Fall.
Daher wird auch die Anleitung nicht vernünftig funktionieren.
Ich habe mal auf einer Testseite ausprobiert, ob dieses Template so oder so ähnlich im Baukasten möglich ist.
Das Ergebnis schaut so aus: http://transint-test3.de.tl/
Denke dir bitte schönere Grafiken und Farben dazu Der Link "Über uns" ist auch anklickbar.
Kleinigkeiten wie Header, Footer und Hintergrund kann man jederzeit noch anpassen, das war nur noch von einem anderen Design-Test übrig
Gruß,
TransInt ______________ Kein Support per PN - Im Forum hilft es allen!
Life is what happens while you are busy making other plans.
- John Lennon |
|
↑
|
|
|
-
testinternet
|
14.09.2014 um 19:48 (UTC) Titel: |
|
|
Hallo zusammen,
vielen Dank transint, dass du dir die Mühe gemacht hast, es auszuprobieren.
Ich finde es ist supper gelungen....
Hast du das Javascript mit eingefügt oder ohne?
Könnte ich den Code sehen damit ich verstehen kann wie du es gemacht hast.
Gruß |
|
↑
|
|
|
|
15.09.2014 um 15:19 (UTC) Titel: |
|
|
Freut mich, dass es dir gefällt
JavaScript ist keines dabei. Für die Startseite habe ich das Extra "Intro" genommen, aber die Inhalts-Seiten sind (bis auf etwas CSS-Code) völlig unverändert, es werden keine zusätzlichen Elemente gebraucht. Ich habe nur ein paar Elemente ausgeblendet, die ich nicht brauche
Die Startseite ist da, wie schon angedeutet, ein kleiner Sonderfall. Dort habe ich das ganze Gerüst selbst gebaut, Hintergrundbilder eingebaut etc. Wahrscheinlich eher weniger interessant
Auf den Seiten "Team", "Geschichte" und "Noch was" kommt allerdings nur folgender CSS-Code zum Einsatz. Dieser muss in den Quelltext der entsprechenden Unterseite.
Zitat: <style type="text/css">
#nav_container { width: 275px; height: 600px; margin: 0 5px; }
li.nav_element { width: 270px; height: 122px; background-color: gold; background-image:none; display:none; margin: 0 0 20px 0; text-align: center; padding: 0; }
li.nav_element.subpage { display:block; padding-right: 5px; }
#nav_Zurck { display:block; width: 275px; height: 174px; background-color:grey; }
#content_container { width: 710px; margin: 0; }
#content { width:350px; height: 600px; overflow: auto; margin: 0 20px 0 10px; }
#post_content { width: 300px; height: 600px; float: left; background-image: url(http://img.webme.com/pic/t/transint-test3/eins.jpg); }
#nav_heading { display:none; }
#header_container { display:none; }
#sidebar_container { display:none; }
li.nav_element a { color: white; height: 79px; text-decoration: none; padding-top: 43px; font-size:27px; display: block; }
#nav_Zurck a { height: 112px; padding-top: 62px; font-size: 31px; }
li.nav_element a:hover { color: white; text-decoration: none; }
li.nav_element a:active { outline: none; }
</style>
Navi-Überschrift, Header und Rechte Box sind ausgeblendet.
Die Links in der Navi sollen ja schön sein Daher ein wenig Kosmetik: Farbe, Position, Schrift,...
Einzig dieser Teil sorgt für die Struktur. Dort werden Navigation, Menüpunkte und der Content in Form sowie auf Postition und Abstand zueinander gebracht.
Das Bild ganz rechts ist ein Hintergrundbild eines schon vorhandenen Elements, eine einfache CSS-Anweisung reicht dafür also aus.
Allerdings brauchst du die passende Menüstruktur.
- Eine beliebige Hauptseite, z.B. "Über uns"
- Drei Unterseiten dieser Hauptseiten (z.B. "Team", "Geschichte", "Noch was")
- Einen Zurückbutton als Menüpunkt ohne Link, mit folgendem Text: <a href="/" class="menu">Zurück</a>
Der Zurückbutton muss eine "Hauptseite" sein.
Zwei Dinge dazu:
1. Wenn du dieses Design tatsächlich nutzen möchtest, ist es einfacher, manche der CSS-Codes woanders zu notieren. Nur Farben und Hintergrundbilder müssen dann noch in den Quelltext der Unterseite.
2. Diese ganzen Dinge klingen jetzt vielleicht wahnsinnig kompliziert. Dieser Code da, der nicht, der aber schon usw. Keine Panik, das tut es immer, wenn man die Funktion und Verwendung der Codes sowie die notwendige Menüstruktur gleichzeitig erklärt
Falls du noch Änderungswünsche zu dem Template hast (mehr/weniger Seiten, mehr/andere Farben, andere Position(en) der Bilder/Texte etc.) wäre jetzt der Zeitpunkt. Wenn nicht, würde ich es so, wie es ist, baukastentauglich machen.
Gruß,
TransInt
P.S: Es kann sein, dass der Code, falls du ihn testest, nicht perfekt funktioniert. Das liegt daran, dass ich schon andere CSS-Codes "ausgelagert" habe, die dann fehlen könnten. ______________ Kein Support per PN - Im Forum hilft es allen!
Life is what happens while you are busy making other plans.
- John Lennon |
|
↑
|
|
|
-
testinternet
|
15.09.2014 um 19:09 (UTC) Titel: |
|
|
Guten abend zusammen,
Vielen dank transint für die große mühe.
Ich werde erst am wochenende zeit haben um deinem tutorial nach zu gehen, freue mich jetzt schon drauf.
Der rest kann so bleiben, was wichtig ist, dass beim klicken des links "Portfolio" eine neue seite mit den "Projekten" kommt. Dort sind dan 11 Projekte aufgelisstet. Bleim klick eines projektes sollte dan eine neue seite kommen mit den plänen ( Bilder) des ausgewähltem projekt.
Mit welchem Programm machst du den das ganze??
Gruß
Zuletzt bearbeitet von testinternet am 16.09.2014, 20:04, insgesamt einmal bearbeitet
|
|
↑
|
|
|
-
testinternet
|
20.09.2014 um 15:36 (UTC) Titel: |
|
|
Hallo Zusammen,
dank deiner Hilfe habe ich es jetzt geschaft transint: vielen Dank dafür.
Ich habe noch zwei kleine Probleme:
Beim Intro ist oben auf der Homepage ein text "Weiter" das in die HP weiterleitet. Dies wollte ich verdecken bzw. weg haben.
Hier im Forum fand ich diesen Befehl:
input{display:none;}
aber irgendwie klappt es nicht.
Das zweite Problem ist, dass im Menü "Über Uns" die Seite nicht ganz mit der Startseite (intro) übereinstimmt d.h. von der Positionierung. Vielleicht kann man das so machen dass die Homepage von der Mitte des bildschirmes sowohl nach links als auch nach rechts sich anpasst.
Mit welchem Programm hast du den die Homepage angepasst bzw bearbeitet.
Gruß
Zuletzt bearbeitet von testinternet am 20.09.2014, 18:21, insgesamt einmal bearbeitet
|
|
↑
|
|
|
-
testinternet
|
23.09.2014 um 10:28 (UTC) Titel: |
|
|
Hi
sry wenn ich jez frage, aber wie lange könnte es dauern bis du mir Antwortest bzw. Mir weiter geholfen wird.
Gruß |
|
↑
|
|
|
|
23.09.2014 um 12:04 (UTC) Titel: |
|
|
Hallo,
entschuldige die späte Antwort.
Dein #container auf den Unterseiten hat eine Breite von 1150px. Damit ist er schlicht breiter als der #start_container im Intro mit 1100px.
Somit ist der #container, mittig platziert, nach links und rechts je 25px breiter - nach rechts sieht man es bloß nicht.
Auch der #content_container ist 50px breiter als nötig.
Wenn du also beim #container und beim #content_container die Breite um je 50px verringerst, sollte alles funktionieren
Übrigens verwende ich als einziges Hilfsmittel das Firefox-Addon Firebug. Damit kann man (in der lokal gespeicherten Kopie einer Webseite) die CSS-Eigenschaften und sogar den HTML-Code von Webseiten verändern oder sich einfach nur - zum besseren Verständnis des Codes - die Elementstruktur anschauen.
Wenn mir das Ergebnis zusagt, übernehme ich die Änderungen dann in das Design.
Erst wenn so das Grundgerüst steht, kommt ernsthaftes Farbdesign zum Einsatz.
Bearbeitungssoftware wie etwa den Dreamweaver finde ich für den Baukasten übertrieben.
Gruß,
TransInt
Edit: Den Link kannst du folgendermaßen ausblenden:
Zitat: a[href="/Startseite.htm"] { display:none; }
Sinnvollerweise im Intro innerhalb der Styletags platziert, bewirkt der Code, dass auf alle a-Elemente (= Links) deren href-Attribut (= Adresse, die beim Klick aufgerufen wird) /Startseite.htm lautet, die Anweisung display:none; angewendet wird.
Wenn du deine Startseite z.B. Home nennst (so wie ich auf meiner Testseite), musst du den Code dementsprechend anpassen. ______________ Kein Support per PN - Im Forum hilft es allen!
Life is what happens while you are busy making other plans.
- John Lennon
Zuletzt bearbeitet von transint am 23.09.2014, 13:43, insgesamt einmal bearbeitet
|
|
↑
|
|
|
-
testinternet
|
23.09.2014 um 13:19 (UTC) Titel: |
|
|
Super!!!
Viel Dank nochmal Transint für deine Antwort und deiner Hilfe.
Gruß |
|
↑
|
|
|
-
testinternet
|
|
↑
|
|
|
-
testinternet
|
26.09.2014 um 18:11 (UTC) Titel: |
|
|
Sry wenn ich wieder ungeduldig bin, ist auch unhöflich von mir, aber hat keiner ne idee oder habt ihr tipps/Tutorials wie ich das selber basteln könnte.... ich würde gerne selber versuchen jedoch weiss ich nicht wo ich anfangen soll??
Gruß |
|
↑
|
|
|
|
28.09.2014 um 19:28 (UTC) Titel: |
|
|
Hallo,
ich habe da mal was gebastelt: http://transint-test4.de.tl
Gleich vorweg: Die Portfolioseite genau so wie in dem Template umzusetzen erfordert einen relativ unübersichtlichen Quellcode.
Diese Seite wäre definitiv nicht zur täglichen Bearbeitung geeignet. Vielleicht einmal im Vierteljahr oder so. Höchstens
Für die von der Vorlage leicht abweichenden Rahmen und Abstände der Bilder habe den Code von Seo ein bisschen geändert, um die Bilder möglichst gut in die Seite "einzupassen".
Ansonsten habe ich das Design"grundgerüst" nochmal überarbeitet.
- Allgemeine Codes stehen jetzt bei "CSS Code ohne Styletags", da wo sie hingehören
- Auf den Textseiten findet sich nur noch der "individuelle" Code (Farben, "Spezialmaße" etc.)
Wenn dir das so gefällt, kann ich dir den Code gerne geben oder auch noch ein paar Anpassungen vornehmen.
Gruß,
TransInt ______________ Kein Support per PN - Im Forum hilft es allen!
Life is what happens while you are busy making other plans.
- John Lennon |
|
↑
|
|
|
|