Css - Links?

[Julia]

Ich bin ein kompletter Neuling in Sachen CSS und hab heute voller Euphorie ein Tutorial gemacht und mir so eine Test-Webseite zum ausprobieren erstellt.

Alles schön und gut, die Frames sind an ihrer Position, links (von der menüleiste) sind auch da, aber jetzt steh ich vor folgendem Problem:

Ich habe keine iframes definiert und weiß nicht wie ich das definieren kann, dass wenn ich zB Julia anklick, die entsprechende Seite in dem ja nicht definierten "content" erscheint.
Bringt mich bitte nicht gleich um, ich hab natürlich schon in mehreren Foren gesucht, in denen die Leute meinten, css macht nur die anordnung, da gibt es keinen entsprechenden befehl.

Nur wie mach ich das jetzt am Besten?
Wenn ich jetzt in der html datei erst recht wieder i frames definier kann ich mir die CSS datei ganz sparen. Und eigentlich bin ich von den erweiterten Anordnungsmöglichkeiten gegenüber html Seiten sehr begeistert.
Da muss es doch eine Möglichkeit geben, habe schon einige Seiten gesehen, werde aber aus den Quellcode nicht schlau. (da waren es immer links zu php seiten)

Hier mal die vorläufige Seite:
http://juli454.ju.funpic.de/down.htm

Wie verbinde ich html und css? so, dass css die anordnung macht ich aber trotzdem links machen kann die sich im content öffnen. Oder geht das gar nicht?

Bin für jeden Tipp dankbar!

Lg, Julia

[Julia]

4 Minuten nach meinem Posting glaub ich endlich verstanden zu haben was das Problem ist.

Wenn ich das ganze mit CSS machen will, läd immer die gesamte Seite neu, es geht also gar nicht, dass nur das iframe neu läd.

Wärt ihr so nett zu korrigieren ob das was ich jetzt vor hab der richtige Ansatz ist?

zunächst einmal die css datei aus der jetzigen html datei auslagern.

Dann normal die unterseiten mit dem jeweiligen inhalt erstellen (das  müsste ja eigentlich auch in frontpage oÄ gehen) und in jede Seite dann den Verweis zur stylesheetdatei.
allerdings, müsste ich dann nicht auch in jede einzelne Seite alle <div> eingeben?

<div id="container">
<div id="header" title="Svanina vom Vindstadir">

	<h1>Svanina vom Vindstadir</h1>  

</div>  
<div id="mainnav">  
	<ul>  
		<li><a href="#">Home</a></li>  
		<li><a href="#">Julia</a></li>  
		<li><a href="#">Svanina</a></li>  

		<li><a href="#">Fotos</a></li>  

<li><a href="#">Links</a></li>

		<li><a href="#">Gästebuch</a></li>  
	</ul>  
</div>  
<div id="menu">  
	<h3>News</h3>  
	<ul>  
		<li><a href="#">Homepage eröffnet</a></li>  

	</ul>  
	<h3>Neuestes Foto</h3>  
	<ul>  
		  
	</ul>  

</div>
<div id="contents">

		</p>  
		  

	</div>  
</div>  

<div id="footer">  
	Copyright &copy; Julia Kaufmann 2009  
</div>  

</div>

[Der Martin]

Hallo Julia,

4 Minuten nach meinem Posting glaub ich endlich verstanden zu haben was das Problem ist.

doch so schnell? ;-)

Wenn ich das ganze mit CSS machen will, läd immer die gesamte Seite neu

Ja, richtig erkannt. Und versuch das als Vorteil zu sehen: So ist es nämlich ausgeschlossen, dass Besucher, die über eine Suchmaschine auf einer konkreten Seite landen, nur Teile davon sehen - z.B. nur den Inhalt ohne Navigation.

Wenn du einen der wenigen Vorteile von Frames beibehalten willst, nämlich dass man gleichbleibende Inhalte (Header, Footer, Navi, etc.) nur an einer Stelle pflegen muss, dürften dich die Tipps zum Auslagern von Teilen des Quellcodes interessieren.

es geht also gar nicht, dass nur das iframe neu läd.

Ich dachte, du hättest dich von den Frames getrennt ...

allerdings, müsste ich dann nicht auch in jede einzelne Seite alle <div> eingeben?

Wenn's denn unbedingt div-Elemente sein müssen - meistens werden viel mehr davon benutzt als nötig. Nochmal: Jede Seite ist für sich genommen komplett und enthält das ganze Seitengerüst.

  <h1>Svanina vom Vindstadir</h1>  

Das liest sich irgendwie isländisch oder so ...

<div id="mainnav">
    <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">Julia</a></li>
       <li><a href="#">Svanina</a></li>
       <li><a href="#">Fotos</a></li>
       <li><a href="#">Links</a></li>
       <li><a href="#">Gästebuch</a></li>
    </ul>
</div>

Siehste, sowas meinte ich: Dieses div ist komplett überflüssig, da bereits das ul-Element einen eigenen Block bildet, den du nach Belieben formatieren kannst. Ein div ergibt erst dann einen Sinn, wenn es mehrere andere Elemente zu einer Gruppe zusammenfasst. Dafür ist es eigentlich auch gedacht.

<div id="menu">
<h3>News</h3>
<ul>
<li><a href="#">Homepage eröffnet</a></li>

  </ul>  
  <h3>Neuestes Foto</h3>  
  <ul>  
    
  </ul>  

</div>

So wie hier. Da gruppiert das div-Element die Listen (ul) und die Überschriften. Ich gehe davon aus, dass die zweite Liste in Wirklichkeit nicht leer ist.

<div id="contents">

  	</p>  
  	  

  </div>  

Und das ist ein Unfall, oder? Innerhalb eines div-Elements beendest du einen Absatz, den du nie begonnen hast.

So long,
 Martin

[Julia]

Hallo Martin,
tausend Dank für deine Hilfe, ich glaube das System dahinter verstanden zu haben, war nur erst sehr ungewohnt, dass wirklich alles neu laden muss.
Momentan sieht meine testseite so aus:
http://juli454.ju.funpic.de/test.htm

das hier ist die stylesheetdatei:
http://juli454.ju.funpic.de/stylesheet.css

Bezüglich den unnötigen <div> hab ichs nur geschafft das allerletzte (das ich nie aufgemacht hab) zu entfernen, die anderen brauch ich einfach weil sich sonst das design verzieht.
ich schaffs allerdings nicht den code weiter als so runterzuschrauben:

``<html>

<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>Julia & Svanina vom Vindstadir</title>
<link rel="stylesheet" type="text/css" media="screen, projection"
href="stylesheet.css">
</head>

<body>

<div id="container">
<div id="header" title="Svanina vom Vindstadir">
<font color="#FFDFFF" size="4" face="Sylfaen"><em>Svanina vom Vindstadir</em></font>

	<h1>Svanina vom Vindstadir</h1>  
</div>  

<div id="mainnav">
<ul>
<li><a href="test.htm">Home</a></li>
<li><a href="julia.htm">Julia</a></li>
<li><a href="svanina.htm">Svanina</a></li>
                  <li><a href="#">Fotos</a></li>
                  <li><a href="#">Links</a></li>
                  <li><a href="#">Gästebuch</a></li>
</ul>
</div>

<div id="menu">
<h3>News</h3>
<ul>
<li><a href="#">Homepage eröffnet</a></li>
<p>&nbsp;</p>

	</ul>  

	<h3>Neuestes Foto</h3>  

<ul>
</ul>
  </div>

<div id="contents">
<div class="blogentry">

		<h2><a href="#" title="Permanent link to this item">Homepage eröffnet</a></h2>  

		<h3>Montag, 18 Mai 2009</h3>  

		<p> Willkommen auf meiner Homepage...text text text text text text text  

text text</p>

</body>
</html>
``

Das mit dem auslagern hab ich nicht so ganz verstanden. Wäre es denn möglich diesesn gesamten Quellcode (bis auf natürlich den Text Willkommen auf meiner Homepage usw) in eine eigene Datei zu geben und dann auf der jeweiligen Seite nur einen Verweis zu dieser in den Quelltext zu schreiben?

Aja, geht bei der ganzen Homepage auch um mein Islandpferd.

Lg

[Der Martin]

Hallo,

tausend Dank für deine Hilfe, ich glaube das System dahinter verstanden zu haben, war nur erst sehr ungewohnt, dass wirklich alles neu laden muss.

naja, wenn man mit Frames angefangen und sich daran gewöhnt hat ...

http://juli454.ju.funpic.de/test.htm

Jo, das ist doch schon mal ein Anfang. Ausbaufähig, aber nicht übel. Das Bild im Header würde ich übrigens rechtsbündig ausrichten, dann sieht man in jedem Fall das Pferd am rechten Rand. Bei mir verschwindet das nämlich jenseits des rechten Randes, und was man dann noch vom Bild sieht, ist, ähm, rätselhaft.
Also anstatt
   background-position: 0 0;
lieber
   background-position: top right;

Der HTML-Quellcode ist weitgehend "sauber", d.h. enthält wenig Unnötiges. Nur innerhalb des div#header verwendest du noch ein font-Element, das du konsequenterweise auch noch durch CSS ersetzen könntest.
Was ich komplett vermisse, ist eine DOCTYPE-Angabe. Wenn die fehlt, schalten viele Browser in den sogenannten Quirks-Mode, in dem sie versuchen zu erraten, was der Autor gemeint haben könnte - und da raten sie nicht immer richtig. Beim IE kommt dazu, dass er im Quirks-Mode CSS-Breiten- und Höhenangaben für Blockelemente falsch berechnet. Es ist also ratsam, dass du eine DOCTYPE-Angabe in der ersten Zeile ergänzt. HTML 4.01 Transitional dürfte allemal richtig sein; wenn du das font-Element eliminiert hast, könnte es sogar HTML 4.01 Strict sein.

http://juli454.ju.funpic.de/stylesheet.css

Im CSS referenzierst du eine Schriftart namens "hevetica", das ist sicher ein Schreibfehler. Allgemein zu deinem Quelltext: Die Formatierung sieht ein bisschen wie Kraut und Rüben aus. Mal eingerückt, mal nicht, mal um zwei Tabs, mal um drei ... Dem Browser ist das freilich egal, aber ich denke, du tust dir selbst einen Gefallen, wenn du den Quellcode sauber formatierst. Die genaue Art der Formatierung ist gar nicht so entscheidend, Hauptsache es ist übersichtlich und konsequent

Bezüglich den unnötigen <div> hab ichs nur geschafft das allerletzte (das ich nie aufgemacht hab) zu entfernen, die anderen brauch ich einfach weil sich sonst das design verzieht.

Zumindest das div#mainnav könnte man einsparen, meine ich, und die Ränder (margins), die es innehat, noch dem ul-Element darin zuschlagen. Die id schließlich auch dem ul-Element geben, und ... naja, ich hab's nicht probiert, aber meine Überzeugung sagt mir, dass das gehen muss.

<font color="#FFDFFF" size="4" face="Sylfaen"><em>Svanina vom Vindstadir</em></font>

Was meinst du, wie viele Besucher diese ausgefallene Schrift haben? Mein Windows improvisiert sie mit Verdana kursiv, aber die Originalschrift sieht bestimmt anders aus.

  	<li><a href="julia.htm">Julia</a></li>  

Und ich dachte schon, hier gibt's ein Foto von dir. War wieder nichts ... ;-)

<div id="contents">
<div class="blogentry">

Hoppla! Das sind nochmal zwei divs, die nirgends geschlossen werden!

Das mit dem auslagern hab ich nicht so ganz verstanden. Wäre es denn möglich diesesn gesamten Quellcode (bis auf natürlich den Text Willkommen auf meiner Homepage usw) in eine eigene Datei zu geben und dann auf der jeweiligen Seite nur einen Verweis zu dieser in den Quelltext zu schreiben?

Im Prinzip ja, und ich gebe zu, dass die FAQ-Links, die ich dir gegeben habe, nicht wirklich erschöpfend Auskunft geben - sie sind als Startpunkt für eigene Recherchen gedacht.
Der Grundgedanke ist, dass man dem Webserver die Aufgabe überlässt, die Seite aus verschiedenen Bausteinen zusammenzubauen. Diese Bausteine legt man dann als einzelne Dateien auf dem Server ab (und muss sie damit auch nur einmal pflegen), und jedesmal, wenn ein Browser die Seite anfordert, stückelt der Server die Bausteine zusammen und liefert sie aus, als sei das alles ein Dokument aus einem Guss. Die häufigsten Techniken, die dafür verwendet werden, sind SSI (vorwiegend die Anweisung <!--#include virtual="..." -->) oder PHP, eine komplette Programmiersprache, die vom Webserver interpretiert wird und von der man für diesen Zweck auch erstmal nur die include-Anweisung verwenden wird.
In beiden Fällen bedeutet es, dass du dich noch mit etwas Neuem beschäftigen musst, auch wenn der Einstieg nicht schwierig ist.

Aja, geht bei der ganzen Homepage auch um mein Islandpferd.

Daher also auch dieser nordische Name. Ich war noch nie in Island, habe aber schon viel darüber gelesen, und das Land fasziniert mich - sowohl geographisch-geologisch, als auch von der Lebenseinstellung der Bewohner. Naja, irgendwann komme ich sicher mal hin. :-)

Ciao,
 Martin

[suit]

Daher also auch dieser nordische Name. Ich war noch nie in Island, habe aber schon viel darüber gelesen, und das Land fasziniert mich - sowohl geographisch-geologisch, als auch von der Lebenseinstellung der Bewohner. Naja, irgendwann komme ich sicher mal hin. :-)

Dann solltest du auf jeden Fall das gute Essen probieren!

[Der Martin]

Hallo,

»» Ich war noch nie in Island, habe aber schon viel darüber gelesen, und das Land fasziniert mich - sowohl geographisch-geologisch, als auch von der Lebenseinstellung der Bewohner. Naja, irgendwann komme ich sicher mal hin. :-)
Dann solltest du auf jeden Fall das gute Essen probieren!

ich weiß - der kulinarische Bereich ist eines der wenigen Dinge, die mich von einer Islandreise abhalten könnten. ;-)
Aber heutzutage kann man ja auch dort vielfach "europäische" Kost bekommen, wenn man sich als Tourist outet - was man vermutlich sowieso tut, denn wer spricht schon Isländisch?

Ciao,
 Martin

[Julia]

Jo, das ist doch schon mal ein Anfang. Ausbaufähig, aber nicht übel. Das Bild im Header würde ich übrigens rechtsbündig ausrichten, dann sieht man in jedem Fall das Pferd am rechten Rand. Bei mir verschwindet das nämlich jenseits des rechten Randes, und was man dann noch vom Bild sieht, ist, ähm, rätselhaft.
Also anstatt
   background-position: 0 0;
lieber
   background-position: top right;

Oh cool danke - so einfach geht das, ich habe heute bestimmt eine Stunde im Internet nach der Lösung gesucht :-) aber, dass es so einfach ist hätt ich auch nicht gedacht

Der HTML-Quellcode ist weitgehend "sauber", d.h. enthält wenig Unnötiges. Nur innerhalb des div#header verwendest du noch ein font-Element, das du konsequenterweise auch noch durch CSS ersetzen könntest.

Aja, das "Svanina vom Vindstadir" meinst du...das werd ich ohnehin rausnehmen und lieber in Photoshop auf das Headerbild selbst schreiben.

Was ich komplett vermisse, ist eine DOCTYPE-Angabe. Wenn die fehlt, schalten viele Browser in den sogenannten Quirks-Mode, in dem sie versuchen zu erraten, was der Autor gemeint haben könnte - und da raten sie nicht immer richtig. Beim IE kommt dazu, dass er im Quirks-Mode CSS-Breiten- und Höhenangaben für Blockelemente falsch berechnet. Es ist also ratsam, dass du eine DOCTYPE-Angabe in der ersten Zeile ergänzt. HTML 4.01 Transitional dürfte allemal richtig sein; wenn du das font-Element eliminiert hast, könnte es sogar HTML 4.01 Strict sein.

Faszinierend was man so erfährt, hab davon in meinem leben noch nie gehört, aber werds natürlich gleich einfügen!

Im CSS referenzierst du eine Schriftart namens "hevetica", das ist sicher ein Schreibfehler. Allgemein zu deinem Quelltext: Die Formatierung sieht ein bisschen wie Kraut und Rüben aus. Mal eingerückt, mal nicht, mal um zwei Tabs, mal um drei ... Dem Browser ist das freilich egal, aber ich denke, du tust dir selbst einen Gefallen, wenn du den Quellcode sauber formatierst. Die genaue Art der Formatierung ist gar nicht so entscheidend, Hauptsache es ist übersichtlich und konsequent

Ja da ists noch ein wenig unordentlich :-) hab halt immer etwas dazukopiert und geändert usw, aber das werd ich auf jedenfall noch ordnen, kenn mich nämlich selber schon fast nimmer aus.

Zumindest das div#mainnav könnte man einsparen, meine ich, und die Ränder (margins), die es innehat, noch dem ul-Element darin zuschlagen. Die id schließlich auch dem ul-Element geben, und ... naja, ich hab's nicht probiert, aber meine Überzeugung sagt mir, dass das gehen muss.

Hab ich probiert, wenn ich das weglass rutscht das mainnav nach oben über den header.

»» »» <font color="#FFDFFF" size="4" face="Sylfaen"><em>Svanina vom Vindstadir</em></font>
wieder etwas an das ich nie gedacht hätte, aber das kommt sowieso weg und wird einfach via photoshop auf den header geschrieben.

»» <li><a href="julia.htm">Julia</a></li>

Und ich dachte schon, hier gibt's ein Foto von dir. War wieder nichts ... ;-)

das kommt bestimmt noch ;-)

»» <div id="contents">
»» <div class="blogentry">

Hoppla! Das sind nochmal zwei divs, die nirgends geschlossen werden!

mach ichs dem computer da schwer zum rechnen? weil lustigerweise funktionieren sie obwohl sie nicht geschlossen sind. blogentry hab ich ganz rausgenommen, contents muss ich drinn lassen weil sonst mein content fenster weg ist

Im Prinzip ja, und ich gebe zu, dass die FAQ-Links, die ich dir gegeben habe, nicht wirklich erschöpfend Auskunft geben - sie sind als Startpunkt für eigene Recherchen gedacht.
Der Grundgedanke ist, dass man dem Webserver die Aufgabe überlässt, die Seite aus verschiedenen Bausteinen zusammenzubauen. Diese Bausteine legt man dann als einzelne Dateien auf dem Server ab (und muss sie damit auch nur einmal pflegen), und jedesmal, wenn ein Browser die Seite anfordert, stückelt der Server die Bausteine zusammen und liefert sie aus, als sei das alles ein Dokument aus einem Guss. Die häufigsten Techniken, die dafür verwendet werden, sind SSI (vorwiegend die Anweisung <!--#include virtual="..." -->) oder PHP, eine komplette Programmiersprache, die vom Webserver interpretiert wird und von der man für diesen Zweck auch erstmal nur die include-Anweisung verwenden wird.
In beiden Fällen bedeutet es, dass du dich noch mit etwas Neuem beschäftigen musst, auch wenn der Einstieg nicht schwierig ist.

Na mal schaun, wenn der Rest steht, werd ich mich ein bisschen einlesen. Danke für den Tipp jedenfalls.

»» Aja, geht bei der ganzen Homepage auch um mein Islandpferd.

Daher also auch dieser nordische Name. Ich war noch nie in Island, habe aber schon viel darüber gelesen, und das Land fasziniert mich - sowohl geographisch-geologisch, als auch von der Lebenseinstellung der Bewohner. Naja, irgendwann komme ich sicher mal hin. :-)

Ja, es muss wirklich sehr toll dort sein....war leider noch nie unten...

[Der Martin]

Hi Julia,

»» Also anstatt
»»    background-position: 0 0;
»» lieber
»»    background-position: top right;
Oh cool danke - so einfach geht das

ja, CSS ist nicht immer einfach - aber manches ist so einfach, dass man schon nicht mehr darauf kommt.

»» Der HTML-Quellcode ist weitgehend "sauber", d.h. enthält wenig Unnötiges. Nur innerhalb des div#header verwendest du noch ein font-Element, das du konsequenterweise auch noch durch CSS ersetzen könntest.
Aja, das "Svanina vom Vindstadir" meinst du...das werd ich ohnehin rausnehmen und lieber in Photoshop auf das Headerbild selbst schreiben.

Das wäre in diesem Fall wohl schöner; dann könntest du auch die Schrift nehmen, die du eigentlich dafür gedacht hattest. Für Suchmaschinen und andere User, die keine Bilder anzeigen, steht's ja sowieso als h1-Element nochmal drin. Übrigens ... diesen zweiten Schriftzug mit font-size: 1px unkenntlich machen, ist nicht schön. Besser ist es dann doch, das Element mit display:none; unsichtbar zu machen. Sonst sieht man den Text nämlich noch als rosafarbene Krümelspur.

»» »» <div id="contents">
»» »» <div class="blogentry">
»»
»» Hoppla! Das sind nochmal zwei divs, die nirgends geschlossen werden!
mach ichs dem computer da schwer zum rechnen? weil lustigerweise funktionieren sie obwohl sie nicht geschlossen sind.

Das meinte ich unter anderem mit dem "Raten" der Browser. Er "weiß" wegen der Syntaxregeln von HTML, dass verschachtelte Elemente auch in der richtigen Reihenfolge geschlossen werden müssen, das innerste zuerst. Bis zum </body> ist ja die Welt noch in Ordnung, aber an der Stelle kommt die Entscheidung: body ist zu Ende, da sind aber noch zwei offene divs, also werden die an der Stelle automnatisch auch geschlossen.

Ich weiß ja nicht, wie weit dich formale Korrektheit des Codes interessiert, aber HTML und CSS basieren auf einem (mehr oder weniger) klaren Regelwerk. Das W3C (WWW Consortium) bietet einen Online-Dienst an, der HTML-Dokumente und/oder ihre Stylesheets auf Übereinstimmung mit den Regeln prüft:
 HTML Validator
 CSS Validator
Die werden in deinem Code vermutlich noch einige Fehler finden - keine Panik. Oft sind es Folgefehler oder Kleinigkeiten, die sich leicht und schnell ausbügeln lassen. Die zwei nicht geschlossenen div-Elemente sind jedenfalls Formfehler, die der Validator reklamieren wird.

»» Ich war noch nie in Island, habe aber schon viel darüber gelesen, und das Land fasziniert mich - sowohl geographisch-geologisch, als auch von der Lebenseinstellung der Bewohner. Naja, irgendwann komme ich sicher mal hin. :-)
Ja, es muss wirklich sehr toll dort sein....war leider noch nie unten...

"Unten"? Die meisten Menschen assoziieren Norden bzw. nördliche Gegenden mit "oben".

Ciao,
 Martin