Photoshop-Cafe.de :: Dein Photoshop-Forum

Photoshop-Cafe.de :: Dein Photoshop-Forum (https://www.photoshop-cafe.de/forum/index.php)
-   Lounge (https://www.photoshop-cafe.de/forum/forumdisplay.php?f=15)
-   -   Meine Homepage Geschafft! (https://www.photoshop-cafe.de/forum/showthread.php?t=10169)

sb-canerods 26.10.10 15:21

Geschafft!
 
Hallo,
nun ist es endlich geschafft, meine Homepage ist komplett neu gestaltet und überarbeitet. Und danke an diejenigen, die mir bei meinen Problemchen behilflich waren :ok:
Grüße Simon

http://www.sb-canerods.de

Bergkristall 26.10.10 18:58

Mir gefällt Deine Homepage Simon, sehr interessant!
Du kommst ja ganz schön herum zum Fischen!
Ich komme wenn überhaupt nur zum Weiher oder Bach in der Nähe!

PETRI HEIL
und Gruß
Jörg

PeWo 26.10.10 20:54

Klasse Simon mir gefällt Deine Homepage auch und was Du so machst :ok:,tolle Bilder dabei, da wäre ich auch gerne beim Angeln, aber da geht`s mir wie Jörg komm vom Weiher oder Bach/Fluß nicht weg.
Wünsch Dir natürlich auch weiterhin
PETRI HEIL und einen guten Fang!

Gruß Peter

sb-canerods 27.10.10 07:48

Hallo Jörg, Hallo Peter,

freut mich, dass meine Homepage euch gefällt.

Grüße Simon

gelöschter User 27.10.10 08:05

Hi Simon

Auch wenn du mich jetzt lynchen möchtest – ich kenne das nur allzu gut – möchte ich doch noch etwas konstruktive Kritik zu deiner Seite anbringen:
- das weiße Textfeld ist im Kontrast viel zu hart, hast du schon mal ein leichtes beige versucht, das in etwa dem Farbton deiner Ruten entspricht?
- und auch die ganzen grünen Umrandungen der Schriften würde ich nochmal überdenken, auch im Logo; vielleicht auch was eher bräunliches!?
- So, mit der doch relativ fetten Schrift sieht´s ein wenig aus, wie aus der Senftube gedrückt.
- Schriftart würde ich übrigens auch nochmal dran rumwerkeln!

Für die HTML-Programmierung:
- gib doch mal im TAG <a href="..." onfocus="blur()"> ein, dann kommt beim Klicken auf den Link nicht diese unschöne gestrichelte Umrandung der aktiven Schaltfläche (zumindest beim IE und Windows).

Ansonsten gefällt mir deine HP sehr gut, und was du da so Alles treibst scheint ja genau dein Ding zu sein.

LG Frank :ok:

sb-canerods 27.10.10 18:41

Hallo Frank,

na du bist mir ja einer :motz2
Das mit dem ie und den umranden links habe ich jetzt noch geändert.
Momentan lasse ich die Seite jetzt mal so, aber trotzdem danke für deine Meinung.
Ach ja, eines ist mir noch aufgefallen, die untere Navigation links, impressum...
kann mir einer sagen, warum hier der Abstand zwischen den links nicht gleich den oben ist??
Grüße Simon

Ramira 28.10.10 13:51

Hey Simon,

ich schließe mich da Frank's Kritik an, die Punkte sind mir auch aufgefallen.
Außerdem finde ich es ist irgendwie so an sich ja schon super, aber irgendwie:
1. Fehlt mir da dieser "AAAH"-Effekt um auf der Seite zu bleiben &
2. viel zu viiiiel Text.

Trotzdem von der Programmierung her klasse :)

Liebe Grüße,
Chrissy

kalifrago 03.11.10 19:43

Zitat:

Zitat von sb-canerods (Beitrag 144337)
Hallo Frank,


Ach ja, eines ist mir noch aufgefallen, die untere Navigation links, impressum...
kann mir einer sagen, warum hier der Abstand zwischen den links nicht gleich den oben ist??
Grüße Simon

gib mal für deinen footer-container statt "class="navbuttons" eine "id" ein, dann sollte das funzen...in der id für die navbuttons hast du nämlich eine grösse für deine a-tags eingerichtet......

kalifrago 08.11.10 19:06

hallo sb-canerods,

hast du meinen tip schon ausprobiert ?

sb-canerods 09.11.10 10:59

Hallo Kali,

danke für den Tipp, ausprobiert habe ich ihn noch nicht. Ich hoffe ich komme heute Abend dazu.
Aber wenn ich anstatt der class, eine id setze dann habe ich die gleiche id zweimal.
Ich dachte man soll einmal das id definieren und alle weiteren dann per class.

Grüße Simon

kalifrago 09.11.10 11:57

oh das hab ich gar nicht gesehen, mein fehler, natürlich darfst du eine id nur einmal vergeben, aber eine class=navbuttons hast du ja gar nicht angelegt....dann musst du eben noch eine class oder id anlegen mit der padding-angabe von 10px, speziell für die buttons im footer....ich hoffe ich habe mich verständlich ausgedrückt......ich habe der class=navbuttons in deinem dokument über firebug die padding-angabe eingefügt und da sah das genau so aus wie oben ;) aber eins noch, ich versteh nicht ganz, dass du id's und classes angelegt hast, aber zusätzlich noch eine styleangabe für das div geschrieben hast ? warum machst du die styleangaben nicht gleich in deine id-angaben mit rein ?

heikehk 09.11.10 13:32

Hi,

die Seite an sich finde ich ganz schön, aber auch ich habe noch ein paar ANmerkungen :whistling
  • Mich irritiert, dass im Hauptmenu nichts passiert, wenn ich mit der Mouse drüber fahre. Mir würde ja ein leich veränderter Hintergrund oder ein heller Schimmer von unten schon reichen
  • Die "Diashow" auf den Seiten finde ich zu viel. Ich fände eine Zuordnung der verschiedenen Bilder für die verschiedenen Menu-Punkte besser. Dann kann man sich auch besser orientieren.
  • In der Fußzeile finde ich es schade, dass der Hintergrund nur zur Hälfte hinter den Links ist und auch dort würde ich mir wünschen, dass sich was tut, wenn ich mit der Mouse drüber komme.
  • Die Fußzeilenlinks würde ich in einer etwas anderen Form als die der Hauptnavigation machen
  • Den Bruch in der Optik zwischen Homepage und Bildergalerie finde ich persönlich zu hart.

Nur so auf die Schnelle. Hoffe Du nimmst es mir nciht übel :whistling:

Gruß
Heike

sb-canerods 11.11.10 15:05

Hallo,

danke für eure Meinungen. Ich kenne mich in Sachen programmierung und generell Websitedesign nicht wirklich aus, deshalb erscheint euch manches vielleicht amateurhaft, ist es im Endeffekt auch.
Das mit der navigation mit dem definieren der class, habe ich nicht hinbekommen, wusste nicht was ich in der Datei navbuttons eintragen soll :nixweiss:

Grüße Simon

heikehk 11.11.10 15:12

Wenns nicht eilt, dann kannst Du mir die ja mal schicken...
Außerdem ist die Seite viel aber nciht Amatuerhaft. Da gibt es deutlich schlimmeres im Netz....
Wir wollen Dir ja nur helfen, dass sie noch besser wird...

Gruß
Heike

sb-canerods 11.11.10 17:33

Hallo Heike,
ich nehme die Kritik doch gerne an.
Gerne schick ich dir Datei, kannst sie aber auch runterladen.
Grüße Simon

heikehk 11.11.10 18:00

schick sie mir einfach ;)
was ich in meiner email hab wird gemacht und nicht vergessen

sb-canerods 11.11.10 20:46

Wollt ich grad machen, leider ist deine email nicht in deinem Profil hinterlegt.
Gruß Simon

heikehk 12.11.10 12:33

Hi Simon,

habe mir Deine doch sehr übersichtliche CSS :whistling angesehen. Da kann natürlich bei dem Überfahren mit der Mouse nicht viel passieren.
Ich bin ja mittlerweile bekennender YAML Fan und die dort verwendete Navigation kann man anpassen wie man möchte. Die Quelle der CSS ist YAML und ein wenig von mir.

Ich geb Dir mal ein paar Schnipsel rüber, wie so eine Navigation aussehen könnte:

Zitat:


Navigation HTML:
<!-- begin: main navigation #nav -->
<div id="nav" role="navigation">
<div class="hlist">
<ul>
<li><a href="home.html" id="home">Home</a></li>
<li><a href="uebermich.html" id="ich">&Uuml;ber mich</a></li>
...
<li><a href="bilder.html" id="bilder">Bilder</a></li>
</ul>
</div>
</div>
<!-- end: main navigation -->

Hier ist wichtig, dass jeder Navigationspunkt eine eigene id bekommt, die dann auch zugewiesen ist. Hier wird dann über CSS der Text weggeschoben und durch ein Hintergrundbild ersetzt.
Das ist ein sogenanntes barrierefreies Design, die es auch behinderten mit Lesegeräten oder Leuten ohne HTML-Browser ermöglicht die Inhalte zu erkennen. Suchmaschinen finden das auch lesbarer.


Zitat:


Navigation CSS:


.hlist { <----- Hier wird zunächst der "Balken" definiert
/* (en) containing floats in IE */
/* (de) Einfassen der Floats im IE */
width:100%; <----- breite 100%vom umgebenden DIV
overflow:hidden;
/* (en) containing floats in all other browsers */
/* (de) Einfassen der Floats in allen anderen Browsern */
float:left;
display:inline;
/* (en|de) Bugfix:IE - collapsing horizontal margins */
position:relative;
/* (en) Repeat the main color from the image */
/* (de) Wiederholung der Hauptfarbe aus der Bilddatei */
background-color: #e5e9ea;
background-image: url(../../css/images/hg_navi.png);
background-repeat:repeat-x;
/* border-bottom:1px #7c4b59 solid;*/
line-height:0;
height:25px;
}

.hlist ul {<----- Hier wird die Liste für die Navigation erstellt
margin:0;
padding:0;
/* (en|de) Bugfix:IE - Doubled Float Margin Bug */
display:inline;
float:right; /* LTR */
/* (en) Left margin of the first button */
/* (de) Abstand des ersten Buttons vom linken Rand */
/* border-left:1px #aaa solid;<----- wer will kann rechts und links Striche einfügen
border-right:1px #fff solid; */
}

.hlist ul li {
/* border-left:1px #fff solid;
border-right:1px #aaa solid; */
/* (en|de) Bugfix:IE - Doubled Float Margin Bug */
display:inline;
float:left; /* LTR */
font-size:1.0em;
line-height:1em;
list-style-type:none;
text-indent: -9999px; <----- Hier wird der Text weggeschubst (für jeden Navigationspunkt)
margin:0;
padding:0;
}

An dieser Stelle definierst Du für jeden der Navigations IDs die verschiedenen Zustände. Die Reihenfolge ist wichtig. Wenn Du den Text durch Bilder ersetzt, dann muss eins für normal, eins für drüber mit der Mouse und eins für Aktiv bauen und entsprechend sinnvoll benennen.
die Definition als Strong in dieser Verschachtelung ist sowas wie Standard, dass man den Aktiven Link statt als Link nur strong definiert und er genauso aussieht, wie active


#nav .hlist #home { width: 45px; background-image:url(../../css/images/home.png);}
#nav .hlist #home:hover { width: 45px; background-image:url(../../css/images/home_hover.png);}
#nav .hlist #home:active { width: 45px; background-image:url(../../css/images/home_active.png);}
#nav .hlist #home strong { width: 45px; background-image:url(../../css/images/home_active.png);}


#nav .hlist #ich { width: 45px; background-image:url(../../css/images/ich.png);}
#nav .hlist #ich:hover { width: 45px; background-image:url(../../css/images/ich_hover.png);}
#nav .hlist #ich:active { width: 45px; background-image:url(../../css/images/ich_active.png);}
#nav .hlist #ich strong { width: 45px; background-image:url(../../css/images/ich_active.png);}
....

.hlist ul li a,
.hlist ul li strong {
background:transparent;
color:#000;
display:block;
font-size:1em;
font-weight:bold;
margin:0;
padding:0.5em 0.8em 0.5em 0.8em;
text-decoration:none;
width:auto;
background-image:url(../../css/images/hg_navi.png); <----- Hintergrund der Navigationselemente
background-repeat: no-repeat;
height: 20px;
}

bei den allgemeinen CSS definitionen könntest Du jetzt noch Farben definieren. Ob das nötig ist, musst Du entscheiden. Diese kommen für alle Elemente der Navigation zum Einsatz, die keine eigene ID haben.

.hlist ul li a:focus,
.hlist ul li a:hover,
.hlist ul li a:active {
background-color: #c1c9cb;
color:#7c4b59; text-decoration:none; outline: 0 none; }

.hlist ul li.active {
/* (en) Repeat the main color from the image */
/* (de) Wiederholung der Hauptfarbe aus der Bilddatei */
background-color: #c1c9cb;
background-position: top;
background-repeat: repeat-x;
}


.hlist ul li.active strong,
.hlist ul li.active a:focus,
.hlist ul li.active a:hover,
.hlist ul li.active a:active { background:transparent; color:#7c4b59; text-decoration:none; }

Vielleicht hilft Dir das ja weiter. Alles nur CSS kein Java und trotzdem hübsch. Und mach die Diashow weg, ich finde, wenn Du die Bilder auf die einzelnen Seiten verteilst das Design ruhiger und angenehmer...

Hoffe das hilft Dir etwas

Gruß
Heike

sb-canerods 15.11.10 07:37

Hallo Heike,

vielen Dank für deine Mühe! Leider bin ich zeitlich momentan etwas eingeschränkt.
Ich hoffe ich komme diese Woche mal dazu das umzusetzen. Danke.

Grüße
Simon

heikehk 15.11.10 07:58

Hi Simon,

kein Problem :emo_biggr Immer gerne.
Falls Dir das oben stehende zu kompliziert ist, noch eine andere Lösung, die auf Deiner CSS basiert.

Zitat:

#navbuttons a{

display: inline;

background-image:url();

width:128px;

height:19px;

text-align:center;

font-size:12px;

color:#eafeb0;

text-decoration:none;

padding-top:4px;

padding: 10px;
}

#navbuttons a:strong,
#navbuttons a:focus,
#navbuttons a:hover,
#navbuttons a:active {

background-image:url(../navigation/HG_Nav.png);

color:#666666;

}
Damit tauschst Du den Hintergrund aus, von nix auf einen gelben Schimmer (siehe Anhang). für Internet Explorer 6 bis 8 brauchst Du für PNG-Dateien mit Transparenz einen PNG-Patch. Wenn Du den nicht hast, solltest du Deine Navigationselemente mit dem entsprechenden Hintergrund versehen.

Gruß
Heike

sb-canerods 15.11.10 11:46

Hi Heike,
danke das sieht in der Tat einfacher aus :emo_biggr
Ist da das Problem mit den Abständen in der unteren Navigation
auch behoben?
Gruß Simon

heikehk 15.11.10 11:57

Ehrlich gesagt habe ich mich um Abstände etc. in keinster Weise gekümmert.
Ging mir nur um den Effekt, dass was passiert, wenn Du Mit der Mouse über einen Menupunkt gehst.


Gruß
Heike

heikehk 15.11.10 21:15

Ok ich hab mir das mal angesehen, allerdings keine Garantie auf nix.
Probier mal folgendes:

Navigation in HTML:
Zitat:

<div id="navbuttons" >
<a href="index.htm"<img src="../navigation/home.png" alt="Startseite"></a>
<a href="uebermich.htm"><img src="../navigation/uebermich.png" alt="Über mich"></a>
<a href="rutenbau.htm"><img src="../navigation/rutenbau.png" alt="Rutenbau"></a>
<a href="garantie.htm"><img src="../navigation/garantie.png" alt="Garantie"></a>
<a href="rutenbaukurs.htm"><img src="../navigation/rutenbaukurs.png" alt="Rutenbaukurs"></a>
<a href="wurfkurs.htm"><img src="../navigation/wurfkurs.png" alt="Wurfkurs"></a>
<a href="kontakt.htm"><img src="../navigation/kontakt.png" alt="Kontakt"></a>
<a href="Coppermine"><img src="../navigation/bilder.png" alt="Bilder"></a>
</div>

Dieses onBlur macht ja nix und das mit dem Rahmen um das Bild solltest Du über CSS klären, wobei ich grad nicht auswendig weiß, ob Du das in der Definition von a im DIV machen musst, oder ob border: none; auf oberster Ebene reicht...

Dann solltest Du den Container der Navigation einzeln schon mal im CSS definieren..

Zitat:

#navbuttons {
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
border: none;
background-color: #; /*Farbe angeben*/
}

#navbuttons a{
display: inline;
/* background-image:url();
/* width:128px;
height:19px; */
text-align:center;
font-size:12px;
color:#eafeb0;
text-decoration:none;
/* padding-top:4px;*/
padding: 10px;
}

Hab mal alles auskommentiert, von dem ich denke, dass Du es nicht brauchst. Allerdings kann ich mich auch vertippt haben. Unter Umständen muss das border: none; an einen anderen Platz.

Kannst ja erstmal bei Dir probieren, bevor Du es hochlädst.

GRuß

Heike

sb-canerods 16.11.10 17:07

Hallo Heike,
danke Dir, leider hat das mit den Abständen nicht hingehauen.
Gruß SImon

kalifrago 16.11.10 17:35

ähm, ich will ja nicht einmischen, aber das mit den abständen hab ich doch weiter vorne schon mal geschrieben, haste das nicht mal ausprobiert ? :whistling

sb-canerods 16.11.10 17:58

Hallo Kali,
ich weiß nicht wie ich das machen muss, eine class anlegen mit padding 10, leider :nixweiss:
Gruß Simon

heikehk 16.11.10 18:07

Welche Abstände genau meinst Du denn??

sb-canerods 16.11.10 18:14

Die Abstände in der unteren Navigation zwischen den Wörtern "Stammtisch, Links und Impressum".

heikehk 16.11.10 20:57

Die Abstände habe ich nicht definiert.
Das musst du einen eigenen div dafür erstellen, in dem sie dann linksbündig angeordnet sind und für den Du dann das padding definierst. Dann klappt das auch mit dem Hintergrund.
Ein DIV mit id darf immer nur einmal im Dokument verwendet werden.
Für die Einstellungen kannst du aber die funktionierenden Definitionen kopieren und daraus eine neue Id definieren z.b. #footer und dort die Anpassungen vornehmen.

Gruß
Heike

sb-canerods 17.11.10 18:16

Danke, das mit den Abständen hat jetzt geklappt.
Gruß Simon

heikehk 17.11.10 18:17

Und warum wechselt der Hintergrund noch nicht :whistling

sb-canerods 17.11.10 21:11

Ja, das hab ich noch nicht ganz überrissen:bleh:
Hoffe dass ich mir das morgen mal näher anschauen kann:ok:

kalifrago 17.11.10 21:42

hey prima, ich wollt dir grad nochmal erklären, bzw. n paar css-zeilen schreiben, aber nu hat sichs ja erledigt :ok:

heikehk 18.11.10 11:09

Also eigentlich ist das nur der Austausch der Hintergrund-Grafik, so wie ich mir das vorgestellt habe. Sollte also mit ein wenig durchlesen und einfügen klappt.

Viel Erfolg und Fragen hier rein ;)

sb-canerods 19.11.10 18:00

Hallo Heike,
so, ich habe jetzt mal versucht deinen Vorschlag auf Seite2 (letzter Beitrag) umzusetzen. Ich denke das sollte so nicht aussehen.
Kannst es dir ja mal anschauen:
www.sb-canerods.de/test.htm
www.sb-canerods.de/navtest.css

Gruß Simon

heikehk 19.11.10 20:17

Muss ich noch mal in Ruhe ausprobieren.
Da hab ich irgendwo noch nen wubel reingebracht, den ich aber nicht sehe...
Aber erst am Montag...

Gruß
Heike

heikehk 20.11.10 10:31

Hi Simon,

ich habe mich bei strong vertippelt.
Leider finde ich gerade in meinem CSS-Buch das nicht, ob da ein Punkt davor gehört oder nicht... Nimm diese Zeile mal raus. Dadurch, dass diese erste Zeile falsch ist, nimmt der den Rest auch nicht.

Füge bitte auch noch ein, dass Du border: none; haben möchtest, da Firefox einen Rahmen um das Bild legt.

Hoffe dass dann der Austausch des Hintergrundes passt. Ich such nochmal nach strong, aber ich bin etas im Stress.

Gruß
Heike

sb-canerods 20.11.10 17:31

Hi Heike,
danke! Sieht jetzt zwar anders aus, passt aber denke ich immer noch nicht.
Das mit dem border: none; nimmt er anscheinend auch nicht an.
Gruß Simon

heikehk 20.11.10 17:50

Also:

der Hintergrund sollte nicht wiederholt werden:

background-repeat: no-repeat;

Den Rahmen musst Du woanders definiert haben. Schau noch mal nach Deinen Definitionen in den anderen CSS nach a, und hover...
Ein wenig solltest Du auch mal in SELFHTML nachlesen.

Du solltest eventuell auch die Position des Hintergrundbildes auch Center setzen:
background-position: center;

Da bin ich mir aber jetzt mit der Syntax grad nicht sicher und das kommt immer so zwischendrin...

Du musst in Deinen CSS-Dateien die Stelle finden, an der ein Border für Links definitert ist, dann schauen, ob Du den prinzipiell entfernen möchtest und dann die Stellen entsprechend bearbeiten. Probier vielleicht auch statt border: none; mal border: 0px; vielleicht bringt das ja was. Dann aber sowohl für den a als auch für die anderen Zustände.

Ach und vielleicht veränderst Du die PNG für den Hintergurnd noch ein wenig. Das ist ja ein wenig Klein im Verlgeich zu dem Text :whistling

Gruß
Heike

sb-canerods 20.11.10 18:52

So, in der Mitte und ohne Wiederholung ist das png jetzt.
Leider kann ich in der anderen css nichts finden in Sachen border
oder a hover.
Gruß Simon


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:58 Uhr.

Powered by vBulletin® Version 3.8.7 (Deutsch)
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
©2005-2024 photoshop-cafe.de

Seite wurde generiert in 0,03368 Sekunden mit 8 Queries