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

links

Status
Für weitere Antworten geschlossen.
M

Mad Dog

Mitglied
hey Leue
hab mir jetzt erstmal so ein grobes layout mittels html und css zurechtgelegt!
haben oben ein div fuer einen banner (in unserem fall unwichtig)
der platz darunter sind 2 divs: ein navi(links) und ein main(rechts)

jetzt will ich in dem navi div links plazieren ueber die man in verscheiden bereiche kommt. dazu soll der text etc in das main div geladen werden, damit sich nur der veraendert!
wie realisiere ich das am besten?
 
Werbung:
Mit php

PHP: 
<?php
switch ($_GET['seite']) {
 case "home": $inhalt = "home.php"; break;
 case "ich": $inhalt = "ich.php"; break;
 default: $inhalt = "error.php"; break;
}
?>
<div id="navilinks">
<a href="index.php?seite=home">Home</a>
<a href="index.php?seite=ich">Das bin ich</a>
</div>


<div id="inhalt"><?php require($inhalt) ?></div>
Wobei die divs nur Demo sind. Wichtig sind die hrefs ?seite=... und das <?php require($inhalt) ?>

Google einfach mal nach include

___
Edit:
habe ausversehen einen case falsch gemacht
 
Zuletzt bearbeitet:
Werbung:
Das ganze kannst du auch noch x-beliebig ausbauen:

whitelist.php
PHP: 
<?php
switch ($_GET['seite']) {
	case "home":
		$inhalt = "home.php";
		$keywords = "Home, Willkommen";
		$titel = "Übersicht";
		break;
	case "ich":
		$inhalt = "ich.php";
		$title = "Das bin ich";
		$keywords = "Ich, Hobbys, etc...";
		break;
	default:
		$title = "Es ist ein Fehler aufgetreten";
		$inhalt = "error.php";
		$keywords = "Error 404";
		break;
}
?>

index.php
PHP: 
<?php require(whitelist.php); ?>
<html>
    <head>
        <title><?php echo $title; ?></title>
        <meta name="keywords" content="<?php echo $keywords; ?>" />
    </head>
    <body>
        <div id="navilinks">
            <a href="index.php?seite=home">Home</a>
            <a href="index.php?seite=ich">Das bin ich</a>
        <div id="inhalt"><?php require($inhalt); ?></div>
    </body>
</html>

Ich lagere immer die Inhalt includes gerne aus, da es doch noch mehr wie 2 Seiten werden. Ist übersichtlicher wenn man viele Seiten hat.

[edit]
ein paar ";" vergessen^^
 
Mad Dog schrieb:
hab mir jetzt erstmal so ein grobes layout mittels html und css zurechtgelegt!
Zum Vergrößern anklicken....
Du solltest aber auch daran denken, dass man Layout nicht mit HTML macht, dass HTML weit mehr ist, als nur überall das allgemeine Block-Element <div> hinzuklatschen. Zum Gruppieren mehrerer Elemente ist das Element gut, für manche Konstruktion mit CSS ist es das einzge Mittel, aber für die allgemeine Struktur Deines Inhalts kommt <div> gar nicht in Frage!

Vergiss also nicht, HTML zu dem Zweck zu benutzen, zu dem es gemacht wurde: Zeichne Deinen Inhalt logisch aus. Markiere Überschriften mit dem Überschrifts-Tag, markiere Textabsätze, zeichne wichtige Textpassagen mit dem entsprechenden Tag aus oder benutze <table> für tabellarische Daten.

Menüs z.B. sind nichts anderes als Listen und sollten daher auch als solche ausgezeichnet werden, von dieser Seite ist das Codebeispiel von CGollhardt schlecht gewählt, ein Menü packt man nicht in ein aussageloses <div>. Dem fehlt jegliche logische Bedeutung.

Gruß,
-Efchen
 
Efchen, jetzt hast du mich sehr neugierig gemacht.

Ich habe immer gedacht man sollte nur mit divs arbeiten und Tabellenartiges Design meiden.
Ich habe demnächst auch vor, nach dem ich mich in OPP ein wenig eingelesen habe, meine Homepage komplett neu zu coden.

Hättest du evtl. nen brauchbaren Link, wo darauf näher eingegangen wird, worauf man da achten Muss, am besten für XHTML 1.1?
 
Werbung:
Nö, nen Link habe ich nicht, es ist aber eigentlich auch ziemlich einfach; manchmal habe ich das Gefühl es ist so einfach, dass die meisten es deswegen nicht verstehen.

Man soll natürlich nicht nur mit divs arbeiten. "Layout mit div" ist genauso falsch, wie "Layout mit Tabellen".

Überleg einfach mal, was HTML ist.
HTML ist eine Strukturbeschreibungssprache. Welchen Sinn hat HTML?
Mit HTML bringt man eine logische Bedeutung in den Inhalt.
Jedes Tag in HTML hat eine semantische Bedeutung:
h1 - Überschrift 1. Ordnung
p - Textabsatz
address - Adresse
quote - Zitat
em - wichtig
strong - sehr wichtig
div - allgemeines Blockelement, zum Gruppieren mehrerer Elemente
usw.

Der Sinn von HTML ist nicht, das Auassehen, Design oder Layout zu definieren, damit hat HTML ncihts am Hut! Das macht alles CSS.

In HTML sollst Du nur Deinen Inhalt auszeichnen, im eine Bedeutung geben.

Code: 
<div id="Header"><strong>Herzlich willkommen!</strong></div>
In diesem Code sind gleich zwei semantische Fehler.
1. Ein div ist nur ein allgemeines Blockelement, das dem Inhalt keine besondere Bedeutung gibt. Auch wenn man ihm eine ID mit Namen "Header" verpasst, wird daraus noch keine Überschrift. Eine Überschrift wird es nur, wenn es mit <h1> (bis <h6>) ausgezeichnet wird. Alles andere ist schlichtweg keine Überschrift, egal wie groß, mit Abstand, fett oder sonstwas der Text am Bildschirm erscheint. HTML ist ja auch nicht für das Aussehen, das Erscheinen am Bildschirm zuständig.
2. Die vermeintliche Überschrift soll fett am Bildschirm dargestellt werden, dafür wird <strong> verwendet. Das ist natürlich Käse. Zum einen soll die Überschrift ja nicht *wichtig* sein, sie soll nur eine Überschrift sein. Dass sie am Bildschirm fett erscheinen soll, ist Aussehen und wird von CSS für <h1> festgelegt.
Zum anderen ist nicht vorgeschrieben, wie ein Browser ein Tag ohne Angabe von CSS-EIgenschaften darstellen soll. Es gibt zwar Empfehlungen, aber es ist nicht garantiert, dass jeder Browser <strong> fett darstellt.

Wenn Du Deinen Inhalt mit HTML auszeichnest, darfst Du nur im Kopf haben, welche Bedeutung der Inhalt hat. Man wählt HTML.-Tags nur wegen ihrer Bedeutung - niemals weil sie ein bestimmtes Aussehen erzeugen. HTML ist nicht für das Aussehen zuständig!

Das allgemeine Blockelement <div> wird hier nur zum Gruppieren mehrerer Elemente benötigt. In der Regel, weil man diese Elemente alle gleich formatieren will, z.B. eine Sidebar mit einem Menü und einem Werbetext. Die kann man mit div zusammenfassen und dann z.B. floaten. Hat man in einer Sidebar aber nur ein Menü (was übrigens als Liste ausgezeichnet wird), ist es Nonsense, diese Liste zusätzlich noch in ein div zu packen. Alles, was man dem div an Eigenschaften geben würde, kann man auch der Liste geben. Beides sind Block-Elemente.

Es gibt Sitationen, in denen es unvermeidlich ist, ein paar divs einzustreuen, ohne dass diese Inhalt enthalten oder rein vom HTML-Standpunkt her sinnvoll wären. Dann und nur dann unterstützen sie CSS, z.B. wenn man einen Container mit runden Ecken als GRafiken versehen will und der Rahmen gleichzeitig mitwachsen können soll.

Aber in der Regel benutzt man div nur zum Gruppieren mehrerer Elemente, ein "normales" Layout kann auch völlig ohne divs auskommen.

Wichtig ist, zu verstehen, dass HTML nur für die logische Bedeutung des Inhalts da ist und dass man beim Setzen von Tags nicht an das Aussehen denken soll. Dann ist alles ganz einfach.

Alles klar? :-)

Noch Fragen? Immer her damit...

Gruß,
-Efchen

P.S.: Und Tabellen sind dafür da, tabellarische Daten auszuzeichnen, z.B. eine Bundesliga-Tabelle. Tabellen, divs, <p>, <ul>, sie alle benutzt man nicht zu Layoutzwecken!

P.P.S.: Das gilt sowohl für HTML 3.2 wie auch für HTML 5 und XHTML, also für alle *HTML*
 
bzgl der sache von CGollhardt, was ist besser..wenn ich folgendes habe:

Link A
Link B
-> b1
-> b2
-> b3
Link C
Link D
-> d1
-> d2
Link E

-----------------------------
Ist es besser so zu machen:
-----------------------------

Link A
Link A?=Link B
Link A?=b1
Link A?=b2
Link A?=b3
Link A?=Link C
Link A?=Link D
Link A?=d1
Link A?=d2
Link A?=d3
Link A?=Link E

-----------------------------
Oder:
-----------------------------

Link A
Link B
Link B?=b1
Link B?=b2
Link B?=b3
Link C
Link D
Link D?=d1
Link D?=d2
Link D?=d3
Link E

-----------------------------

Gruß
Loon3y
 
Werbung:
Efchen schrieb:
Ich versteh das nicht, was soll das darstellen?
Zum Vergrößern anklicken....

schwer zu erklären....

endweder:

index.php das menu:
Code: 
<ul>
    <li> <a href="index.php> home <a> </li>
    <li> <a href="index.php?=eins> eins <a> </li>
    <li> <a href="index.php?=zwei> zwei <a> </li>
    <li> <a href="index.php?=drei> drei <a> </li>
</ul>
wenn ich dann in menu-punkt "eins" gehe habe ich nochmals eine auswahl (z.b. in der sidebar):

Code: 
<ul>
    <li> <a href="index.php?=eins_eins> eins eins <a> </li>
    <li> <a href="index.php?=eins_zwei> eins zwei <a> </li>
    <li> <a href="index.php?=eins_drei> eins drei <a> </li>
</ul>
--------------------------------------------------
oder besser so machen:
--------------------------------------------------

index.php das menu:
Code: 
<ul>
    <li> <a href="index.php> home <a> </li>
    <li> <a href="eins.php> eins <a> </li>
    <li> <a href="zwei.php> zwei <a> </li>
    <li> <a href="drei.php> drei <a> </li>
</ul>
und in eins.php das menu welches z.b. in der sidebar ist (s.o.):


Code: 
<ul>
    <li> <a href="eins.php?=eins> eins eins <a> </li>
    <li> <a href="eins.php?=zwei> eins zwei <a> </li>
    <li> <a href="eins.php?=drei> eins drei <a> </li>
</ul>

Hoffe es ist einigermaßen nachvollziehbar was ich mir gerade frage..

danke.

Gruß
Loon3y
 
Herzlichen Dank für deine lange Erläuterung, Efchen. Hatte das mit der Logik noch nicht so genau gewusst. Hatte es mal gehört vor paar Jahren, bin aber nicht genauer darauf eingegangen.

Efchen schrieb:
P.P.S.: Das gilt sowohl für HTML 3.2 wie auch für HTML 5 und XHTML, also für alle *HTML*
Zum Vergrößern anklicken....
Ist HTML 5 jetzt eigentlich schon erschienen?
 
Werbung:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben