nicht angemeldet
Matthias Apsel
MudGuard
Der Martin
Der Martin
Felix Riesterer
Gunnar Bittersmann
Wie ihr wisst bin ich ja gerade fleissig am coden. Habe ein Template gefunden was auf Desktop und Mobil gut aussieht, dieses möchte ich jetzt anpassen jedoch ist das sowas von verzwickt, Klassen, Unterklassen, wiederrum aufgeteilt in mehrere @media Klassen und dann noch mehrere CSS Dateien gelinkt!
Dreamweaver scheint die einzelnen zusammenhängenden Klassen zu DIV Containern nicht zu kennen, so daß man da schnell mal was einstellen kann. Eine Klasse zu verändern dauert ewig, z. B. nur einen Text ausrichten. Die Voransicht von Dreamweaver taugt auch nix, voll das Steinzeitprogramm.
Gibt es keine Programme die sowas übernehmen? Die Anzeigen, diese DIV ist mit der und der Klasse verbunden, so daß man schnell was ändern kann? Ich kann mir nicht vorstellen, das Template Entwickler alles per Hand eingeben. Da wird man ja nie fertig!
Und vor allem, man kann das ja gar nicht testen was man das coded. Zuviele Bildschirmauflösungen in der Welt! Man sieht auch keine Zusammenhänge im CSS, z. B. hier, von diesem Code habe ich ohne ende im Template
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; } .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { float: left; } .col-xs-12 { width: 100%; } .col-xs-11 { width: 91.66666667%; } .col-xs-10 { width: 83.33333333%; } .col-xs-9 { width: 75%; } .col-xs-8 { width: 66.66666667%; } .col-xs-7 { width: 58.33333333%; } .col-xs-6 { width: 50%; } .col-xs-5 { width: 41.66666667%; } .col-xs-4 { width: 33.33333333%; } .col-xs-3 { width: 25%; } .col-xs-2 { width: 16.66666667%; } .col-xs-1 { width: 8.33333333%; } .col-xs-pull-12 { right: 100%; } .col-xs-pull-11 { right: 91.66666667%; } .col-xs-pull-10 { right: 83.33333333%; } .col-xs-pull-9 { right: 75%; } .col-xs-pull-8 { right: 66.66666667%; } .col-xs-pull-7 { right: 58.33333333%; } .col-xs-pull-6 { right: 50%; } .col-xs-pull-5 { right: 41.66666667%; } .col-xs-pull-4 { right: 33.33333333%; } .col-xs-pull-3 { right: 25%; } .col-xs-pull-2 { right: 16.66666667%; } .col-xs-pull-1 { right: 8.33333333%; } .col-xs-pull-0 { right: 0; } .col-xs-push-12 { left: 100%; } .col-xs-push-11 { left: 91.66666667%; } .col-xs-push-10 { left: 83.33333333%; } .col-xs-push-9 { left: 75%; } .col-xs-push-8 { left: 66.66666667%; } .col-xs-push-7 { left: 58.33333333%; } .col-xs-push-6 { left: 50%; } .col-xs-push-5 { left: 41.66666667%; } .col-xs-push-4 { left: 33.33333333%; } .col-xs-push-3 { left: 25%; } .col-xs-push-2 { left: 16.66666667%; } .col-xs-push-1 { left: 8.33333333%; } .col-xs-push-0 { left: 0; } .col-xs-offset-12 { margin-left: 100%; } .col-xs-offset-11 { margin-left: 91.66666667%; } .col-xs-offset-10 { margin-left: 83.33333333%; } .col-xs-offset-9 { margin-left: 75%; } .col-xs-offset-8 { margin-left: 66.66666667%; } .col-xs-offset-7 { margin-left: 58.33333333%; } .col-xs-offset-6 { margin-left: 50%; } .col-xs-offset-5 { margin-left: 41.66666667%; } .col-xs-offset-4 { margin-left: 33.33333333%; } .col-xs-offset-3 { margin-left: 25%; }
Hallo Khan,
der gepostete CSS-Code trägt jetzt genau wie zur Lösung oder zum Verständnis der Frage bei?
Versuch doch bitte mal, die Vorschau zu benutzen und schau mal, ob dir die Buttons oberhalb dieses Textfeldes irgendwie bei der Formatierung deiner Beiträge behilflich sein könnten. Weitere Unterstützung gibts ggf. im Wiki.
Bis demnächst
Matthias
Hi,
der gepostete CSS-Code trägt jetzt genau wie zur Lösung oder zum Verständnis der Frage bei?
Er zeigt, daß das "gefundene" Template nicht wirklich gut ist ...
cu,
Andreas a/k/a MudGuard
Amigos ihr hattet recht, das Template was ich hatte, war für meine Vorstellung von Webseite zu viel rumgefummel. Habe jetzt ein Template gefunden (sogar free), bei welcher ich nur die index.html verwende, da alles enthalten ist was ich brauche. Also Hintergrundbild, Intro Text, Newsletter, kurze Einzelheiten und Kontaktformular. Dazu habe ich das Hintergrund auf 80kb bekommen, welches ich bei den @media Einträgen auf die jeweilige Größe skaliere.
Was mir die letzten 3 Tage mit Euch gebracht hat ist, das ich gerafft habe, wie die Zusammenhänge der @media Einträge sind und das ich in Chrome gesehen habe, das darin ein Geräte-Simulator eingebunden ist, der vereinfacht das Leben ungemein! Was ich noch vermisse ist, in Dreamweaver per Mausklick die einzelnen @media Werte zur z. B. Breite usw. ruck zuck einstellen kann, ohne ständig im CSS hin und her zu springen.
Hier das Feature von Chrome, für die Leute die das nicht kennen:
Grüsse an alle und recht herzlichen Dank!
Lieber Khan,
Was mir die letzten 3 Tage mit Euch gebracht hat ist,
... leider kein Fortschritt bei Deinem Wissen zu den Basics der Webtechniken. Sehr schade!
Liebe Grüße,
Felix Riesterer.
Wie jetzt? Ich kann doch Webseiten bauen und ggf. ändern, ob ich viel länger brauche als ein Profi und ob der Profi bessere Griffe anwendet spielt für mich keine Rolle.
Ich code allerdings per Hand, verwende Dreamweaver dafür, obwohl ich es besser finden würde, das ein Programm beim coden mehr Hilfestellung leisten würde. Das es zB. erkennt, das es für einen Abschnitt des Dokumentes mehrere @media Einträge gibt und man dann zu den einzelnen Einträgen auf der grafischen Oberfläche die Werte bearbeiten kann.
Oder kann das DW und ich weiss es nicht?
Hallo
Das du entweder eine total veraltete Version vom DW verwendest oder mit dem DW überfordert bist hast du bereits mehrfach zum Ausdruck gebracht. Das dürften selbst die User mit der längsten Leitung inzwischen verstanden haben.
Gibt es keine Programme die sowas übernehmen? Die Anzeigen, diese DIV ist mit der und der Klasse verbunden, so daß man schnell was ändern kann?
Der DW.
Ich kann mir nicht vorstellen, das Template Entwickler alles per Hand eingeben. Da wird man ja nie fertig!
Doch, das geht sogar mit einem sinnvollen Editor am schnellsten.
Wenn man für sich selbst ein Template entwickelt kann man das auch viel übersichtlicher machen. Das spart dann nochmal Zeit und ist viel einfacher anzupassen.
Und vor allem, man kann das ja gar nicht testen was man das coded. Zuviele Bildschirmauflösungen in der Welt!
Eher HTML und CSS noch nicht verstanden. Aber auch das ist deinen bisherigen Fragen und Beiträgen bereits zu entnehmen.
Deinen Vorstellungen zufolge müssen die meisten Webseitenersteller offensichtlich Masochisten sein. Egal ob sie Webseiten / Templates erstellen oder Vorlagen benutzen. Da ich Spaß daran habe bin ich wohl die Ausnahme.
Gruss
MrMurphy
Ich hab ja auch Spaß dran, aber wenn man für einen einzigen DIV Text, der auf einem 320px Smartphone so und so ausgerichtet sein soll, wo der Text den und den Abstand haben soll mit dieser und dieser Farbe und Größe, der Code aber an jeder dritten Ecke in jedem CSS Dokument verzwickt ist, dann blickt man da nicht mehr durch und macht auch kein Spass. Ein DIV ausrichten sind mal eben 2 Stunden Arbeit...
Dreamweaver 2014 CC
Hallo
Ein DIV ausrichten sind mal eben 2 Stunden Arbeit...
Wenn du ausgelernt hast nur noch 3 Minuten. Und wenn du dann nur noch deine eigene Vorlage anpassen musst nur noch eine Minute.
Gruss
MrMurphy
Lieber Khan,
aber wenn man für einen einzigen DIV Text, der auf einem 320px Smartphone so und so ausgerichtet sein soll,
was zur Hölle ist ein "DIV Text"?? Mit dieser Sichtweise gehst Du komplett an der Idee des semantischen Markups vorbei und machst Dir deswegen das Leben unnötig schwer! Mir scheint, dass Du noch nicht wirklich verinnerlicht hast, wie man HTML sinnvoll einsetzt!
Liebe Grüße,
Felix Riesterer.
Hallo,
was zur Hölle ist ein "DIV Text"?? Mit dieser Sichtweise gehst Du komplett an der Idee des semantischen Markups vorbei und machst Dir deswegen das Leben unnötig schwer! Mir scheint, dass Du noch nicht wirklich verinnerlicht hast, wie man HTML sinnvoll einsetzt!
<zeitsprung target='voriges Jahrtausend'> wieso das denn? Wenn man CSS verwenden will, muss man doch Div nehmen, oder?</zeitsprung>
Gruß
Kalk
@@Tabellenkalk
<zeitsprung target='voriges Jahrtausend'> wieso das denn? Wenn man CSS verwenden will, muss man doch Div nehmen, oder?</zeitsprung>
<zeitsprung target='heute'> Wieso das denn? Wenn man stylen will, muss man doch JS verwenden, oder?</zeitsprung>
LLAP 🖖
Hallo Khan,
Gibt es keine Programme die sowas übernehmen? Die Anzeigen, diese DIV ist mit der und der Klasse verbunden, so daß man schnell was ändern kann? Ich kann mir nicht vorstellen, das Template Entwickler alles per Hand eingeben. Da wird man ja nie fertig!
Doch, wird man. Meine "Entwicklungsumgebung" für HTML/CSS sieht so aus: Zwei Monitore, Firefox, Chrome und ein Texteditor. Ich bevorzuge Vim als Texteditor, unter Windows würde ich vermutlich Notepad++ nutzen. In Firefox und Chrome sind die Entwicklertools recht gut. Unter anderem gibt es eine Ansicht zum Simulieren kleiner Bildschirme (Strg+Umschalt+M). Chrome bietet sogar verschiedenste Geräte zum simulieren zur Auswahl.
Was dein Template ausgeht: Das sieht nach verdächtig nach Bootstrap, einem CSS-Framework, aus. Meiner Erfahrung/Meinung nach verkompliziert Bootstrap viele Dinge unnötig. Mit sauber strukturiertem HTML und CSS3 (Flexbox) sind viele Sachen gut und schnell lösbar. Man darf nur nicht versuchen, Webseiten wie Print-Dokumente zu designen.
Beste Grüße
Stareagle
Ja hab im Template Bootstrap ohne ende. Da soll nochmal jemand durchblicken. Ich möchte z.B. in der Mobilansicht, bei den untersten beiden Zeilen die Zeilenhöhe auf normal haben, damit kein Leerraum zwischen den beiden Zeilen ist. Oder die volle Screenbreite zu verwenden. No way, keine Chance den Eintrag zu finden!
Aloha ;)
Ja hab im Template Bootstrap ohne ende. Da soll nochmal jemand durchblicken. Ich möchte z.B. in der Mobilansicht, bei den untersten beiden Zeilen die Zeilenhöhe auf normal haben, damit kein Leerraum zwischen den beiden Zeilen ist. Oder die volle Screenbreite zu verwenden. No way, keine Chance den Eintrag zu finden!
Vielleicht solltest du mal überlegen, von Dreamweaver wegzukommen, wenn du damit (offenbar, ich kenne Dreamweaver nicht und kann nichts dazu sagen) nicht klarkommst oder das nicht deinen Bedürfnissen entspricht.
Dir wurden schon öfter die Entwicklertools deines Browsers der Wahl empfohlen. Meine Erfahrung deckt sich mit der vieler anderen hier, dass ein Texteditor in Verbindung mit einem ordentlichen Browser und seinen Entwicklerwerkzeugen vollkommen ausreicht.
Ich kann mir allerdings vorstellen, dass Dreamweaver eventuell (wie gesagt, nur Spekulation) in dem Fall hinsichtlich seiner Vorschau nicht so komfortabel funktioniert - kann ja auch gar nicht, die kochen auch nur mit Wasser und wollen eine Vorschau bieten, ein "richtiger" Browser muss mehr können und kann deshalb auch mehr, das ist eine einfache Rechnung.
Genug der Moralapostelei, jetzt zur Lösung:
Öffne deinen Browser, mach einen Rechtsklick auf das problematische Element, öffne damit die Entwicklerwerkzeuge direkt an diesem Element ("Prüfen", "Inspizieren", "Untersuchen"... je nach Browser) und sieh dir dann mal den Teil des Bildschirms an, der die CSS-Eigenschaften zeigt. Da hast du alle Eigenschaften, die für die Formatierung eine Rolle spielen, und zusätzlich die Dateinamen und Zeilennummern, wo sie definiert sind. Da kannst du beliebig und zügig finden und suchen, z.B. ganz bequem per Deaktivieren einzelner Eigenschaften zum Testen der Auswirkungen. Und - oh Wunder - mit Chrome kannst du sogar ein 320px-großes Display simulieren während du zur Laufzeit per Entwicklerwerkzeug durch die CSS-Regeln schaust, also auch ganz bequem Dinge für eine bestimmte Auflösung ändern.
Wenn dir der Tipp geholfen hat, überlege nochmal, ob du dich nicht vielleicht doch mit den Grundlagen befassen willst. Ich kann nur betonen, dass du offenbar viel Zeit damit verbringst, fehlendes Grundlagenwissen ("von der Pike auf", nur mit Texteditor und Browser) und dadurch manifestierte Fehler auszubügeln. Würdest du stattdessen in dieser Zeit die Grundlagen lernen wäre das deutlich sinnvoller und die meisten Probleme würden wahrscheinlich nicht mal auftauchen. Sofern du nicht weist, wo anfangen mit der Nacharbeit: Ein guter Startpunkt wäre bspw., deine aktuelle Problemseite als statische Seite von oben bis unten einmal selbst zu schreiben (und bitte ohne Tools, die dir vermeintlich was abnehmen, was dir aber nachher bei der Fehlerbehandlung wieder fehlt). Das führt dich zu genug Stellen, an denen du nochmal Nachlesen und Fehlendes oder Vergessenes nachholen kannst.
Grüße,
RIDER
Ich kann mich noch an vor 10 Jahren erinnern, da gab es für Browser ein Plug-In, welches die zugehörigen CSS Codes einer Webseite zeigte, man konnte die Codes sogar verändern mit Live-Ansicht. Also man hat einen Bereich im Browser auf der Seite markiert und das Plug-In zeigte die Codes. Sowas suche ich verzweifelt, mit Chrome Webdeveloper und Firebug kommt man nicht weit.
Ich kann mich noch an vor 10 Jahren erinnern, da gab es für Browser ein Plug-In, welches die zugehörigen CSS Codes einer Webseite zeigte, man konnte die Codes sogar verändern mit Live-Ansicht. Also man hat einen Bereich im Browser auf der Seite markiert und das Plug-In zeigte die Codes. Sowas suche ich verzweifelt, mit Chrome Webdeveloper und Firebug kommt man nicht weit.
Rechtsklick - Element untersuchen. Funktioniert sogar im IE.
Hallo,
Ich kann mich noch an vor 10 Jahren erinnern, da gab es für Browser ein Plug-In, welches die zugehörigen CSS Codes einer Webseite zeigte, man konnte die Codes sogar verändern mit Live-Ansicht. Also man hat einen Bereich im Browser auf der Seite markiert und das Plug-In zeigte die Codes.
damals war das vermutlich Firebug, eine Erweiterung für Firefox. Das gibt's immer noch, aber die gängigen Browser haben sowas in der Art mittlerweile integriert. Nennt sich meist Developer Tools oder so ähnlich. Das hat stareagle doch auch schon empfohlen.
Sowas suche ich verzweifelt, mit Chrome Webdeveloper und Firebug kommt man nicht weit.
Wie bitte!?
So long,
Martin
Element Untersuchen oder Prüfen heisst das im Chrome. Ok alles klar, arbeite ich schon lange mit, aber gibt es sowas auch das man den Code direkt im Browser ändern kann und man das sofort sieht?
Hallo
gibt es sowas auch das man den Code direkt im Browser ändern kann und man das sofort sieht?
Es gibt mehrere Möglichkeiten. Mach doch einfach mal einen Doppelklick auf die CSS-Anweisungen im Browser.
Gruss
MrMurphy
Hi,
Element Untersuchen oder Prüfen heisst das im Chrome.
mag sein, Chrome nutze ich nicht.
Ok alles klar, arbeite ich schon lange mit, aber gibt es sowas auch das man den Code direkt im Browser ändern kann und man das sofort sieht?
Firebug kann das.
So long,
Martin
Lieber Khan,
DIV Containern
Du verwendest sehr wahrscheinlich kein semantisches Markup. Das ist oft eine Quelle von unnötigen technischen Problemen. Baue doch einmal eine Seite mit Beispielinhalt und verlinke sie von hier. Dann kann man Dir wirklich helfen. Dein Rant über DW ist sowohl inhaltlich als auch formal unangebracht.
Liebe Grüße,
Felix Riesterer.
@@Khan
Dreamweaver scheint die einzelnen zusammenhängenden Klassen zu DIV Containern nicht zu kennen, so daß man da schnell mal was einstellen kann. Eine Klasse zu verändern dauert ewig, z. B. nur einen Text ausrichten.
Don’t blame Dreamweaver.[1] Blame Bootstrap.
Entweder du verwendest Bootstrap – mit all den negativen Konsequenzen, die das mit sich bringt – oder du lässt die Finger davon. Ich bin für letzteres.
LLAP 🖖
Nicht dafür. Es gibt sicher andere Gründe, Dreamweaver zu verdammen. ↩︎
Tabellenkalk
Camping_RIDER