Antworten auf deine Fragen:
Neues Thema erstellen

Homepage für Dudelsackspieler

Hallo zusammen,

ich hab gestern die Seite für meinen Mann etwas überarbeitet und wollte wissen, was ihr davon haltet. Inhaltlich ist es leider nicht unbedingt der Knaller, das wird aber noch überarbeitet. Mir geht es im Moment vor allen Dingen um das Layout. Freue mich auf euer Feedback!




P.S.: Falls ihr Tipps für mich habt wie ich bei Navigation (sind Bilder) ein Hover hinbekomme, würde ich mich sehr freuen. Ich hab schon viel rumprobiert, aber leider hat nichts geklappt.... (also z.B. im CSS beide Bilder als Hintergrundbilder für den Link hinterlegt und dann im eigentlichen Link den Text mit span verdeckt)
 

Herr_D

offline

AW: Homepage für Dudelsackspieler

Ist das Blau gewünscht? Paßt meiner Meinung nach nicht... probier mal ein dunkles Weinrot und gib dem Gelb etwas mehr Wärme (kleinen Tick oranger ;)) oder nimm die Farben die den Mann auf den Fotos anhat...



Die Headergrafik solltest du nicht runterscalieren, das ist schlecht für die Qualität...




...ansonsten seit ihr schon auf 'nem guten Weg... bißchen "ordentlich" vielleicht... irgendwo fehlt mir persönlich der Schottenrock... jetzt ist das irgendwie nur normale Hose.... ;)
 
AW: Homepage für Dudelsackspieler

hallo,

gefällt mir nicht o, weil:
das blau und gelb wirkt zu matt und man kann die schrift schlecht lesen, kontrast zu gering
die navigationschriftart ist schlecht leserlich
der dudelsack im kopf geht einfach unter


gruß sfischer

edit:

genau das schotten muster fehlt, wie herr_d sagt!
 

new_one

Aktives Mitglied

AW: Homepage für Dudelsackspieler

Ich muss ehrlich sagen, die Dreizehn hab ich nicht erkannt. Ansonsten finde ich die Seite ansprechend.
 

Mikely

Noch nicht viel geschrieben

AW: Homepage für Dudelsackspieler

Benutzt Du zufällig Dreamweaver? Dort Ist es sehr schnell zu erledigen.
Die Überschrift finde ich ist kaum zu erkennen (Die13teKrähe).
Aber vielleicht ergeht es ja nur mir so.
 

Mikely

Noch nicht viel geschrieben

AW: Homepage für Dudelsackspieler

Sorry, hatte den vorherigen Beitrag nicht richtig gelesen.
Stimmt, der Dudelsack im Header geht fast unter.
 
AW: Homepage für Dudelsackspieler

Danke für das Feedback!
Das Blau ist Absicht, die Seite war vorher weinrot und das sah extrem langweilig aus. Das Gelb sollte eigentlich ein Goldton sein... o_O
Die Schrift passt halt gut zur mittelalterlichen Musik, die mein Mann macht. Seltsam, dass ihr sie kaum lesen könnt, hier auf meinem PC ist sie wunderbar lesbar (kurz am Rande, wie dunkel ist denn das blau bei euch? Bei mir ist es etwas dunkleres royalblau).

Und Schottenröcke haben bei einem deutschen Dudelsack gar nix verloren :)

BTW, das ist meine erste Seite, die ich erstellt hab...
 

oxygen

PS Azubine

AW: Homepage für Dudelsackspieler

also mir gefällt die navi mit der alten schrift gut - weils ja was altes ist

was für meinen geschmack - no go ist ... die contentschrift und die linkschrift auf der rechten seite ... (tahoma oder verdana sehen ordentlicher aus)

obwohls mich nicht gestört hat ...
... zur 13. krähe - wäre vllt n versuch mit nem - also 13-krähe ?!? oder die 13 vergrössern (muss man sehen wie es wirkt)


der versatz navi und links - ist das geplant ?
wenn ja - würd ich noch paar pixel höher setzen - damit es besser wirkt
 

Herr_D

offline

AW: Homepage für Dudelsackspieler

Gut... dann wissen wir ja jetzt bescheid... ich persönlich meinte auch nicht dass du einen Schottenrock (bzw. Muster) einbaust... aber - auch auf dem Foto zu sehen- ich verbinde mit Dudelsack Männer mit Röcken (Mittelalter und oder Schotte ist ja wumpe), also im Vergleich zu heute etwas Besonderes und das Besondere seh ich bei der Seite nicht...


Die Schrift kann ich gut lesen und finde sie auch echt passen... und wo du es sagst, sehe ich es auch als Gold ;)



Das Blau... irgendwie kann ich die Farbe nicht mit dem Mittelalter in Verbindung bringen... dort war doch eher braun, grau, Gold...
 

jona74

Nicht mehr ganz neu hier

AW: Homepage für Dudelsackspieler

Durch das dunkle Blau wirkt die Seite etwas düster.
Ich würde auch die klassischen Farben eines dudelsackes bevorzugen als Hintergrund und das wäre für mich auch rot.Den Goldton finde ich da schön und ein etwas wärmerer Rotton würde meiner Meinung nach besser passen als dunkelblau.
Von der Schriftart her würde ich mal eine Schriftart versuchen die aussieht als hätte man es von Hand geschrieben - müßte man aber halt erst mal sehen wie es wirkt....
 
AW: Homepage für Dudelsackspieler

Ich schliesse mich die anderen an was die Lesbarkeit betrifft. Was mich am meisten stört, ist das alles Zentriert ist. Der Rahmen um das Bild ist langweilig und statisch. Ich fände es schön wenn du es mit Brusches rund herum schmückst. Ich suche nach einem Beispiel, bin gleich wieder da!
 

Herr_D

offline

AW: Homepage für Dudelsackspieler

Nachtrag: Schon mal drüber nachgedacht, die Seite komplett anders aufzuziehen?


Ich hab mal ne Skizze gemacht... und nutze (gedanklich) deinen Mann auch mit...


Männchen freistellen als Blickfang links hinstellen... (ich meine, der macht doch was her ;))


Die HeaderPNG nutzen und die Navi in die Notenlinien einbauen...


Mitte Content (heller Hintergrund, dunkle Schrift) rechts Subnavi dunkler Hintergrund, helle Schrift (Rahmen allerdings nur sehr dezent setzen)
 

alexanderhey

Aktives Mitglied

AW: Homepage für Dudelsackspieler

hallo.

wie schon erwähnt, ich finde das blau zu dunkel im kontrast zum schriftzug.
möchtest du den text auf der startseite komplett zentriert lassen ? das liest sich über die textfülle etwas schwer.

gruß alex
 
AW: Homepage für Dudelsackspieler

Ich habe die tolle Idee von Herrn_D mal umgesetzt und es gefällt mir sehr gut (das Foto ist besch... aber es soll ja auch erstmal nur zur Veranschaulichung sein). Mein Problem ist, dass im IE alles richtig dargestellt wird (bis auf die Schattierung), im Firefox jedoch komplett mittig, siehe beide Screenshots:

IE:


Firefox:


Hat jemand ne Idee, woran das liegen könnte?
 

highland

Schwiegermutters Liebling

AW: Homepage für Dudelsackspieler

die seite ist stark verbesserungsfähig.. aber um auf eine andere frage von dir zurück zu kommen->hover im menü.
hier gibt es verschiedene möglichkeiten. zb javascript. davon bin ich kein fan, da es mit css wesentlich kompatibler ist. hier werden alle user, auch mit javascript sperre, in den genuss eines hovers kommen. die vorgehensweise ist relativ einfach->

html
Code:
<li id="1">
  <a href="zieladresse"><img src="blindbild.gif" width="200" height="20">
</li>

css
Code:
#1 a{
  background-image: url(normalesbild1.jpg);
}
#1 a:hover{
  background-image: url(hoverbild1.jpg);
}

bei deinem problem mit der darstellung kann es mehrere gründe geben. wenn du float zur positionierung verwendest, könnte in der css an erster stelle des content divs ein "clear: both" "clear: left" oder "clear:right" helfen. dazu müßte man aber den quelltext kennen damit du weiter kommst.
 
Zuletzt bearbeitet:
AW: Homepage für Dudelsackspieler

Meinst du jetzt die Seite so wie sie war oder wie ich sie jetzt geplant habe?
Bezüglich des Hovers: So hatte ich es bei der alten Seite auch probiert. Hat ums Verrecken nicht funktionieren wollen, bei der neuen ist es seltsamerweise kein Problem....

Hier die CSS der neuen Seite (die Schriftart und ein paar Kleinigkeiten sind noch nicht einheitlich, das wird noch angepasst. Mir ging's zuerst jetzt mal um den Aufbau):

Code:
* {
    margin: 0;
    padding: 0;
}

body
{
    background-color: #000;
}

#page {
  margin: 0 auto;
  width: 990px;
  background-color: #490001;
  text-align: left;
}

#seitenbereich {
  margin: 0 auto;
  background:url(header.png) no-repeat top center;
  width:990px
}

#andi {
    float:left;
    background-image:url(schatzi.png) ;
    width: 250px;
    height: 416px;
    margin-top:250px;
}

#andi span {
    display:none;
}

#navi {
    margin: 210px 0 1em 16em; padding: 0.5em;
    text-align: center;
    font-family: Tahoma, Georgia, Times
  }

#navi li {
    list-style:none;
    display:inline;
    margin:0  ; padding: 0   ;
  }

#navi a {
color: #b79a36;
font-weight: bold;
padding: 0.5em 1em;
float: left;
height: 20px;
width: 85px;
text-shadow:black 3px 2px 4px;
 }

#navi a:hover {
color: #000;
font-weight: bold;
background-image:url(normal.png) ;
padding: 0.5em 1em;
float: left;
height: 20px;
width: 85px;
text-shadow: none
}


a:link { color:black; text-decoration:underline; }
a:hover { color:black; text-decoration:underline; }


#Inhalt {
  margin: 3em 0em 0 17em;
  border: 1px solid #000000;
  font-family: Georgia, Comic, Tahoma;
  text-align: left;
  background-color: #b79a36;
  padding: 20px;
  width: 650px
}

#Unterseiten {
  margin: 0px 2em 0 17em;
  border: 5px double #000000;
  font-family: Georgia, Comic, Tahoma;
  text-align: left;
  background-color: #b79a36;
  padding: 20px
}

#Galerie {
  margin: 0px 2em 0 17em;
  border: 5px double #000000;
  font-family: Georgia, Comic, Tahoma;
  text-align: center;
  background-color: #b79a36;
  padding: 20px;
  line-height: 20px
}

p#Fusszeile {
    text-align: center;
    background-color: #490001;
    color: #490001;

#preview {
    width: 12em;
    border: 1px solid black;
}

#thumbnail {
    height: 8em;
    border: 1px solid black;
}

#galerie1 {
    width: 20em;
    border: 1px solid black;
}

#galerie2 {
    height: 25em;
    border: 1px solid black;
}

#lightbox{    position: absolute;    left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #b79a36; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 15px Georgia, Helvetica, sans-serif; background-color: #b79a36; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%    ; }

#imageData{    padding:0 10px; color: #000000; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold;    }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;    }
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
Kannst du mir das mit dem clear nochmal erklären? Den Befehl kenn ich nicht...
 

highland

Schwiegermutters Liebling

AW: Homepage für Dudelsackspieler

clear->


Code:
Meinst du jetzt die Seite so wie sie war oder wie ich sie jetzt geplant habe?
gegenüber der jetzigen seite ist es auf jeden fall schon eine verbesserung. allerdings würde ich nicht auf so düstere farben setzen und auf gute lesbarkeit viel wert legen.
 
Zuletzt bearbeitet:
AW: Homepage für Dudelsackspieler

So dunkel ist es doch gar nicht, bei mir ist es ein relativ helles weinrot. Wie sieht es bei dir denn aus? Was findest du denn unleserlich?

Clear hat übrigens nichts gebracht. Noch ne andere Idee?

Edith: Hab den Fehler beseitigen können. Jetzt geht's am Wochenende dran, ein anständiges Foto zu schießen.... wie dunkel erscheint das rot denn jetzt eigentlich?
 
Zuletzt bearbeitet:
AW: Homepage für Dudelsackspieler

Homepage ist jetzt komplett überarbeitet. Das Bild ist nicht optimal, aber bis ich eine anständige Kamera hab, muss das so leider reichen. Bin gespannt, was ihr dazu sagt...
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.613
Beiträge
1.538.344
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben