• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Internetseite erstellen

kaepten

kaepten

Mitglied
Guten Abend,
Vorab ich bin nicht sehr leistungsstark in HTML. Wir müssen eine Seite für unsere Schule erstellen.
Wie ihr auf dem Bild sehen könnt handel es sich um eine Seite. Genau so würde ich meine Internetseite auch erstellen wollen. Oben bei w3schools... das Logo und der Titel dann die Navigationsleiste links die unter punkte von der Navigationsleiste und in der mitte sollte ein iframe sein und links facebook link und werbung etc.
Aufjedenfall,wo ich mal den Code erstellt habe mit dem iframe was das einfach nicht so wie auf dem Bild.
Könntet ihr mir vielleicht helfen wie ich sowas erstellen kann. Das Grundgerüst sollte dem Bild entsprechen.
unbenanntjxvye3m84q.png
 
Könntest du uns auch etwas Code zeigen?

Dann ist es etwas einfacher, meine Glaskugel ist gerade zur Reparatur weg ;), da ist es etwas schwieriger den Fehler zu finden.
 
Also der HTML Code:
<body>
<div class="titel">
Titel
<div class="navi">
<a traget="unten" href="schulplan.html"> Schulplan </a>
<iframe name="unten" src="start.html" class="iframe" >
</iframe>
</body>

Und der CSS Code:

.titel
{
width: 1000px;
height: 100px;
background-color: #FFF8E7;

}

}
.navi
{
width: 1000px;
height: 100px;
background-color: #FFF8E7;
border: 5px solid #FF6060;
}

.iframe
{
text-algin: left;
width: 700px;
height: 1000px;
background-color: #FFF8E7;
overflow: auto;
}

.navi2
{
width: 300px;
height: 800px;
background-color: #FFF8E7;
float: left;
}


Nicht lachen bin noch Anfänger und würde es gerne lernen ^^
 
Mal davon abgesehen, musst du deine HTML-Tags auch schließen wenn du Sie aufmachst :P
 
Vielen Dank,
Aus Fehlern lernt man ja bekanntlich! ^-^

Habe es jetzt geändert:

<div class="titel">
Titel
</div>
<div class="navi">
<a traget="unten" href="schulplan.html"> Schulplan </a>
</div>
<iframe name="unten" src="start.html" class="iframe" >
</iframe>
<div class="navi2">
Navi
</div>

Außerdem wie ich kriege ich die Breite sohin das sie sich an den jeweiligen Computerbildschirm anpasst?
 
Zuletzt bearbeitet:
kaepten schrieb:
Vielen Dank,
Aus Fehlern lernt man ja bekanntlich! ^-^

Habe es jetzt geändert:

<div class="titel">
Titel
</div>
<div class="navi">
</div>
<a traget="unten" href="schulplan.html"> Schulplan </a>
<iframe name="unten" src="start.html" class="iframe" >
</iframe>
<div class="navi2"
Navi
</div>

Außerdem wie ich kriege ich die Breite sohin das sie sich an den jeweiligen Computerbildschirm anpasst?
Zum Vergrößern anklicken....

Bei "navi2" fehlt immer noch der schließende Tag. Schau dir mal Bootstrap an, das ist ganz hilfreich für dein Vorhaben. ;)
 
Die Breite kannst du im CSS z.B. mit 50% angeben, diese Angabe richtet sich immer an das übergeordnete Element, in diesem Fall wäre das mit dem Attribut width: 50%; ausgestattet Element 50% Weit.
 
Chronos schrieb:
Wie kann man Leuten, die offensichtlich noch keine Ahnung haben (ist nicht Böse gemeint), ernsthaft empfehlen etwas mit Bootstrap zu machen? Meinst du er versteht das? Sicherlich nicht.
Zum Vergrößern anklicken....
Da magst du wohl recht haben, trotzdem habe ich Ihm nur eine Antwort auf seine Frage gegeben.
 
Habe es jetzt mal bearbeitet:
HTML Code:
<body>
<div class="titel">
Titel
</div>
<div class="navi">
<a traget="unten" href="schulplan.html"> Schulplan </a>
</div>
<div class="navi11">
Navi11
</div>
<iframe name="unten" src="start.html" class="iframe" >
</iframe>
<div class="navi2">
Navi
</div>
</body>

CSS Code:

.titel
{
width: 1300px;
height: 100px;
background-color: #FFF8E7;

}

}
.navi
{
width: 1300px;
height: 100px;
background-color: #FFF8E7;
border: 5px solid #FF6060;
}

.navi11
{
width: 300px;
height: 800px;
background-color: #008800;
float: left;

}

.iframe
{
text-algin: left;
width: 700px;
height: 1000px;
background-color: #FFF8E7;
overflow: auto;
}

.navi2
{
width: 300px;
height: 800px;
background-color: #FFF8E7;
float: right;
}
Aber es wird leider nicht wie auf der Seite :(
Das navi11 steht nicht rechts neben tran sondern einfach unterhalb
 
Hallo kaepten,

dein Wissen und deine Vorstellungen von HTML / CSS sind leider sehr veraltet.

Ich habe deshalb mal ein Grundgerüst erstellt, das sich mehr oder weniger analog dem von w3schools.com verhält.

Auf das iFrame solltest du verzichten.

Die Abstände, Rahmen, Schriftarten und -größen, die Reihenfolge der Container beim Responsive Design u.s.w. lassen sich natürlich problemlos anpassen.

Für die Praxis sollte noch das css in eine externe Datei ausgelagert werden. Für ältere Browser können den Flexbox-Befehlen noch Prefixe hinzugefügt werden. Das deine Besucher Browser benutzen, die kein Flexbox beherrschen, glaube ich nicht.

Code: 
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Layout</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      html {
         font-size: 120%;   /* Die Einheit rem greift auf die Angabe in html zurück, nicht auf body */
         line-height: 1.3;   /* line-height wird ohne Einheit angegeben */
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      body {
         width: 98%;
         color: black;
         background-color: white;
         padding: 0;
         margin: 1rem auto;
         display: flex;
         flex-wrap: wrap;
      }
      header,
      nav,
      aside,
      main,
      footer {
         padding: 0.5rem;
      }
      header,
      nav,
      aside,
      main,
      footer {
         width: 100%;
         border: 2px solid orange;
         border-radius: 0.5rem;
         margin: 0 0 0.5rem 0;
      }
      footer {
         margin-bottom: 0;
      }
      aside {
         width: 25%;
         border: 2px solid blue;
      }
      main {
         width: 50%;
         border: 2px solid green;
      }
      @media only screen and (max-width: 1000px) {
         aside:nth-child(3) {
            width: 30%;
         }
         main {
            width: 70%;
         }
         aside:nth-child(5) {
            width: 100%;
         }
      }
      @media only screen and (max-width: 650px) {
         aside:nth-child(3) {
            width: 50%;
            order: 2;
         }
         main {
            width: 100%;
            order: 1;
         }
         aside:nth-child(5) {
            width: 50%;
            order: 2;
         }
         footer {
            order: 3;
         }
      }
  @media only screen and (max-width: 500px) {
  aside:nth-child(3) {
  width: 100%;
  }
  aside:nth-child(5) {
  width: 100%;
  }
  }

   </style>
</head>

<body>
   <header role="banner">
      <h2>header</h2>
   </header>
   <nav role="navigation">
      <h2>nav</h2>
   </nav>
   <aside>
      <h2>aside 1</h2>
   </aside>
   <main role="main">
      <h2>main</h2>
      <p>Falsches Üben von Xylophonmusik quält jeden größeren Zwerg. Heizölrückstoßabdämpfung. Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch Sylt. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern. Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich. Vogel Quax zwickt Johnys Pferd Bim. Sylvia wagt quick den Jux</p>
      <p>Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch Sylt. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.</p>
   </main>
   <aside>
      <h2>aside 2</h2>
      <p>Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark. "Fix, Schwyz!" quäkt Jürgen blöd vom Paß. Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich.</p>
   </aside>
   <footer role="contentinfo">
      <h2>footer</h2>
   </footer>
</body>
</html>

Gruss

MrMurphy

Edit: Ich habe meinen Quelltext noch mal um einen Breakpunkt bei 500px erweitert.
 
Zuletzt bearbeitet:
MrMurphy schrieb:
Hallo kaepten,

dein Wissen und deine Vorstellungen von HTML / CSS sind leider sehr veraltet.

Ich habe deshalb mal ein Grundgerüst erstellt, das sich mehr oder weniger analog dem von w3schools.com verhält.

Auf das iFrame solltest du verzichten.

Die Abstände, Rahmen, Schriftarten und -größen u.s.w. lassen sich natürlich problemlos anpassen.

Für die Praxis sollte noch das css in eine externe Datei ausgelagert werden. Für ältere Browser können den Flexbox-Befehlen noch Prefixe hinzugefügt werden. Das deine Besucher Browser benutzen, die kein Flexbox beherrschen, glaube ich nicht.

Code: 
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Layout</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      html {
         font-size: 120%;   /* Die Einheit rem greift auf die Angabe in html zurück, nicht auf body */
         line-height: 1.3;   /* line-height wird ohne Einheit angegeben */
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      body {
         width: 98%;
         color: black;
         background-color: white;
         padding: 0;
         margin: 1rem auto;
         display: flex;
         flex-wrap: wrap;
      }
      header,
      nav,
      aside,
      main,
      footer {
         padding: 0.5rem;
      }
      header,
      nav,
      aside,
      main,
      footer {
         width: 100%;
         border: 2px solid orange;
         border-radius: 0.5rem;
         margin: 0 0 0.5rem 0;
      }
      footer {
         margin-bottom: 0;
      }
      aside {
         width: 25%;
         border: 2px solid blue;
      }
      main {
         width: 50%;
         border: 2px solid green;
      }
      @media only screen and (max-width: 1000px) {
         aside:nth-child(3) {
            width: 30%;
         }
         main {
            width: 70%;
         }
         aside:nth-child(5) {
            width: 100%;
         }
      }
      @media only screen and (max-width: 650px) {
         aside:nth-child(3) {
            width: 50%;
            order: 2;
         }
         main {
            width: 100%;
            order: 1;
         }
         aside:nth-child(5) {
            width: 50%;
            order: 2;
         }
         footer {
            order: 3;
         }
      }
   </style>
</head>

<body>
   <header role="banner">
      <h2>header</h2>
   </header>
   <nav role="navigation">
      <h2>nav</h2>
   </nav>
   <aside>
      <h2>aside 1</h2>
   </aside>
   <main role="main">
      <h2>main</h2>
      <p>Falsches Üben von Xylophonmusik quält jeden größeren Zwerg. Heizölrückstoßabdämpfung. Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch Sylt. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern. Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich. Vogel Quax zwickt Johnys Pferd Bim. Sylvia wagt quick den Jux</p>
      <p>Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch Sylt. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.</p>
   </main>
   <aside>
      <h2>aside 2</h2>
      <p>Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark. "Fix, Schwyz!" quäkt Jürgen blöd vom Paß. Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich.</p>
   </aside>
   <footer role="contentinfo">
      <h2>footer</h2>
   </footer>
</body>
</html>

Gruss

MrMurphy
Zum Vergrößern anklicken....
Vielen,vielen dank!
Und das mit den veraltet das bringt uns unsere Lehrerin so bei! Aber vielen dank lieben dank nochmal :)
 
kaepten schrieb:
Vielen,vielen dank!
Und das mit den veraltet das bringt uns unsere Lehrerin so bei! Aber vielen dank lieben dank nochmal :)
Zum Vergrößern anklicken....
Das ist leider öfter so. Schade drum. Uns wurde damals sogar das erstellen von Websiten mit Tabellen ans Herz gelegt, obwohl es schon längst ein Nogo war.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben