!DOCTYPE HTML verändert das Design

Musikbaer

Hallo,
kurz zu mir, ich betreibe aus Hobbygründen eine kleine Webseite die http://www.berlintee.de und nun arbeite ich auch an einer Geschäftsseite, die aber ein anderer im Jahre 2002 erstellt hat. Da das Design vorerst so bleiben soll, versuche ich neben den Inhalt auch den Code etwas zu bereinigen.
Die Seiten bestehen leider aus drei Frames, eines für den Kopf, eines für die Seitennavigation und eines für den Inhalt.
Das Navigationframe macht mir etwas sorgen und ich hoffe jemand hat einen Tipp für mich.
Der Frame besteht aus vier aneinander gereihten Hintergrundgrafiken und den Links in Textform.
Mein Problem ist, ich habe den Code von allem unnötigen bereinigen können, nur wenn ich den DOCTYPE in Kurzerform als <!DOCTYPE HTML> schreibe und nicht als "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> dann entstehen zwischen den Hintergrundgrafiken Zwischenräume von ca. 2px, und das sieht sehr unschön aus.
Hat jemand vielleicht eine Erklärung für mich damit ich es verstehen kann was da passiert?

Danke sagt der Musikbaer

synaptic

Na du benutzt nen frameset und dafür den falschen doctype.

Musikbaer

Zitat von synaptic

Na du benutzt nen frameset und dafür den falschen doctype.

Heißt dass, <!DOCTYPE HTML> funktioniert nicht mit framest?

synaptic

Nope. Html5 supportet keine framesets mehr, soweit ich weiß.
Aber es gibt so viele moderne lösungen...
Wenn dein webspace php kann und ne Datenbank hat, installier dir doch n wordpress

stormy corner

Hallo,
ich habe ein ähnliches Problem und hoffe, daß mir jemand von euch helfen kann. Auf einer meiner HP Seiten schaffe ich es einfach nicht, die Bilder mit den darunterliegenden Texten ordentlich aufzureihen. Idealerweise wären die 3 Bilder mit Abstand von ca. 5mm nebeneinander (ohne die unschönen unregelmäßigen Abstände) und die 3 Textfelder direkt darunter (ebenfalls mit 5mm Abstand). Dann ein Abstand von ca. 1cm bevor wieder 3 Bilder mit den darunterliegenden Texten kommen. Weiß jemand woran das liegt? Ich bin absoluter Laie, pflege aber meine HP mühevoll selbst - stoße jedoch immer wieder an Grenzen...
Hier der Link:
http://www.stormycornerranch.de/Nachzucht.html

Bin dankbar über jeden Tip !!

lg
stormy corner

MrMurphy

Hallo,

dein Problem hat mit dem von Musikbaer keine Gemeinsamkeit. Ein eigenes Thema wäre daher sinnvoll gewesen. Vielleicht trennt einer der Moderatoren das ja noch ab.

Durch deinen Quelltext wird sich kaum jemand durchquälen. Aktuell enthält er über 6.000 Fehler, die du erst mal beseitigen solltest. Vorher braucht man mit dem Layout gar nicht erst anzufangen.

http://validator.w3.org/check?verbose=…FNachzucht.html

Insgesamt wäre es aber besser, du würdest dich von dem Tabellenlayout komplett verabschieden. Die Quellcode wäre übersichtlicher, die Wahrscheinlichkeit von Fehlern geringer und die Seite könnte an schmalere Fensterbreiten wie von Smartphones oder Tablets angepasst werden.

Gruss

MrMurphy

stormy corner

ah, vielen Dank MrMurphy !! Leider weiß ich überhaupt nicht wie ich die Fehler beseitigen kann, da ich ja nicht weiß welche überhaupt die Fehler sind (wie gesagt, absoluter Laie). Wenn nicht als Tabellenlayout wie wäre es dann möglich die vorhande Optik grundsätzlich zu behalten? (Bilder und Text darunter)

Vielen Dank schon mal!
Gruss
Stormy Corner

Gastl

Zitat von stormy corner

Leider weiß ich überhaupt nicht wie ich die Fehler beseitigen kann, da ich ja nicht weiß welche überhaupt die Fehler sind

Diese werden dir angezeigt, wenn du auf der W3C-Seite runterscrollst. Und gegen keine Ahnung kann man was unternehmen, lernen

stormy corner

ach du Schreck da ist ja wirklich ALLES falsch... da die Seite aber so an sich in Ordnung ist (bis auf die "Feinheiten") werde ich sie erstmal so lassen wie sie ist. Vielen Dank trotzdem! lg

MrMurphy

Hallo,

wenn du die Seite pflegen willst kommst du um das Lernen der Grundlagen nicht herum. Damit, dir das beizubringen, sind wir hier im Forum überfordert, zumal es genügend Anleitungen gibt.

Ich habe dir mal eine Seite mit aktuellem HTLM und CSS als Grobskizze erstellt. Für die gesamte Seite ist natürlich noch Feintuning erforderlich, also das Anpassen an Abständen, Schriftgrößen u.s.w. Weiterhin gehört zu den üblichen Vorarbeiten auch in so einer Darstellung alle Bilder vor dem Veröffentlichen auf die gleiche Größe zu bringen.

Einfach mal den Quelltext als HTML-Datei speichern und im Browser anschauen.

HTML

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Bilder mit Text anordnen</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" language="javascript" type="text/javascript"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
      @import url(http://fonts.googleapis.com/css?family=Smokum);
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
         line-height: 1.1;
      }
      html {
         font-size: 100%;
      }
      body {
         padding: 0;
         background-image: url(http://www.stormycornerranch.de/holzwand3.jpg);
      }
      p {
      }
      main>h1 {
         font-family: 'Smokum', cursive;
         font-size: 3rem;
         letter-spacing: 0.3rem;
         color: white;
         text-align: center;
      }
      article {
         display: flex;
         flex-wrap: wrap;
      }
      section {
         width: 32.6%;
         margin: 1rem 0;
      }
      section:nth-child(3n+2) {
         margin-right: 1%;
         margin-left: 1%;
      }
      figure {
         padding: 0;
         margin: 0;
      }
      img {
         max-width: 100%;
         display: block;
         border-radius: 3rem 3rem 0 0;
      }
      div {
         background-image: url(http://www.stormycornerranch.de/holzwand5.jpg);
      }
      div h2 {
         color: white;
         text-align: center;
         padding: 0.5rem;
         margin-top: 0;
         margin-bottom: 0;
      }
      div p {
         color: white;
         text-align: center;
         padding: 0.1rem;
         margin-top: 0;
         margin-bottom: 0;
      }
      div p:nth-child(4) {
         margin-bottom: 1rem;
      }
      div p:nth-child(6) {
         margin-bottom: 1rem;
      }
      div p:nth-child(7) {
         color: red;
         padding-bottom: 1rem;
         margin-bottom: 1rem;
      }
      div p:nth-child(7):before {
         content: "- ";
      }
      div p:nth-child(7):after {
         content: " -";
      }
   </style>
</head>
<body>
   <main>
      <h1>Nachzucht - Foals</h1>
      <article>
         <section>
            <figure>
               <img src="http://www.stormycornerranch.de/JimBob26.JPG" alt="Pferd">
            </figure>
               <div>
                  <h2>Jim Bob Blackburn</h2>
                  <p>2014 Quarter Horse Colt</p>
                  <p>Dunskin</p>
                  <p>89% Foundation</p>
                  <p>Sire: Mr Pretty Blackburn</p>
                  <p>Dam: Paulas Little Joker</p>
                  <p>Sold / Verkauft</p>
               </div>
         </section>
         <section>
            <figure>
               <img src="http://www.stormycornerranch.de/JimBob26.JPG" alt="Pferd">
            </figure>
               <div>
                  <h2>Jim Bob Blackburn</h2>
                  <p>2014 Quarter Horse Colt</p>
                  <p>Dunskin</p>
                  <p>89% Foundation</p>
                  <p>Sire: Mr Pretty Blackburn</p>
                  <p>Dam: Paulas Little Joker</p>
                  <p>Sold / Verkauft</p>
               </div>
         </section>
         <section>
            <figure>
               <img src="http://www.stormycornerranch.de/JimBob26.JPG" alt="Pferd">
            </figure>
               <div>
                  <h2>Jim Bob Blackburn</h2>
                  <p>2014 Quarter Horse Colt</p>
                  <p>Dunskin</p>
                  <p>89% Foundation</p>
                  <p>Sire: Mr Pretty Blackburn</p>
                  <p>Dam: Paulas Little Joker</p>
                  <p>Sold / Verkauft</p>
               </div>
         </section>
         <section>
            <figure>
               <img src="http://www.stormycornerranch.de/JimBob26.JPG" alt="Pferd">
            </figure>
               <div>
                  <h2>Jim Bob Blackburn</h2>
                  <p>2014 Quarter Horse Colt</p>
                  <p>Dunskin</p>
                  <p>89% Foundation</p>
                  <p>Sire: Mr Pretty Blackburn</p>
                  <p>Dam: Paulas Little Joker</p>
                  <p>Sold / Verkauft</p>
               </div>
         </section>
         <section>
            <figure>
               <img src="http://www.stormycornerranch.de/JimBob26.JPG" alt="Pferd">
            </figure>
               <div>
                  <h2>Jim Bob Blackburn</h2>
                  <p>2014 Quarter Horse Colt</p>
                  <p>Dunskin</p>
                  <p>89% Foundation</p>
                  <p>Sire: Mr Pretty Blackburn</p>
                  <p>Dam: Paulas Little Joker</p>
                  <p>Sold / Verkauft</p>
               </div>
         </section>
         <section>
            <figure>
               <img src="http://www.stormycornerranch.de/JimBob26.JPG" alt="Pferd">
            </figure>
               <div>
                  <h2>Jim Bob Blackburn</h2>
                  <p>2014 Quarter Horse Colt</p>
                  <p>Dunskin</p>
                  <p>89% Foundation</p>
                  <p>Sire: Mr Pretty Blackburn</p>
                  <p>Dam: Paulas Little Joker</p>
                  <p>Sold / Verkauft</p>
               </div>
         </section>
      </article>
   </main>
</body>
</html>

Alles anzeigen

Gruss

MrMurphy

stormy corner

MrMurphy !!! Das sieht ja total super aus und genau so hab ich es gedacht! Ich weiß, das fehlende Wissen kostet Zeit - ich wurschtel mich seit ca. 9 Jahren damit selbst durch, nur durch kopieren, verändern, usw. Viele raten mir zur Baukasten HP aber bisher hab ich es noch immer irgendwie hinbekommen dass es passt (auch wenn es mich schon Tage und Nächte gekostet hat...). Darf ich dich noch fragen, wie ich nun ca. 3 Bilder nebeneinander bekomme? So dass es in deinem Beispiel ca. 18 Bilder ergibt?
Ein riesiges Dankeschön!!

MrMurphy

Hallo

so ganz verstehe ich deine Frage nicht. Es befinden sich ja immer 3 Bilder nebeneinander.

Wenn du zusätzliche Pferde einfügen willst kannst du einfach den HTML-Code von <section> bis zum folgenden </section> markieren, kopieren, hinter das letzte </section> und vor </article> einfügen sowie die Bildadresse und die Texte anpassen. Für 18 Pferde das ganze also 12 mal.

Damit das ganze hübsch aussieht, solltest du alle Bilder wie schon geschrieben mit einem Bildbearbeitungsprogramm vorher auf die gleiche Größe bringen. Grade wenn die Bilder wie in meinem Beispiel flexibel sein sollen bringt es nur Stress und Ärger die Bildgrößen sozusagen nachträglich über CSS festzulegen.

Gruss

MrMurphy

stormy corner

? bei mir zeigt es 6 Bilder mit Text untereinander an??? bearbeite die HP mit Webocton-Scriptly - ist da vielleicht was nicht kompatibel? das For Sale / Verkauft schaffe ich auch nicht in rot darzustellen...

MrMurphy

Hallo,

Zitat

bearbeite die HP mit Webocton-Scriptly

Das Programm bzw. den Editor kenne ich nicht. Allerdings kann es gut sein, das der meinen Quelltext verändert. Das geht dann natürlich schief. Der muss 1:1 übernommen werden.

Du benötigst einen Editor (auch keine Textverarbeitung) die am Quelltext keine Änderungen durchführt. Zum Beispiel Notepad++ oder PSPad, um mal zwei kostenlose mit deutscher Oberfläche zu nennen.

Falls dein Editor unerwünschte automatische Änderungen durchführt kannst du diese Automatik eventuell auch ausschalten.

Nachtrag:

Ich habe grade noch mal gegoogelt. Scriptly wird offensichtlich seit 2010 nicht mehr weiter entwickelt und kommt mit aktuellem Quellcode nicht zurecht.

Außerdem kann er nicht den Zeichensatz UTF-8. Das wird dir wahrscheinlich nichts sagen. Aber UTF-8 ist heute Standard und ein Editor der das nicht beherrscht gehört ins Museum. Wahrscheinlich rühren deine Probleme mit meinem Quellcode daher.

Gruss

MrMurphy

stormy corner

daran kann das sicher liegen... ich werde mir den Editor runterladen und erneut versuchen!! Vielen Dank dass du so hilfsbereit bist -
Gruss
Stormy Corner

Tags