Computerhilfen.de Logo
Forum
Tipps
News
Frage stellen

Win XP: Grafik in html erstellen

Ich möchte mit der Anweisung:
 <div  style="position: absolute; left: apx; top: bpx; width: ypx; height: zpx; background-color:#farbe;"></div>
eine Grafik in html erstellen.
Das Logo soll 100 x 100 Pixel gross werden (10.000 Anweisungen).
Bei guter Projektplanung sollte ich auf unter 1.000 Anweisungen reduzieren können.
Das wäre dann ein Aufwand, wie wenn Mutti einen Pulluver strickt-
& mir die Sache somit wert.
Gibt es da irgendwas zu bedenken (dreht der Browser am Rad bei leichter Fehlprogrmmierung o.ä.?)-
oder gibt es gar eine viel elegantere Lösung?


Antworten zu Win XP: Grafik in html erstellen:

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

 

Zitat
Ich möchte mit der Anweisung:
 <div  style="position: absolute; left: apx; top: bpx; width: ypx; height: zpx; background-color:#farbe;"></div>
eine Grafik in html erstellen.
Das Logo soll 100 x 100 Pixel gross werden (10.000 Anweisungen).
Bei guter Projektplanung sollte ich auf unter 1.000 Anweisungen reduzieren können.
Noch "Stoff" vom "Vatertag" im Blut?? Was, wie, wo?? Die erste "HTML-Anweisung ist ja nun wohl schlichtes CSS in einem HTML-Dokument. Und eine Grafik in purem HTML "erstellen" geht schon mal nicht, da ist ein bisschen mehr vonnöten, Grafiken serverseitig "erstellen" (erzeugen) geht am ehesten mit PHP oder einer anderen serverseitigen Scriptsprache (vorausgesetzt, der Webserver/Webspace hat die erforderlichen Funktionen vorinstalliert), aber nicht mit HTML.

Was Du mit 10.000 "Anweisungen" meinst, solltest Du vielleicht erklären.

Das hier 
Zitat
Bei guter Projektplanung
ist auch "voll" lustig... ;D;D;D

Davon abgesehen, was auch immer eine mit 10.000, mit Glück auf 1.000 "Anweisungen" reduzierte "Grafik in HTML" darstellt wäre ein "tonnenschwerer" Code der im Vergleich zur Nutzung einer Grafikdatei im Format 100x100 Pixel eine unheimliche Ladezeit beansprucht.

 
Zitat
oder gibt es gar eine viel elegantere Lösung?
Allerdings:

Wenn es denn ein Logo ist oder sein soll, warum wird das dann nicht als das was es ist, als Grafikdatei eingebettet? dazu sind keine x-tausend Anweisungen sondern letztendlich nur der Image-Tag als Ergänzung zu dem CSS-Schnipsel wie oben notwendig. Das macht genau 1 Anweisung und i. d. R. nur eine Zeile Code aus.

  
« Letzte Änderung: 20.05.12, 14:22:08 von PWT »

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

für alle rechner:
10.000 anweisungen sind bei 100 x 100 pixel 10.000 einzelanweisungen.
mit  widthheight kann man bereiche erfassen, damit reduziert sich die zahl der einträge.
ich will das machen, da ich in der grafikvorlage keine gleichmässige farbe habe & ich die übergänge zu html oder css oder was zur himmelfahrt auch immer nicht hinkriege.
wenn nun einer glaubt, das geht mit html nicht, weiss er mehr als ich:
 >html><title></title><body><div  style="position: absolute; left: 207px; top: 200px; width: 100px; height: 100px; background-color:#000000;"></div></body></html>
kopier das in einen editor, speicher es als htm ab & ruf es auf.
dann guck auf den monitor & staun'.
lg jockel
ps: ich sauf' seit weihnachten nich mehr

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

 

Zitat
ich will das machen, da ich in der grafikvorlage keine gleichmässige farbe habe & ich die übergänge zu html oder css oder was zur himmelfahrt auch immer nicht hinkriege.
Hintergrund der Grafik transparent machen...

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

 

Zitat
wenn nun einer glaubt, das geht mit html nicht, weiss er mehr als ich:
 >html><title></title><body><div  style="position: absolute; left: 207px; top: 200px; width: 100px; height: 100px; background-color:#000000;"></div></body></html>
kopier das in einen editor, speicher es als htm ab & ruf es auf.
Ja. Das stimmt. Da wissen etliche Millionen Leute mehr als Du. Den Schnipsel muss ich nicht irgendwo"reinkopieren", das ist eine (unbenannte) Ebene (Layer) in CSS mit Postionsangaben und Hintergrundfarbe schwarz. Sonst nichts. Was willst Du da mit 10.000 "Anweisungen" welcher Art auch immer?? 

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

das ist eine theoretische überlegung:
wenn ich 100 x 100 pixel mit der richtigen farbe belege, dann entsteht ein bild.
mein logo ist 2farbig & da scheint mir die sache machbar.
meine vorlage ist ein jpg & da sind die farben unsauber.
du musst auch nich reinkopieren, du kannst auch schreiben: dauert nur etwas länger.

wenn sich x1.000.000 besser auskennen, dann liegt das daran, das sie eine ausbildung hinterhergeschmissern bekamen, während ich seit über 10 jahren vergeblich darum ringe & es jetzt auf solchen wegen probiere

« Letzte Änderung: 20.05.12, 15:37:57 von qmzpx »

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Ist viel zu umständlich und und hatzusätzlich zu den Argumenten von PWT den Nachteil, dass keine vernünftige Weiterbearbeitung möglich ist (für Druck usw.)

Wenn Du sowieso neubauen mußt, machs als Vektorgrafik und dann exportiere als .png mit transparenten Hintergrund für die Seite und gut ist.

In der Zeit, die hier diskutiert wird wärst Du damit schon fertig - naja, oder fast  ;D

Zitat
wenn sich x1.000.000 besser auskennen, dann liegt das daran, das sie eine ausbildung hinterhergeschmissern bekamen, während ich seit über 10 jahren vergeblich darum ringe & es jetzt auf solchen wegen probiere
unter diesen x1.000.000 Leuten sind sehr viele Autodidakten, die keine 10 Jahre dazu gebraucht haben  ::)

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

ich hab 10' gearbeitet: 3600 pixel sind fertig:
 <div  style="position: absolute; left: 0px; top: 0px; width: 100px; height: 10px; background-color:#ff0000;"></div>
<div  style="position: absolute; left: 0px; top: 10px; width: 10px; height: 80px; background-color:#ff0000;"></div>
<div  style="position: absolute; left: 90px; top: 10px; width: 10px; height: 80px; background-color:#ff0000;"></div>
<div  style="position: absolute; left: 0px; top: 90px; width: 100px; height: 10px; background-color:#ff0000;"></div>

jetzt nich mehr reden, sondern die anderen 6400.

ich will nicht drucken, sondern ein logo im kopf einer homepage

ich versteh noch nix von vektorgrafik

10 jahre hab ich mich um ausbildung bemüht,
autodidakt bin ich seit ein paar wochen

trotzdem dank für das bemühen

ich denke mit php wäre sowas wesentlich sinnvoller - oder man malt die grafik einfach mit einen tool wie gimp und bindet se ein

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Das hier  

Zitat
ich hab 10' gearbeitet: 3600 pixel sind fertig:
 <div  style="position: absolute; left: 0px; top: 0px; width: 100px; height: 10px; background-color:#ff0000;"></div>
<div  style="position: absolute; left: 0px; top: 10px; width: 10px; height: 80px; background-color:#ff0000;"></div>
<div  style="position: absolute; left: 90px; top: 10px; width: 10px; height: 80px; background-color:#ff0000;"></div>
<div  style="position: absolute; left: 0px; top: 90px; width: 100px; height: 10px; background-color:#ff0000;"></div>
jetzt nich mehr reden, sondern die anderen 6400.

ist "Arbeit" für Doofe. Zu denen kannst Du Dich gesellen wenn Du weder lernfähig noch willens bist, die vorstehend genannten Tipps umzusetzen. I. d. S.: es macht keinen Sinn, Typen wie Dir irgendetwas beibringen zu wollen - mach es einfach so, wie Du Dir das vorstellst und gut ist.

 
Zitat
10 jahre hab ich mich um ausbildung bemüht,
, wahrscheinlich waren auch diese Mühen nicht von Erfolg gekrönt da Du  
Zitat
ich versteh noch nix von vektorgrafik
massiv lernunwillig bist.

https://www.google.de/#hl=de&safe=off&sclient=psy-ab&q=vektorgrafik+erstellen&oq=vektorgrafik&aq=1&aqi=g4&aql=&gs_l=hp.1.1.0l4.944.4201.0.7057.12.5.0.7.7.0.141.658.0j5.5.0...0.0.7qeVlsN0YNw&pbx=1&bav=on.2,or.r_gc.r_pw.r_qf.,cf.osb&fp=8d684aa626c4d3f3&biw=1280&bih=881

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

den vorwurf der lernunwilligkeit muss ich mir nicht vorwerfen lassen,
ich möchte allerdings nicht landwirtschaft studieren, weil ich eine pflanze umtopfen will.

das mit der lernunfähigkeit kann mir nur so ein selbsgefälliger piesel vorwerfen, der sich in einer fachrichtung etabliert hat & sich jetzt selber zum gott krönt und mit mit seinem wissensvorteil nur die eigene unfähigkeit auf anderen gebieten überspielen will

ich habe gehofft, mit der flucht in ein fachforum im internet vor solcher sorte menschen verschont zu werden.
da habe ich mich geirrt,
& weil die diskussion jetzt in eine andere sachrichtung geht, bringt sie mich nicht weiter & das gespräch meinerseits ist damit beendet.

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

um bei Deinem Vergleich "Landwirdschaft" zu bleiben:

Du versuchst gerade eine Palme in eine Bratpfanne! (nicht mal in einen Kochtopf) zu pflanzen!

Warum fragst Du überhaupt in einem Fachforum, wenn Du sowieso keinen Rat lesen/hören willst?  ::)
Meinst Du wir spammen hier aus Langeweile rum?

@Meister Falke
Logo mit PHP sinnvoller? Sehe ich etwas anders.  ;)
Gimp ist sicherlich machbar, wird aber etwas pixelig und problemlos skalieren ist auch nicht drin.
Aber vllt. bin ich auch mal wieder nur "überpenibel"... ;D

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

 

Zitat
das mit der lernunfähigkeit kann mir nur so ein selbsgefälliger piesel vorwerfen, der sich in einer fachrichtung etabliert hat
 
Stimmt. Auch in dieser Richtung bin ich etabliert, selsbtgefällig steht mir damit selbstverständlich zu.

 
Zitat
& sich jetzt selber zum gott krönt
Du irrst. Der Titel Gott wurde mir auf diesem Fach- und Sachgebiet von vielen begeisterten Anhängern und Kunden verliehen.

 
Zitat
  und mit mit seinem wissensvorteil nur die eigene unfähigkeit auf anderen gebieten überspielen will
Du irrst schon wieder. Auch auf und in weiteren 37.874 Fach- und Sachgebieten bin ich der (noch) ungekrönte König.

Da lernwillig.

 
Zitat
das gespräch meinerseits ist damit beendet
Das - ist erfreulich. Das - erspart den ungekrönten gottähnlichen Fachleuten hier im Forum, ihr profundes Wissen an eine/n unfähigen, uneinsichtigen Bildungsverweigerer weiterzugeben und damit Perlen vor die Säue zu werfen.

Zitiere SQL-Freak:

 
Zitat
Aber vllt. bin ich auch mal wieder nur "überpenibel"... Grin
  ;D;D
Logo mit PHP sinnvoller? Sehe ich etwas anders.  ;)

nee verstehste mich falsch - was ich meinte is, wenn man den quelltext zusammenfast, nen array macht wo was hin soll und das dann mit ner for/foreach schleife abarbeitet um codeduplizierung zu vermeiden.

Ganz ehrlich: heutzutage erstellt niemand mehr 1000 Anweisungen einzeln...

Selbst die 4 divs die er bisher erstellt hat unterscheiden sich ja nur in 4 dingen.
Unter umständen könnte man sogar rechnerisch danach den code weiter verringern, oder in dem man in den array bereiche packt die pixel haben sollen

- Naja ich hoffe ich hab richtig verstanden was der OT will, den irgendwie finde ich es nicht ganz einleuchtend was er da wünscht

Gimp ist sicherlich machbar, wird aber etwas pixelig und problemlos skalieren ist auch nicht drin.

Ich sehe nicht ein, wieso ein JPG mit 100% pixelig sein soll ...
also mit dem CSS3 ->transform: scale()<- hatte ich beim Skalieren bisher noch keine schlimmen Unschönheiten.
Aber mal ehrlich: ohne Verlust zu skalieren ist doch nahezu unmöglich - sonst gäb es doch nicht so viele Probleme bspw damit Videos auf HD hochzuskalieren...

Aber mal so gefragt: wieso gehen wir davon aus, dass der OT skalieren will? Bisher wissen wir doch nur das er ne Grafik bestehend aus unmengen an div-Containern erstellen will?!

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

ist jetzt ein bisschen off-topic, aber was soll's, für den TO ist die Frage erledigt und am Thema vorbei geht's ja auch nicht....

Dass ein Logo, welches auch immer irgendwann auch weiterverarbeitet / skaliert werden wird/muss ist einfach ein Erfahrungswert.

Grundsätzlich würde ich bei einem Logo immer eine Vektorgrafik einer Pixelgrafik vorziehen, da Detailtreue und Bildschärfe auch beim Skalieren und Drucken mit einer anderen Auflösung erhalten bleiben. Die Dinger sind auch bei unterschiedlichen Größen scharf, ist m.E. bei Logos ein absolutes Muss.

Zitat
den irgendwie finde ich es nicht ganz einleuchtend was er da wünscht
dieses Schicksal teilen wir alle drei wohl irgendwie  ;D 

Mit der Verwendung von CSS3 bin ich noch etwas vorsichtig, ältere Browser haben da doch Probleme, ich kann/möchte den Besuchern nicht vorschreiben, welche Browser-Version sie nutzen.  :)

Erinnere ich mich da falsch, oder gab es bei HTML5 nicht spezielle Neuerungen für Vektorgrafiken mittels Canvas?

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Soweit ich weiss, wird die Ausgabe von Vektorgrafiken mit dem Canvas-Element nicht unterstützt.
Wenn ich mich da irre, wird das hoffentlich jemand hier korrigieren.

Ist eine tolle Sache für interaktive Grafiken, allerdings auch hier wieder das Problem mit älteren Browsern.
Die nicht mal selten sind (die alten Browser meine ich damit), wenn man mal so seine Besucherstatistiken anschaut und auswertet.

Zitat
Canvas/​SVG

HTML5 bringt end­lich ein­heit­li­che Lösung für Vek­tor­gra­fi­ken im Netz. Vek­tor­gra­fi­ken, die dann auch noch per Java­Script mani­pu­lier­bar sind. Yeah! Nie wie­der Flash. Hier mal zwei Bei­spiele für eine Seite, die kom­plett aus HTML5 Vek­tor­gra­fi­ken besteht:
http://kaffeeringe.de/blog/mehr-als-nur-ein-paar-neue-tags.546.html

Ok hatte ich mich doch richtig erinnert ^^

« newsletterformular erstellenCode für Flash in Forum Beiträgen »
 

Schnelle Hilfe: Hier nach ähnlichen Fragen und passenden Tipps suchen!

Fremdwörter? Erklärungen im Lexikon!
Grundstrich
Der Begriff des Grundstrichs im Bereich der Typografie, bezeichnet den senkrechten Strich der Buchstaben. Bei Schriftarten mit variabler Strichstärke, wie zum Beispi...

Haarstrich
Der Begriff Haarstrich stammt aus dem Bereich der Typographie. Bei Schriften, wie zum Beispiel der Antiquaschrift mit unterschiedlichen Strichstärken, wird zwischen ...

Bitmap Grafik
Bei dem Begriff Bitmap Grafik handelt es sich um eine punkt-, beziehungsweise pixelweise Form der Speicherung von Bildern und Grafiken. Bei schwarz-weiß Grafiken be...