Layouts coden mit Firefox und Firebug oder mit Chrome

Zeig mir mal deinen Code vor und nach dem Speichern.

Hallo,

wie meinst Du nach dem Speichern?
Dann kann man ja nicht in den HTML Modus wechseln wenn man auf dem Profil ist.

Hier ist der Code:
<div style="display: inline; overflow: auto; float: left; margin-top: 243px; margin-left: 30px; height: 182px; width: 150px;">b5</div><div style="display: inline; overflow: auto; float: left; margin-top: 340px; margin-left: 57px; width: 212px; height: 130px;">b4</div><div style="display: inline; overflow: auto; float: left; margin-top: 20px; margin-left: 45px; height: 250px; width: 135px;">b3</div><div style="display: inline; overflow: auto; float: left; margin-top: 65px; margin-left: 45px; height: 155px; width: 157px;">b2</div><div style="display: inline; overflow: auto; float: left; height: 210px; width: 135px; margin-top: -230px; margin-left: 430px;">b1</div><div style="background: url(https://2img.net/h/oi40.tinypic.com/34j3c6b.png) no-repeat; width: 640px; height: 800px; "></div>

Sieht bei mir so aus (im Profil Bearbeiten Modus):


Nach dem Speichern sieht es allerdings so aus:


Die Srollboxen sind dann irgendwo, obwohl sie im Bearbeiten Modus richtig waren

LG

Heey
super Tut .. nur leider kann ich Firebug nicht runterladen, er lädt runter aber wenn ich F12 drücke üpassiert nichts .. was kann ich tun?
Lg

@Dragby6: Extras -> Web-Entwickler -> Firebug -> Firebug öffnen
Ich editier das mal in den ersten Beitrag mit rein.

@Rosi: Du musst die Boxen innerhalb des divs mit dem Hintergrundbild setzen. Sonst richten sie sich am äußeren Rahmen aus und der ist ist beim Bearbeiten und beim fertigen Layout anders.

Daaaaanke bei mir klappts.
LG Marjul

Hallo,

super Tutorial! Jetzt kann ich endlich mein Layout wieder coden, und zwar ohne NVU was 1) schwieriger ist (und ich nicht kann) und 2) länger dauert.

Hallo,

mit diesem TuT kann ich jetzt endlich wieder coden

Vielen Dank !

Anna162

Code:

<div style='background: url("http://www7.pic-upload.de/09.04.12/efk2f2xi4wk9.png") no-repeat; width: 550px; height: 900px;'>

<div style="border: 0px solid currentColor; width: 220px; height: 252px; overflow: auto; margin-top: 200px; margin-left: 25px; float: left; display: inline;">a</div>

<div style="border: 0px solid currentColor; width: 220px; height: 250px; overflow: auto; margin-top: 200px; margin-left: 65px; float: left; display: inline;">b</div>

<div style="border: 1px solid currentColor; width: 107px; height: 301px; overflow: auto; margin-top: 120px; margin-left: 25px; float: left; display: inline;">c</div>

<div style="border: 1px solid currentColor; width: 103px; height: 297px; overflow: auto; margin-top: 120px; margin-left: 25px; float: left; display: inline;">d</div>


</div>

wieso kann ich die boxen unten nich richtig plazieren? kannst du mir da mal helfen, cair?

Faszinierender Effekt. Du musst die beiden oberen Boxen auf eine Abschlusshöhe bringen. Also die zweite entweder 2px höher oder 2px margin drunter.

Hi,

super tut nur leider bin ich zu do*f die scrollis auf ihre plätze zu bringen

danke schön )
also ganz verschobene boxen sollt ich wohl besser nich machn^^

Hallo, erst mal der TUT ist echt cool!
Nur wenn ich fertig mit coden bin (hat alles gut geklappt), dann ist da so ein schwarzer Rand um meinen text rum. Kriegt man den irgendwie weg?

Ja, du musst die Eigenschaft border wegmachen. Also einfach nochmal mit Firebug auf den Kasten und dann rechts im Fenster border suchen und links neben dem Wort klicken, so dass es ausgegraut wird.

Cool, danke Cairlinn!
LG

Hey!
Ich mach das jetzt ganz mit chome und wenn man das mit dem F12 (also Firebug) machen soll kommt da zwar auch so ein Fenster, aber mit Elements, Resources, Network, Scripts, Timeline, Profiles, Audits und Console. Wie soll ich das da machen?
GLG

Du musst auf Elements und dann unten auf die Lupe. Die entspricht dem Pfeil in Firebug.

Kann man diie Kastenumrandungen auch löschen bzw. einfach nuur wegkriegen? o:

Oh Sorry, haab ich übersehn o: Daanke ♥

Huhu

Danke für die tolle Anleitung!
Hier ist das gecodete Lay:
Edit Admin: Keine Layouts mit ungültigem Copyright bitte.

Leider ist es um einiges aufwendiger als vorher, weiß jemand, warum Howrse den HTML-Code geändert hat?
LG Enno

Das Copyright ist hier ungültig: Brushes by (USERNAME) on (WEBSITE).com
Und die Seite heißt nicht devianart sondern deviantart

Ich hab das Layout mal rausgenommen. Bitte mach da einen richtigen Copyright-Hinweis drauf, bevor du es benutzt.

Das position-Attribut wurde verboten, weil manche damit (in der Reitzentrums-Präsentation) wohl Unfug mit gemacht haben.

Hallo,
danke dür die tolle Anleitung, aber leider funktioniert das bei mir nicht. Wenn ich die Präsentation speichere, dann wirds nicht angezeigt und wenn ich daraufgehe und es wieder speichern will, wird angezeigt, dass was im HTML Modus falsch ist. Bitte hilft mir und schreibt mir auf Howrse.

Login: Jessica3198

lg Jessica3198

Ohne deinen Code zu sehen, kann ich dir nicht helfen Ich könnte nur vermuten, dass du die URL oder die Größenangaben nicht richtig eingetragen hast oder dass du statt der URL einen kompletten HTML-Link (<a href...) genommen hast.

Das wäre der Code:

<div style='background: url("http://img5.fotos-hochladen.net/uploads/normal112sonn1hqycfdk9r.png") no-repeat; width: 850px; height: 600px;'><div style="border: 1px solid currentColor; width: 567px; height: 155px; overflow: auto; margin-top: 190px; margin-left: 275px; float: left; display: inline;"><p> </p><p><font color="#ffffff">Mein Name ist Jessica und ich bin 14 Jahre alt. Ich habe einen kleinen Bruder und einen Hund Namens Lucky. Ich liebe Animes und Tiere und zeichne gerne. Ich liebe die Bücher Elfenliebe, Elfenkuss, House of Night und Warrior Cats. Außerdem liebe ich RSs. Wer noch mehr Fragen hat, kann mach über PN anschreiben.</font></p><p><font color="#ffffff">Noch zu FAs: Ich nehme keine FAs an, mit denen ich nicht schon nach einer Zeit Nachrichten schreibe etc.</font></p></div><div style="border: 1px solid currentColor; width: 384px; height: 170px; overflow: auto; margin-top: 63px; margin-left: 42px; float: left; display: inline;"><p> </p><p><font color="#ffffff">Ich züchte leidenschaftlich Arabereinhörner. Sie tragen das Affix </font><font color="#ff0000">*★νση ∂єη ѕтєяηєη★* </font><font color="#ffffff">. Ich würde auch gerne eine ZG machen. Wer Interesse hat, soll sich per PN melden.</font></p></div><div style="border: 1px solid currentColor; width: 381px; height: 165px; overflow: auto; margin-top: 62px; margin-left: 38px; float: left; display: inline;"><p> </p><p><font color="#ffffff">Eigendlich sind fast</font><font color="#ffffff"> alle meine Pferde verkäuflich außer die Zuchten</font> <a href=" ><font color=" #ffd700?="">*νєя∂αммт göттℓι¢н*</a> &amp; <a href=" ><font color=" #ff0000?="">zυ¢нт *★νση ∂єη ѕтєяηєη★*</a> <font color="#ffffff">und manche aus</font> <a href=" ><font color=" #ff8100?="">GAs &amp; VGAs</a></p></div><div style="border: 1px solid currentColor; width: 355px; height: 110px; overflow: auto; margin-top: -544px; margin-left: 32px; float: left; display: inline;"><p> </p><p><font color="#ffffff">Seit kurzem felle ich auch. Meine Felle können in meinem Forum betrachtet werden.</font></p><p><font color="#ffffff"><strong><u>Meine Dienste:</u></strong></font></p><p><font color="#ffffff">Ich nache für euch Layouts, Blingees &amp; Felle. Natürlich möchte ich auch einen kleinen Lohn. Nicht viel aber. Bei Interesse, einfach eine PN schicken. Dann gebe ich euch eine Anmeldung.</font></p></div></div>