Text in div
- Ersteller Spartist
- Erstellt am
- Status
dann hier mal der quelltext von der seite:
und hier style.css (ich weiß, das ist noch gaaaaanz viel falsch, aber es müsste sich immerhin die navigation nach links verschieben..):
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>index</title>
<link rel="stylesheet" href="sgv/style.css" type="text/css">
</head>
<body>
<div id="container">
<div id="header"><h1><img src="images/header.jpg" alt="Willkommen beim SGV Voßwinkel" /></h1></div>
<div id="mainnav"><ul id="Menu">
<iframe src="navi.html"
frameborder="0" scrolling="no" name="iframe"></iframe>
</ul></div>
<div id="contents"><h2>Herzlich Willkommen beim SGV Voßwinkel e.V</h2>
<p>Sie lieben die Natur? Sie wandern gern? Sie möchten das gern mit Gleichgesinnten tun?
Sie möchten erleben, wie entspannend eine geführte Gruppenwanderung nach einer anstrengenden Arbeitswoche sein kann?
Sie möchten am Wochenende etwas unternehmen, bei dem die ganze Familie mitmachen kann? </p>
<p>Dann schauen Sie doch mal beim SGV Voßwinkel vorbei!</p>
<p>Spaß an Bewegung in der Natur – das ist im weitesten Sinn das, was uns verbindet. Wie das im Einzelfall aussieht, können Sie unserem Jahresprogramm entnehmen oder schauen Sie in die Galerie und in den Pressespiegel hinein. Sie finden dort geführte Touren für junge Familien oder einfache Nachmittagswanderungen bis hin zu echten Leistungsstrecken. Es werden aber auch Radtouren unternommen, kulturelle Aktionen … und vieles mehr. Und natürlich feiern wir auch zusammen.<br>
Hier spiegeln sich ganz natürlich die unterschiedlichen Interessen der Mitglieder, ein Programm für Jung und Alt, für die ganze Familie.</p>
<p>Wenn Sie sich angesprochen fühlen, schnuppern Sie doch mal bei uns herein. Gäste sind uns stets herzlich willkommen!</p>
<p>Kontaktmöglichkeiten finden Sie unter <a href="vorstand.html">"Vorstand"</a></p></div>
<div id="news"><p><strong>Neuigkeiten</strong></p><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div>
</div> <!-- /container -->
</body>
</html>
HTML:
<style type="text/css">
#mainnav {float: left}
#news {float: right}
</style>Hallo Spartist,
lad die Site mal bei irgendeinem Freehoster hoch, dann lässt sich das einfacher anschauen...
Das dürfte aber wohl sicher zu Problemen führen:
Frames und iFrames solltest Du nur verwenden, wenn Du Dir 100 Prozent sicher bist, was Du tust...
Grüße
Bernhard
lad die Site mal bei irgendeinem Freehoster hoch, dann lässt sich das einfacher anschauen...
Das dürfte aber wohl sicher zu Problemen führen:
Code:
[COLOR=#000080]<ul id=[COLOR=#0000FF]"Menu"[/COLOR]>[/COLOR] [COLOR=#000080]<iframe src=[COLOR=#0000FF]"navi.html"[/COLOR][/COLOR]Frames und iFrames solltest Du nur verwenden, wenn Du Dir 100 Prozent sicher bist, was Du tust...
Grüße
Bernhard
wiso bei einem freehoster wenn sie schon auf meinem webspace ist? 
http://www.sgv-vosswinkel.de/sgv/index.html
gibt es eine möglichkeit, das menü ohne iframe auf jeder seite gleich zu haben, ohne dass man bei jeder änderung immer alle seiten ändern muss?
edit: auch ohne iframe das gleiche problem :(
http://www.sgv-vosswinkel.de/sgv/index.html
gibt es eine möglichkeit, das menü ohne iframe auf jeder seite gleich zu haben, ohne dass man bei jeder änderung immer alle seiten ändern muss?
edit: auch ohne iframe das gleiche problem :(
iplay
Neues Mitglied
Ja. Das kannst du mit php lösen. Dazu musst du die html seiten zu .php
umbennen (dein Webspace muss auch php unterstützen). Dann kannst du
deine navi mit include einbinden. Wenn du dann an der (ich nehme an)
navi.html (kann .html bleiben, wenn da kein php drin ist) was änderst, wird
es auf allen seiten übernommen.
Das sieht dann so aus:
<?php
include "navi.html";
?>
Meinst du noch die externe css-datei? Hab versucht mal deinen Pfad zu
folgen. Da kam bei mir Not Found. Ich würde mal behaupten, das der Pfad
falsch ist. Über prüfe das noch mal.
Liebe Grüße
iplay
ich habe mir jetzt überlegt, die seite mit strato live pages zu machen.
das geht jetzt schön schnell. da ich aber doch gerne irgendwann die seite selber machen möchte, da das design ja nun so vorgefertigt ist und es nur bedingt anpassbar ist, werde ich mich weiter mit html und css beschäftigen. wenn ich dann genügend kentnisse habe, werde ich die seite wieder so machen
das geht jetzt schön schnell. da ich aber doch gerne irgendwann die seite selber machen möchte, da das design ja nun so vorgefertigt ist und es nur bedingt anpassbar ist, werde ich mich weiter mit html und css beschäftigen. wenn ich dann genügend kentnisse habe, werde ich die seite wieder so machen
E
Efchen
Guest
Willst Du eigentlich eine anständige Site, die Deine Besucher toll finden und uneingeschränkt und gut nutzen können? Oder willst Du eine Krücke erstellen, wo die Hälfte derer, die sich dahin verirren, sie schlecht finden, nie wieder kommen und rumerzählen, was das für eine schlechte Site ist?ich habe mir jetzt überlegt, die seite mit strato live pages zu machen.
das geht jetzt schön schnell. da ich aber doch gerne irgendwann die seite selber machen möchte, da das design ja nun so vorgefertigt ist und es nur bedingt anpassbar ist, werde ich mich weiter mit html und css beschäftigen. wenn ich dann genügend kentnisse habe, werde ich die seite wieder so machen
Letztendlich ist es Deine Entscheidung, aber ich kann das nicht nachvollziehen, warum alles "schnell schnell" gehen muss und man weder Rücksicht auf die Besucher nimmt, noch einen gewissen Ehrgeiz aufbringt, sich angemessen zu präsentieren. Eine Website, die schnell schnell mit nem Baukasten aufgebaut wird, ist ja auch eine Aussage/Bewertung über Dich. Ist die Website Mist, fällt das auch auf den Erbauer zurück. Da ist oft genug keine Website besser als eine unliebsam hingeklatschte Baukastensite.
Wenn ich ein Zimmer tapezieren will, dann klatsche ich auch nicht einfach die Tapeten laienhaft an die Wände, denn jeder, der mich besuchen kommt, kommt womöglich nicht wieder und denkt sich, was für ein komischer, unordentlicher Typ ich wäre. Ein gewisses Maß an Professionalität muss man sich eigentlich in allen Dingen, die man macht, aneignen.
Nochmal klar: Was Du machst, ist Deine Entscheidung, ich apelliere nur an Dich, Dir das richtig gut zu überlegen, denn oftmals ist weniger (oder gar nichts) mehr!
Was Du auch tust: Viel Erfolg!
-Efchen
natürlich will ich gerne eine schöne seite haben, die alle gut finden.
nur leider ist es bis jetzt immer das gleiche gewesen:
ich habe anscheinend eine begabung fehler zu bekommen, die es gar nicht gibt und mir keiner helfen kann (s. css verlinkung). natürlich ist eine seite mit einem baukasten nicht das, was ich mir eigentlich vorstelle. mal nebenbei, es läuft nich, da ich das falsche webpaket habe-.- ich darf nur 5 seiten mit dem baukasten erstellen...
wenn du mir sagst woran es liegt, dass das mit dem css nicht läuft, bin ich auch bereit weiter zu machen. allerdings versuche ich seit ca. 2 jahren eine halbwegs akzeptable homepage hinzukriegen. die jetztige bedeutet aber immer noch sehr viel arbeit für mich, die nicht sein muss und ist nur mit "oldscool- html" geschrieben.
Gruß
Spartist
nur leider ist es bis jetzt immer das gleiche gewesen:
ich habe anscheinend eine begabung fehler zu bekommen, die es gar nicht gibt und mir keiner helfen kann (s. css verlinkung). natürlich ist eine seite mit einem baukasten nicht das, was ich mir eigentlich vorstelle. mal nebenbei, es läuft nich, da ich das falsche webpaket habe-.- ich darf nur 5 seiten mit dem baukasten erstellen...
wenn du mir sagst woran es liegt, dass das mit dem css nicht läuft, bin ich auch bereit weiter zu machen. allerdings versuche ich seit ca. 2 jahren eine halbwegs akzeptable homepage hinzukriegen. die jetztige bedeutet aber immer noch sehr viel arbeit für mich, die nicht sein muss und ist nur mit "oldscool- html" geschrieben.
Gruß
Spartist
Ich habe es doch tatsächlich geschafft ein dreispaltiges design hinzukriegen mit css
jetzt kümmere ich mich noch um Grafike etc.
Aber keine Sorge, ich werde schon noch wieder Probleme haben:lol:
edit: und da ist die erste Frage:
ich habe jetzt einen header extra groß gemacht, damit die seite dynamisch bleibt und der header auf jedem monitor alles ausfüllt. wie kann ich es einstellen, dass der header nur den ganzen div ausfüllt und nicht noch darüber geht...(also ganz im div angezeigt wird nicht nur ein ausschnit)
achja: ich habe den header mit in meine css datei genommen, als background für den div.
jetzt kümmere ich mich noch um Grafike etc.
Aber keine Sorge, ich werde schon noch wieder Probleme haben:lol:
edit: und da ist die erste Frage:
ich habe jetzt einen header extra groß gemacht, damit die seite dynamisch bleibt und der header auf jedem monitor alles ausfüllt. wie kann ich es einstellen, dass der header nur den ganzen div ausfüllt und nicht noch darüber geht...(also ganz im div angezeigt wird nicht nur ein ausschnit)
achja: ich habe den header mit in meine css datei genommen, als background für den div.
Zuletzt bearbeitet:
E
Efchen
Guest
Ohne arrogant klingen zu wollen oder Dich demoralisieren zu wollen, aber das ist ja prinzipiell ne Sache von 2 Minuten. Zweimal float und fertig. Das, was man da nur verstanden haben muss, ist die Funktionsweise von "float" und was es bedeutet, dass die Elemente damit "aus dem Textfluss" genommen werden.Ich habe es doch tatsächlich geschafft ein dreispaltiges design hinzukriegen mit css
Das geht ja gar nicht, denn eine Website kann nur innerhalb des Viewport angezeigt werden und selbst bei maximiertem Fenster (was man ja nicht voraussetzen kann) ist der definitiv kleiner als der Monitor.
Ich würde gerne Deinen Code sehen.
Denn ich verstehe gerade nicht, warum Du einen header zusätzlich in ein div packst, das doch dazu da ist, mehrere Elemente zu gruppieren.
Dann ist die Frage, ob Du mit einem Header einen Header (Überschrift, h1 und so) oder eine Grafik meinst (die ja trotzdem dann in einem <h1> sitzen sollte) und ob es sich bei der Grafik um Content oder Zierde handelt, d.h. ob es per HTML oder per CSS eingebunden wird. Und wenn Du einem Container eine feste Größe gibst, ragt der Inhalt normalerweise nicht darüber hinaus.
Was ja nun das genaue Gegenteil ist...ragt es darüber hinaus oder wird es abgeschnitten?
Aha...dann ist es also nur Zierde und enthält nichts wichtiges wie eine Überschrift?
Hintergrundgrafiken kann man jedenfalls nicht strecken.
Aber wenn sich in der Grafik Inhalt befindet, ist es sinnvoller, die Grafik in HTML einzubinden (denn HTML steht ja für Content).
Code:
<h1><img src="header.jpg" alt="Text aus der Grafik hier als Alternativtext" /></h1>mit meiner begabung für besondere probleme dauert das allerdings länger. denn genau das war ja mein problem^^
ich habe halt eine große Grafik genommen, sodass die auf jedem monitor angezeigt werden kann ohne verzerrt oder verpixelt aussieht. genau das ist ja meine frage, denn die Seite und die Grafik sollen sich ja dem viewport anpassen.
kein eigener <div> sondern der div der über der eigentlichen seite ist und ich habe eine Grafik genommen, wie auch schon gesagt. Und diese Grafik soll eben keine feste Größe haben, sondern je nach Viewport variieren.
ich werde die "Testseite" mak hochladen.
Wie immer hier.
E
Efchen
Guest
Schätz Dich nicht schlechter ein, als Du bist :-)
Dass sich die Seite dem Viewport anpasst, ist kein Problem. Sie sollte sich außerdem auch noch der Schriftgröße anpassen. Das geht dann mit den Einheiten "%" und "em" in CSS. Da den richtigen Wert zu finden, kann allerdings auch etwas Tüftelarbeit sein, insbesondere, weil man ja nun wirklich nicht weiß, ob der Viewport 158px, 247px oder 1681px breit ist. Die Höhe ist ja eigentlich nicht so wichtig (moderne Bildschirme sind sowieso nur geeignet zum Fernsehen und nicht mehr fürs WWW oder sonstige Computeranwendungen).
Dass sich Grafiken anpassen, ist nicht so einfach. Das kann nur mit SVG (Scalable Vector Graphics) gehen, aber die Unterstützung ist IIRC noch nicht gut genug.
Ja, dabei ist Dein Problem ja nicht die Breite der Seite, das passt sich ja an, sondern die Breite des Images. Probleme dabei s.o.
Ich würde an der Stelle ein Banner machen, das eine bestimmte feste Breite hat. Über den genauen Wert kann man sich streiten. 640px, 800px, 700px. Je nachdem, was der alles anthalten muss irgendwas in der Größenordnung (ist natürlich für Handys schon zu breit, aber da kann man ja mit media="handheld" einiges machen). Die Grafik sollte rechts in einer einzigen Farbe auslaufen, die Du dann zusätzlich zum sich nicht wiederholenden Image als Hintergrundfarbe angibst.
Ist das Banner dann 700px breit, sieht man bei 700px das gesamte Banner, bei 1400px ist das Banner halb so breit und der Rest in einer Farbe.
Das ist für sowas wohl die beste Lösung.
Speziell zum Thema HTML würde ich Dir noch folgendes empfehlen:
- Da ja auf Deinem Banner was draufsteht, es also Content enthält, solltest Du es per <img> einbinden.
- Das div#kopfzeile sollte kein div sein, sondern ein h1, denn es ist ja eine Überschrift und nicht irgendwas undefiniertes. Insbesondere, wenn das Banner als <img> eingebunden wird.
- Die navi solltest Du nicht per iframe einbinden. Generell solltest Du auf Frames (wegen der bekannten Nachteile) verzichten. Diese gelten auch für iframes.
- Deine navi besteht nur aus einzelnen <li>. Das dazugehörige <ul> fehlt.
- Unabhängig vom Sinn oder Unsinn des iframe, diesen nochmal in ein div zu packen, ist unnötig. Du packst Geschenke ja auch nur einmal in Papier ein und nicht zweimal.
- div#news ist für mich eine Überschrift. Die solltest Du auch als solche auszeichnen.
- div#fusszeile ist auf jeden Fall ein Textabsatz und sollte dann eher als <p> ausgezeichnet werden. Für Inhalt ist fast jedes Tag besser als <div>.
- Falls Du vor hattest, die Seite mit dem text-align:center im body zu zentrieren, das geht natürlich nicht (bzw. nur im Quirks Mode des IE, den man ja vermeiden sollte!), denn text-align:center zentriert nur Inline-Elemente. Block-Elemente werden mit "margin:0 auto" zentriert.
Soweit erstmal :-)
Schönes Wochenende,
-Efchen
ich habe die seite mithilfe der seite html-seminar.de gemacht. da wurde das so beschrieben.
ok, also die überflüssigen <divs> entfernen.
der grafikheader muss dann aber noch im div bzw. h1 bleiben?
denn sonst ist der ja geg. größer als die restliche seite, denn die passt sich ja an.
ok, also die überflüssigen <divs> entfernen.
der grafikheader muss dann aber noch im div bzw. h1 bleiben?
denn sonst ist der ja geg. größer als die restliche seite, denn die passt sich ja an.
so, jetzt ein paar fehler behoben, allerdings:
1.
wie dann, ohne jedes mal direkt alle seiten bearbeiten zu müssen, wenn ein neuer Link dazu kommt?
Php ist leider nicht möglich :(
2.
Tut mir Leid, aber das verstehe ich nicht :(
also anstatt div#fusszeile <p> in css und dann auch im inhalt <p>.
wie sage ich dann der fusszeile wo sie hin soll?
ich meine, <p> brauche ich öfter, nicht nur für die fusszeile :(
3. wie kriege ich den rand unter dem header weg?^^
1.
wie dann, ohne jedes mal direkt alle seiten bearbeiten zu müssen, wenn ein neuer Link dazu kommt?
Php ist leider nicht möglich :(
2.
Tut mir Leid, aber das verstehe ich nicht :(
also anstatt div#fusszeile <p> in css und dann auch im inhalt <p>.
wie sage ich dann der fusszeile wo sie hin soll?
ich meine, <p> brauche ich öfter, nicht nur für die fusszeile :(
3. wie kriege ich den rand unter dem header weg?^^
E
Efchen
Guest
Dann nutze SSI oder CGI oder ASP, irgendwas serverseitiges.
Wenn Dein Webspace das alles nicht hergibt, solltest Du Dir anderen Webspace zulegen.
Was denn genau?
Die Positionierung eines Elements hat doch nichts damit zu tun, welche Bedeutung sie hat. Einen Text zeichnet man als Text (<p>) aus. Das ändert nichts daran, was Du dem Element für CSS-Eigenschaften geben willst.
p und div sind beides Block-Elemente, für sie gelten die selben Regeln, was CSS angeht. Was Du mit einem div machen kannst, kannst Du genauso mit einem p machen.
Das hat damit gar ncihts zu tun. Du kennst doch "id" und "class", damit kannst Du Deine Definitionen in CSS noch genauer zuweisen.
Das ist der margin-bottom vom h1.
- Status
