Auf der Suche nach einem neuen Design

Beitrag von **Watsing** » Di 21. Mai 2013, 10:15

Hallo Monika

Wie schon gesagt ich habe Zeit !

Beitrag von **moni** » Di 21. Mai 2013, 21:53

Guten Abend
Hurra [smilie=cheerleader.gif] Das Design sitzt jetzt so wie soll :U http://demo-blicke.npage.de/wasting.html ..
hatte gestern einen keinen Fehler gemacht :JJ

Istr mir auch aufgefallen das du einige sehr lange Seiten Namen hast und es passt nicht so ganz mit den Button Länge rein... und
und das zu vermeiden habe ich das Schrift auf 14 Px runter gemacht anstatt 16 ....die meisten Titel sind drin aus her einen rechts in "Tempel"ganz unten ..ist in zwei reihen ! ..man kann quasi einen extra div dazu schreiben und kleinere Schrift machen aber dann haste in einen Thema zwei verschieden Schrift Größen ..mal klein mal groß...weiß nicht ob es auch schön ausseht

auch oben in die navi leiste auch auf 14 px runtergeschraubt ..finde ich so schöner

...

auch dir die rechtsnavi installiert..
in allgemein ob die links dann direkt die Seiten verbinden würden da muss man später schauen ... je nach dem ob du Unterorder hast

aber es ist auch kein Problem ..aber dazu später !

Hier noch mal das Skript so wie es an mein Demo HP zu sehen ist ...

Hier ist HTML teil

Code: Alles auswählen

ï»¿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Watsing</title>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="aussen"><a name="top"></a>

<div id="header"></div>
<div id="balken">
<!--Anfang Navigation oben-->
<a href="index.html">Home</a> &bull; <a href="auswanderung.html">Auswanderung</a> &bull; <a href="ueber-uns.html">&Uuml;ber uns</a> &bull;   <a href="guestbook.html">G&auml;stebuch</a> &bull; <a href="kontakt.html">Kontakt</a> &bull; <a href="zeitbanner.html">Zeitbanner </a> &bull; <a href="linkliste.html">Linkliste</a> &bull; <a href="news.html">News</a> &bull; <a target="_blank" href="http://npage-hilfe.org">Forum</a> &bull;  <a href="disclaimer.html">Disclaimer</a>
<!--Ende Navigation oben-->
</div>


<div id="navilinks">

<div class="boxlinks">
<h2>Navigation</h2>
<div class="navigation">
  <!--Anfang Menupunkte-->
   <a href="index.html">Willkommen</a>
  <a href="watsing/geographie.html">Geopraphie</a>
  <a href="watsing/ueber-watsing.html">&Uuml;ber Watsing</a>
  <a href="watsing/watsingfotos.html">Watsingfotos</a>
  <a href="hochwasser/hochwasser-2011.html">Hochwasser 2011</a>
  <a href="hochwasser/fotos-2011.html">Fotos 2011</a>
  <p> </p>
  <!--Ende Menupunkte-->
</div>
</div>
  <!-- Ende boxlinks -->

  <div class="boxlinks">
<h2>Chainat</h2>
<div class="navigation">
  <!--Anfang Menupunkte-->
     <a href="chainat/chainat.html">Chainat</a>
  <a href="chainat/chainat-bird-park.html">Chainat Bird Park</a>
  <p> </p>
  <!--Ende Menupunkte-->
</div>
</div>
  <!-- Ende boxlinks -->
  <div class="boxlinks">
<h2>Uthai Thani</h2>
<div class="navigation">
  <!--Anfang Menupunkte-->
   <a href="bangkok/wat-arun.html">Wat Arun</a>
  <a href="bangkok/grand-palace.html">Grand Palace</a>
  <a href="bangkok/bangkok.html">Bangkok</a>
  <a href="bangkok/floating-market.html">Floating Market</a>
  <p> </p>
  <!--Ende Menupunkte-->
</div>
</div>
  <!-- Ende boxlinks -->
  <div class="boxlinks">
<h2>Bang Pa-In</h2>
<div class="navigation">
  <!--Anfang Menupunkte-->
      <a href="bang-pa-in/sommerpalast.html">Sommerpalast</a>
  <a href="bang-pa-in/fotos.html">Fotos</a>
  <p> </p>
  <!--Ende Menupunkte-->
</div>
</div>
<div class="boxlinks">
<h2>Unsere Hunde</h2>
<div class="navigation">
  <!--Anfang Menupunkte-->
      <a href="unsere-hunde/jo.html">Jo</a>
  <a href="unsere-hunde/bag.html">Bag</a>
  <p> </p>
  <!--Ende Menupunkte-->
</div>
</div>
<div class="boxlinks">
<h2>Geisterglaube</h2>
<div class="navigation">
  <!--Anfang Menupunkte-->
      <a href="geisterglaube/geisterglaube.html">Geisterglaube</a>
  <a href="geisterglaube/hausbau.html">Hausbau</a>
  <p> </p>
  <!--Ende Menupunkte-->
</div>
</div>

  <!-- Ende boxlinks -->
  <div class="boxlinks">
<h2>Npage-hilfe</h2>
<div class="navigation">
  <!--Anfang Menupunkte-->
     <a target="_blank" href="http://npage-hilfe.org">Forum</a>
  <a target="_blank" href="http://npage-hilfe.net">Netzwerke</a>
  <a target="_blank" href="http://npage-hilfe.net/tools">Tools & more</a>
  <a target="_blank" href="http://award-npage-hilfe.de">Award Programm</a>
  <p> </p>
  <!--Ende Menupunkte-->
</div>
</div>
  <!-- Ende boxlinks -->


</div>
 <!-- Ende navilinks -->

<div id="inhalt">


<!-- Ende des Header alles darueber in den Design Header Kopieren -->

<!-- Hier teillen -->
 <!-- Start des Footer alles darunter in den Design Footer Kopieren -->


<p><a href="#top">Nach oben</a></p>

</div>

<div id="navirechts">
<div class="boxrechts">
 <h2>Angeln</h2>
<div class="navigation">
  <!--Anfang Menupunkte-->
   <a href="angeln/angeln-in-watsing.html">Angeln in Watsing</a>
  <a href="angeln/fischarten.html">Fischarten</a>
  <a href="angeln/ausruestung.html">Ausr&uuml;stung</a>
  <a href="angeln/baggersee.html">Baggersee</a>
  <a href="angeln/tha-chin-river.html">Tha Chin River</a>
<p></p>
  <!--Ende Menupunkte-->
</div>
</div>
  <!-- Ende Boxrechts -->
 <div class="boxrechts">
 <h2>Tierfotos</h2>
<div class="navigation">
  <!--Anfang Menupunkte-->
   <a href="tierfotos/divfotos.html">Div.Fotos</a>
  <a href="tierfotos/schlangen.html">Schlangen</a>
  <a href="tierfotos/schmetterlinge.html">Schmetterlinge</a>
  <a href="tierfotos/echsen.html">Echsen</a>
  <a href="index.html">Link</a>
   <p></p>
  <!--Ende Menupunkte-->
</div>
</div>
 <!-- Ende Boxrechts -->
<div class="boxrechts">
 <h2>Tempel</h2>
<div class="navigation">
  <!--Anfang Menupunkte-->
   <a href="tempel/wat-thasung.html">Wat Thasung</a>
  <a href="tempel/wat-phra-klong-makam-tau.html">Wat Phra Klong..</a>
  <a href="tempel/wat-tham-khao-wong.html">Wat Tham Khao..</a>
  <a href="tempel/wat-thammamun-worawihan.html">Wat Thammamun</a>
  <a href="tempel/wat-sankat-rattana-khiri.html">Wat Sankat Rattana..</a>

  <p></p>
  <!--Ende Menupunkte-->
</div>
</div>
 <!-- Ende Boxrechts -->
<div class="boxrechts">
 <h2>Thai Kitchen</h2>
<div class="navigation">
  <!--Anfang Menupunkte-->
   <a href="thai-kitchen/chicken-menu.html">Chicken Menu</a>
  <a href="thai-kitchen/fotos.html">Fotos</a>
  <a href="thai-kitchen/essen-bestellen.html">Essen bestellen</a>
  <a href="thai-kitchen/kraeuter.html">Kr&auml;uter</a>
  <a href="thai-kitchen/gemuese.html">Gem&uuml;se</a>
  <a href="fruechte.html">Fr&uuml;chte</a>
  <p></p>
  <!--Ende Menupunkte-->
</div>
</div>
 <!-- Ende Boxrechts -->
 <div class="boxrechts">
<h2>Kalender</h2>
<p>
<!-- Start Npage-hilfe Member Kalender -->
<script type="text/javascript" src="http://npage-hilfe.net/tools/kalender/daten/js/m04.js"></script>
<!-- Ende Npage-hilfe Member Kalender -->
</p>
</div> </div>
 <!-- Ende navirechts -->

<div id="footer">

<!-- Ab hier nichts Aendern - Design von www.npage-hilfe.net - Free Download -->
    <!--
    #############################################
    ## Orginal Design by:      Npage-Hilfe.net ##
    ## Author:                Npage-Hilfe Team ##
    ## Web:                www.npage-hilfe.net ##
    ## Linzenz:            Creative Comons 3.0 ##
    ## Modifay by:                           - ##
    #############################################
    -->
<span class="copyright">Design by <a target="_blank" href="http://npage-hilfe.net">Npage-Hilfe.net</a> and <a target="_blank" href="http://www.npage-hilfe.net/tools/templates/hinweise.php">&copy; Hinweise & TEAM</a></span>
<!-- Bis hier nichts Aendern - Design von www.npage-hilfe.net - Free Download -->

</div>

<br class="clear" />

</div>
</body>
</html>

und noch mal das CSS

Code: Alles auswählen

/*CSS Format by http://npage-hilfe.net*/

html {

background: url(../bilder/bg.jpg) repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

body {
  background-color: #29569c;
  font-family: "Arial Narrow";
  color: #29569c;
  font-size: 16px;
}
h1 {
  font-family: "trebuchet ms";
  font-size: 22px;
  color: #FF0000;
  text-align: center;
  text-decoration: none;
}
h2 {
  font-family: "trebuchet ms";
  font-size: 18px;
  color: #261300;
  text-align: center;
}
h3 {
  font-family: verdana;
  font-size: 16px;
  color: #000096;
  text-align: center;
}
a:link {
  font-family: "Arial Narrow";
  color: #000000;
  font-size: 14px;
  text-decoration:none;
}
a:visited {
  color : #000000;
  font-size: 14px;
  text-decoration : none;
}
a:active {
  color: #000000;
  font-size: 14px;
  text-decoration: none;
}
a:hover {
  color: #FF0000;
  font-size: 14px;
  text-decoration:underline;
}
a img {
  border: none;
}
p {
  margin-top: 16px;
  margin-bottom: 16px;
}
textarea {
  color: #000000;
  font-size: 12px;
  font-family: Arial Narrow;
  padding: 3px;
  background-color: #ffe490;
  border: 1px solid #29569c;
  border-radius: 3px;
}
#aussen {
  width: 1040px;
  padding: 8px;
  margin-right: auto;
  margin-left: auto;
  background-color: transparent;
  background-image: url(../bilder/bg_list_2.jpg);
  background-repeat: repeat;
  background-position: 0 0;
  border: 2px inset #ffe490;
  border-radius: 4px;
}
#header {
  width: 1038px;
  height: 140px;
  border: 1px solid #261300;
  border-radius: 4px;
  background-color: #29569c;
  background-image: url(../bilder/header.jpg);
  background-position: center 0;
}
#balken {
  float: left;
  width: 1038px;
  height: 22px;
  color: #29569c;
  text-align: center;
  line-height: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  border: 1px solid #29569c;
  border-radius: 4px;
  background-color: #ffe490;
  background-image: url(../bilder/bg_list_1.jpg);
  background-repeat: repeat;
  background-position: 0 0;
}
#navilinks {
  float: left;
  width: 170px;
  color: #29569c;
  background-color: transparent;
  padding: 0px;
  margin: 0px;
}
#navilinks h1 {
  margin-bottom: 3px;
  margin-top: 10px;
}
#navilinks h2 {
  margin-bottom: 2px;
  margin-top: 8px;
}
#navilinks h3 {
  margin-bottom: 2px;
  margin-top: 10px;
}
.boxlinks {
  float: left;
  width: 160px;
  color: #1000fc;
  text-align: center;
  font-size: 16px;
  padding : 4px;
  margin-bottom: 8px;
  background-color: #ffe490;
  background-image: url(../bilder/bg_list_3.jpg);
  background-repeat: repeat;
  background-position: 0 0;
  border: 1px solid #29569c;
  border-radius: 4px;
}
.navigation a {
  display:block;
  width:140px;
  height:25px;
  line-height:25px;
  text-align: left;
  font-size: 14px;
  font-family: "Arial Narrow";
  color: #29569c;
  text-decoration:none;
  padding-left:18px;
  margin:0px;
  background:url(../bilder/button.png) no-repeat;
  border-bottom: 1px dashed #29569c;
}
.navigation a:hover {
  color: #000000;
  background-position:0 bottom;
  border-bottom: 1px dashed #000000;
}
#navirechts {
  float: right;
  width: 170px;
  color: #29569c;
  background-color: transparent;
  padding: 0px;
  margin: 0px;
}
#navirechts h1 {
  margin-bottom: 3px;
  margin-top: 10px;
}
#navirechts h2 {
  margin-bottom: 2px;
  margin-top: 8px;
}
#navirechts h3 {
  margin-bottom: 2px;
  margin-top: 10px;
}
.boxrechts {
  float: right;
  width: 160px;
  color: #29569c;
  text-align:center;
  font-size: 16px;
  padding : 4px;
  margin-bottom: 8px;
  background-color: transparent;
  background-image: url(../bilder/bg_list_3.jpg);
  background-repeat: repeat;
  background-position: 0 0;
  border: 1px solid #29569c;
  border-radius: 4px;
}
#inhalt {
  float: left;
  width: 662px;
  color: #29569c;
  text-align: center;
  padding: 10px;
  margin-left: 8px;
  background-color: #ffe490;
  background-image: url(../bilder/bg_list_1);
  background-repeat: repeat;
  background-position: 0 0;
  border: 1px solid #29569c;
  border-radius: 4px;
}
#footer {
  float: left;
  width: 1038px;
  height: 22px;
  font-family: Impact;
  font-size: 22px;
  color: #0D0600;
  text-align: center;
  line-height: 20px;
  margin-top: 8px;
  border: 1px solid #29569c;
  border-radius: 4px;
  background-color: #ffe490;
  background-image: url(../bilder/bg_list_3.jpg);
  background-repeat: repeat-x;
  background-position: 0 0;
}
.copyright {
  font-size: 14px;
  font-family: Impact;
  font-style: normal;
  color: #29569c;
  text-align: center;
}
.copyright a {
  font-size: 14px;
  font-family: Impact;
  font-style: normal;
  color: #FF0000;
  text-decoration: none;
}
.copyright a:hover {
  color: #0D0600;
}
.clear {
  clear: both;
}

..

wen du probleme mit Instalieren haben solltest da bitte melden ..oder sende die zugangs- daten

Beitrag von **thaileben** » Mi 22. Mai 2013, 02:48

sieht echt toll aus
viel Erfolg beim einbauen
Jürg

Beitrag von **Watsing** » Mi 22. Mai 2013, 06:07

Hallo Monika

Ich kann mich nur nochmals wiederholen und dir recht herzlich für deine Arbeit danken

!

So wie es jetzt ist, ist in meinen Augen perfekt ! Ich danke auch Jürg für seine Meinung das es ihm gefällt,denn so weis ich das ich auf dem richtigen Weg bin.

Ich weis ich habe ein paar lange Linknamen bei den Tempeln,ich hatte sie bei meinem Muster auch gekürzt sonst hätte sie nicht in den Button gepasst.Finde das die Schriftgrösse 14 gut zum Design passt und auch gut leserlich ist. Oder was meinst du Jürg dazu,du hattest ja mal geschrieben das du eine Sehschwäche hast ?

Bei den Links habe ich keine weiteren Untermenus mehr.So wie ihr sie bei der Testhomepage sieht so würde es dann auch bei www.watsing.com aussehen !

Die grösste Arbeit nach dem Designwechsel bei meiner Haupthomepage wird das anpassen der einzelnen Seiten sein.Ich hatte vorher ein breites Design und konnte damit bis zu vier Fotos nebeneinander platzieren.Jetzt mit dem neuen Design sieht das anders aus ! Ich hatte vor einem Jahr schon mal das Design ( Vorlagen von nPage ) von schmal zu breitem Design gewechselt.

Aber ohne Fleiss kein Preis,und ich freue mich jetzt schon auf das Endergebnis !

Beitrag von **thaileben** » Mi 22. Mai 2013, 08:23

Watsing hat geschrieben: Ich danke auch Jürg für seine Meinung das es ihm gefällt,denn so weis ich das ich auf dem richtigen Weg bin.
Oder was meinst du Jürg dazu,du hattest ja mal geschrieben das du eine Sehschwäche hast ?
Aber ohne Fleiss kein Preis,und ich freue mich jetzt schon auf das Endergebnis !

Mach ich doch gerne Olav

Die Schrift in der Navi ist gut leserlich, (vielleicht das blau einen schlag dunkler? ) was mich bisserl irritiert --- willst die schwarzen "pfeile" ?
die Schriftgrösse der Textseiten wird ja in der CSS eingestellt damit hast nachher nix mehr zu tun welche ist das ? zur zeit hast unterschiedliche drin
auch die überschriften <h1> usw... werden so gesteuert dazu habe ich einen screen gemacht denn das gelbe ist schwer zu erkennen auf diesem HG
auch das grüne passt dann nicht mehr so gut (mein empfinden)

Ich will nun nichts falsches schreiben jedoch denke ich irgendwo im supportforum mal gelesen zu haben das es nun möglich ist die Galerien direkt in die textseite einzubinden das wäre vielleicht eine möglichkeit

du warst schon sehr fleissig und hast daher auch nen Preis verdient .. ich freue mich mit dir.

Jürg

Beitrag von **moni** » Mi 22. Mai 2013, 09:07

Bitteschön Olaf ..ist kein Problem ,bastle gern !
freue mich das Letzt endlich gut geklappt hat und ich persönlich extra das seit gewissen zeit auch wieder mal gescheiteres geschafft habe

Bin auch erstaunt das du alles so schnell und so gut verstehst und umsetzten kannst .Respekt !!

So..... wegen den Schrift an den links kann man auch etwas fetter machen

man erreicht so was durch zugabe von font-weight:bold;
Hier genauer angaben dazu !

.navigation a {
display:block;
width:140px;
height:25px;
line-height:25px;
text-align: left;
font-size: 14px;
font-weight:bold ;
font-family: "Arial Narrow";
color: #29569c;
text-decoration:none;
padding-left:18px;
margin:0px;
background:url(bilder/button.png) no-repeat;
border-bottom: 1px dashed #29569c;
}
.navigation a:hover {
color: #000000;
font-weight:bold ;
background-position:0 bottom;
border-bottom: 1px dashed #000000;
}

wenn sonst fragen dazu sind einfach weiter melden

@ Jürg... man kann versuchen eine Galerie per iframe an die Text Seite einbinden ...habe zwar noch nicht getestet doch rein theoretisch könnte so was möglich sein

Beitrag von **Watsing** » Mi 22. Mai 2013, 09:34

Hallo Jürg

Danke für deine Tips !

Bei http://www.watsing.com werde ich nach dem Umbau bei den einzlenen Seiten die Themenüberschrift einheitlich in blau und die Texte einheitlich in schwarz halten.Die Schriftgrössen werden dann auf allen Seiten gleich sein.

Ich habe das Design bei http://www.watsing.com schon gewechselt und die Seite Geographie geändert ! Hier siehst du auch in welchen Textfarben ich arbeiten werde.

Die schwarzen Pfeile gefallen mir !

Beitrag von **Watsing** » Mi 22. Mai 2013, 09:43

Hallo Monika

Ich habe das Design bei meiner Homepage bereits gewechselt.Hat alles ohne Probleme funktioniert !

Jetzt werde ich in den nächsten Tagen noch die einzelnen Seiten bearbeiten.

Beitrag von **goefi-chiangmai** » Mi 22. Mai 2013, 18:35

Sieht gut aus!
Ein kleiner Tip, wenn eh alle seiten neu Formatierst, ist die seiten eigentlich nicht zu Formatieren nur mit überschriften 1-3 Arbeiten und schrift ganz normal, so kannst sie nachher in der css anpassen auf deinen wunsch

Beitrag von **moni** » Mi 22. Mai 2013, 20:02

ist mir jetz noch aufgefallen das " nach oben" Link doppelt ist ..in den HTML Bereich kannst das einfach löschen ...
das ist gemeint !
<p><a href="#top">Nach oben</a></p>

HomepageHelfer.org

Auf der Suche nach einem neuen Design

Re: Auf der Suche nach einem neuen Design

Re: Auf der Suche nach einem neuen Design

Re: Auf der Suche nach einem neuen Design

Re: Auf der Suche nach einem neuen Design

Re: Auf der Suche nach einem neuen Design

Re: Auf der Suche nach einem neuen Design

Re: Auf der Suche nach einem neuen Design

Re: Auf der Suche nach einem neuen Design

Re: Auf der Suche nach einem neuen Design

Re: Auf der Suche nach einem neuen Design

Wer ist online?