Supportnet Computer
Planet of Tech

Supportnet / Forum / Webseiten/HTML

css frames; target vergeben?





Frage

hallo ich bin gerade daran CSS "frames" zu erstellen... hab bis her 3 teile: einen hauptteil (body), einen header (top) und einen nav auf der linken seite (nav)... nun habe ich folgendes problem: wenn ich in der nav einen link anklicke möchte ich dass das entsprechende html file im body teil erscheint.... wie mach ich das ? bei den altmodischen frames ging das ja so: name=ausgabe und beim link musste man dann nur noch target="ausgabe" eingeben (z.b. <a href="http://www.supportnet.de" target="ausgabe">supportnet.de</a ) vielen dank für eure hilfe! gruss brshna

Antwort 1 von Ralfman

Hi brshna,
um Dir effektiv weiterhelfen zu können währ's schon gut den Quellcode mal anschauen zu können, um die Fehler zu fenden.
Hast Du die bisher fertigen Seiten schon irgendwo hochgeladen?

Ralf

Antwort 2 von rabies_

CSS hat nichts mit Frames zu tun. Aber auch wirklich gar nichts.

Du solltest Dich, zeitgemäß, vom Konzept der Frames verabschieden, wenn Du schon Markup ((X)HTML) und Layout (CSS) trennst.

Grundlegend wird erst einmal jede Seite komplett neu geladen. Nicht nur Teilbereiche, wie es bei Frames so üblich ist/war.

Sprich: Du baust Dir erst einmal ein Grundgerüst Deiner Seite auf, wo die feststehende Navigation, der Header, Footer, Content (, uswusf) drin ist. Diese Datei nimmst Du als Vorlage für alle weiteren Dateien, in die Du dann nachfolgend den Content einpflegst.

--rabies.

Antwort 3 von rfb

Zitat:
wie mach ich das ?
mit HTML? Gar nicht!

Wenn du die Quelltexte für Header, Navigation und Content (die üblicheren Bezeichnungen - body hat schon eine andere Bedeutung) separat verwalten willst kannst du dies serverseitig per PHP machen (Stichworte include und readfile).

Einzelne Teile einer Seite nachladen kannst du allenfalls per AJAX, da dies aber auf JavaScript basiert ist es entsprechend absolut unzuverlässig und für wesentliches unbrauchbar.

Antwort 4 von brshna

also das was ich bis jetzt geschafft habe findet ihr hier: Link zu meinem Projekt

aber etwas ist noch komisch, beim IE sieht das katastrophal aus und beim firefox siehts so aus wie es sollte... also evtl. mit beiden browsern mal nachschauen...

gruss und danke für eure Hilfe!

eure brshna

Antwort 5 von rfb

der Quellcode steckt voller Fehler (W3C-Validator), außerdem schickst du den IE absichtlich in den Quirksmodus. Da kann es schon mal passieren, dass die Seite völlig anders aussieht als gewünscht.

Antwort 6 von brshna

hm.... was ist denn der dieser Quirksmodus genau? was bewirkt er? =s sorry wenn ich so viele fragen hab....

Antwort 7 von brshna

ok hab rausgefunden was der Quirksmodus ist und hab dies auch geändert auf http://www.6375.ch/test.html

Antwort 8 von Flupo

Auf den ersten Blick sind mir im Quelltext drei Blöcke mit CSS-Style-Definitionen aufgefallen, die zu einem zusammengefasst werden sollten.
Darüberhinaus fehlt beim zweiten (beginnt nach dem Textfiller-Script) die Typangabe und der dritte ist im <body> gelandet, wo er nichts zu suchen hat.
Wenn die Designphase halbwegs abgeschlossen ist, empfehle ich auch die Auslagerung der Styles in eine separate Datei. Das macht den Rest übersichtlicher.

Body als id zu verwenden, halte ich auch für etwas ungünstig. Wenn die Formatierung für den ganzen Body gelten soll, dann ergänze oben die entsprechenden Formatierungen.
<div id="body">...</div>
wird dann überflüssig.

Auch nicht sehr schick, sind die Positionierungen per <br />. Soetwas macht man besser per margin oder padding. Hierbei ist nur wieder blöd, dass der IE in dem Bereich ne Macke hat und das falsch darstellt.

Auch innerhalb der Styles sind einige Böcke. Zum Beispiel wird #framecontentTop zweimal und z.T. unterschiedlich definiert. #framecontentLeft wird definiert, aber nicht verwendet...

Du wirst wohl noch ein Stündchen investieren müssen. ;-)

Gruß Flupo

Antwort 9 von brshna

also hab jetzt die fehler die W3 - Validator
vorhin entdeckt hat behoben... hab auch alle tipps von Flupo bearbeitet und die fehler behoben..

vielen dank bis hierhin...

nun ist aber immer noch das problem mit der ausgabe... kann ich dafür ein div container definieren der dann die html files ausgibt, oder ist das keine gute idee?

gruss brshna

Antwort 10 von rfb

Zitat:
oder ist das keine gute idee
das ist einfach nicht möglich! Das hatten wir aber jetzt nun wirklich oft genug geschrieben. Und um es zusammenzufassen: GEHT NICHT!

Antwort 11 von rfb

Übrigens: mit den Layouttabellen und veralteten HTML-Layout-Attributen bist du vom Ziel eines CSS-basierten Layouts noch sehr sehr weit entfernt.

Antwort 12 von brshna

ich bin ja noch am lernen... und man muss nicht überall perfekt sein...

Antwort 13 von Flupo

Es wird doch. *applaus*
Ein bisschen Ordnung im Quelltext und schon kommt auch der IE damit klar. ;-)

Den Header würde ich nochmal neu machen (und im Quelltext auch nach oben ziehen). Im Moment verschwinden die Links oben rechts nämlich wenn man eine Auflösung kleiner 1024er Breite verwendet.

Die Klasse buttoncontainer ist überflüssig. Du musst nur die Breitenangabe zu den buttons verschieben (habs ausprobiert).

<span class="Stil1"></span> tut nix, kann also weg. Ebenso der zugehörige CSS-Abschnitt.

Wie man den gesamten CSS-Abschnitt in eine separate Datei auslagert, kannst du hier nachlesen.

Gruß Flupo

Antwort 14 von rfb

<html> fehlt!

dafür ist so einiges völlig überflüssig:

<td width="276" align="center" valign="middle"><div align="center" class="Stil1">
<p>Das Internet Portal f&uuml;r die Postleitzahl 6375 </p>
</div> </td>

sowohl div als auch p werden hier nicht gebraucht, wenn du unbedingt eine Layouttabelle nutzen willst.

nur mal so als Hinweis:
<div class="buttonscontainer">
<div class="buttons">
<p><a href="home.html" target="ausgabe">Home</a>
<a href="angebote.html" target="ausgabe">Unsere Angebote</a>
<a href="referenzen.html" target="ausgabe">Referenzen</a>
<a href="anmeldung.html" target="ausgabe">Anmeldung</a>
<a href="login.html" target="ausgabe">Mitglieder Login</a>
<a href="kontakt.html" target="ausgabe">Kontakt</a>
<a href="impressum.html" target="ausgabe">Impressum</a></p>

</div>
</div>

mache doch besser daraus das was es ist: eine Liste von Links
<ul id="navigation">
<li><a ...>Linktext</a></li>
...
</ul>

und schmeiss das target-Attribut endlich raus!

Antwort 15 von brshna

also... hab das ganze noch einmal überarbeitet... das mit der link liste hab ich soweit.... aber wie benamse ich jetzt die Styles um? die heissen ja jetzt
..buttonscontainer {width: 150px;}

.buttons a {
background-color: #A09CD0;
padding: 2px;
padding-left: 3px;
display: block;
border-left: 10px solid #655FB2;
font: 13px Tahoma, sans-serif;
font-weight: bold;
text-decoration: none;
text-align: left;
margin-top: 1px;
margin-left: 15px;}


.buttons a:hover {border-left: 10px solid #F5F424;
text-decoration: none;
color: #0033CC;}


kann einfach .buttonscontainer in .navigation umschreiben?

Antwort 16 von rfb

wenn die Elemente a im Element ul mit der Id navigation liegen ist die korrekte Syntax.

#navigation a {... }

oder
ul#navigation a {... }

oder
ul#navigation li a {... }

oder
#navigation li a {... }


(die unterscheiden sich noch etwas hinsichtlich ihrer Spezifität, was bei dir aber keine Rolle spielen sollte)

.navigation 
würdest du benutzen, wenn du
class="navigation"
im HTML hättest. Da es aber nur eine Navigation gibt ist eine
id="navigation"
und damit die obere Syntax sinnvoller.

Antwort 17 von Flupo

Ich zitiere mich mal:
Zitat:
Die Klasse buttoncontainer ist überflüssig. Du musst nur die Breitenangabe zu den buttons verschieben (habs ausprobiert).


Damit meine ich, dass die eine Zeile bei .buttoncontainer (width: 150px;) drei Zeilen weiter runter verschoben wird. .buttoncontainer kann dann ganz raus.

Da du unten jetzt dem Navi-div die id navigation verpasst hast, fehlt jetzt dafür ein entsprechender CSS-Abschnitt. Mache aus .buttons .navigation.

Gruß Flupo

Antwort 18 von brshna

habs jetzt anders gelöst... habs einfach so gemacht:


<ul id="navigation" class="buttons" style="width:150px;">
	<li><a href="index.html">Home</a></li>
	<li><a href="angebote.html">Unsere Angebote</a></p></li>
	<li><a href="referenzen.html">Referenzen</a></p></li>
	<li><a href="anmeldung.html">Anmeldung</a></p></li>
	<li><a href="login.html">Mitglieder Login</a></p></li>
	<li><a href="kontakt.html">Kontakt</a></p></li>
	<li><a href="impressum.html">Impressum</a></li>
</ul>


klappt von den farben her auch ganz gut.... nur diese hässlichen punkte voran... kann man die noch irgendwie weglassen?

gruss brshna

Antwort 19 von Flupo

Zitat:
.navigation würdest du benutzen, wenn du class="navigation" im HTML hättest. Da es aber nur eine Navigation gibt ist eine id="navigation" und damit die obere Syntax sinnvoller.


Du hast natürlich Recht. *schäm*
Ich hau die Klassen und ID's immer gern durcheinander.

Gruß Flupo

Antwort 20 von rabies

Zitat:
klappt von den farben her auch ganz gut.... nur diese hässlichen punkte voran... kann man die noch irgendwie weglassen?


ul#navigation { list-style-type: none; }


--rabies.

Antwort 21 von brshna

super!!! jetzt sieht alles so aus wie es sollte!!!! vielen vielen dank euch allen!!!!

*knuddl*


gruss brshna

Antwort 22 von rfb

das </p> in
<li><a href="angebote.html">Unsere Angebote</a></p></li>
ist hoffentlich nur ein Flüchtigkeitsfehler!?

Ich möchte kostenlos eine Frage an die Mitglieder stellen:


Ähnliche Themen:


Suche in allen vorhandenen Beiträgen: