CSS html Datei einfügen

PC FREAKY · 17. September 2011

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

Offline · 17. September 2011

Einfach eine div-Box erstellen und den Code da einfügen, oder geht das nicht?

ryan_blackdrago · 17. September 2011

Über FRAMES und diese entsprechend verteilen..

Eagle-PsyX- · 17. September 2011

iFrames?

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

PC FREAKY · 17. September 2011

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

Kausalat · 17. September 2011

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

PC FREAKY · 17. September 2011

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>

ZooLxp · 17. September 2011

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 (17. September 2011)

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.

Kausalat · 17. September 2011

@ 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;

PC FREAKY · 17. September 2011

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 (17. September 2011)

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

Eagle-PsyX- · 17. September 2011

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.

PC FREAKY · 17. September 2011

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?

Eagle-PsyX- · 17. September 2011

Code:

<a href="link.htm" title="Link"><img src="bild.jpg" alt="bild" /></a>

Kausalat · 17. September 2011

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

.

Eagle-PsyX- · 17. September 2011

@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

PC FREAKY · 17. September 2011

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

)

Tumbleweed · 17. September 2011

Code:

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

PC FREAKY · 17. September 2011

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;

Tumbleweed · 17. September 2011

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.

PC FREAKY · 17. September 2011

danke für den hinweis, habe den in meinem html integrierten Browser genommen und der unterstützt das nicht, mein Opera kanns

Ergänzung (17. September 2011)

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 (17. September 2011)

.

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 (17. September 2011)

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

CSS html Datei einfügen

Commander

Anhänge

Offline

Gast

Captain

Commander

Commander

Kausalat

Gast

Commander

Lt. Commander

Kausalat

Gast

Commander

Commander

Commander

Commander

Kausalat

Gast

Commander

Commander

Captain

Commander

Captain

Commander

Ähnliche Themen