Seite 1 von 3 123 LetzteLetzte
Ergebnis 1 bis 10 von 21

Thema: Problem mit dem <div> Tag

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

    Standard Problem mit dem <div> Tag

    Hallo,
    ich will mir ein template für meine HP bauen, aber das mit den divs haut nicht so hin, wie ich es will. WEr hat einen heissen Tip für mich?
    Ich habe zur besseren Sichtbarkeit mal alle divisions farbig umrandet.
    Eigentlich sollte der header und footer eine statische Höhe haben, was auch klappt.
    Im Bereich main sollte links über die ganze Höhe das menuleft gehen mit statischer Breite. der rechte teil soll oben vom topmenu(statische Höhe) und darunter vom content(dynamische Höhe) gefüllt sein.
    Das menuleft soll die gleiche Höhe haben, wie topmenu und content zusammen.
    HTML-Code:
    <html>
    <head>
      <meta http-equiv="content-type"
     content="text/html; charset=ISO-8859-1">
      <title>test OH</title>
      <link rel="stylesheet" href="teststyle.css" type="text/css">
    </head>
    <body>
    <div id="header">header
    </div>
    <div id="main">
    <div id="menuleft"><span editable="true" id="menuleft">menu</span>
    </div>
    <div id="topmenu"><span editable="true" id="topmenu">topmenu</span>
    </div>
    <div id="content">
    <span editable="true" id="content">Inhalt</span>
    </div>
    </div>
    <div id="footer">
    <span editable="true" id="footer">unten</span>
    </div>
    </body>
    </html>
    Die Stylesheets
    HTML-Code:
    html {
    margin: 0;
    padding: 0;
    height: 100%;
    }
    body {
    width: 800px;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    text-align: center ;
    border-style: solid;
    border-color: red;
    }
    #header {
    height: 150px;
    border-style: solid;
    border-color: green;
    }
    #main {
    height: 100%;
    border-style: solid;
    border-color: blue;
    }
    #topmenu {
    height: 25px;
    margin-left: 150px;
    border-style: solid;
    border-color: yellow;
    }
    #menuleft {
    min-height:500px;
    float: left;
    width: 150px;
    border-style: solid;
    border-color: orange;
    }
    #content {
    min-height:500px;
    overflow: auto;
    margin-left: 150px;
    background-color: rgb(255, 255, 204);
    border-style: solid;
    border-color: violet;
    }
    #footer {
    height: 25px;
    clear: both;
    border-style: solid;
    border-color: grey;
    }
    Was mach ich falsch?
    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
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    565
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Problem mit dem <div> Tag

    Hallo,

    du bist noch zu sehr dem dem Papierlayout verhaftet bzw. denkst zu statisch. Die Höhe sollten die Container, zumal in Zeiten von Responsive Design, selbst bestimmen.

    Ähnliches gilt für die Breiten, die so flexibel sein sollten, das bei schmaleren Fenstern nicht seitwärts gescrollt werden muss.

    Bei aktuellem HTML / CSS sollte zunächst der Inhalt erstellt werden und erst anschließend das Layout hinzugefügt werden. Zumindest sollte Leertext eingefügt werden, der in Größe und Anordnung dem erwarteten entspricht. Also mit Überschriften, Bildern u.s.w.

    Zunächst leere Container erstellen und denen eine Zwangsgröße aufzudrücken war im letzten Jahrtausend mal Mode, hat sich aber als Irrweg gezeigt. Die hindern auch am heutzutage erforderlichen flexiblen Denken. Merksatz: Webseiten haben keine Größe.

    So sind zum Beispiel das html und der body 100% groß (also bei mir so hoch wie mein Fenster), der Inhalt durch die festen Höhen aber höher als mein Fenster. Wie soll das funktionieren? Du solltest also mal spaßenshalber dem html einen Rand geben und deine Fensterhöhe ändern und dann rauf und runter scrollen.

    EIn Beispiel könnte zum Beispiel so aussehen:

    Code:
    <!DOCTYPE html>
    <html lang="de">
    <head>
       <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
       <title>Layout 01</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="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
       <![endif]-->
       <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
       <style>
       @media all {
          /* 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;
          }
          html {
             font-size: 100%;
             line-height: 1.3;
          }
          body {
             padding: 0;
             display: flex;
             flex-wrap: wrap;
          }
          body>* {
             width: 100%;
             padding: 0.5rem;
             border: 2px solid silver;
             border-radius: 0.5rem;
             margin: 0.5rem;
          }
          body>aside {
             flex: 1 20%;
          }
          body>main {
             flex: 5 20%;
          }
          main>nav {
             padding: 0;
             display: flex;
             justify-content: space-between;
          }
          main>nav a {
             text-align: center;
             color: black;
             background-color: yellow;
             width: 100%;
             display: block;
             padding: 0.5rem;
             /*border: 2px solid orange;*/
             border-radius: 0.5rem;
             margin-right: 0.5rem;
          }
          main>nav a:last-child {
             margin-right: 0;
          }
          main>nav a:hover {
             color: white;
             background-color: green;
          }
       }
       </style>
    </head>
    <body>
       <header>
          <h2>Bond, James</h2>
       </header>
       <aside>
          <h2>Sublime</h2>
          <nav>
             <ul>
                <li><a href="#">Volvo</a></li>
                <li><a href="#">Jaguar</a></li>
                <li><a href="#">VW</a></li>
                <li><a href="#">Audi</a></li>
                <li><a href="#">Maybach</a></li>
                <li><a href="#">Mercedes</a></li>
                <li><a href="#">Chevy</a></li>
                <li><a href="#">Wartburg</a></li>
             </ul>
          </nav>
       </aside>
       <main>
          <nav>
             <a href="#">Kiwi</a>
             <a href="#">Banane</a>
             <a href="#">Kirsche</a>
             <a href="#">Melone</a>
          </nav>
          <article>
             <h1>Pangramm Blind-Text</h1>
             <p>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 bei Pforzheim.</p>
             <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. Falsches Üben von Xylophonmusik quält jeden größeren Zwerg. Heizölrückstoßabdämpfung.</p>
             <p>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 bei Pforzheim.</p>
             <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. 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>
          </article>
       </main>
       <footer>
          <p>Erstellt von MrMurphy</p>
       </footer>
    </body>
    </html>
    Gruss

    MrMurphy
    Geändert von MrMurphy (17.06.2015 um 05:21 Uhr)

  3. #3
    Youngster
    Themenstarter

    Registriert seit
    17.06.2015
    Beiträge
    11
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Problem mit dem &lt;div&gt; Tag

    OK, du hast eine div unter der anderen, das bekomme ich auch noch hin, aber wie mache ich es, dass 2 nebeneinander sind und die gleiche höhe haben?
    Die Breite wird bei mir durch das Logobild vorgegeben. Es sei denn ich finde und baue eine dynamische resize Funktion ein.

    header
    Navmenü Topmenü
    Inhalt
    Dieser hat eine dynamische Länge




    Footer



    So soll es im Prinzip aussehen und das Navmenü soll genauso hoch sein, wie der dynamische Text rechts davon und das Topmenü zusammen
    Geändert von renegadeX (17.06.2015 um 18:49 Uhr)

  4. #4
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    565
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Problem mit dem <div> Tag

    Hallo

    OK, du hast eine div unter der anderen,
    Das kann ich nicht nachvollziehen. Hast du das mal in unterschiedlichen Browser getestet? Welchen Browser benutzt du?

    Es sei denn ich finde und baue eine dynamische resize Funktion ein.
    Daran hindert dich doch niemand. Ohne Zugriff auf das Bild ist eine konkrete Hilfe leider nicht möglich.

    Gruss

    MrMurphy

  5. #5
    Youngster
    Themenstarter

    Registriert seit
    17.06.2015
    Beiträge
    11
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Problem mit dem <div> Tag

    Ich nutze Firefox 38.0 und habe es auch mit IE 11.

    Bei beiden das selbe.
    Ich habe deinen Code in ein blankfile kopiert und es auf den Server geschoben.

    Das mit dem Bild ist erstmal nebensächlich. Wichtiger sind mir die divisions sollen machen, was ich will.

  6. #6
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    565
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Problem mit dem <div> Tag

    Hallo,

    ich habe meinen Quelltext mal online gestellt. Vielleicht kann mir mal jemand bestätigen ob header und footer oben und unten stehen, sowie die beiden dazwischenliegenden Container nebeneinander in gleicher Höhe. Bei mir werden sie unter Win 7 mit IE11, Firefox, Chrome und Opera jedenfalls so dargestellt:

    http://kurokami.bplaced.net/

    Gruss

    MrMurphy
    Geändert von MrMurphy (17.06.2015 um 20:51 Uhr)

  7. #7
    Youngster
    Themenstarter

    Registriert seit
    17.06.2015
    Beiträge
    11
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Problem mit dem <div> Tag

    Ah da is der böse Fehler. irgendwie hat der mir ein paar Tags direkt geschlossen. Kam wohl mit der Formatierung ned klar.

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

    Standard AW: Problem mit dem <div> Tag

    Zitat Zitat von MrMurphy
    Vielleicht kann mir mal jemand bestätigen ob header und footer oben und unten stehen, sowie die beiden dazwischenliegenden Container nebeneinander in gleicher Höhe.
    Ja, machen sie, alles oke
    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

  9. #9
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    565
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Problem mit dem <div> Tag

    Hallo,

    danke für die Rückinfo.

    Gruss

    MrMurphy

  10. #10
    Youngster
    Themenstarter

    Registriert seit
    17.06.2015
    Beiträge
    11
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Problem mit dem <div> Tag

    Geändert von renegadeX (17.06.2015 um 21:38 Uhr)

Stichworte

Berechtigungen

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