Geschafft!

[kalifrago]

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]

Hi,

die Seite an sich finde ich ganz schön, aber auch ich habe noch ein paar ANmerkungen

• 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 :

Gruß
Heike

[sb-canerods]

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

Grüße Simon

[heikehk]

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]

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

[heikehk]

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

[sb-canerods]

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

[heikehk]

Hi Simon,

habe mir Deine doch sehr übersichtliche CSS 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:

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.

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]

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]

Hi Simon,

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

#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