Layouts coden mit Firefox und Firebug oder mit Chrome

Für dieses Tutorial braucht ihr Firefox und die Erweiterung Firebug oder Chrome. Die Sceenshots zeigen Firefox, mit Chrome sieht es aber sehr ähnlich aus.

Geht auf eure Seite und klickt auf den Stift um es zu bearbeiteb und danach auf HTML-Modus.
Kopiert dann folgenden Code in das Textfenster:

Code:

<div style="background: url(#URL#) no-repeat; width: #Breite#px; height: #Höhe#px; ">

Ersetze #URL# durch die Adresse deines Hintergrundbildes (damit ist der Direktlink gemeint, der mit http anfängt und mit .jpg, .png oder .gif aufhört) sowie #Höhe# und #Breite# durch die entsprechenden Abmessungen eures Layouts. Achte darauf, dass du auch die # ersetzt, nicht nur das Wort.
Bei meinem Layout erhalte ich so folgenden Code: <div style="background: url(https://2img.net/r/ihimizer/img11/6464/layout1o.jpg) no-repeat; width: 557px; height: 700px;">

Danach kommt der Code für die einzelnen Scrollboxen. Für jede gewünschte Box musst du folgenden Code einfügen:

Code:

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

Und zum Schluss setze noch dies darunter.

Code:

</div>

Klicke dann wieder auf Normalmodus.

Du siehst jetzt dein Layout und nebeneinander aufgereiht die Boxen.

Um diese jetzt an die richtige Stelle zu bekommen, öffne Firebug, indem du F12 drückst. Du kannst es auch über
Extras -> Web-Entwickler -> Firebug -> Firebug öffnen
aktivieren, wenn F12 nicht funktioniert.
Klicke auf das Symbol mit dem blauen Pfeil und fahre dann mit der Maus über die erste Textbox. Wenn sie blau leuchtet, klicke darauf.

Rechts siehst du nun die Eigenschaften dieser Box. Klicke auf die Zahl neben margin-top und erhöhe oder erniedrige sie mit den Pfeiltasten deiner Tastatur. Mache das selbe mit der Zahl hinter margin-left, bis die obere linke Ecke der Box da ist, wo sie hin soll.
Verfahre danach genauso mit den Werten für width und height, um die Größe der Box zu ändern.
Gehe, wenn du mit der Positionierung der Box fertig bist, mit der Maus über den Wert border bei den Eigenschaften und dann ein kleines Stück nach links. Du solltest dort jetzt einen grauen durchgestrichenen Kreis sehen. Klicke ihn an und der Rahmen der Box verschwindet.

Wiederhole dies mit den anderen Boxen.

Um eure Boxen mit Text zu füllen, müsst ihr dann nur noch das b (ohne vorher Firebug zu benutzen) anklicken.

Kann man also nicht die Textboxen verschoben haben? Also müssen die Textboxen jetzt immer in einer Reihe sein?
lg
coole-maus

Doch, du kannst sie verschieben. Eben mit dem margin. Man muss nur von oben links nach unten rechts mit dem Platzieren anfangen.

Ich kenne das von der alten Version!

Hab es verbessert!

Und jetzt bitte nochmal auf deutsch...

Danke für die super Anleitung!
Bei mir klappt es endlich.

Vielen lieben Dank für das Tutorial, damit hats bei mir auch geklappt (l)

Endlich, mein Layout funktioniert wieder.

*Dickes fettes megaknuddel* Du hast mir echt super geholfen. Danke. (:

hi!

Bei mir funktioniert es nicht... Das bei margin-top geht, aber bei margin-left schiebt es das ganze Feld und nicht nur eine Seite... An was kann das liegen?

Danke.

glg

hmm..mach mal ein Screen..vielleicht weiß man dann mehr. Aber vielleicht wissen die anrden woran das liegt
lg

Okay, also am Anfang ist es ja so:



Dann verschiebe ich die 1. Box (margin-top):



Dann mit margin-left, was aber die ganze Box verschiebt:



Anfangs ging es noch, aber da habe ich den letzten Schritt mit dem Text falsch gemacht, und als ich es nochmals versucht habe, gings nicht mehr...

glg und danke

Von wo bekommt ihr alle Firebug? Habs schon aber es funktioniert nicht!!!!!!!

@Thea: Hast du es denn schon installiert, also über den Link oben?

ja

Hey, bei mir funktionierts auch nicht, ich sehe nichtmal mein Layout :/ obwohl ich den ganzen code eingefügt habe..

Also an bones:

Das margin left ist dazu da die ganze box zu veschieben. Mit width kannst du sie breiter machen oder schmaler. Und mit height machst du sie länglicher

Ich hoffe du verstehst wie ichs meine
lg

EDIT:

Hab den Fehler editiert Ich hoffe es war trotzdem verständlich..

Okay,. danke Satnd wohl echt auf der Leitung

Das heißt width (Breite) und height (Höhe), nicht wide (breit) und high (hoch)

"Geht nicht" ist übrigens keine Fehlerbeschreibung. Wenn ihr nicht sagt, was ihr macht und was nicht so ist, wie erwartet, kann auch keiner helfen. Hellsehen können wir hier nicht.

Huhu,
was mache ich, damit meine Scrolli Umrandung schwarz und nicht grün ist?
Bitte helft mir.
LG

Ersetze

Code:

border: 1px solid

durch

Code:

border: 1px solid #000000

Ich hab die Farbe nicht mit angegeben, weil der Rahmen ja eigentlich wieder weg soll und dann nimmt er die Schriftfarbe an.

Okay, danke.

Sorry Cairlinn. Also, ich habe die Codes und so alle eingefügt, den Link zu meinem Layout auch, Größe und Breite auch, dann habe ich mir die Präsi angeguckt und man sah das Layout nicht im Hintergrund, man sah nur Scrollboxen, ganz unten am Rand..

Ohne Code kann ich nur Vermutungen anstellen Hast du vielleicht nicht den Direktlink genommen?

Hallo,
hat super funktioniert.
Danke Cairlinn für die Anleitung,
ging alles problemlos und flink
und mit den Screenshots war es auch sehr gut verständlich.
Hat mich direkt an meine Informatikstunden
zu meiner Schulzeit erinnert.
Freundliche Grüße.

Hallo,
ich habe einen Layptop und auf dem ist die Steuerung so, dass der WLAN deaktiviert wird, wenn ich auf die F12 drücke.
Was soll ich jetzt machen?

LG Katipanfunia