Neue Technik mit NVU zu Coden (sehr leicht) by Proud

Huhu zusammen,

ich hab gesehen wie sich hier manche abmühen Layouts zu coden und meine Technik habe ich bei niemanden gesehen. Dabei ist sie sehr leicht. Im Prinzip ist es die gleiche Technik wie mit Firebug zu coden, aber bei Firebug muss man die Zahlen ändern, was ich super mega umständlich finde o.0 weiß garnicht wieso sich so viele damit abmühen, auf jedenfall kann man das ähnliche in NVU machen, sehr viel einfacher und schneller. Ich brauch zum coden 5 Minuten also anfangs:

Man braucht erstmal einen Grundcode:

Code:

 <div
 style="background: transparent url(BILDADRESSE) no-repeat scroll 0%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; width: BREITEpx; height: HÖHEpx;">
 

Für jede Scrollbox einmal diesen Code:

Code:

<div style="border: 1px solid ; width: 100px; height: 100px; display: inline; margin-top: 25px; margin-left: 25px; overflow: auto; float: left;">b</div>

und am ende müssen wir den Div unseres Grundcodes schliessen mit:

Code:

</div>

Dann legen wir mal los:

Als erstes öffnen wir NVU, dann müssen wir unten in der Leiste auf Quelltext drücken:


ihr könnt alles rauslöschen wenn ihr nicht wisst wo ihr das einfügen müsst! Das ist nicht schlimm, macht NVU von alleine wieder hin (wobei ihr das für Howrse nicht braucht, das braucht ihr nur für Webseiten) dann fügt ihr den Grundcode ein, dann so oft den Scrollboxencode wie ihr ihn braucht und dann schliesst ihr mit dem letzen ab. Dann müsst ihr noch kurz bei dem ersten eure Daten reinschreiben. Also eure Bildadresse, die Breite und die Höhe. Dann klickt ihr unten in der Leiste wo ihr vohin Quelltext geklickt habt auf Vorschau. Euer layout müsste nun ganz angezeigt werden mit so kleinen Boxen drauf, so viele wie ihr den Boxencode eingefügt habt. Wenn nicht überprüft ob alle Angaben stimmen.

Im Prinzip müsst ihr nurnoch einen Schritt machen und zwar:

klickt in die erste Box. Oben und an der Seite werden nun kleine Balken mit den Maßen angezeigt die genau der größe der Boy entsprechend. Wenn ihr euf den Balken drückt und an den Rand fahrt könnt ihr sie größer/kleiner machen und wenn ihr die Box runter/ zur seite haben wollt müsst ihr den Schluss vom Balken dahin ziehen Wo die Box enden soll und dann den Anfang nachrücken. Gnaz enfach, üfer dese Balken skaliert ihr das. Um das besser zu verstehen hier ein Video:

http://tinypic.com/r/2zxmich/6


Dann seit ihr fertig es geht super schnell und einfach und wie ihr de Boxen skaliert hab ich ja im Video gezeigt. Falls ihr dies nicht sehen könnt:



einfach einmal auf den Balken klicken (die Balken die ich meine sind die mit dem grünen Pfeil) und dann zum Rand fahren (rot markiert) und dann mit gedrückter Maus regulieren.(also da wo es rot markiert ist) wenn ihr die nächste scrollbox machen wollt, einfach einmal in die Box klicken und die 'Balken' für die neue Box werden angezeigt.

Und sorry hab vergessen beim aufnehmen des Videos meine Musik aus zu machen, aber ihr könnt ja auch stumm schalten



Hoffe es hat eich geholfen& viel Spaß beim coden, bei Fragen könnt ihr euch gerne an mich wenden. Falls es euch nicht geholfen hat sagt mir bitte warum

Hey,
echt ein super Tut habe es gleich ausprobiert, aber ich habe ein Problem (das ich auch mit jedem anderen tut von NVU habe) : Wenn ich meine ersten 1-2 Boxen verschiebe, dann rutschen die anderen an den unteren Rand. Wenn ich die aber verkleinere links dann werden die noch normal verkleinert, aber wenn ich dann links vergrößere dann fällt die Box ganz nach unten wieder und der Rand links zum vergrößern verschwindet... Ich weiss nicht wieso das so ist und ich verzweifle schon total :/ Ich hoffe du kannst mir da helfen

Lg

Ich hab es auprobiert, dieses Problem tritt auf wenn das </div> hinter dem grundcode steht und die Scrollboxencodes hinter dem </div> schau einfach ob da ein div ist, falls ja mach es weg, für die scrollboxencodes ein und dann wieder das </div> dranhängen.


/Edit: An alle, wenn ihr es nicht versteht, dann kann ich alles was ihr nicht versteht nochmal erklären, die Methode ist echt einfach und entspricht der Methode, die früher viele benutzt haben- die mozilla firefox methode! Das ist eigentlich das gleiche nur in NVU. Keine Angst ich beiss nicht und es ist echt nicht schwer, wirkt am Anfang evtl eher kompliziert, aber ist es nicht (:

hää welche Bildadresse ????

Die URL des Bildes. Findet man, indem man mit rechts draufklickt und dann auf Eigenschaften oder Grafik-Info oder etwas in der Art.