• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

HTML/CSS und PHP verknüpfen

M

menkee

Neues Mitglied
Hallo Leute, ich stehe hier vor einem Problem welches ich einfach nicht gebacken kriege. Ich bin Anfänger und würde mcih riesig über eine Lösung freuen.

Also ich habe mit CSS ein Grundgerüst erstellt welches wiefolgt aufgeteilt ist:

Header
Navigation
Content

Hier der Code:

html {min-height: 100%;}
* {
margin: 0;
padding: 0;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
body {
}
.clearer {clear: both; font-size: 0;}
.left {float: left;}
.inner-container {
border: 1px solid #000000;
background: #FFF;
font-size: 1.2em;
margin: 0 auto;
padding: 10px;
width: 970px;
margin-top: 8px;
}
.outer-container {
padding-bottom: 14px;
}
.header {
border: 1px solid #000000;
height: 160px;
margin-bottom: 5px;
background-color: #FFCC00;
}
.content {
border: 1px solid #000000;
height: 420px;
background-color: #FFFFCC;
margin-top: 8px;
}
.navigation {
border: 1px solid #000000;
height: 25px;
margin-top: 8px;
background-color: #666666;
}
.footer {
border: 1px solid #000000;
color: #000000;
margin-top: 8px;
padding: 2px 4px;
}
.footer a {
color: #000000;
text-decoration: none;
}







Was ich eigentlich will ist folgendes: Ich will im Navigationsbereich 4 Buttons erstellen. HOME - MUSIC - PICTURES und MOVIES, so, wenn ich jetzt auf Home klicke muss im Bereich "content" im CSS Bereich das home.html aufgehen, wenn ich music klicke, muss das music.html dort aufgehen usw.

Angeblich kann ich das mit PHP lösen. Den Code den ich hier habe ist folgender:

<html>
<head>
<!-- DEINE HEADER INFOS -->
</head>
<body>
<!-- DEIN QUATSCH -->
<div id="hier kommt der Inhalt rein">
<?php include ("index.html"); ?>
</div>
</body>
</html>

Das ganze habe ich in ein textfile reingepackt und habe es als verlinkung.php gespeichert.

Kann mir jemand sagen wie ich das realisieren kann? Wie kann ich mir das anschauen wenn ich 3 Files habe? Also CSS PHP und HTML? Kann mir jemand bitte bitte sagen wie ich das lösen kann? Ich bin am verzweifeln
 
menkee schrieb:
wenn ich jetzt auf Home klicke muss im Bereich "content" im CSS Bereich das home.html aufgehen
Zum Vergrößern anklicken....
Wieso muss? Das macht keiner so und funktioniert auch nicht so.
Wenn Du auf einen Link klickst, dann wird immer eine neue Seite geladen.
Du kannst aber mittels PHP (z.B.) und dem Befehl include() gleichbleibende Seiteninhalte einbinden. Das ist das, was Du willst.

Oder DU machst es umgekehrt, und includest den jeweiligen Inhalt.
 
Jetzt hast du mich total durcheinander gebracht.
Wo finde ich ein Beispiel? Ich muss einfach mal so ein Grüst haben welches funktioniert, denn nur so kann ich das lernen. Wäre jemand sooooooo nett und würde mir einbisschen helfen?
 
Ein Beispiel findest Du sicher irgendwo im Netz. Dürfte nicht so schwer sein.

Zum include() gibts das hier:
PHP: include - Manual

Durcheinander bringen wollte ich Dich nicht :-)
Aber PHP kannst Du?

Oder worin ist begründet, dass Du durcheinander bist?
 
Nein PHP kann ich nicht. Eigentlich wollte ich einfach eine kleine Homepage erstellen. Dann wurde mir die Seite selfhtml.org nahe gelegt welche ich mal (HTML Bereich) durchgelesen habe. Dann habe ich mal was kleines erstellt und in einem Forum wirde mir mitgeteilt, dass Frames nicht mehr verwendet werden. Ich solle das ganze mit CSS machen. Ok dann habe ich mir mal ein CSS Grundgerüst zusammen gestellt, welches aus header, navi und content besteht.In der Navi sollte ich 4 buttons haben welche beim draufklicken die jeweilige html seite im content Bereich öffnen und ich komme hier einfach nicht mehr weiter. Dann wurde mir mitgeteilt, dass ich das mit PHP lösen kann, aber es ist einfach alles zuviel auf einmal. Deshalb bin ich jetzt durcheinander weil du schreibst dass das so gar nicht geht.
Ich weiss gar nicht wo ich anfangen soll, deshalb wäre eine Vorlage sicher mal nicht schlecht wo ich mit dem ganzen code herumexperimentieren kann.
 
Ich verstehe, dass das recht viel ist am Anfang. Dann würde ich Dir vorschlagen, das mit PHP erstmal zu vergessen und Dich auf eine einzige Seite zu konzentrieren.

Du musst als erstes HTML beherrschen, dass CSS lernen. Um nicht zuviel auf einmal zu machen, nimm Dir nur eine einzige Seite vor. Wenn Dein HTML dann gut ist, kannst Du ja auch auf 3-4 Seiten umsteigen, dafür aber die wiederkehrenden Elemente wie Menüs trotzdem erneut in jede Seite einbauen. Das ist zwar schwer zu warten, aber für den Anfang leichter zu verstehen.

Auf SelfHTML hast Du ja schon das Grundgerüst einer HTML-Datei gelernt. Du brauchst das, einen Doctype, im Header die Angabe des charset und im Body Deinen Inhalt. Diesen zeichnest Du gemäß seiner Bedeutung semantisch aus.

Und wennDu es in kleinen Häppchen lernen willst, empfehle ich Dir, erstmal das umzusetzen, bei Fragen zu fragen, und dann Dein Ergebnis wieder hier im Forum zu präsentieren. Dann kann man Dir direkt an Deinem bisherigen Stand erklären, was in Ordnung ist und was Du noch verbessern musst.

Okay? Das mit dem PHP/include ist nicht wirklich schwer, aber es ist sicherlich eine gute Idee, einen Schritt nach dem anderen zu machen.

Also bis demnächst :-)
 
Ok, so hier mal das Resultat von 1 1/2 Tage arbeit:
Kann man das soweit gebrauchen?

"CSS"

html {min-height: 100%;}
* {
margin: 0;
padding: 0;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
body {
}
.clearer {clear: both; font-size: 0;}
.left {float: left;}
.inner-container {
border: 1px solid #000000;
background: #FFF;
font-size: 1.2em;
margin: 0 auto;
padding: 10px;
width: 970px;
margin-top: 8px;
}
.outer-container {
padding-bottom: 14px;
background: #998C99;
}
.header {
border: 1px solid #000000;
height: 160px;
margin-bottom: 5px;
background-color: #FF0000;
}
.content {
border: 1px solid #000000;
height: 420px;
background-color: #FFFFCC;
margin-top: 8px;
}
.navigation {
border: 1px solid #000000;
height: 25px;
margin-top: 8px;
background-color: #666666;
}

und dann die jeweiligen HTML Seiten die alle etwa so aussehen:
"HTML"


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Beschreibung der Seite</title>
</head>
<body>
<div class="outer-container">
<div class="inner-container">
<div class="header">
<h1>Header</h1>
</div>
<div class="navigation">
<center>
<a href="index.html">HOME</a>
<a href="music.html">MUSIC</a>
<a href="pictures.html">PICTURES</a>
<a href="movies.html">MOVIES</a>


</div>
<div class="content">
<h1>Content</h1>
this is my home content
</div>
<div class="clearer"></div>
<div class="footer">
<span class="left">
</spam>
</div>
</body>
</html>

Funktionieren tuts auf alle Fälle, aber ist es auch richtig oder kann man noch was verbessern?
 
1. div#header ist unnütz.
2. <center> gibt es nicht.
3. Dein Menü ist nicht semantisch ausgezeichnet.
4. div#navigation ist unnötig.
5. Die zweite Überschrift 1. Grades ist vermutlich NICHT gleichwertig mit der ersten Überschrift 1. Grades.
6. "this is my home content" ist nicht ausgezeichnet.
7. div#footer ist mangels Inhalt nicht zu bewerten.
8. Es gibt kein Tag <spam>
9. #outer-container und #inner-container sind nicht geschlossen. Einer von beiden ist bestimmt überflüssig.
10. Der Klassenname "left" ist schlecht gewählt, da keine semantisch Bedeutung.
11. Raum HTML 4.01 Transitional? Warum ein Übergangsdialekt? Warum nicht HTML 4.01 Strict?

Was Du NICHT gemacht hast, ist Dich erstmal auf HTML zu konzentrieren. So bekommst Du kein Gespür für HTML. CSS funktioniert aber nur anständig mit einer validen und semantisch sinnvollen Basis aus HTML.

*Trennung von Inhalt und Layout* - Das fängt beim ersten Tastenanschlag schon an. Layout/Design vergessen, Inhalt niederschreiben und diesen mit HTML semantisch auszeichnen. Erst wenn der HTML-Code richtig steht, mit CSS anfangen. Und kein HTML-Code ohne richtigen Inhalt. Den gibts bei Dir auch nicht. Wer von hinten anfängt (also beim Aussehen, so wie Du jetzt), der wird ständig immer wieder zurück springen und Änderungen vornehmen müssen, hat damit doppelte und dreifache Arbeit. Und lernt HTML nicht richtig.
 
Also, hatte wieder mal Zeit und habe mir nun eine ganz einfach Seite erstellt. Es beinhaltet ein Hintergrundbild und 5 Links zu weiteren HTML Seiten. Wirklich simpel. Ist es soweit ok?


<html>
<head>
<meta http-equiv="Content-Language" content="de-ch">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Menkee</title>
</head>
<body bgcolor="#000000">
<center>
<a href="index.html">
<img border="0" src="images/home.jpg" width="300" height="100"></a><a href="seiten/music.html"><img border="0" src="images/music.jpg" width="300" height="100"></a><a href="seiten/pictures.html"><img border="0" src="images/pictures.jpg" width="300" height="100"></a><a href="seiten/movies.html"><img border="0" src="images/movies.jpg" width="300" height="100"></a><a href="seiten/guestbook.html"><img border="0" src="images/guestbook.jpg" width="300" height="100"></a><p>&nbsp;</p>
</center>
<p align="center">
<img border="0" src="images/menkee.jpg" width="1011" height="568"></p>
</body>
</html>
 
Du könntest uns einen großen gefallen tun.
Um deinen Quelltext folgendes drum schreiben

[*HTML]
dein HTML Quelltext
[*/HTML]
(* entfernen dann klappts :))

Das macht es dann lesbarer für uns

Edit:

Hab es auch mal so durchgeguckt:

1. windows-1252 <-- gibts das charset? Wenn ja dann ist ok :D
2. Sachen wie bgcolor, align, img border oder gar center solltets du alles über CSS einstellen. Auch ein Absatz mit einem Leerzeichen drin ist wahrscheinlich nur für das Design. Alles über CSS lösbar :)

Sonst nichts verkehrt auf dem ersten Blick
 
Zuletzt bearbeitet:
Gilles schrieb:
Du könntest uns einen großen gefallen tun.
Um deinen Quelltext folgendes drum schreiben

[*HTML]
dein HTML Quelltext
[*/HTML]
(* entfernen dann klappts :))

Das macht es dann lesbarer für uns
Zum Vergrößern anklicken....

Mein Quelltext beinhaltet ja ein <html> und </html>
Verstehe nicht ganz auf was du aus willst?????
 
menkee schrieb:
Mein Quelltext beinhaltet ja ein <html> und </html>
Verstehe nicht ganz auf was du aus willst?????
Zum Vergrößern anklicken....
Es gibt her im Forum BBC-Tags. Diese lassen dich deinen text zum Beispiel dick schreiben. Es gibt auch einen, der für das Syntax-Highlighting in HTML zuständig ist.

Schau dir das an

HTML: 
<html>
  <head>
  </head>
  <body>
  </body>
</html>
Sieht doch viel schöner aus :D
Das ist das ganze:

[*HTML]
<html>
<head>
</head>
<body>
</body>
</html>
[*/HTML]

Wenn du dort die * entfernen würdest, würde das genau wie oben aussehen

Hab dir übrigens schon geantwortet in meinem Beitrag davor :)
 
Das geht irgendwie nicht bei mir:

HTML: 
<html>
<head>
<meta http-equiv="Content-Language" content="de-ch">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Menkee</title>
</head>
<body bgcolor="#000000">
<center>
<a href="index.html">
<img border="0" src="images/home.jpg" width="300" height="100"></a><a href="seiten/music.html"><img border="0" src="images/music.jpg" width="300" height="100"></a><a href="seiten/pictures.html"><img border="0" src="images/pictures.jpg" width="300" height="100"></a><a href="seiten/movies.html"><img border="0" src="images/movies.jpg" width="300" height="100"></a><a href="seiten/guestbook.html"><img border="0" src="images/guestbook.jpg" width="300" height="100"></a><p>&nbsp;</p>
</center>
<p align="center">
<img border="0" src="images/menkee.jpg" width="1011" height="568"></p>
</body>
</html>
 
Gilles schrieb:
Hab es auch mal so durchgeguckt:

1. windows-1252 <-- gibts das charset? Wenn ja dann ist ok :D
2. Sachen wie bgcolor, align, img border oder gar center solltets du alles über CSS einstellen. Auch ein Absatz mit einem Leerzeichen drin ist wahrscheinlich nur für das Design. Alles über CSS lösbar :)

Sonst nichts verkehrt auf dem ersten Blick
Zum Vergrößern anklicken....
Falls du es nicht gesehen hast :)
 
Das ist jetzt lustig, im ersten Eintrag von diesem threat, wurde mir empfohlen CSS mal beiseite zu lassen und erst mal html zu lernen, ok. Jetzt meinst du das ich das mit CSS machen kann/soll :-)

Ok dann kommt jetzt meine nächste Frage. Ich habe ja ein Hintergrundbild, das möchte ich über das ganze Bild haben und zwar nicht nebeneinander und übereinender sonder 1 Bild gleich gross wie meine Monitor :-) Wie kriege ich das gebacken und geht das überhaupt mit HTML?
 
Natürlich solltest du zuerst mit HTML anfangen :D Aber ohne den Design Hintergrund. Denn das bgcolor usw sind ja für das design gedacht. Du sollst erst einmal deinen Inhalt auszeichnen.
Die geschichte mit dem hintergrundbild ist so leider nicht möglich. Du dem Body das Bild zuweisen und sagen dass es sich nicht wiederholen soll, jedoch kannst du es nicht wie bei nem Desktop Bild strecken lassen :)
probier mal als css folgendes
Code: 
body {
  background: url("bild.jpg") no-repeat;
}
 
menkee schrieb:
Das ist jetzt lustig, im ersten Eintrag von diesem threat, wurde mir empfohlen CSS mal beiseite zu lassen und erst mal html zu lernen, ok.
Zum Vergrößern anklicken....
Genau. Und HTML hat nichts mit dem Aussehen zu tun. Also Layout/Design/Hintergrundbilder erstmal vergessen. Meine Tipps hast Du noch nicht vollständig befolgt.

1. Doctype fehlt.
2. Du verwendest Attribute zur physischen Inhaltsauszeichnung (-> CSS) (bgcolor, align).
3. <center> gibt es immer noch nicht. Ist physische Inhaltsauszeichnung (-> CSS).
4. Der Link mit dem Image muss in einen Container.

Ansonsten recht wenig Inhalt für mehr Tipps.

sonder 1 Bild gleich gross wie meine Monitor :-) Wie kriege ich das gebacken und geht das überhaupt mit HTML?
Zum Vergrößern anklicken....
Nein, natürlich nicht. Denn HTML ist - wie gesagt - nicht für das Aussehen zuständig, sondern CSS.
Aber Hintergrundbilder lassen sich auch nicht skalieren.
Und außerdem ist das mit der Größe Deines Monitors auch sinnfrei, denn woher soll mein Browser wissen, wie groß Dein Monitor ist ;-)
Spaß beiseite, CSS kennt die Größe Deines Monitors nicht, die ist aber auch irrelevant. Mit der kannst Du nichts anfangen. Genausowenig wie mit der Farbe Deines Moinitors, dem Hersteller oder der Auflösung. Was zählt, ist einzig der Viewport und der ist eigentlich immer kleiner als das, was die Auflösung hergäbe, oft sogar noch viel kleiner.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben