nicht angemeldet
Gunnar Bittersmann
Gunnar Bittersmann
Matthias Apsel
Gunnar Bittersmann
Matthias Apsel
Matthias Apsel
Matthias Apsel
Gunnar Bittersmann
Gunnar Bittersmann
Matthias Apsel
Abend Leute und Frohe Ostern
Vielleicht liegt es an der späten stunde, aber ich kann mir das CSS-Verhalten nicht erklären.
1. Ein Bild wird ständig wiederholt, obwohl nirend wo was von "background repeat" steht.
2. Egal was ich bei "left" im CSS eingebe (px, % usw.) da tut sich überhaupt nichts - was die Ecken betrifft.
Ich wollte für Testzwecke mal abgerundete Ecken verwenden (Testmodell!), da das "Radius-Element" nicht überall funktioniert. Hier mal die Ansicht:
Was ist da los?
wie lautet der css code?
wie lautet der css code?
so:
* {
margin: 0;
padding: 0;
}
div.haupt_inhalt {
position: fixed;
float: none;
top: 110px;
left: 50%;
margin-left: -350px;
width: 700px;
height: 500px;
border-style: solid;
border-width: thin;
border-color: #ff8200;
background-color: #ffffff;
}
div.ecke_oben_links {
position fixed;
float: none;
top: 110px;
margin-left: -350px;
left: 50%;
height: 10px;
background-image: url(ecke_oben_links.jpg);
}
Wie gesagt, die kleine Ecke wiederholt sich. Das kann ich zwar jetzt mit "background-repeat: no-repeat;" verhindern, aber trotzdem läßt sich die Runde-Ecke nicht mit left, right, margin oder sonst wie manövrieren.
Gruß HP-User
@@HP-User:
nuqneH
wie lautet der css code?
so:
Glaubst du ernsthaft, dass man mit CSS-Code ohne HTML-Code, auf den es angewandt wird, was anfangen kann?
Qapla'
@@Gunnar Bittersmann:
nuqneH
wie lautet der css code?
so:
Glaubst du ernsthaft, dass man mit CSS-Code ohne HTML-Code, auf den es angewandt wird, was anfangen kann?
Ähm, du hattest im OP deine Beispielseite verlinkt. Insofern war die Nachfrage „wie lautet der css code?“ von KC unsinnig – nicht nur ihrer Rechtschreibung wegen.
Genauso unsinnig übrigens wie dein Anliegen, auf diese Art runde Ecken umsetzen zu wollen.
Und genauso unsinnig wie dein Anliegen, deine Seitengestaltung mit fixer / absoluter Positionierung umsetzen zu wollen. Schlag nach in http://de.selfhtml.org/css/layouts/mehrspaltige.htm@title=SELFHTML.
Qapla'
Hi Gunnar und wer sonst noch so mit liest
Glaubst du ernsthaft, dass man mit CSS-Code ohne HTML-Code, auf den es angewandt wird, was anfangen kann?
Hmmm, Ich hab mal die div-class in eine div-id umgeschrieben. Scheint mir besser.
Das mit dem "ohne HTML-Code" begreife ich nicht. Die <div id="haupt_inhalt"> ist doch auch noch leer, und läßt sich platzieren. Bei der <div id="ecke_oben_links"> ist doch nichts anders - aber diese läßt sich nicht platzieren. Das ist unlogisch. Eventuell mag der Browser die Großgeschriebenen Haupttags nicht (<HTML>/<HEAD> usw.)?
Und genauso unsinnig wie dein Anliegen, deine Seitengestaltung mit fixer / absoluter Positionierung umsetzen zu wollen. Schlag nach in http://de.selfhtml.org/css/layouts/mehrspaltige.htm@title=SELFHTML.
Hab nachgeschlagen. Ich hab wie dort gezeigt, den Befehl "position" testweise weggelassen. Dann klappt aber das Platzieren (bei beiden) auch nicht mehr.
Hier ist mal eine Skizze:
http://www.einschlafzeit.de/skizze.jpg
Es geht um die untere Box bei dem "X".
Erklärung:Ich dachte, wenn ich zwei DIVs in einander verschachtle, und beide mit Höhe "auto" versehe, bekomme ich folgenden Vorteil: Sollte die Navi ""navi_inhalt" später mehr Punkte bekommen, vergrößert sich der Div "haupt_inhalt". Kommt mehr Inhalt in den Div "haupt_inhalt", vergrößert sich dieser ebenfalls. Das war der Plan
Gruß HP-User
Om nah hoo pez nyeetz, HP-User!
Glaubst du ernsthaft, dass man mit CSS-Code ohne HTML-Code, auf den es angewandt wird, was anfangen kann?
Das mit dem "ohne HTML-Code" begreife ich nicht.
HTML und CSS müssen zusammengehören. Eines ohne das andere taugt nicht zur Analyse von Fehlern.
Hmmm, Ich hab mal die div-class in eine div-id umgeschrieben. Scheint mir besser.
div-class und div-id sind ungeeignete Vokabeln.
Verwende eine ID, wenn du der Meinung bist und sicherstellen kannst, dass diese ID nur ein einziges mal auf der Seite vorkommt und du das Element sonst nicht eineindeutig identifizieren kannst.
Verwende eine Klasse, wenn du mehreren Elementen gleiche CSS-Eigenschaften verpassen willst und diese Elemente keine weiteren Gemeinsamkeiten haben, welche ein Selektieren ermöglichen würden.
Die <div id="haupt_inhalt"> ist doch auch noch leer, und läßt sich platzieren. Bei der <div id="ecke_oben_links"> ist doch nichts anders - aber diese läßt sich nicht platzieren.
Der Inhalt der Elemente hat damit (meist) nichts zu tun. Beschäftige dich mit Positionierung
Eventuell mag der Browser die Großgeschriebenen Haupttags nicht (<HTML>/<HEAD> usw.)?
Haupttag ist ebenfalls eine ungeeignete Variable und die Groß-und Kleinschreibung spielt keine Rolle. Ich empfehle die Kleinschreibung.
Und genauso unsinnig wie dein Anliegen, deine Seitengestaltung mit fixer / absoluter Positionierung umsetzen zu wollen. Schlag nach in http://de.selfhtml.org/css/layouts/mehrspaltige.htm@title=SELFHTML.
Hab nachgeschlagen. Ich hab wie dort gezeigt, den Befehl "position" testweise weggelassen.
Es gibt keine CSS-Befehle.
... Das war der Plan
Was hat das mit dem ursprünglichen und unsinnigen Anliegen der runden Ecken zu tun?
Matthias
Hi Matthias
HTML und CSS müssen zusammengehören. Eines ohne das andere taugt nicht zur Analyse von Fehlern.
------------------------------------------------------------
CSS:
* {
margin: 0;
padding: 0;
}
div#haupt_inhalt {
position: absolute;
top: 110px;
left: 50%;
margin-left: -350px;
width: 700px;
height: 500px;
border-style: solid;
border-width: thin;
border-color: #ff8200;
background-color: #ffffff;
}
div#navi_inhalt {
position: absolute;
top: -1px;
left: 50%;
margin-left: 250px;
width: 100px;
height: 500px;
border-style: solid;
border-width: thin;
border-color: #ff8200;
background-color: #ffffff;
}
div#ecke_oben_links {
float: none;
top: 110px;
left: 50%;
width: 10px;
height: 10px;
background-image: url(ecke_oben_links.jpg);
background-repeat: no-repeat;
}
------------------------------------------------------------
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="de">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="Suchmaschinen Optimierung / Inhaltlich">
<meta name="keywords" content="Suchmaschinen Optimierung / Stichwoerter">
<meta name="author" content="Autorenname">
<meta name="robots" content="index,follow">
<link rel="stylesheet" type="text/css" href="einschlafzeit_index.css">
<TITLE>Einschlafzeit</TITLE>
</head>
<body bgcolor=white>
<div align="center">
<center>
<img border="0" src="header.jpg" width="700" height="100">
</center>
</div>
<div id="haupt_inhalt">
<div id="navi_inhalt">
</div>
</div>
<div id="ecke_oben_links">
</div>
<div id="ecke_oben_rechts">
</div>
</body>
</html>
------------------------------------------------------------
Der Inhalt der Elemente hat damit (meist) nichts zu tun. Beschäftige dich mit Positionierung
Bin dabei - einen Schaltschrank verdrahten find ich persönlich aber einfacher - dieses Eltern/Kind-Nachgefahre - puh!
[...]Groß-und Kleinschreibung spielt keine Rolle. Ich empfehle die Kleinschreibung.
Habs wie vorgeschlagen geändert. Sind jetzt klein geschrieben!
Empfehlung diverser Artikel ist, auf "fixed" und "absolute" zu verzichten, da nicht überall korrekt umgesetzt.
Na dann bleibt ja nicht mehr viel übrig.
Gruß HP-User
@@HP-User:
nuqneH
Empfehlung diverser Artikel ist, auf "fixed" und "absolute" zu verzichten
Ja, es sei denn, man weiß genau, was man tut.
Na dann bleibt ja nicht mehr viel übrig.
Doch. Die FAQ verraten dir, wie man ein Blockelement horizontal zentriert.
Qapla'
Hi Gunnar
Muss nochmal los, was erledigen. Komme aber später noch mal vorbei *g*
Das mit dem Block guck ich mir dann aber trotzdem noch an.
Ja, es sei denn, man weiß genau, was man tut.
Wer weiss das schon ;-)
Vorerst bin ich mal grob zufrieden:
Ganz_grob
Eine Info noch für später:
Ich experimentiere gedanklich mit einem "klappmenü", daß bei hover ein Büch öffnet. Etwas so:
Auf&Zu
Im Hinblick auf Browserkompatibilität: Eine gute oder eine schlechte Idee?
Nur so gefragt, bevor ich mich selber vor unlösbare Probleme stelle.
Gruß bis später
HP-User
Abend Leute
Bin wieder dran ;-)
Bevor ich an der Seite weitermache, ist mir noch ein Grundproblem aufgefallen. Es betrifft die Flexibilität beim Ziehen des Browserfensters.
Vielleich ist es normal, vielleicht aber auch einfach schlecht formatiert.
Hier die [Page](file:///home/ritter/Desktop/Web-Dateien/Einschlafzeit/test.html)
Wenn man hingeht, und das Browserfenster ein Stückchen kleiner zieht, als den Hauptheader oben, verschiebt sich der rechte Rand des DIV "haupt_inhalt".
Ich dachte zuerst, ich habe diesen DIV falsch zentriert. Ein Umstellen auf
left:auto + right:auto brachte nichts. auch das Zusatzbeispiel von hier margin:auto; hat nicht geholfen.
Kann man da was ändern, oder ist das bei CSS halt so?
Gruß HP-User
Om nah hoo pez nyeetz, HP-User!
Hier die [Page](file:///home/ritter/Desktop/Web-Dateien/Einschlafzeit/test.html)
falscher Link, ich hab zwar manchmal Rittersport aber keinen /ritter/Desktop/ scnr;
Matthias
Om nah hoo pez nyeetz, HP-User!
Völlig überflüssig ist
Der Martin
<div align="center">
<center>
<img width="700" border="0" height="100" src="header.jpg">
wegen veralteter Attribute, veralteter Elemente, darstellungsbezogener Angaben und überhaupt.
<img src="header.jpg" alt="aussagekräftiger Text">
reicht, maximal
<img width="700" height="100" src="header.jpg" alt="aussagekräftiger Text"> für den ruckelfreien Seitenaufbau
Gib alle Eigenschaften, die das div- bzw. center-Element haben, dem Bild und diesem ein aussagekräftiges alt-Attribut.
Matthias
Hallo Matthias
Ich habe getan, wie mir aufgetragen wurde. Aber ohne center hängt jetzt das Hauptbild oben nun ganz links
Gruß HP-user
Om nah hoo pez nyeetz, HP-User!
Ich habe getan, wie mir aufgetragen wurde.
nicht ganz: es steckt immer noch in einem div-Element
bgcolor kannst du auch entsorgen: Alle Darstellung gehört ins CSS!
dem Bild verpasst du ein display: block sowie ein passendes margin mit auto.
Matthias
Hi Matthias
nicht ganz: es steckt immer noch in einem div-Element
Das ist jetzt auch weg :-)
bgcolor kannst du auch entsorgen: Alle Darstellung gehört ins CSS!
Das wurde mit:
body {
margin-top: 10px;
background-color: #ffffff;
}
ins CSS gepackt und scheint zu funktionieren :-)
dem Bild verpasst du ein display: block sowie ein passendes margin mit auto.
Das ging nicht:
HTML-Code:
<img id="haupt_bild" border="0" src="header.jpg" width="700" height="100" alt="Sonnenuntergang">
CSS-Code:
img.haupt_bild {
margin: auto;
display: block;
}
Ich hab versucht, dem Bild eine id zu verpassen, da ich nicht will, daß später alle Bilder zentriert werden. Kann es sein, daß ich da einen Fehler gemacht habe?
Gruß und Danke für die Hilfe HP-User
Hallo,
<img id="haupt_bild" border="0" src="header.jpg" width="700" height="100" alt="Sonnenuntergang">
CSS-Code:
img.haupt_bild {
margin: auto;
display: block;
}Ich hab versucht, dem Bild eine id zu verpassen, ...
... selektierst im CSS aber ein Bild mit einer gleichnamigen Klasse. Das passt nicht zusammen.
Ciao,
Martin
Hallo Martin
... selektierst im CSS aber ein Bild mit einer gleichnamigen Klasse. Das passt nicht zusammen.
Oh, ja das stimmt. Hab's geändert und jetzt zentriert er auch.
Da ihr mich quasi mit der Nase drauf gestoßen habt, hab ich bei den anderen DIVs die Positionierung absolute weg gelassen. Dadurch kann mann die Fenstergrösse variieren und alles flutscht, wie es sein soll :-)
Eine knifflige Sache gibt es noch. Mein Hauptkonstrukt beruht auf zwei ineinander geschachtelte DIVs. Grund: Sollte das innere Div mal wachsen (zusätzliche Navilinks) wächst das Äußere DIV mit. Und wenn der Inhalt des Haupt-DIVs mehr wird, wächst es selber auch. Diese DIVs werden noch eine Höhe: auto bekommen - später.
Wie man jetzt schön sehen kann, ist hier jetzt das Navi-DIV verrutscht, da die absolute-Platzierung fehlt. Nehm ich da jetzt besser inline, oder inline Block -> in Bezug auf das Verhalten bei Fenstergrößenänderung?
Gruß HP-User
So,
mach schluss für heute, muß Morgen raus.
Die Positionierung vom DIV id="navi_inhalt" wird mich wohl noch ne Weile beschäftigen, da sie ja in die DIV id="haupt_inhalt" hinein geschoben werden soll - so daß Endziel *g*
Gute Nacht und Danke für die Hilfe bis hierher.
HP-User
مرحبا
Ich habe getan, wie mir aufgetragen wurde. Aber ohne center hängt jetzt das Hauptbild oben nun ganz links
Ist das ein Auftrag von einem Kunden? Ist dieser Kunde damit einverstanden, dass deren Seite irgendwann mit diesen Postings in verbindung gebracht wird? Willst du das?
mfg
Hi Malckolm Beck's
Das geht schon in Ordnung - Danke der Nachfrage.
Der Link wird eh vor Lunch entfernt werden.
Wir sind doch eh schon alle "Gläsern".
Gruß HP-User
@@Matthias Apsel:
nuqneH
Verwende eine Klasse, wenn du mehreren Elementen gleiche CSS-Eigenschaften verpassen willst
Nein!! Das wäre ja eine darstellungsbezogene Klasse; solche sollte man vermeiden.
Verwende eine Klasse, wenn du mehrere Elemente gleiche Eigenschaften (Inhalte, Funktionen, …) haben und die deshalb in dieselbe Gruppe zusammengefasst – klassifiziert – werden können.
Wenn du mehreren (unterschiedlichen) Elementen gleiche CSS-Eigenschaften verpassen willst, verwende eine Aufzählung von Selektoren:
foo, #bar, .baz { quz: quuz }
Qapla'
@@HP-User:
nuqneH
Ich wollte für Testzwecke mal abgerundete Ecken verwenden (Testmodell!), da das "Radius-Element" nicht überall funktioniert.
Radius-Element?? Du meinst die CSS-Eigenschaft 'border-radius'?
Die funktioniert in allen aktuellen Browsern – und das seit geraumer Zeit schon ohne browserspezifische Präfixe.*
Und wenn sie in einigen alten IEs nicht funktioniert – na und? Dann bekommen die paar Nutzer eben eckige Ecken zu sehen. (Nutzer von Schwarz/weiß-Fernsehern bekommen auch keine farbigen Bilder zu sehen.) Das ist völlig normal – progressive enhancement.
Qapla'
* Und wenn in einem aktuellen Artikel immer noch 'border-radius' als Beispiel für Präfixe herhalten muss, dann zeugt das von schlechter Qualität des Artikels.
Om nah hoo pez nyeetz, Gunnar Bittersmann!
Und wenn in einem aktuellen Artikel immer noch 'border-radius' als Beispiel für Präfixe herhalten muss, dann zeugt das von schlechter Qualität des Artikels.
Und wenn du jetzt noch lieferst, seit welcher Versionsnummer die Geckos und Webkits border-radius unterstützen, wird die Qualität eines aktuellen Artikels wieder etwas verbessert werden.
Matthias
Hallo Matthias,
Und wenn in einem aktuellen Artikel immer noch 'border-radius' als Beispiel für Präfixe herhalten muss, dann zeugt das von schlechter Qualität des Artikels.
Und wenn du jetzt noch lieferst, seit welcher Versionsnummer die Geckos und Webkits border-radius unterstützen, wird die Qualität eines aktuellen Artikels wieder etwas verbessert werden.
ja, bessere Beiträge nutzen die Möglichkeiten, die HTML bietet ;-)
Kompatibilitätsliste:
https://developer.mozilla.org/en/CSS/border-radius#Browser_compatibility
Freundliche Grüße
Vinzenz
مرحبا
Und wenn du jetzt noch lieferst, seit welcher Versionsnummer die Geckos und Webkits border-radius unterstützen, wird die Qualität eines aktuellen Artikels wieder etwas verbessert werden.
Ein Artikel, der den Aktuellen Stand der dinge bzgl. Browser berücksichtigt, ist Aktuell und gut. Daran sollte sich, zumindest vorerst, auch nichts ändern.
Was bringen mir alle Standards der Welt, wenn meine Seite in 11 Browsern verschieden aussieht? Etwa das ich Wert auf die einhaltung etwaiger Standards lege? ich sehe es an meinen Statistiken, die Leute surfen mit allem was Internetfähig ist. Warum soll ich dem Zufall überlassen, wie ein User meine Seite sieht?
mfg
Om nah hoo pez nyeetz, Malcolm Beck´s!
Ein Artikel, der den Aktuellen Stand der dinge bzgl. Browser berücksichtigt, ist Aktuell und gut. Daran sollte sich, zumindest vorerst, auch nichts ändern.
Meine Frage und Vinzenz' Link führten zur Änderung von FF1-->FF4 und Saf3-->Saf5 weil ab diesen Versionen border-radius unterstützt wird. Die Präfixe sind im Beispiel erhalten geblieben.
Wie schon oft gesagt, jeder ist eingeladen, sich am Wiki zu beteiligen. Langsam aber sicher laufen uns sonst Konkurrenzprodukte den Rang ab.
Matthias
@@Matthias Apsel:
nuqneH
Die Präfixe sind im Beispiel erhalten geblieben.
Warum? Die Browser(versionen), für die die Präfixe nötig waren, sind toter als der IE 6. Alle Browser verstehen entweder 'border-radius' ohne Präfix oder sie beherrschen es auch mit Präfix nicht. Alle '-*-border-radius'-Angaben können also bedenkenlos entsorgt werden. Und sollten es auch.
(Ach ja, Leute, die das automatische Updaten ihres Browsers abschalten, wollen keine runden Ecken, sondern Nachhilfe, warum sie es wieder anschalten sollten.)
Das SELFHTML-Wiki hatte ich übrigens mit den „Artikeln“ gar nicht gemeint, sondern heutzutage (neu) geschriebene Artikel, die entweder runde Ecken erklären oder die Verwendung von Präfixen an ebendiesem (mittlerweile völlig unsinnigem) Beispiel.
Qapla'
@@Malcolm Beck´s:
nuqneH
Was bringen mir alle Standards der Welt, wenn meine Seite in 11 Browsern verschieden aussieht?
Falsche Frage.
Deine Seite sollte in 11 Browsern verschieden aussehen. Oder erwartest du, dass sie im IE auf einem Desktop genauso aussieht wie in einem Safari auf einem Tablet wie in einem Opera Mini auf einem Smartphone?
Und wenn sie auf allen gleich aussieht, dann wird sie auf mindestens zwei der drei Geräte nicht optimal dargestellt.
Optimal != überall gleich. Willkommen im Web.
Qapla'
مرحبا
Was bringen mir alle Standards der Welt, wenn meine Seite in 11 Browsern verschieden aussieht?
Falsche Frage.
Nein, nur falsch formuliert.
Deine Seite sollte in 11 Browsern verschieden aussehen. Oder erwartest du, dass sie im IE auf einem Desktop genauso aussieht wie in einem Safari auf einem Tablet wie in einem Opera Mini auf einem Smartphone?
Nein, ich erwarte, dass meine Seite in allen als "Modern" bezeichneten Browsern für Desktop-PCs gleich aussieht.
Und da fängt der Hamster schon an zu humpeln, denn selbst der neueste Opera(*) hat immer noch diverse CSS-Bugs bzgl. der einfachsten formatierungen.
Selbst Google Chrome hat mir Gestern bewiesen, wie wichtig "Standards" sind. Ich hatte eine Lücke zwischen 2 Elementen, die in keinem anderen Browser (getestet mit 8 an der Zahl) war, was soll das sein? Moderner Standard?
Und wenn sie auf allen gleich aussieht, dann wird sie auf mindestens zwei der drei Geräte nicht optimal dargestellt.
Wenn ich mit zwei, drei Präfixen schaffe, dass es nur noch einer ist, ist viel erreicht.
(*) Opera ist ... beh ... beh ... *kopfklatsch* ... Behindert!
mfg