Beiträge von MrMurphy

Hallo,

deine Fragen lassen sich nicht beantworten, da konkrete Beispiele fehlen und sie falsch gestellt sind.

Insgesamt bist du aber offensichtlich auf dem falschen Dampfer.

Internetseiten mit HTML und CSS sind ein vollkommen anderes Medium als Word, pdf, Plakate, Poster, Flyer u.s.w. Du kommst aus deinen bisherigen Arbeiten mit festen Grenzen leider nicht raus. Das ist zum Beispiel an dieser Aussage

Zitat

aber für die gängisten auflösungen am PC sollte das normal passen

gut zu erkennen. Die Realität ist, das im Internet über 50% der User mit Smartphones und Tablets unterwegs sind. Deine Wunschvorstellung nach einer mehr oder weniger festen Größe, von der du ausgehen kannst, ist somit unrealistisch.

Wenn du HTML und CSS lernen willst musst du als erstes verinnerlichen, das es keine festen Fenstergrößen / Viewports gibt. Entsprechend müssen die Seiten von Anfang an flexibel gestaltet werden.

Deshalb solltest du auch gleich ein entsprechendes Grundwissen mit aktuellem HTML5 und CSS3 lernen. Zwei Wochen sind da noch gar nichts.

Deine "Vorbelastung" als Designer ist eher hinderlich, da du viel Wissen, was dir in Fleisch und Blut übergegangen ist, beim Erstellen von Internetseiten vergessen musst.

Webdesign hat sehr wenig mit klassischem Design zu tun, das immer von festen Größen ausgeht, die gefüllt werden sollen. Zum Beispiel eine Buchseite, eine Visitenkarte, eine Zeitschriftenseite, ein Poster, eine Reklame an einer Litfaßsäule / Hauswand u.s.w.

Deinen Fragen ist die Suche nach so einer Größe anzumerken, die es im Internet schlicht nicht gibt. Deshalb sind auch deine Fragen, so wie du sie gestellt hast, nicht zu beantworten. Die Antwort wäre immer falsch. Als Beispiel

Zitat

Ich mein die Prozenteinheit bezieht sich ja immer auf die größe des Elternelements...

ist diese Vorgabe in deiner Frage schon mal falsch. Auch hängt der Bezug nicht von dieser

.galerie div > img { width:50% }

CSS-Angabe ab, sondern von anderen Faktoren. Also dem HTML-Quelltext und weiteren CSS-Angaben.

Gruss

MrMurphy

Hallo

Zitat

ihr wisst weiß ich mein

Nö.

Zitat

dass komplette Blatt umkreist

Welches Blatt? Wenn das "Blatt" ein HTML-Container ist musst du halt diesem den Rahmen zuweisen.

Gruss

MrMurphy

Hallo

Zitat

Habe HTML mal gelernt,

Glaube ich nicht. Und warum übernimmst du Aufgaben, denen du von vornherein nicht gewachsen bist?

Zitat

bin aber komplett aus der Schiene draußen.

Stimmt. Bloß - wenn du das schon selbst erkennst - warum akzeptierst du es dann nicht?

Zitat

die ich nun in HTML4.x (ohne CSS) übersetzen muss

Du musst schon mal gar nichts, das hast du dir freiwillig ausgesucht. Also brauchst du hier nicht auf die Tränendrüsen zu drücken.

Zitat

Allerdings bin ich nur für das Layout bzw. für das HTML-Format zuständig.

HTML = die Information

CSS = das Aussehen = das Layout

Zitat

Wenn es keine andere Möglichkeit gibt als alles selber in einem HTML-Editor zu schreiben

Es gibt keine andere Möglichkeit.

Zitat

mir diesen Abschnitt übersetzen würde

Word, Excel und Co. sind komplett andere Medien als HTML / CSS. Deshalb kann man die auch nicht übersetzen. Man kann in HTML die gleichen Informationen bereitstellen. Wenn kein CSS benutzt werden darf war's das aber auch schon. Die werden dann halt so angezeigt wie die jeweiligen Browser es für richtig halten.

Zitat

bezüglich Formatierungsbefehle wie Tabstopp,

Gibt in weder in HTML noch in CSS. Das sind halt keine Textverarbeitungen.

Zitat

Absatz,

Die setzt HTML automatisch. Mit CSS kann das beeinflusst werden.

Zitat

Zentrierung

Geht mit HTML überhaupt nicht, das kann nur CSS.

Zitat

Ausrichtung in Spalten

Spalten im Sinn von Word oder Excel gibt es in HTML nicht.

Man kann in HTML höchstens Tabellen verwenden. Die sind aber nur für tabellarische Daten gedacht.

Wenn mit HTML-Tabellen das Aussehen beinflusst werden soll ist das schlicht ein Fehler. Dafür waren Tabellen nie vorgesehen und sind auch seit dem Jahr 2000 nicht mehr erforderlich. Meine letzte Tabelle habe ich vor 7 oder 8 Jahren erstellen müssen, seitdem sind mir schlicht keine tabellarischen Daten mehr untergekommen.

Wenn Tabellen zum Layout "mißbraucht" werden ist der Aufwand auch viel höher als eine Lösung mit CSS.

Du kannst natürlich deine Seiten erstellen wie du willst. Aber in Foren geben Andere und auch ich dazu keine Unterstützung mehr. Ich kann dir nur meine Gründe mitteilen, da ich die Gründe der anderen nicht kenne:

Wenn ich eine entsprechende "Lösung" präsentiert habe kamen innerhalb kurzer Zeit Nachfragen, weil die Fragenden nicht alles erzählt haben und meine "Lösung" dann nicht funktionieren konnte. Und das, obwohl die Fragenden genau wie du darauf hingewiesen wurden, das Tabellen in diesem Zusammenhang falsch sind. Und dann musste ich mich, der mit solchen falschen Lösungen eigentlich gar nichts am Hut hat, mit weitere falsche Lösungen ausdenken oder den Fragenden im Stich lassen. Das will ich einfach nicht mehr.

Von daher liefere ich nur noch korrekte, dem aktuellen Entwicklungsstand entsprechende Lösungen.

Wenn du dir selbst etwas basteln willst kannst du nach HTML, Tabellen, und Formulare suchen und dir selbst etwas zusammenstricken. Das ist technisch im Endeffekt nicht schwer, aber trotzdem aufwändig. Und wenn du dich schon vor dem Abtippen der reinen Informationen drücken willst ...

Außerdem helfe ich zwar gerne, aber ich lasse mich nicht gerne ausnutzen. Deine Anforderungen gehen aber in die Richtung, das du keinen Lösungsweg, sondern ein komplettes Ergebnis haben willst. Das ist aber nicht der Sinn von Foren.

Zitat

Sorry aber, eigentlich ist es ja egal in welcher Art das HTML benutzt wird und für was ich es benötige. Das war nicht die Frage.

Die Frage hast du zwar nicht gestellt, aber für für eine seriöse Antwort auf deine Ursprungsfrage benötigt ein Hilfswilliger diese Informationen.

Was glaubst was passiert, wenn du zum Reifenhändler gehst und neue Reifen haben möchtest? Richtig, es kommen Nachfragen: Welche Reifengröße, welcher Hersteller u.s.w. Antwortest du dann auch patzig: Das war nicht meine Frage, ich will Reifen?

Zitat

Aber dieses Formular braucht keine besondere Formatierung ..

In deinem Eingangspost schreibst du aber etwas anderes. Dort hast du auch das Layout übernommen und ein Bild mit einem formatierten Text als Vorlage vorgegeben.

Zitat

Ich dachte, es gibt evtl. Eine Möglichkeit das einfach zu erstellen ..

Nein, die gibt es nicht.

Gruss

MrMurphy

Hallo,

du arbeitest viel mit festen Breitenangaben. Wenn das umgende Element eine festgelegte Breite hat und die eingeschlossenen Elemente insgesamt breiter sind als das umgebende Element erfolgt ein Zeilenumbruch. Bei dir könntest du zum Beispiel das padding für das a-Element links und / oder rechts verringern.

Die Ursache ist, das die unterschiedlichen Browser und Betriebssysteme die Schriften leicht unterschiedlich interpretieren. Oder wenn die vorgegene Schrift auf dem Rechner des Users nicht vorhanden ist eine Ersatzschrift wählen.

Wenn du das vermeiden willst solltest du ein flexibles Design, am besten verbunden mit einem Responsive Design, wählen. Google bietet da jede Menge Lösungen.

Gruss

MrMurphy

Hallo,

ich kann dein Problem an meinem Safari für Windows nachvollziehen, der aber schon etwas veraltet ist, da er seit einiger Zeit nicht mehr weiterentwickelt wird.

Die Ursache konnte ich aber nicht ergründen.

Deshalb habe ich die Seite nur mit den absolut notwendigen CSS-Angaben nachgebaut. Damit trat das Problem im Safari nicht auf.

Die Ursache scheint demnach in deinem recht "verwachsenen" CSS-Angaben zu stecken. Die solltest du mal kräftig aufräumen.

Du kannst dir von deinen Dateien ja mal eine Kopie machen und nach und nach alle nicht benötigten CSS-Angaben löschen. Dabei immer kontrollieren, nach welchem Löschen die Darstellung (hoffentlich) richtig ist.

Gruss

MrMurphy

Hallo

Zitat

Ein Link zur Seite wäre hilfreicher.

Stimmt.

Zitat

Wohl niemand kopiert den Code, speichert ihn ab und testet.

Doch. Sofern der Quelltext so vollständig ist, das er bei der Lösungssuche hilfreich ist.

http://foreninfo.bplaced.net/seiten_fremdpr…i_mit_logo.html

Kevin Brandao

Wenn du sinnvollerweise HTML5 und CSS3 nutzt solltest du das auch konsequent durchziehen. Ein Rückfall in alte Divitis-Zeiten ist nicht mehr notwendig, zumal die neuen Möglichkeiten viele Lösungswünsche deutlich vereinfachen. Außerdem wird in der Regel viel weniger CSS-Quelltext benötigt.

Bei einer neuen Seite würde ich dem Problem mit Flexbox zu Leibe rücken:

http://foreninfo.bplaced.net/seiten_fremdpr…i_mit_logo.html

Gruss

MrMurphy

Hallo,

Zitat

Programmierstil

Autsch.

In HTML und CSS wird nichts programmiert, das sind eher Seitenbeschreibungssprachen, aber keine Programmiersprachen. (Nur mal so nebenbei)

Mit HTML und CSS gibt es häufig mehrere Lösungsansätze, die manchmal mehr und manchmal weniger Vor- und Nachteile haben. Deshalb benötigt man für konkrete Hilfe auch den Inhalt der Webseite.

Explanator hat wie von dir vorgegeben den senkrechten Strich als Textzeichen genommen. Ich habe statt dessen den senkrechten Strich eher optisch gesehen und den mittels einer Rahmen-Anweisung (border) erstellt.

Außerdem finde ich es optisch schöner, wenn der senkrechte Strich sich beim Textumbruch der Höhe des jeweils höchsten Textes automatisch anpasst.

Das kannst du aber alles selbst aus dem Quelltext ersehen. In meinem sind auch alle CSS-Anweisungen im head-Bereich enthalten.

Gruss

MrMurphy

Hallo,

ich habe mal eine Lösung erstellt wie sie mir bei den kargen Informationen vorschwebt:

http://foreninfo.bplaced.net/seiten_fremdpr…rennstrich.html

Gruss

MrMurphy

Hallo,

entweder auch mit nth-child oder mit Klassen.

Wobei ich mir nicht so recht vorstellen kann, das die Lösung auch bei unterschiedlichen Fenstergrößen oder Zoom-Faktoren funktioniert. Ich würde eher alles zentrieren. Dann kann das ganze auch gleich responsive gestaltet werden.

Gruss

MrMurphy

Hallo,

Zitat

Ist klar, was ich meine? Irgendwelche Idee?

Nicht 100%ig.

Soll der Text links vom Trennstrich links- oder rechtsbündig sein?

Soll der Trennstrich durchgängig sein oder zur besseren Unterscheidung der beiden Texte jeweils einen kleinen Abstand enthalten?

Hast du mehr Infos zur Seite? Warum h2-Elemente? Ich sehe eher das dl-Element als geeignet, da die Angaben jeweils links und rechts vom Trennstrich inhaltlich wohl zusammengehören.

Hast du die bisherige Seite online? Ansonsten ist eine konkrete Hilfe kaum möglich, sondern nur alleinstehende Beispiele.

Gruss

MrMurphy

Hallo,

es ist natürlich schwierig dir konkrete Antworten zu geben, wenn du kein konkretes Beispiel nennst. Stell' doch einfach mal eine Seite online bereit, die dir Probleme bereitet. Dann kann man dir auch helfen.

Zitat

Einige Selektoren muss man doch z.B. im IE anders schreiben als in anderen Browsern.

Nein.

Zitat

Ein genaues Beispiel habe ich jetzt leider nicht ...

Weil es wie schon geschrieben keine gibt.

Zitat

Es macht mich noch wahnsinnig diese unterschiedliche Darstellung in verschiedenen Browsern.

Du hast doch selbst Probleme. Das sind für dich doch die besten Beispiele und für uns die beste Grundlage dir zu helfen. Die kannst du doch wie schon geschrieben als Beispiel bei einem Freewareprovider wie bplaced.net online stellen.

Zitat

Gibt es eine Art Referenz wo man erkennen kann, welcher Selektor (CSS) in bestimmten Browsern anders geschrieben werden muss?

Aus den genannten Gründen wäre so eine Referenz sinnlos.

Grundlage für das aktuelle HTML5 und CSS3 sind die Zusammenschlüsse vom W3C und WHATWG. Wobei in der WHATWG alle Browserhersteller mitarbeiten und entsprechend auf einheitliche Standards und Schreibweisen achten.

"Unterschiedliche Schreibweisen" gibt es nur in CSS zu noch nicht freigegebenen Anweisungen, die sich in der Testphase befinden. Dort muss eventuell für unterschiedliche Browser ein sogenanntes Präfix verwendet werden. Das gilt also auch nur für HTML5 und CSS3.

Wenn man sich damit nicht auskennt sollte man von solchen sich in der Testphase befindlichen Anweisungen die Finger lassen. Und schon gar nicht sollte man die mit HTML4 oder XHTML benutzen. Das sind auch immer wieder gerne gemachte Fehler.

Welche Browser welche CSS-Anweisungen in HTML5 und CSS3 unterstützen und für welche Versionen Präfixe erforderlich sind kann auf der Seite

http://caniuse.com/

nachgeschaut werden.

Gruss

MrMurphy

Hallo,

erst mal eine Seite mit deinen Angaben:

http://foreninfo.bplaced.net/seiten_fremdpr…_accordeon.html

Ich habe selbst eine reine css-Lösung gesucht. Und bin dann auf folgende gestoßen. Der Quelltext beinhaltet alle Angaben, alle css-Angaben befinden sich im head-Bereich:

http://foreninfo.bplaced.net/seiten_fremdpr…_accordeon.html

Ich habe das css so unterteilt, das die Angaben zum Layout und zur Funktion unterteilt sind.

Der Öffnungseffekt funktioniert nur, wenn die Höhe das aufzuklappenden Bereichs fest vorgegeben ist. Wenn Einträge hinzugefügt werden muss also auch das css angepasst werden. Deshalb habe ich auch eine Version erstellt, deren Öffnungsbereich sich dem jeweiligen Inhalt anpasst:

http://foreninfo.bplaced.net/seiten_fremdpr…_accordeon.html

Das Layout habe ich so belassen, wie ich es im Internet gefunden haben. Die Farben, Größen, Abstände u.s.w. können natürlich beliebig angepasst werden. Zum Test habe ich mal eine Datei ohne Layout erstellt. Im css befinden sich also nur die Angaben, die zur Funktion benötigt werden. Zum Aufklappen muss auf den Text "Menu1" geklickt werden:

http://foreninfo.bplaced.net/seiten_fremdpr…_accordeon.html

Und dann noch mal ein Beispiel mit mehreren aufklappbaren Bereichen und Text dazwischen.

http://foreninfo.bplaced.net/seiten_fremdpr…_accordeon.html

Mir gefällt zum einen, das man frei bestimmen kann, ob die einzelnen Bereiche geöffnet oder geschlossen sind. Es wird also nicht zwangsweise ein Bereich geschlossen, wenn ein anderer geöffnet wird.

Un zum andern bleibt der Bereich, auf den geklickt werden muss, um Bereiche zu öffnen oder zu schließen, an seiner Position am Bildschirm. Der Besucher muss also nicht suchen oder gar scrollen um direkt weiterlesen zu können.

Getestet habe ich das unter IE11, die aktuellen FF, Chrome und Opera. Außerdem auf einem Samsung Smartphone.

Etwas rumgezickt hat die Aufklappfunktion und Optik unter dem Safari, wobei ich unter Windows nur eine relativ alte Version habe. Das Problem ist, das die Auf- und Zuklappfunktion nach dem Klicken erst aktiv wird, wenn der Mauszeiger außerhalb des klickbaren Bereichs gezogen wird. Es wäre schön wenn jemand berichten würde, wie das beim aktuellen Safari besser funktioniert. Und auch auf ipad und iphone.

Gruss

MrMurphy

Hallo,

eine Verständnisfrage: Suchst du ein Akkordeon rein auf CSS-Basis darf auch JavaScript / jQuery im Spiel sein?

Gruss

MrMurphy

Hallo

Hast du einen Link zu der Seite? Erfahrungsgemäß befinden sich bei solchen Fragen in dem Quellcode verschiedene Fehler.

Zitat

warum das IE das so falsch anzeigt

Diese Schlussfolgerung ist schon mal grundsätzlich falsch. Wenn ein Browser eine Seite nicht so anzeigt wie du es erwartest liegt es zu 99,99% am HTML- / CSS-Quelltext. Also am Individuum an der Tastatur. Die Browser zeigen das an, was ihnen vorgegeben wird. Nur auf fehlerhafte Eingaben reagieren sie unterschiedlich.

Zitat

Dadurch wird natürlich der rechts neben dem Foto stehende Text falsch umgebrochen

Text soll je nach Fenstergröße angepasst umgebrochen werden.

Zitat

Es macht mich noch wahnsinnig diese unterschiedliche Darstellung in verschiedenen Browsern.

Diese Ansicht stammt aus dem letzten Jahrtausend und ist durch die unterschiedlichen Ausgabegeräte überholt und veraltet. Heutzutage ist das Ziel, das der Inhalt von Internetseiten für den Besucher möglichst leicht zu lesen bzw. aufzunehmen sein soll. Wer feste Größen benutzt greift zu Word, zu Plakaten, zu Flyern oder zu pdf-Dateien. Bei denen kann man eine feste Größe definieren.

Jeder Browser bringt sein eigenes CSS-Stylesheet mit. Um die auf eine einheitliche Grundlage zu bringen solltest du mal nach "css normalisierung" googeln. Dadurch sollen die unterschiedlichen Abstände, Schriftgrößen, Schriftarten u.s.w. der unterschiedlichen Browser aneinander angepasst werden.

Zudem solltest du darauf achten, das bei den Browsern auch der gleiche Zoomfaktor vorgegeben ist.

Gruss

MrMurphy

Hallo,

dann wird dir kaum konkret zu helfen sein. Wenn der Zoomfaktor bei beiden Browsern gleich ist hast du Fehler in die HTML / CSS Struktur eingebaut.

Zudem gibt es ja genügend Freeware-Provider wie bplaced.net.

Gruss

MrMurphy

Hallo,

ohne Link zur Seite kann man nur raten.

Erste Vermutung: Du hast bei den Browsern unterschiedliche Zoom-Größen eingestellt.

Gruss

MrMurphy

Hallo,

ein paar zusätzliche Informationen wären hilfreich:

Welcher Doctype?

Lösung mit CSS oder JavaScript?

Mit welchen Browsern (speziell welche Versionen des IE) soll sie Lösung funktionieren?

Gruss

MrMurphy

Hallo

Was verstehst du unter Linkaufbau? Eine Navigation? Die sollte natürlich auf allen Geräten funktionieren und eindeutig sein, damit die Besucher nicht erst lange suchen müssen.

Und Content ist das alles entscheidende einer Seite. Ohne sinnvollen Inhalt ist jede Website sinnlos. Davon gibt es leider mehr als genug.

Gruss

MrMurphy

Hallo,

du willst Webseiten gegen Entgelt erstellen, wenn auch nur ein geringes. Da du dich damit an die Öffentlichkeit wendest (wie durch deinen Beitrag hier) und damit dir fremde Personen anwirbst fällt das nicht mehr unter Freundes- oder Nachbarschaftshilfe.

Damit bist du ein Unternehmer und betreibst ein Gewerbe mit allen Folgen, auch den negativen, wie wegen Fehlern verklagt werden zu können.

Deshalb benötigst du als beschränkt Geschäftsfähiger

1. die Zustimmung deiner Eltern und

2. die Zustimmung des zuständigen Jugendgerichts.

Dem musst du ein tragfähiges Konzept vorlegen und belegen, das du das Gewerbe, in dem du tätig werden willst, auch beherrscht.

Wenn du nicht beide Genehmigungen besitzt müssen dir deine Eltern deine Tätigkeit zu deinem Schutz verbieten.

Außerdem musst du das Gewerbe anmelden sowie Steuern und andere Pflichtbeiträge zahlen, auch als Jugendlicher.

Gruss

MrMurphy

Hallo

hinter

margin-right: 20%

steht ein Doppelpunkt.

Gruss

MrMurphy