1. Dashboard
  2. Artikel
  3. Mitglieder
    1. Letzte Aktivitäten
    2. Benutzer online
    3. Team
    4. Mitgliedersuche
  4. Forum
    1. Unerledigte Themen
  • Anmelden
  • Registrieren
  • Suche
Dieses Thema
  1. HTML - Webmaster Forum
  2. HTML / Webmaster Forum
  3. HTML & CSS Forum

Layout Frage

  • goodn8
  • 9. November 2012 um 14:42
  • goodn8
    Meister(in)
    Beiträge
    268
    • 9. November 2012 um 14:42
    • #1

    Hi zusammen,

    um meine Frage anschaulicher zu machen erstmal mein Layout:

    soweit habe ich schon alles zusammengebastelt allerdings stehe ich jetzt vor folgendem Problem:
    ich habe mit CSS das Hintergrundbild im Main-frame gesetzt allerdings habe ich gelesen, dass das iframe die hintergrundgrafik überdeckt...

    ich hab jetzt schon ne verdammtlange pause gemacht was webpages angeht und wollte mal fragen was wie ich das ganze vill. doch hin bekomme...

    in der suche habe ich leider nur treads gefunden in denen sich darüber beschwert wird das man überhaupt iframes nutzt das bringt mich jetzt nich wirklich weiter...

    danke schonmal im vorraus lg

    [Blockierte Grafik: http://goodn8.go.funpic.de/banner/Augenbanner.gif]

  • Bandit
    Gast
    • 9. November 2012 um 15:22
    • #2
    Zitat von goodn8


    in der suche habe ich leider nur treads gefunden in denen sich darüber beschwert wird das man überhaupt iframes nutzt das bringt mich jetzt nich wirklich weiter...


    Und du bist dabei noch nicht auf die Idee gekommen, dass die Leute, die iFrames nicht für gut halten, eventuell recht haben und du deine Seite vielleicht anders aufbauen solltest? Erkläre mal, warum du glaubst, dass iFrames für dich das Richtige sind.

  • goodn8
    Meister(in)
    Beiträge
    268
    • 9. November 2012 um 15:35
    • #3

    naja liegt einfach daran das ich kontischicht habe und eine seite für meine freundin erstellen wollte, die ist selbsttändig und berufswegen den ganzen tag unzerwegs, da wir beide keine zeit haben muss ich mir halt zu helfen wissen ohne jetzt ne neue sprache wie php zu lernen klar wenn ichs könnte würd ichs tun aber hab halt einfach nich die zeit und die seite soll erstmal nur ihren zweck erfüllen und das halt so schnell wie möglich.

    die bausätze die man sich so bei bestimmten providern sind zwar nicht schlecht aber lassen zuwenig spielraum für meinen geschmack.

    MfG

    edit: ich habs jetzt mal mit

    HTML
    <iframe allowtransparency="true" src="willkommen.html" name="iframe" scrolling="yes"  height="600px" width="800px" frameborder="no"  >
    </iframe>

    versucht und den body von der zielseite transparent gemacht das funktioniert glaub ich schonmal, hab allerdings gelesen nicht bei allen browsern ist da was dran?

    wenn das reichen sollte muss ich das ding nur noch genau über mein main_bg bekommen =)

    ich freu mich über jede hilfe

    [Blockierte Grafik: http://goodn8.go.funpic.de/banner/Augenbanner.gif]

    Einmal editiert, zuletzt von goodn8 (9. November 2012 um 15:42)

  • Bandit
    Gast
    • 9. November 2012 um 15:40
    • #4

    Man muss nicht unbedingt PHP können, um auf iFrames zu verzichten. Es erleichtert die Sache zwar, mehr aber auch nicht.

    Mein Vorschlag: erstelle eine sauber strukturierte Index-Seite und stelle sie hier vor. Beim Umbau auf PHP, bei dem alles per include zusammengestellt wird, wird dir dann garantiert hier geholfen und du hast dann eine vernünftige Lösung.

  • goodn8
    Meister(in)
    Beiträge
    268
    • 9. November 2012 um 15:51
    • #5

    ok ich guck mal wie weit ich noch komme, das main frame fenster kann ich euch ja schonmal reinstellen.

    HTML
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>main</title>
    <meta name="author" content="goodn8">
    <meta name="editor" content="html-editor phase 5">
    <style type="text/css">
    <!--
    
    
    body {
    background:url(datein/bilder/main_bg.jpg) #FFFFFF no-repeat;
    background-position:center center;
    background-attachment:fixed;  }
    
    
    -->
    </style>
    </head>
    <body text="#000000" link="#FF0000" alink="#FF0000" vlink="#FF0000">
    
    
    
    
    <iframe allowtransparency="true" src="willkommen.html" name="iframe" scrolling="yes"  height="600px" width="800px" frameborder="no"  >
    </iframe>
    
    
    
    
    </body>
    </html>
    Alles anzeigen

    ist ja noch nich viel!

    Bandit was meinst du mit

    Zitat

    sauber strukturierte Index-Seite

    ? einal den index.html so gestallten das alles in einer tabelle steht und dass man das layout erahnen kann?

    [Blockierte Grafik: http://goodn8.go.funpic.de/banner/Augenbanner.gif]

    2 Mal editiert, zuletzt von goodn8 (9. November 2012 um 15:55)

  • Bandit
    Gast
    • 9. November 2012 um 15:53
    • #6
    Zitat von goodn8

    einal den index.html so gestallten das alles in einer tabelle steht


    Auf keinen Fall!!! Sieh' dir das mal an: http://www.css4you.de/wslayout1/index.html

  • goodn8
    Meister(in)
    Beiträge
    268
    • 9. November 2012 um 15:59
    • #7

    hmm da ist was dran mit weniger quelltext is das ganze natürlich weit aus angenehmer zu lesen!

    ich werde mich mal dran setzten!

    Danke

    [Blockierte Grafik: http://goodn8.go.funpic.de/banner/Augenbanner.gif]

  • goodn8
    Meister(in)
    Beiträge
    268
    • 9. November 2012 um 17:48
    • #8

    Soo dann mal hier die css datei:

    Code
    body { background-color:#ffffff;
    text-align:center;
    }
    
    
    #webpage { width:1024px;
    margin:0 auto;
    }
    
    
    #header { width:1024px;
    height:200px;
    background-image: url(../datein/bilder/header.jpg);
    border-radius: 10px;
    }
    
    
    #main {width:1024px;
    }
    
    
    #navi { width:200px;
    height:600px;
    background-image: url(../datein/bilder/navi.jpg);
    float:left;
    margin-top:20px;
    margin-bottom:20px;
    border-radius: 5px;
    }
    
    
    #box { width:800px;
    height:600px;
    background-image:url(../datein/bilder/main_bg.jpg);
    float:right;
    margin-top:20px;
    margin-bottom:20px;
    border-radius:5px;
    }
    
    
    #footer {width:1024px;
    height:20px;
    background-color:#999999;
    margin-top:10px;
    border-radius:5px;
    clear:both;
    
    
    }
    Alles anzeigen

    und hier die html datei :

    HTML
    <html>
      <head>
      <title>Caro</title>
      <link rel="stylesheet" type="text/css" href="css/design.css">
      </head>
        <body>
         <div id="webpage">
    
    
              <div id="header">
    
    
              </div>
    
    
              <div id="main">
                   <div id="navi">
    
    
                   </div>
    
    
                   <div id="box">
    
    
                   </div>
    
    
              </div>
    
    
              <div id"footer" align="left" >
                    Impressum
              </div>
    
    
         </div>
        </body>
    </html>
    Alles anzeigen

    Jetzt hab ich halt das problem das ich in den box container die seiten öffnen möchte, die ich der navi zuweise...

    [Blockierte Grafik: http://goodn8.go.funpic.de/banner/Augenbanner.gif]

    Einmal editiert, zuletzt von goodn8 (9. November 2012 um 17:50)

  • Bandit
    Gast
    • 9. November 2012 um 18:09
    • #9

    Du musst dich noch entscheiden, ob es nur eine index.php geben soll, die anhand von Parameter den richtigen Content lädt, oder ob du lieber z.B. eine index.php, kontakt.php, impressum.php, etc. haben möchtest.

  • goodn8
    Meister(in)
    Beiträge
    268
    • 9. November 2012 um 18:25
    • #10

    wie gesagt ich hab null ahnung von php ich würde sagen wir nehmen die einfchste möglichkeit =)
    es würde mir ja reichen wenn der text in dem <div id="box"> mit dem inhalt geladen wird den ich auf der navi aussuche ;)

    [Blockierte Grafik: http://goodn8.go.funpic.de/banner/Augenbanner.gif]

  • Bandit
    Gast
    • 9. November 2012 um 18:49
    • #11

    Die einfachste Lösung ist, wenn du für jede Seite ein eigenes Script nimmst. Hat aber den Nachteil, wenn du mal strukturelle Änderungen haben willst, musst du mehrere Seiten editieren. Der Vorteil daran ist, dass du für jede Seite leicht spezielle Dinge machen kannst.
    Gehen wir mal davon aus, dass du aufteilen willst, also index.php, kontakt.php, etc. Weiterhin gehe ich davon aus, dass es im Hauptverzeichnis deines Webs ein Verzeichnis includes gibt, in dem die Dateien, die per include eingebunden werden, darin liegen. Eine weitere Anforderung sind die Dateinamen. Für eine index.php gibt es eine index.inc.php, für eine kontakt.php gibt es auch eine kontakt.inc.php im Include-Verzeichnis. Dann sieht jedes Script erst mal so aus:

    PHP
    <?php
      // Aus dem Basisnamen die Include-Datei bestimmen
      // Heißt dieses Script kontakt.php, wird der Name
      // kontakt.inc.php erzeugt
      $contentFile = basename (__FILE__, ".php") . ".inc.php";
    
      // Den HTML-Head laden
      if (file_exists('./includes/head.inc.php'))
         include ('./includes/head.inc.php');
      else
         die ("Error! Script aborted");
    
      // Den Header laden  
      if (file_exists('./includes/header.inc.php'))
         include ('./includes/header.inc.php');
      else
         die ("Error! Script aborted");
    
    
      // Main-Div öffnen
      echo "<div id="main">\n";
    
      // Navigation laden  
      if (file_exists('./includes/navigation.inc.php'))
         include ('./includes/navigation.inc.php');
      else
         die ("Error! Script aborted");
    
      // Content laden
      if (file_exists('./includes/' . $contentFile))
         include ('./includes/' . $contentFile');
      else
         die ("Error! Script aborted");
    
      // Div schließen  
      echo "</div>\n";
    
      // Footer laden
      if (file_exists('./includes/footer.inc.php'))
         include ('./includes/footer.inc.php');
      else
         die ("Error! Script aborted");
    ?>
    Alles anzeigen


    Die einzelnen Dateien im Include-Verzeichnis sehen dann so aus:
    head.inc.php

    HTML
    <html>
      <head>
      <title>Caro</title>
      <link rel="stylesheet" type="text/css" href="css/design.css">
      </head>
        <body>
         <div id="webpage">


    header.inc.php

    Code
    <div id="header">
    
    
              </div>


    navigation.inc.php

    Code
    <div id="navi">
    
    
                   </div>


    index.inc.php

    Code
    <div id="box">
    
    
                   </div>


    footer.inc.php

    Code
    <div id"footer" align="left" >
                    Impressum
              </div>
    
    
         </div>
        </body>
    </html>


    Bestimmt wir die Frage aufkommen, warum ich bei den Include-Dateien ein .inc einfüge. Das ist reine Geschmacksache, muss nicht sein. Da ich aber mal versehentlich Dateien aus dem Include-Vereichnis in das Hauptverzeichnis kopiert habe und damit die dort liegen Dateien zerschossen habe, baue ich da immer einen Namensunterschied ein.
    Die Aufteilung der einzelnen Bereiche könnte man bestimmt noch anders gestalten, aber auf die Schnelle scheint das so ok zu sein.

  • goodn8
    Meister(in)
    Beiträge
    268
    • 9. November 2012 um 20:42
    • #12

    so ich bin bin jetzt so weit gekommen wie ich es alleine geschaft habe ... ich hoffe nur ich bekomm sie noch fertig ab morgen muss ich wieder arbeiten...

    hier mal was ich bis jetzt habe:

    ich bekomme jetzt die seiten per ajax ( @Bandit: ich habs mit dem php-script von dir einfachnich hin bekommen, keine ahnung warum, aber vielen dank fürs posten!!)
    in die <div id="box"> geladen und habe in meinem CSS-script eine <div id="text"> eingepfelgt mit der ich dafür sorgen wollte,
    das die texte nich direkt am bildrand stehen... links und oben hat das auch geklappt aber rechts und unten nicht :?

    hier mal die relevanten ausschnitte:

    Code
    #box { width:800px;
    height:600px;
    background-image:url(../datein/bilder/main_bg.jpg);
    float:right;
    margin-top:20px;
    margin-bottom:20px;
    border-radius:5px;
    }
    
    
    #text { width:800px;
    height:600px;
    margin-left:20px;
    margin-right:20px;
    margin-top:20px;
    margin-bottom:20px;
    }
    Alles anzeigen
    HTML
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
    <head>
    
    
    <title>Über mich</title>
    <link rel="stylesheet" type="text/css" href="css/design.css">
    
    
    </head>
    
    
    <body>
    
    
    <h1>Über Mich:</h1>
    <div id="text" align="left">
     TEXT
    </div>
    
    
    </body>
    </html>
    Alles anzeigen

    also der textfluss funktioniert schon mal nicht :roll:

    das nächste problem ist das wenn der text zu lang ist einfach der container verlängert ich würde aber lieber scrollen ohne das das "fenster" sich verlängert :cry:

    vill bin ich ja ein bischen zu fertig und seh den wald vor lauter bäumen nich aber wäre schön wenn ihr mir mal auf die sprünge helfen könntet

    [Blockierte Grafik: http://goodn8.go.funpic.de/banner/Augenbanner.gif]

    2 Mal editiert, zuletzt von goodn8 (9. November 2012 um 20:56)

  • Bandit
    Gast
    • 9. November 2012 um 21:01
    • #13

    Guckst du: http://www.css4you.de/overflow.html

  • goodn8
    Meister(in)
    Beiträge
    268
    • 9. November 2012 um 21:45
    • #14

    hmm wenn ich das ganze im der ueber.hmtl eingebe funktioniert es wenn ich es in die *.css hinzufüge allerdings nicht woran kann das denn liegen, hab jetzt nur das script von deinem link kopiert und angepasst? :? funktioniern tuts zwar wie es soll aber ich hätte es halt liber in der css datei damit ich den teil nich auf jeder seite einfügen muss.

    Danke

    [Blockierte Grafik: http://goodn8.go.funpic.de/banner/Augenbanner.gif]

  • Bandit
    Gast
    • 9. November 2012 um 21:52
    • #15
    Zitat von goodn8

    hmm wenn ich das ganze im der ueber.hmtl eingebe funktioniert es wenn ich es in die *.css hinzufüge allerdings nicht


    Ohne zu sehen, was du gemacht hast, wird man dir nicht helfen können.

Tags

  • layout
  • quelltext
  • suche
  • problem
  • frame
  • tag
  • php
  • freundin
  • gesetz
  • iframe
  • css
  • provider
  • pause
  • config
  • iframes
  • include
  • hintergrundbild
  • zweck
  • hintergrundgrafik
  • erstellen
  • frage
  • sprache
  • lernen
  • seite
  1. Datenschutzerklärung
  2. Impressum
Community-Software: WoltLab Suite™
  • Alles
  • Dieses Thema
  • Dieses Forum
  • Artikel
  • Seiten
  • Forum
  • Erweiterte Suche
Zitat speichern