CSS html Datei einfügen

PC FREAKY

Commander
Registriert
März 2010
Beiträge
2.250
Hallo,

Ich habe momentan diesen Code als Grundgerüst:

PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/tutorial_beispielseite.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Beispielseite</title>
<!-- InstanceEndEditable --><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
/* grundlegende Seiteneinstellungen*/
body {
        font: 100% Verdana, Arial, Helvetica, sans-serif;
        background-color: #F1EDCF;
        margin:5%;
}

h1,h2,h3 {
        font-family: "Times New Roman", "Trebuchet MS", Georgia, serif;
        font-weight:normal;
        color:#667553;
}

h1 {
        font-size: 250%;
        margin-bottom:1.5em;
}

h2 {
        font-size: 200%;
        margin-bottom:1em;
}

h3 {
        font-size: 150%;
        margin-bottom:1em;
}

-->
</style>
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
<!--
#header {
        background:#9EB8C6;
        margin:0;
        padding:0;
        height:50px;
}

#nav {
        background:url(onepx_line.gif) 80% 0% repeat-y;
        position:absolute;
        width:20%;
        margin:20px 0 0 0;
        padding:30px 0;
}

#nav ul {
        list-style:none;
        margin:0;
        padding:0;
}


#nav li {
        margin:0;
        padding:0;
}

#nav a:link, #nav a:visited {
        display:block;
        margin:10px 0;
        padding:10px 10px 10px 20px;
        background-color:#DAD4A6;
        border:2px solid #DAD4A6;
        /* die Höhenangabe ist für den IE, damit die gesamte FLäche des Links klickbar ist */
        height:1em;
        }

html>body #nav a:link, html>body #nav a:visited  {
        height:auto;
}

#nav a:hover {
        border:2px solid #AFBCA0;
}

-->
</style>
<!-- InstanceEndEditable -->
</head>
<body>
<!-- InstanceBeginEditable name="mainArea" -->
<div id="header">
  <h1>Beispielseite</h1>
</div>
<div id="nav">
  <ul><li><a href="#">Link1</a></li><li><a href="#">Link2</a></li><li><a href="#">Link3</a></li><li><a href="#">Link4</a></li><li><a href="#">Link5</a></li>  <li><a href="#">Link6</a></li></ul>
</div>
<!-- InstanceEndEditable -->
</body>
<!-- InstanceEnd --></html>

Jetzt würde ich der einfachheit halber Seiten erstellen(ganz einfache .htm-Seiten), welche als Hintergrundfarbe die gleiche haben wie das Grundgerüst. Diese sollen dann aufgerufen werden wenn man auf den entsprechenden Link drückt.
Das wäre auch alles kein Problem, aber wie sage ich dem Computer, dass er die .htm Seite genau dort einfügt, wo jetzt das schwarze Viereck ist (mit Paint editiert)?

Ich verzweifle gerade fast

PC FREAKY
 

Anhänge

  • Neues Bild.jpg
    Neues Bild.jpg
    22,4 KB · Aufrufe: 497
Offline schrieb:
Einfach eine div-Box erstellen und den Code da einfügen, oder geht das nicht?

ryan_blackdrago schrieb:
Über FRAMES und diese entsprechend verteilen..

Eagle-PsyX- schrieb:
iFrames?

Oder über JavaScript, PHP oder sontiges Techniken einbinden..?
HTML alleine kann nur über (i)Frames andere HTML-Dateien einbinden.

3 Personen 3 Meinungen
Frames werde ich keine Benutzen da ich hier schon öters darauf hingewiesen wurde, dass Frames veraltet sind...

Sonst jemand ne Idee?

PC FREAKY
 
Wieso erstellt du nicht einfach für jede Unterseite eine autarke Datei inklusive Menü und Header? Damit würdest du dir iFrames ersparen.
 
Kausalat schrieb:
Wieso erstellt du nicht einfach für jede Unterseite eine autarke Datei inklusive Menü und Header? Damit würdest du dir iFrames ersparen.

überlege ich mir gerade...

habe jetzt eine div-Box erstellt, allerdings verschiebt diese auch meine navigation mit nach rechts...

wie kann ich das problem lösen?

PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/tutorial_beispielseite.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Beispielseite</title>
<!-- InstanceEndEditable --><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
/* grundlegende Seiteneinstellungen*/
body {
        font: 100% Verdana, Arial, Helvetica, sans-serif;
        background-color: #F1EDCF;
        margin:5%;
}

h1,h2,h3 {
        font-family: "Times New Roman", "Trebuchet MS", Georgia, serif;
        font-weight:normal;
        color:#667553;
}

h1 {
        font-size: 250%;
        margin-bottom:1.5em;
}

h2 {
        font-size: 200%;
        margin-bottom:1em;
}

h3 {
        font-size: 150%;
        margin-bottom:1em;
}

-->
</style>
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
<!--
#header {
        background:#9EB8C6;
        margin:0;
        padding:0;
        height:50px;
}

#main   {
        background:#D5254B;
        margin-top:50px;
        margin-bottom:0;
        margin-left:100px;
        margin-right:0;
        padding:0;
        height:50px;
        width:300px;
}

#nav {
        background:url(onepx_line.gif) 80% 0% repeat-y;
        position:absolute;
        width:20%;
        margin:20px 0 0 0;
        padding:30px 0;
}

#nav ul {
        list-style:none;
        margin:0;
        padding:0;
}


#nav li {
        margin:0;
        padding:0;
}

#nav a:link, #nav a:visited {
        display:block;
        margin:10px 0;
        padding:10px 10px 10px 20px;
        background-color:#DAD4A6;
        border:2px solid #DAD4A6;
        /* die Höhenangabe ist für den IE, damit die gesamte FLäche des Links klickbar ist */
        height:1em;
        }

html>body #nav a:link, html>body #nav a:visited  {
        height:auto;
}

#nav a:hover {
        border:2px solid #AFBCA0;
}

-->
</style>
<!-- InstanceEndEditable -->
</head>
<body>
<!-- InstanceBeginEditable name="mainArea" -->
<div id="header">
  <h1>Beispielseite</h1>
</div>
<div id="nav">
  <ul><li><a href="#">Link1</a></li><li><a href="#">Link2</a></li><li><a href="#">Link3</a></li><li><a href="#">Link4</a></li><li><a href="#">Link5</a></li>  <li><a href="#">Link6</a></li></ul>
</div>
<!-- InstanceEndEditable -->
<div id="main">hello</div>
</body>
<!-- InstanceEnd --></html>
 
Zuletzt bearbeitet:
Also die hübscheste Lösung für dein Problem heißt jQuery .load(), falls javascript + jQuery nicht in Frage kommt, machst du das mit einem php-include.
Ergänzung ()

Damit dein #main-Container nach rechts floatet braucht er die css-Eigenschaften: #main {float:right; width:400px;} und der #nav-container ein #nav {float:left; width:200px;} Die breiten musst du selber ausmessen ;) muss halt zusammen in die ganze breite passen.
 
@ PC FREAKY:

Zum einen fehlt die schließende Klammer "}" bei der Definition von "#main". Zum anderen solltest du der Einfachheit halber mit "floats" anstatt absoluter Positionierungen arbeiten und damit dein Menü sowie den Inhalt positionieren.

Ebenso solltest du dir angewöhnen, deinen CSS-Code in eine externe Datei auszulagern (sofern du dies nicht sowieso vorhast) und mehrere ähnlich lautende CSS-Eigenschaften zusammenzulassen:

Code:
padding-top: 1px;
padding-right: 2px;
padding-bottom: 3px;
padding-left: 4px;

wird dem Uhrzeiger nach zusammengefasst zu:

padding: 1px 2px 3px 4px;
 
Zuletzt bearbeitet:
ZooLxp schrieb:
Also die hübscheste Lösung für dein Problem heißt jQuery .load(), falls javascript + jQuery nicht in Frage kommt, machst du das mit einem php-include.
Ergänzung ()

Damit dein #main-Container nach rechts floatet braucht er die css-Eigenschaften: #main {float:right; width:400px;} und der #nav-container ein #nav {float:left; width:200px;} Die breiten musst du selber ausmessen ;) muss halt zusammen in die ganze breite passen.

Danke, genau das suchte ich, float, vielen Dank nochmal :D
 
PC FREAKY schrieb:
3 Personen 3 Meinungen
Frames werde ich keine Benutzen da ich hier schon öters darauf hingewiesen wurde, dass Frames veraltet sind...

Sonst jemand ne Idee?

Ja iFrames sind veraltet. Aber du kannst ja mal erzählen was für Techniken erlaubt sind.
Hast du meinen Beitrag wirklich gelesen? JavaScript und PHP bieten sich auch an. Du könntest natürlich auch auf ASP oder Phyton greifen...

jQuery (ein JavaScript-Framework): $('.inhalt').html() oder alles im voraus laden und mit $('.inhalt').show() wieder darstellen.
PHP: include(), include_once(), require(), require_once(), file(), fopen(), file_gets_content() ... such dir etwas aus :)

Das mit der <div>-Box schließt sich nicht aus, sonder wäre egal bei welcher Technologie sehr ratsam anzuwenden.
 
Zuletzt bearbeitet:
Eagle-PsyX- schrieb:
Ja iFrames sind veraltet. Aber du kannst ja mal erzählen was für Techniken erlaubt sind.
Hast du meinen Beitrag wirklich gelesen? JavaScript und PHP bieten sich auch an.

jQuery (ein JavaScript-Framework): $('.inhalt').html() oder alles im voraus laden und mit $('.inhalt').show() wieder darstellen.
PHP: include(), include_once(), require(), require_once(), file(), fopen(), file_gets_content() ... such dir etwas aus :)

Das mit der <div>-Box schließt sich nicht aus, sonder wäre egal bei welcher Technologie sehr ratsam anzuwenden.

auch vielen Dank hierfür, aber das ganze wird ein offlineprojekt und da ich dadurch geringe ladezeiten habe, mache ich einfach das "aussenherum" jedes mal genau gleich und ändere nur die div box in der Mitte.

Eine Frage habe ich aber noch:

Wie kann ich ein Bild als Link verwenden?
 
Ganz einfach mit

Code:
<a href="blubb"><img scr="url-zum-bild" alt="eine auf gar keinen Fall optionale Bildbeschreibung" /></a>
:)


Edit: Computerbase bräuchte wirklich eine ajaxgestützte Beitragsaktualisierung, um Doppelposts zu vermeiden ;).
 
Zuletzt bearbeitet: (auf Wunsch ergänzt ;-))
@Kausalt
Ohja, erst recht wenn es einfache Fragen sind wo dutzende Leute antworten könnten :)

P.S.: Die ALT-Attribute ist nicht wirklich optional, zumindest z.b. bei XHTML 1.0 Transitional ist das Pflicht :)
 
Und nochmal etwas...

ich habe ja jetzt links solche rechteckigen Boxen

Wie kann ich diese mit CSS rund machen (ich möchte nicht auch noch mit java oder so anfange, CSS und HTML sind für den Anfang schon genug :D)
 
klappt nicht, bau mal pls ein wie du meinst:

PHP:
#main   {
        float:right; width:400px;
        background:#0BFF17;
        margin-top:50px;
        margin-bottom:0;
        margin-left:300px;
        margin-right:100px;
        padding:0;
        height:5000px;
        width:650px;
 
Dann benutzt du wahrscheinlich einen veralteten Browser, der das noch nicht unterstützt (wie z.B. IE8). Im schlimmsten Fall musst du das dann per Grafiken zusammenstückeln, wenn du Kompatibilität gewähren willst.
 
danke für den hinweis, habe den in meinem html integrierten Browser genommen und der unterstützt das nicht, mein Opera kanns :D
Ergänzung ()

das klappt jetzt also

gibt es jetzt auch eine möglichkeit, dass z.B. nur 2 Ecken abgerundet werden oder dass eine Ecke mehr als eine andere Ecke abgerundet ist?
Ergänzung ()

.
ZooLxp schrieb:
Also die hübscheste Lösung für dein Problem heißt jQuery .load(), falls javascript + jQuery nicht in Frage kommt, machst du das mit einem php-include.
Ergänzung ()

Damit dein #main-Container nach rechts floatet braucht er die css-Eigenschaften: #main {float:right; width:400px;} und der #nav-container ein #nav {float:left; width:200px;} Die breiten musst du selber ausmessen ;) muss halt zusammen in die ganze breite passen.

Habe ich ja so gemacht, nun habe ich ja meine Navigation auf der linken Seite fix...

Kann ich irgendwie machen, dass mein "main"teil dann z.B. 50px neben "Main" ist?

es sieht nämlich sonst immer so unterschiedlich bei verschiedenen Bildschirmauflösungen aus...

Danke schonmal,

PC FREAKY
 
Zurück
Oben