zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hintergrundbild fixieren, aber inhalt scrollen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #21 (permalink)  
Alt 20.10.2004, 21:09
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von toscho
Erstens solltest du auch lokal einen Webserver installieren und deine Seiten so testen, wie dann auch live laufen.
Für rein statische Seiten ohne PHP? Warum?

Ansonsten beherzige die Tipps von andir und lagere Dein CSS noch aus - so als inline-css ist das nichts.

Und nochwas: hattest Du nicht vorher ein Problem mit Hintergrundbildern? - Wo sind die denn noch defininiert?
Mit Zitat antworten
Sponsored Links
  #22 (permalink)  
Alt 20.10.2004, 21:45
Benutzerbild von toscho
Perplexifikator
XHTMLforum-Kenner
 
Registriert seit: 22.05.2004
Ort: Halle/Saale
Beiträge: 1.565
toscho sorgt für eine eindrucksvolle Atmosphäretoscho sorgt für eine eindrucksvolle Atmosphäre
Standard

[lokaler Webserver]
Zitat:
Zitat von terrikay
Für rein statische Seiten ohne PHP? Warum?
• Weil auf Windows saubere URLs (/, /kontakt/, /impressum/ etc.) nicht laufen und man also keine absoluten Pfade benutzen kann.
• Weil man damit Fehler wie den obigen leichter findet.
• Weil man dann keine Pfade mehr umschreiben muß und also realistischer testen kann.
• Weil man nebenher auch die .htaccess ausführlich testen kann (gzip, mod_rewrite etc.)
• Weil man generell eine Testumgebung benutzen sollte, die der Laufumgebung so ähnlich wie nur möglich ist.

Mit PHP hat das nichts zu tun, das läuft auch ohne Webserver.

Gruß
Thomas
__________________
toscho.de
Mit Zitat antworten
Sponsored Links
  #23 (permalink)  
Alt 20.10.2004, 22:39
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.10.2004
Beiträge: 36
rezei befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Erstens solltest du auch lokal einen Webserver installieren und deine Seiten so testen, wie dann auch live laufen. Hol dir dazu einfach das XAMPP für Windows und lies die Installationsanleitung — dauert nicht lange.

Zweitens müssen URLs immer url-kodiert sein, insbesondere die Leerzeichen solltest du alle mit %20 ersetzen, denn daran scheitern derzeit alle korrekt arbeitenden Browser. Besser, viel besser wäre es, komplett auf Leerzeichen in Pfaden zu verzichten, ebenso auf Großschreibung.

Gruß
Thomas
Hallo Thomas,

ich denke, das werde ich auch noch austesten...
Aber ist das denn auch das Problem an den Darstellungsfehlern ?





Zitat:
Die Page sieht cool aus, der Inhalt ist aber leider steinzeitlich....


a) Benutz einen richtigen Doctype, damit meine ich:
Nimm einen Doctype, der die Browser zum rendern im Standardmodus zwingt. Im anderen Fall (Quirksmode) verhält sich jeder Browser manchmal etwas anders, was einem zum Verzweifeln bringen kann Winken

Schau mal hier, da wird es näher erklärt:

http://www.aboutwebdesign.de/awd/con...54900923.shtml

b) Entferne deinen deprecated code.... bgcolor.....uah.. topmargin.....uah.. willst Du auch noch IE4 und NN4 User glücklich machen?

c) Schmeiß dein Javascript raus. MIt CSS-Deklarationen erzeugst Du die gleichen Hover-Effekte fürs Menü ohne diesen fetten Code.

d) Zur eigentlichen Frage: Ich werde mir auch auf diesem rechner noch den FF installieren müssen..... vorher kann ich die Frage nicht beantworten Smilie

Edit 21.30 Uhr: Das hier hatte ich gemeint, da steckt ein fehler drin, Pixelzählen will ich grad net:

Code:
<div style="width:750px; height:140px margin:0px auto;">


Was fehlt hier??
harhar Mr. Green

andir
Hallo Andir,

vielen Dank für Deine umfangreiche Antwort. Ich bin allerdings noch recht neu auf dem ganzen Gebiet, daher sorry, daß ich mit Deinen Fachausdrücken nicht so viel anfangen kann...

zu a) z.B. was sind die Modi die du ansprichst ? Quirksmode und so ??? Wo kann ich das einstellen ?

zu b) was sind deprecated ... ist das auch das nach dem W3 Kons. missbilligter Code ??? Ist der Code denn falsch, oder ist der schuld an den Falschausgaben ? Ich bin da eben nicht so versiert....

zu c) mehr als gerne, ich hatte die Rolloverfunktionen mit Image Ready von Photoshop erstellt und weil ich mit CSS keine Möglichkeit gefunden habe, das zu machen, aber wie gesagt - noch Noob - habe ich den Code eingefügt. Wenn es einfacher und sauberer mit CSS geht, dann bitte eine ANleitung dafür....
Gibts da bei den unterschiedlichen Browsern auch keine Probleme ?

zu d) ich habe noch ein Semikolon hinter
Zitat:
height:140px
eingefügt, aber die Anzeige hat sich noch nicht so richtig verbessert....

Und wieso steinzeitlich ?





Zitat:
Für rein statische Seiten ohne PHP? Warum?

Ansonsten beherzige die Tipps von andir und lagere Dein CSS noch aus - so als inline-css ist das nichts.

Und nochwas: hattest Du nicht vorher ein Problem mit Hintergrundbildern? - Wo sind die denn noch defininiert?
Hallo terrikay,

ich habe das mit dem CSSinline und auslagern nicht ganz kapiert. Kannst Du das vielleicht nochmal leichter erklären ? Danke. Ich komme noch nicht ganz mit....

und was meinst du wo die Hintergrundbilder definiert sind ? Die stehen doch in den jeweiligen Div Containern.. oder meinst du das nicht ?




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

Ich hoffe echt, daß Ihr alle Nachsehen mit einem Anfänger habt, ich danke aber echt mal für die ganze Hilfe hier !!!

Hoffe auf baldige Antworten !!!
Mit Zitat antworten
  #24 (permalink)  
Alt 20.10.2004, 23:01
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.038
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Inline-Style: Darstellungsauszeichnungen, die direkt in das HTML des HTML- Tags geschrieben werden. Nachteil: Muss für jedes einzelne TAG neu gemacht werden.

Page Style: Wird im HEAD der HTML-Datei für die gesamte, aber einzelne HTML-Datei definiert über die style-Anweisung.

Externes Stylesheet: css-datei, die alle oder wenigstens die meisten Style-Angaben enthält. Nachteile: keine. (kaum) Vorteile: immens.

Die PRÄSENTATION ( Style) ist vom Inhalt (HTML) getrennt >>> leichter erkennbarer und wartbarer Code. Änderungen in der CSS-Datei wirken sich auf alle HTML-Seiten aus >>> weniger Arbeit.

Kaskade: davon haben CSS (Cascading Stylesheets) den Namen: Es gilt:
Inline-Style überschreibt Seitenstyle der wiederum das externe Stylesheet überschreibt bzw. übersteuert. Es ist daher zu empfehlen, alle Style-Angaben nur im externen Stylesheet zu notieren.


Für den Anfang. rest wird hier reineditiert.

Edit 1: Was man auch kennen sollte:

http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/

Die hatte ich mir ausgedruckt in den Urlaub mitgenommen und abends darüber gebrütet ( über die einfachen Sachen *g*) und getestet.
Das englische Original ist natürlich die einzig verbindliche Version.

Den serverseitigen Kram würd ich erstmal aussen vor lassen. Wenn deine Seite steht, dann ja.

Wie Menüs mit Rollover-effekten aussehen können, zeigt dir Listamatic (mit Tutorials)

http://css.maxdesign.com.au/listamatic/

JS ist dafür sowas von overpowered... brauchst Du nicht, wirklich

Mit kluger CSS-Auszeichnung hast du im Quelltext deiner Seite nur noch ein paar Container und Text. Was glaubst Du, was das für Spass macht...
die Lernkurve ist nach ein paar Stunden/Wochen steil.

Lies meinen Link von oben nochmal durch.

andir
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #25 (permalink)  
Alt 20.10.2004, 23:02
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard

Hallo rezei,

fang am besten bei den Grundlagen an - super Quelle auf Deutsch ist hier: http://css4you.de

Da kannst Du unsere Tipps erstmal in Ruhe alle nachschlagen - wenn Du dann gezielte Fragen hast, frag nach.

Aber bei "Adam und Eva" anfangen, ist dann doch zu viel.

Zitat:
zu a) z.B. was sind die Modi die du ansprichst ? Quirksmode und so ??? Wo kann ich das einstellen ?
Bitte den von andir verlinkten Artikel lesen - oder den hier: http://www.fabrice-pascal.de/artikel/dtd/

Zitat:
zu b) was sind deprecated ... ist das auch das nach dem W3 Kons. missbilligter Code ??? Ist der Code denn falsch, oder ist der schuld an den Falschausgaben ? Ich bin da eben nicht so versiert....
Diese leftmargin, topmargin etc. gehörten niemals zu einem offiziellen HTML-Standard - und heute ist das völlig überholt. Sowas kann man prima durch CSS ersetzen (margin:0 und padding:0 im body angeben).

Zitat:
zu c) mehr als gerne, ich hatte die Rolloverfunktionen mit Image Ready von Photoshop erstellt und weil ich mit CSS keine Möglichkeit gefunden habe, das zu machen, aber wie gesagt - noch Noob - habe ich den Code eingefügt. Wenn es einfacher und sauberer mit CSS geht, dann bitte eine ANleitung dafür....
Bitte Grundlagen lesen - mit CSS geht das durch tauschen der Hintergrundbilder...

Zitat:
ich habe das mit dem CSSinline und auslagern nicht ganz kapiert. Kannst Du das vielleicht nochmal leichter erklären ? Danke. Ich komme noch nicht ganz mit....
-> Grundlagen lesen (wie CSS eingebunden wird)

Zitat:
und was meinst du wo die Hintergrundbilder definiert sind ? Die stehen doch in den jeweiligen Div Containern.. oder meinst du das nicht ?
Da sind Bilder als <img> eingebunden - das sind aber keine Hintergrundbilder. Die werden per CSS mit background-image definiert.



@toscho: Äh - meinst Du wirklich, dass da ein Server dringend erforderlich wäre? Mit dem ganzen serverseitigen Kram tu ich mich jetzt noch mehr als schwer - und ich denke, hier fehlen die Grundlagen!
Zu Deinen Punkten:
Zitat:
• Weil man dann keine Pfade mehr umschreiben muß und also realistischer testen kann.
Was spricht gegen relative Pfade bei reinen HTML-Seiten?
Zitat:
• Weil man nebenher auch die .htaccess ausführlich testen kann (gzip, mod_rewrite etc.)
Ist das bei rein statischen Seiten echt so wichtig? - Was willst Du da rewriten? Und der Server sendet doch von allein die wichtigsten Informationen.
Zitat:
Mit PHP hat das nichts zu tun, das läuft auch ohne Webserver.
Jetzt verwirr mich bitte nicht komplett, Thomas - wie denn sonst ohne Server?


Tipp an rezei: kümmer Dich erst um HTML und CSS - später dann irgendwann mal um die serverseitigen Geschichten...


Grüße, Terry
Mit Zitat antworten
  #26 (permalink)  
Alt 21.10.2004, 00:18
Benutzerbild von toscho
Perplexifikator
XHTMLforum-Kenner
 
Registriert seit: 22.05.2004
Ort: Halle/Saale
Beiträge: 1.565
toscho sorgt für eine eindrucksvolle Atmosphäretoscho sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von terrikay
@toscho: Äh - meinst Du wirklich, dass da ein Server dringend erforderlich wäre? Mit dem ganzen serverseitigen Kram tu ich mich jetzt noch mehr als schwer - und ich denke, hier fehlen die Grundlagen!
Für rezei ist es vielleicht noch ein bißchen früh, aber mittelfristig kommt er nicht daran vorbei.
Sein Problem — Bilder werden nicht geladen — hätte er mit einem Blick ins Logfile selber lösen können. Da hätte gestanden, was die anderen Browser statt dessen anfordern.

Zitat:
Was spricht gegen relative Pfade bei reinen HTML-Seiten?
Sie sind unübersichtlich und lassen sich schlecht überarbeiten, wenn sich mal ein häufig verlinkter Pfad ändert. Spätestens wenn man drei Verzeichnisebenen tief geht, ist das nicht mehr akzeptabel.

Zitat:
Zitat:
• Weil man nebenher auch die .htaccess ausführlich testen kann (gzip, mod_rewrite etc.)
Ist das bei rein statischen Seiten echt so wichtig? - Was willst Du da rewriten? Und der Server sendet doch von allein die wichtigsten Informationen.
Ja, das ist wichtig. Ich will doch nicht jeden dahergelaufenen Adress-Sammler, Refererspammer oder Virus auf meinen Seiten rumstöbern lassen. Und selbstverständlich will ich auch statische Seiten komprimiert ausliefern. Und alle Fehler auf die spezielle Fehlerseite umleiten. Und bei den Kodierungsinformationen werde ich mich auch sicher nicht auf den Server verlassen. Es gibt noch ein paar Sachen mehr, aber das sind die Grundlagen — die kann man ohne Server aber einfach nicht testen.

Zitat:
Zitat:
Mit PHP hat das nichts zu tun, das läuft auch ohne Webserver.
:?: Jetzt verwirr mich bitte nicht komplett, Thomas - wie denn sonst ohne Server?
Hm? Der Server macht auch nichts anderes als das Script an PHP durchzureichen und die Ausgabe dann zwischenzuschalten (grob gesagt). Du kannst diese Ausgabe aber auch direkt abfragen. Es gibt auch einige Editoren, die das eingebaut haben (Scite z.B.). Ansonsten: Konsole.

Gruß
Thomas
__________________
toscho.de
Mit Zitat antworten
  #27 (permalink)  
Alt 22.10.2004, 01:03
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.10.2004
Beiträge: 36
rezei befindet sich auf einem aufstrebenden Ast
Standard

Also ich habe hier mal die Seite zum Test online gestellt, ich habe den DOCtype noch auf "strict" geändert und einen DIV Container (den mit der Contentgrafik) als Class oben im Pagestyle definiert.

Aber ich habe wieder ein Problem. Alles wird ohne Probleme angenommen, aber die Grafik in der Mitte, also das was ich im Content als Backgroundgrafik definiert habe, das wird zwar angezeigt, aber wieder nur im IE ohne Probs... Netscape, Firefox und Opera zeigen die Grafik nur ganz eingequetscht in der linken oberen Ecke des Containers und ich weiß nicht, warum...

Kann mir hier vielleicht auch einer helfen ?
Mit Zitat antworten
  #28 (permalink)  
Alt 22.10.2004, 09:54
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

[lokaler Webserver]
Zitat:
Zitat von terrikay
Für rein statische Seiten ohne PHP? Warum?
LOCALHOST Empfehlung = UNBEDINGT

Ich selbst habe schon Tage beim CODE-Block testen nach Fehlern gesucht, und warum

Nicht alle Eigenschaften der CSS-Definitionen werden wirklich interpretiert solange es nicht als HTTP-Protokol in den Browser eingelesen wird.

Code:
# Firefox

file:///C:/PHP-Space/adressen.htm

oder


# IE 

C:/PHP-Space/adressen.htm


#################################

http://localhost/adressen.htm
Leider finde ich diesen Thread nicht mehr, da habe ich getestet und gestestet, und immer einen Darstellungsfehler
Das einzige was ich noch weiß, es war im Mozilla.........

Seit dem arbeite ich sauber über HTTP
__________________
</ulle>
Mit Zitat antworten
  #29 (permalink)  
Alt 22.10.2004, 09:54
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.038
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Damit auch alle (moderneren) Browser im Standardmodus rendern, gehört die Angabe der URL für den Doctype dazu:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict //EN" 
"http://www.w3.org/TR/html4/strict.dtd">

Ansonsten scheint die Grafik im FF tatsächlich abgschnitten - nur ein Teil ist zu sehen - gequetscht ist sie allerdings nicht.
Hast du mal ordentlich Blindtext reingemacht? Könnte das Problem sein, dass der bisher leere Container diese Fehler verursacht.


andir
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
  #30 (permalink)  
Alt 22.10.2004, 10:11
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.10.2004
Beiträge: 36
rezei befindet sich auf einem aufstrebenden Ast
Standard

Ich meine, Du hast schon recht, der DIV-Container ist noch leer, aber kann dadurch denn wirklich die Grafik so verschoben werden ?

Vielleicht kann ich es gleich mal testen, ich poste dann hier das Ergebnis... Mal sehen...

Und ich werde auch noch den Hinweis im DOCtype ergänzen...

Danke für die Antwort
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS-Layout der Browsergröße anpassen Jen CSS 3 14.11.2008 08:39
Problem mit position:relative; McCoRmIcK CSS 0 08.04.2007 16:23
dreispaltiges layout, footer soll immer mitwandern sirrpa CSS 14 24.11.2005 18:57
div box bekomme ich nett zentriert??? Hard@Bowl CSS 1 23.05.2005 11:22
height: 100% beim IE [M.o.C]Co CSS 3 12.05.2005 12:58


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:54 Uhr.