Layout Frage

goodn8

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

Bandit

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

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

Bandit

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

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?

Bandit

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

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

goodn8

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...

Bandit

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

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

Bandit

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

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

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

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

Bandit

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

goodn8

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

Bandit

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