Eigenes Design, Style-Code Frage

Allgemeine Fragen zu hPage

Moderator: HTML-Laie

Antworten
Benutzeravatar
Jaden
Webmaster
Webmaster
Beiträge: 127
Registriert: Sa 9. Jan 2016, 12:30
Mein Vorname: Jaden

Eigenes Design, Style-Code Frage

Beitrag von Jaden »

Hallo alle miteinander.
Vor einer Weile wurde mal angemerkt, dass an meinen Style-Code etwas nicht ganz stimmen würde, obwohl er funktioniert.
Jetzt hab ich den Style auf einer Testseite eingebaut und hätte gerne eure Meinung, was ich daran verbessern könnte.
So wie er jetzt ist, passt er sich an die Seite an, was ich super finde.
Dies hab ich beim Style in den Header gesetzt:
-----------------------------------------------------------------------------------------------------------------
entfernt
-----------------------------------------------------------------------------------------------------------------
Und dies in den Footer:
-----------------------------------------------------------------------------------------------------------------
entfernt
-----------------------------------------------------------------------------------------------------------------
Hier hab ichs zur Probe eingebaut: http://testdemo.npage.de/willkommen.html
Kann ich den Code so lassen oder kann man daran was verbessern?

Sorry, hab die beiden Codes entfernt, da man diese auch als Gast lesen kann, das wußte ich vorher nicht.
Nach oben
Benutzeravatar
goefi-chiangmai
Admin
Admin
Beiträge: 6997
Registriert: Sa 31. Okt 2009, 09:36
Mein Vorname: Peter
Wohnort: Phrao-Chiang Mai
Kontaktdaten:
Kontaktdaten von goefi-chiangmai

Re: Eigenes Design, Style-Code Frage

Beitrag von goefi-chiangmai »

So genau sehe ich das jetzt nicht, da npage ja selber sehr viel automatisch reincodet,

aber etwas Stimmt bestimmt nicht, denn du hast 2 mal ende </body> und ende </html> im Design

P.S.
Background würde ich fixieren
Gruß - DER CRAZY ASIAT - The MASTER of DESASTER
✬ Privat Homepage: goefi-chiangmai
✬ Mitgliederausweis: Hole Dir dein Mitgliederausweis für deine Webseite
Nach oben
Benutzeravatar
Jaden
Webmaster
Webmaster
Beiträge: 127
Registriert: Sa 9. Jan 2016, 12:30
Mein Vorname: Jaden

Re: Eigenes Design, Style-Code Frage

Beitrag von Jaden »

Hallo Peter,
ja deswegen hatte ich ja ursprünglich den jeweiligen Code eingestellt, den ich eingefügt hatte,
ihn dann aber wieder entfernt, weil auch jeder Gast hier lesen kann :oops:
Nach oben
Benutzeravatar
moni
Held des Forums
Held des Forums
Beiträge: 8356
Registriert: Mo 16. Nov 2009, 20:56
Mein Vorname: Monika
Wohnort: Borken

Re: Eigenes Design, Style-Code Frage

Beitrag von moni »

Hallo Jaden..

schade das du nicht genau weiß was damals angemerkt würde ,so könnte man besser raus finden was gemeint war !

Habe mir deine demo angeschaut und es handelt sich um einen Tabellen Design .

meine Tipps oder Bemerkungen sind :

1) Design ist nicht responsiv und etwas veraltete Codierung ( ist zwar nicht verboten aber ist nicht zeitgemäß ).

2)mehrere css styles sind vorhanden ( eine ausgelagerte würde reichen )

http://abload.de/img/unbenannt3ok0y.jpg

3)wie der Peter auch schrieb man kann nicht direkt erkennen was auch vom npage ist ..und auch zwei mal body hab ich auch gefunden

Bild

mein Tipp dazu am besten wen du hier das komplete Code lässt da kann man besser was dazu sagen !
Viele Grüße ...Monika
Nach oben
Benutzeravatar
Jaden
Webmaster
Webmaster
Beiträge: 127
Registriert: Sa 9. Jan 2016, 12:30
Mein Vorname: Jaden

Re: Eigenes Design, Style-Code Frage

Beitrag von Jaden »

Guten Morgen Moni,
leider kann ich mit diesen ganzen Begriffen nichts anfangen. Diesen Style hab ich bereits seit etlichen Jahren, weiß aber nicht mehr, wie.
Ich hatte mir auch den Microsoft Expression Web installiert, aber das ist für mich ein böhmisches Dorf, ich wüßte nicht mal, wo anfangen.
Deswegen nützt es mir leider wenig, wenn man mir sagt, ich müsse etwas mit rein, bzw. rausbauen, wenn ich nicht genau weiß, wo.
Ok, ich stells mal rein.
Dies hab ich beim Style in den Header gesetzt:
-----------------------------------------------------------------------------------------------------------------

Code: Alles auswählen

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Jaden-Designs</title>
<meta http-equiv="content-language" content="de">
<meta name="description" content=" Templates, Masken und mehr">
<meta name="keywords" content=" Templates, Masken mehr " />  
  <meta name="robots" content="index, follow"> 
  <style>
A:link {color: #402B3C;text-decoration:underline;}
A:visited {color: #190716;text-decoration:none;}
A:hover {color: #190716;text-decoration:none;border-bottom-style:dotted; border-top-style:dotted;border-top-width:1 px;
border-bottom-width:1 px; background:" #DBD2DA";}
</style>
<STYLE type=text/css>BODY {
	SCROLLBAR-FACE-COLOR: #DBD2DA; SCROLLBAR-HIGHLIGHT-COLOR: #190716; SCROLLBAR-SHADOW-COLOR: #190716; SCROLLBAR-ARROW-COLOR: #190716; SCROLLBAR-TRACK-COLOR: #DBD2DA; SCROLLBAR-BASE-COLOR: #190716; scrollbar-3d-light-color: #190716; scrollbar-dark-shadow-color: #190716
}
</STYLE>

</head>

<body background="http://file2.npage.de/014027/16/bilder/hg-1-design.jpg" link="#190716" vlink="#190716" alink="#190716" text="#0D0009" bgcolor="#190716">

<div align="center">
  <center>
  <table borderColor="#190716" cellSpacing="3" cellPadding="0" width="97%" background="http://file2.npage.de/014027/16/bilder/hg-silberdesign.jpg" border="1" >
    <tr>
      <td align="middle" width="100%" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px">
      <div align="center">
        <center>
      <table cellSpacing="15" width="100%" background="http://file2.npage.de/014027/16/bilder/hg-middle-design.jpg" border="0">
        <tr>
          <td width="100%" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px" align="center" valign="top">
          <div align="center">
            <center>
          <table borderColor="#190716" cellSpacing="3" cellPadding="7" width="100%" background="http://file2.npage.de/014027/16/bilder/hg-silberdesign.jpg" border="1">
            <tr>
              <td vAlign="top" width="100%" background="http://file2.npage.de/014027/16/bilder/hg-2-design.jpg" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px" bgcolor="#DBD2DA">
              <p align="center">
                    <img src="http://file2.npage.de/014027/16/bilder/header-design.jpg" width="800" height="400"></p>
              <p align="center">&nbsp;</p>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------
Und dies in den Footer:
-----------------------------------------------------------------------------------------------------------------
</body>
<p align="center">&nbsp;</p>
            <p align="center"><b>Style & Design ©Jaden</b></td>
          </tr>
        </table>
        </center>
      </div>
      </td>
    </tr>
  </table>
  </center>
</div>
</html>
-----------------------------------------------------------------------------------------------------------------
Zuletzt geändert von moni am Do 16. Feb 2017, 08:36, insgesamt 1-mal geändert.
Grund: Code modus eigefügt
Nach oben
Benutzeravatar
moni
Held des Forums
Held des Forums
Beiträge: 8356
Registriert: Mo 16. Nov 2009, 20:56
Mein Vorname: Monika
Wohnort: Borken

Re: Eigenes Design, Style-Code Frage

Beitrag von moni »

Guten morgen Jaden ...
Habe das Code in code modus eingefügt das etwas überschaubar hier aussieht ,wen es um dei Begriffe geht da ist halb so wild das ganze ,werde versuchen dir das zu erklären :)

1)responsiv ist nichts anders als das Design in allem Browser und Auflösungen gut aussieht ,sich anpasst und vor allem auch auf mobilen Geräten ..hier ist ein Link zum testen
http://quirktools.com/screenfly/
oder auch andere Methode sieht so aus ...naja hier geht vor allem um Auflösung

http://abload.de/img/cats3mu0t.jpg
------------------------------------------------------------------------
2)Style auslagern ist wen man CSS Codierung als externe Datei in den head Bereich einfügt ..hier ein Screenshot Bild dazu das man sich besser vorstellen kann :
http://abload.de/img/catsdyjkx.jpg

man macht das so das sämtliche CSS angaben was anzwieschen <style> und </style > hatte raus nehmt und als neue CSS Datei unten Namen style abspeichert ,dann hoch laden an die Seite und wie in Screenshot 1 in den linke einfügen ..man kann natürlich benenn wie man möchte

http://abload.de/img/catsaysbu.jpg
----------------------------------------------------------------------------------
3) Microsoft Expression Web ist ein sehr guten HTML editor , ich selbst nutzte den selten .. aus meine Erfahrung zum lernen und gut überschaubar kann dir den webcoton scriptle empfehlen

http://www.webocton.de/ oder bei chip
http://www.chip.de/downloads/Webocton-S ... 20694.html
-------------------------------------------------------------------------------------------------
4) habe deine Code ein wenig sortiert und die Angaben zum body in style gemacht und nicht in HTML Bereich ..hier alles ohne auslagern

Code: Alles auswählen

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Jaden-Designs</title>
<meta http-equiv="content-language" content="de">
<meta name="description" content=" Templates, Masken und mehr">
<meta name="keywords" content=" Templates, Masken mehr " />
<meta name="robots" content="index, follow">
<style>
body { background-color: #190716;
      background-image: url(http://file2.npage.de/014027/16/bilder/hg-1-design.jpg);
      background-repeat: repeat;
      color: #0D0009;
      scrollbar-face-color:#dbd2da;
      scrollbar-highlight-color:#190716;
      scrollbar-shadow-color:#190716;
      scrollbar-arrow-color: #190716;
      scrollbar-track-color: #dbd2da;
      scrollbar-base-color: #190716;
      scrollbar-3d-light-color: #190716;
      scrollbar-dark-shadow-color: #190716 ;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 18px;
     }
A:link {color: #402B3C;
      text-decoration:underline;
      }
A:visited {
      color: #190716;
      text-decoration:none;
      }
A:hover {
      color: #190716;
      text-decoration:none;
      border-top:1px dotted;
      border-bottom:1px dotted;
      background:#DBD2DA;
      }
</style>

</head>

<body >

<div align="center">
<center>
<table borderColor="#190716" cellSpacing="3" cellPadding="0" width="97%" background="http://file2.npage.de/014027/16/bilder/hg-silberdesign.jpg" border="1" >
<tr>
<td align="middle" width="100%" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px">
<div align="center">
<center>
<table cellSpacing="15" width="100%" background="http://file2.npage.de/014027/16/bilder/hg-middle-design.jpg" border="0">
<tr>
<td width="100%" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px" align="center" valign="top">
<div align="center">
<center>
<table borderColor="#190716" cellSpacing="3" cellPadding="7" width="100%" background="http://file2.npage.de/014027/16/bilder/hg-silberdesign.jpg" border="1">
<tr>
<td vAlign="top" width="100%" background="http://file2.npage.de/014027/16/bilder/hg-2-design.jpg" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px" bgcolor="#DBD2DA">
<p align="center">
<img src="http://file2.npage.de/014027/16/bilder/header-design.jpg" width="800" height="400"></p>
<p align="center">&nbsp;</p>

-----------------------------------------------------------------------------------------------------------------
Und dies in den Footer:
-----------------------------------------------------------------------------------------------------------------

<p align="center">&nbsp;</p>
<p align="center"><b>Style & Design ©Jaden</b></td>
</tr>
</table>
</center>
</div>
</td>
</tr>
</table>
</center>
</div>
</html>
--------------------------------------------------------------------------------------------------------------
5) habe alles wie oben geschreiben ausgelagert und hier als demo ist zu sehen

http://demo.homepagehelfer.net/jaden/index.html
kannst das auch runterladen
http://demo.homepagehelfer.net/jaden/jaden.zip
---------------------------------------------------------------------------------------------------
6) bei Interesse kann man dir auch responisve Design Entwicklern ,natürlich mit deinen Grafiken !

ich hoffe das ich dir weiter helfen könnte und nicht zu kompliziert alles geschreiben habe :)
Viele Grüße ...Monika
Nach oben
Benutzeravatar
Jaden
Webmaster
Webmaster
Beiträge: 127
Registriert: Sa 9. Jan 2016, 12:30
Mein Vorname: Jaden

Re: Eigenes Design, Style-Code Frage

Beitrag von Jaden »

Hallo liebe Mona,
ich danke dir vielmals für deine Mühe und deine Hilfe, das ist sehr lieb von dir.
Hab deinen Code eingebaut und funktioniert.
Vielen lieben Dank.
Komisch dass mein alter Code als Style genauso aussieht, obwohl er fehlerhaft ist.
Deine Tipps werd ich mir in einer ruhigen Minute genauer durchgehen.
Herzlichen Dank dafür, für alles, auch für deine Screens :16
Nach oben
Benutzeravatar
moni
Held des Forums
Held des Forums
Beiträge: 8356
Registriert: Mo 16. Nov 2009, 20:56
Mein Vorname: Monika
Wohnort: Borken

Re: Eigenes Design, Style-Code Frage

Beitrag von moni »

Hallo Jaden ..

Hab gern gemacht !
Komisch dass mein alter Code als Style genauso aussieht, obwohl er fehlerhaft ist.
Dein alten Code war nicht so stark fehlerhaft da der nicht funktionieren würde , habe nur unnötigen Codes entfernt und auch alles etwas oredlich und auch zeitgemäß gestaltet ( Codeirrung ), aber keine Verdrängungen gemacht was das aussehen von dein Design Beeinflussen könnte .

Solltest welchen fragen haben zum den anderen Sachen da melde dich einfach !
Viele Grüße ...Monika
Nach oben
Benutzeravatar
Jaden
Webmaster
Webmaster
Beiträge: 127
Registriert: Sa 9. Jan 2016, 12:30
Mein Vorname: Jaden

Re: Eigenes Design, Style-Code Frage

Beitrag von Jaden »

Hallo Moni,
ja das mach ich gerne, nochmals vielen Dank dafür :u29
Nach oben
Antworten

Zurück zu „hPage - Allgemein“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 12 Gäste