Moin,
ich hab da mal wieder eine Frage:
Ich habe bei mir ein iframe eingefügt, nun möchte ich aber,
das es ein Hintergrundbild hat. (nicht transparent)
Ich möchte es eigendlich ohne CSS machen, weil ich vonn CSS überhaupt keine Ahnung habe.
Weiß jemand wie ich das machen muss?
Gruß Hauke
Hallo Hauke,
style {background-image:url(‚hier/ist/das/bild.gif‘); background-position: left top ;
background-repeat: no-repeat; }
in der html datei die in das frame geladen wird
cu Stefan
Jetzt hab ich sogar noch ein Problem:
http://1000zet.10.ohost.de/
Irgendwie wird das oberste iframe nicht richtig angezeigt.
Hat jemand eine Idee woran es liegen könnte? (vielleicht ja schon einmal selber gehabt?)
Jaja, ich weiß es gibt viel bessere Methoden diese Seite zu machen, außer alles mit iframes, aber ich bin eben noch am lernen 
.
Gruß Hauke
Jetzt hab ich sogar noch ein Problem:
ja schreib dochmal in die html seite die im iframe aufgerufen wird
oder um gleich ganz sicher zu gehen
html,body {margin:0; padding:0;}
auch dir: VIELEN DANK !
hast mir sehr geholfen 
Ist das nicht CSS?
In meinem html Code funktioniert es irgendwie nicht.
auch dir: VIELEN DANK !
hast mir sehr geholfen
wenn du nett bist dann packst du das STYLE auch dahin wo es hingehört in einer HTML datei
zwischen
html,body {margin:0; padding:0;}
-) das wäre dann auch konform
ok, danke für den Tip, hab ich gleich gemacht.
IFrame mit Hintergrundbild mit CSS?
Ich hab mich jetzt mal ein bischen in CSS eingelesen.
Kann mir denn vielleicht jemand sagen, wie ich das mit CSS machen könnte?
So doll kenn ich mich mit CSS noch nicht aus, aber ich könnte es versuchen.
Ich hab mich jetzt mal ein bischen in CSS eingelesen.
Kann mir denn vielleicht jemand sagen, wie ich das mit CSS
machen könnte?
So doll kenn ich mich mit CSS noch nicht aus, aber ich könnte
es versuchen.
also folgendermasen.
ich wills mal mit einfachen worten erklären, mag der eine oder andere mir verzeihen das ich das nicht so genau nehmen , solange ich die struktur beibehalte , ok ! korrekturen sind also erwünscht, aber bitte keine grundlegenden discussionen , ob tabellen oder divs besser sind ok ! Wir sind hier beim anfang damit überhaupt das verständniss da ist.
Also nochmal , hallo Hauke .
warum gibt es css.
Trennung Struktur von Gestaltung
Mit Einsatz von CSS befinden sich im HTML-Code nur noch struktur-relevante Informationen. Jegliche Formatierungsangaben werden (idealerweise in externe Dateien) ausgelagert. Dieses Prinzip bildet die Grundlage für die meisten der hier genannten Vorteile.
Übersichtlicher HTML-Code
Statt „CSS bringt…“ müsste es eigentlich heißen: „CSS erfordert übersichtlichen HTML-Code“. Denn eine Grundvorraussetzung für den erfolgreichen Einsatz von Stylesheets ist die Verwendung von gültigem, standardkonformem HTML. Die Webseite muss obendrein noch gut strukturiert und schlank sein, damit alle Vorteile ziehen.
Im Umstieg von einem Tabellenbasiertem Layout und unter den Anforderungen des richtigen Lebens müssen natürlich Abstriche gemacht werden, Kompromisse müssen eingegangen werden. Aber letzten Endes führt der durchgänge Einsatz von CSS zu deutlich „besserem“, übersichtlicherem HTML-Code.
siehe http://www.style-sheets.de/guide/grundlagen/warum_css
dieser Auszug verdeutlicht warum wir das überhaupt machen sollten.
Um nun strikt diesen vorgaben zu folgen, sollte man erstmal unterlassen html tags mehr als nötig mit informationen zu verunstallten.
Idealerweise wäre also die angabe einer class für diesen fall anzugeben.
Über die Klassen können wiederholende Designelemente bestimmt werden, im folgenden Beispiel wird im Text mehrere Stellen mit einer Art Textmarker hervorgehoben.
siehe http://www.html-seminar.de/class_und_id.htm
Es gibt natürlich viel viel mehr formen nun die HTML tags via Css zu defenieren.
Wenn du garnichts an Style angibst, nimmt jeder Browser seine basis werte. Leider sind die sehr sehr unterschiedlich.
Dazu kommt noch das jeder Browser irgentwie nur vesucht die vorgegebenen standart umzusetzten, das tut leider aber jeder browser anders, so das man auch bei css aufpassen muss wie sich das element verhält in den verschiedenen Browsern. Glücklicherweise kann man aber auch bei css das zu benutzende css via browser weiche für den benutzen browser abzustimmen ohne diverse unterschiedliche html seiten für jeden browser haben zu müssen .
Wie gestalte ich den anfang.
Zuestmal kann man alle in html tags eingebetteten angaben (ausser id , name und class ) entfernen und stück für stück in css übertragen.
css hat sehr viele möglichekeiten elemente und attribute anzusprechen.
man kann z.b. für HTML tags bestimmte werte setzen http://de.selfhtml.org/css/formate/zentrale.htm#elem…
man sollte sich die vielen möglichkeiten vor auge führen. Um wenigstens irgentwie eine Ahnung zu haben was so möglich ist.
Später bekommt man ganz von selbst eine stuktur rein.
Häufig wird der DIV container benutzt zur gestalltung , damit kommt man weg vom tabellen layout .
http://de.selfhtml.org/css/formate/zentrale.htm#div_…
Über vor und nachteile lässt sich streiten, in jedemfall ist ein tabellen layout wenn es viele viele zellen sind auffallend langsamer in der darstellung , versucht man ein div mit einer tabelle drinnen von 1000 zellen zu bewegen dauert das lange, tut man die gleiche tabelle dann mit div’s im div realisieren ,ist es fast nullzeit
Aber es sprechen auch noch viel viel mehr argumente für und gegen . Belassen wir das . Manchmal sind tabellen richtig , manchmal eben einfach nur unsinn.
Im allgemeinen kann man also sagen das man HTML tags nicht direkt formatieren sollte .
Aber bedenke , damit du nicht den Basis (default) werten jedes browsers unterligen bist, sollte man wirklich jedes element im style sheet neu defenieren.
z.b.
wird
Headers Head 33\>
Head 44\>
Head 55\>
in den browsers verschieden dargestellt, das kann ganz schön nerfen, glaubs mir.
wenn man nun einfach im style das alles so einstellt das der browser garnicht seine defaults anwenden kann dann hat man immer(meist) eine einheitliche darstellung.
z.b.
wir gehen davon aus das einige werte für die tags schon ok sind , z.b. das headers zentriert als block element und mit gewissen abständen nach oben und unten dargestellt werden. Wir wollen lediglich die Schriftart und die Grösse festlegen und das in fett weil überschrift.
Headers
h3 {font-size:14pt; font-weight:bold; font-family:Arial; }
h4 {font-size:12pt; font-weight:bold; font-family:Arial; }
h5 {font-size:10pt; font-weight:bold; font-family:Arial; }
body {font-size:9pt; font-weight:normal; font-family:Arial; }
Head 33\>
Head 44\>
Head 55\>
aber es gäbe auch andere wege :
Headers
.manager {font-size:14pt; font-weight:bold; font-family:Arial; }
.assistent {font-size:12pt; font-weight:bold; font-family:Arial; }
.customer {font-size:10pt; font-weight:bold; font-family:Arial; }
body {font-size:9pt; font-weight:normal; font-family:Arial; }
Head 3
Head 4
Head 5
generell sollte man aber den DOCTYPE angeben weil sonst wählt der browser seine eigene methode des verarbeitens .
ergo ergänzen wir das noch um die methode die uns zusagt.
z.b.
Headers
.manager {font-size:14pt; font-weight:bold; font-family:Arial; }
.assistent {font-size:12pt; font-weight:bold; font-family:Arial; }
.customer {font-size:10pt; font-weight:bold; font-family:Arial; }
body {font-size:9pt; font-weight:normal; font-family:Arial; }
Head 3
Head 4
Head 5
somit hätten wir alles getan um es zumindest fast gleich erscheinen zu lassen . und wie du siehst kann man alles auf sehr unterschiedlichen wegen erreichen .
beispiel
body,* {font-family:Arial; font-size:8pt;}
.fett {font-weight:bold;}
.normal {font-weight:normal;}
.manager {font-size:14pt;}
.assistent {font-size:12pt;}
.customer {font-size:10pt;}
body {font-size:9pt; font-weight:normal; font-family:Arial; }
Head 3 Welcome Manager Head 4 Welcome Assitent Head 5 Welcome Customer
2 teil .
wenn du nun alle elemente befreit hast von ihrer formatierung und alles im style tag hast, kannst du diesen style, damit du den nicht in allen weiteren seiten wider anpassen musst bei änderung , in eine sperate datei packen.
inhalt datei : meinestyle.css
body,\* {font-family:Arial; font-size:8pt;}
.fett {font-weight:bold;}
.normal {font-weight:normal;}
.manager {font-size:14pt;}
.assistent {font-size:12pt;}
.customer {font-size:10pt;}
dann nimmst du deine html datei
und defenierst eine externe style sheet datei
aus
Headers
body,\* {font-family:Arial; font-size:8pt;}
.fett {font-weight:bold;}
.normal {font-weight:normal;}
.manager {font-size:14pt;}
.assistent {font-size:12pt;}
.customer {font-size:10pt;}
body {font-size:9pt; font-weight:normal; font-family:Arial; }
.
.
.
wird das z.b. zu
Headers
.
.
.
von den css dateien kann man mehrere einbinden
aber man könnte auch noch zusätliches nur für die einzelne html seite hineintun, also kombinationen.
Headers
/\* ... hier sind dateispezifische Formate erlaubt ... \*/
.
.
.
so , das wars dann schon
vorteil ist , das man am ende nur die CSS ändern muss und schon die seite im neuen glanz erscheint.
viel glück !
P.S. es ist alles nicht so problematisch, css ist gut und kann viel viel mehr als du glauben magst, pixel genau positionieren, DIV über DIV über DIV , schau einfach ein paar beispiele an und übernehm was du brauchst. Die möglichkeiten mit CSS erweitern das HTML
dein
iframe html sieht immoment so aus
html,body {margin:0; padding:0;}
um das nun via style zu lösen kann man das bild nun einfach als hintergrund bild machen. siehe http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=no-repeat
z.b.
html,body {margin:0; padding:0;}
body {
background-image:url(http://1000zet.10.ohost.de/top.jpg);
background-repeat:no-repeat;
}
somit könnte man sogar noch etwas über das hintergrundbild legen :smile: In dem man das in den body packt :smile: So machen das jedenfals die meisten :smile:
aber mal als verbesserung für deine seite :
[http://1000zet.10.ohost.de/index.html](http://1000zet.10.ohost.de/index.html)
wenn es nur das bild sein soll im top bereich, dann kannst du den iframe weg lassen und ein div nehmen mit hintergrundbild.
z.b.
.ontop {
width:908px; height:160px;
background-image:url(http://1000zet.10.ohost.de/top.jpg);
background-repeat:no-repeat;
}
ich hoffe da hilft dir zum verständniss
da issa noch a fehler drinn i dem html
height=„160“>
sollte wohl
height=„160“>
sein
zu 3.
aber mal als verbesserung für deine seite :
http://1000zet.10.ohost.de/index.html
wenn es nur das bild sein soll im top bereich, dann kannst du
den iframe weg lassen und ein div nehmen mit hintergrundbild.z.b.
.ontop {
width:908px; height:160px;
background-image:url(http://1000zet.10.ohost.de/top.jpg);
background-repeat:no-repeat;
}
ich hoffe da hilft dir zum verständniss
um jetzt nicht wieder in allen dateien den ontop hintergrund ändern zu müssen packen wir das style in eine eigene datei .
datei : meintop.css im root (/) verzeichnis des servers
.ontop {
width:908px; height:160px;
background-image:url(http://1000zet.10.ohost.de/top.jpg);
background-repeat:no-repeat;
background-attachment: fixed;
}
body {
background-image:url(http://1000zet.10.ohost.de/Hintergrund2.2.jpg);
background-repeat:repeat;
background-attachment: scroll;
}
so brauch man nur meintop.css zu ändern wenn es im hauptverzeichniss / liegt für alle zugänglich oder man teile in 2 dateien
datei : meintop.css im root (/) verzeichnis des servers
.ontop {
width:908px; height:160px;
background-image:url(http://1000zet.10.ohost.de/top.jpg);
background-repeat:no-repeat;
background-attachment: fixed;
}
und
datei : meinbodymain.css im root (/) verzeichnis des servers
body {
background-image:url(http://1000zet.10.ohost.de/Hintergrund2.2.jpg);
background-repeat:repeat;
background-attachment: scroll;
}
was dann mit
schön schlank aussieht
Wo ist da eigendlich der Unterschied?
Vielen, vielen Dank für diese extrem Ausführliche Antwort, ich les es mir nachher durch, ich habs jetzt nur überflogen.
Moin,
weil ich das gerade zufällig noch lese, obwohls ja schon etwas älter ist…
bitte keine grundlegenden discussionen ,
ob tabellen oder divs besser sind ok ! Wir sind hier beim
anfang damit überhaupt das verständniss da ist.
Und gerade da ist es wichtig, gleich den richtigen Weg zu nehmen.
Was ich anmerken will (ob Du eine lange Diskussion anstoßen willst, ist Deine Sache):
Zum Layout sind WEDER Tabellen NOCH divs geeignet. Layout macht man ausschließlich mit CSS!
Trennung Struktur von Gestaltung
Genau deswegen nämlich!
Im Umstieg von einem Tabellenbasiertem Layout und unter den
Anforderungen des richtigen Lebens müssen natürlich Abstriche
gemacht werden
Nö. Es muss nur umgedacht werden. So wie Du das schreibst, klingt das, als wäre Tabellenlayout eigentlich besser und man macht CSS nur, weil das jetzt „in“ ist oder weil es alle machen.
Kompromisse müssen eingegangen werden. Aber
letzten Endes führt der durchgänge Einsatz von CSS zu deutlich
„besserem“, übersichtlicherem HTML-Code.
Er führt vor allem zu barrierefreien und 100% nutzbaren Websites, zu besseren Websites insgesamt.
Häufig wird der DIV container benutzt zur gestalltung , damit
kommt man weg vom tabellen layout .
Das ist so zwar richtig, aber das Ergebnis ist um keinen Deut besser als Tabellenlayout. Denn Layout macht man mit CSS und nicht mit HTML, welches Tag man für Layout verwendet, ob , oder auch oder , es ist einfach semantisch falsch. Und nur darum dreht es sich bei HTML, um die Semantik.
div mit einer
tabelle drinnen von 1000 zellen zu bewegen dauert das lange,
tut man die gleiche tabelle dann mit div’s im div realisieren
,ist es fast nullzeit
Aber wenn es sich um tabellarische Daten handelt, ist es wieder falsch. Denn die werden als Tabelle ausgezeichnet, egal wie lange das im Browser auch dauern mag. Es geht bei der Auszeichnung mit HTML nicht um die Darstellung!
Manchmal sind tabellen richtig ,
manchmal eben einfach nur unsinn.
Genauso wie das für alle anderen Tags auch gilt. Jedes Tag hat eine Bedeutung, und nur wenn der Inhalt mit diesem Tag richtig ausgezeichnet ist, ist es richtig, alles andere ist falsch. Eine Adresse mit auszuzeichnen ist Unsinn. Eine Überschrift mit auszuzeichnen ist Unsinn, tabellarische Daten mit auszuzeichnen ist Unsinn.
h3 {font-size:14pt; font-weight:bold; font-family:Arial; }
Randbemerkung: pt ist als Einheit für den Bildschirm nicht geeignet, der hat keine „points“. Das ist eine Einheit für die Druckausgabe. Eigentlich wäre „px“ die richtige Einheit, aber da lassen alte IEs das Skalieren nicht zu. Die beste Wahl ist „em“, „ex“ oder „%“.
Außerdem fehlt bei der font-family der generische Font, hier also „sans-serif“.
Ansonsten hast Du Dir echt viel Mühe gegeben, Respekt. Wichtig ist nur, zu verstehen, dass nichts was man mit HTML macht, für die Darstellung ist. Das ist der entscheidende Knackpunkt, den auch die meisten nicht wahr haben wollen, erscheint er ihnen doch viel zu einfach. Und daraus entstehen dann div-Layouts, die eben genauso sinnfrei sind, wie Tabellenlayouts.
Wenn man das einmal versteht, dann ist das ganze Prinzip total simpel. Dann ist es wirklich nur noch eine Frage der vielen verschiedenen Eigenschaften in CSS…
Grüße,
-Efchen