Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 15

Thema: !DOCTYPE HTML verändert das Design

  1. #1
    Youngster
    Registriert seit
    30.03.2009
    Beiträge
    10
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Frage !DOCTYPE HTML verändert das Design

    Hallo,
    kurz zu mir, ich betreibe aus Hobbygründen eine kleine Webseite die 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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: !DOCTYPE HTML verändert das Design

    Na du benutzt nen frameset und dafür den falschen doctype.
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  3. #3
    Youngster
    Themenstarter

    Registriert seit
    30.03.2009
    Beiträge
    10
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: !DOCTYPE HTML verändert das Design

    Zitat Zitat von synaptic Beitrag anzeigen
    Na du benutzt nen frameset und dafür den falschen doctype.
    Heißt dass, <!DOCTYPE HTML> funktioniert nicht mit framest?
    www.berlintee.de
    Das Teeportal für Berlin

  4. #4
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: !DOCTYPE HTML verändert das Design

    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
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  5. #5
    HTML Newbie
    Registriert seit
    01.05.2015
    Beiträge
    6
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: !DOCTYPE HTML verändert das Design

    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
    Geändert von stormy corner (01.05.2015 um 13:43 Uhr)

  6. #6
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    574
    Danke
    0
    Bekam 67 mal "Danke" in 65 Postings

    Standard AW: !DOCTYPE HTML verändert das Design

    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?verbos...Nachzucht.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

  7. #7
    HTML Newbie
    Registriert seit
    01.05.2015
    Beiträge
    6
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: !DOCTYPE HTML verändert das Design

    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

  8. #8
    König(in)
    Registriert seit
    13.06.2012
    Beiträge
    1.152
    Danke
    14
    Bekam 63 mal "Danke" in 61 Postings

    Standard AW: !DOCTYPE HTML verändert das Design

    Zitat 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
    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

  9. #9
    HTML Newbie
    Registriert seit
    01.05.2015
    Beiträge
    6
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: !DOCTYPE HTML verändert das Design

    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

  10. #10
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    574
    Danke
    0
    Bekam 67 mal "Danke" in 65 Postings

    Standard AW: !DOCTYPE HTML verändert das Design

    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.

    Code:
    <!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>
    Gruss

    MrMurphy

Ähnliche Themen

  1. Antworten: 7
    Letzter Beitrag: 20.08.2012, 18:36
  2. HTML in Design anzeigen lassen
    Von ||EGS|WarMachine im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 21.08.2010, 14:14
  3. Design in Html anpassen
    Von incendium im Forum Job Forum - Jobs für Grafiker, Programmierer und Webmaster
    Antworten: 1
    Letzter Beitrag: 11.05.2008, 10:59
  4. Frontpage verändert HTML
    Von Gast im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 25.03.2007, 22:55
  5. html mit design
    Von toby-b im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 13.05.2004, 16:56

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •