Auf dieser Seite wollen wir euch Tutorials zeigen, die euch helfen zu grafiken.
 
StartseiteFAQSuchenMitgliederAnmeldenLogin

Teilen | 
 

 Layouts Coden

Nach unten 
AutorNachricht
Cairlinn



Howrse Name : Cairlinn
Anzahl der Beiträge : 3
Mein Rang : 1
Anmeldedatum : 24.04.12

BeitragThema: Layouts Coden    Di 24 Apr 2012 - 18:53

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 (Schau dir unten das 1. Kommentar an, falls du es mit Chrome machen willst!)

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:
Code:
<div style="background: url(http://img11.imageshack.us/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">c</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 c (ohne vorher Firebug zu benutzen) anklicken.
Nach oben Nach unten
Benutzerprofil anzeigen
coole-maus
Admin
avatar

Howrse Name : coole-maus
Anzahl der Beiträge : 288
Mein Rang : 28
Anmeldedatum : 02.04.12
Alter : 20

BeitragThema: Re: Layouts Coden    Mi 25 Apr 2012 - 15:32

Für Chrome

Du brauchst lediglich auf F12 zu drücken und dann öffnen sich ein Fenster was so aussehen soll. (Der Text in der Mitte ist immer anders!!!)



Wenn du auf den Pfeil klickst, den ich rot umkreist habe und auf den ein grüner Pfeil zeigt, kannst du die Textboxen ändern, dazu schau wieder oben!


glg



(Danke das du das Tut hier reingestellt hast! Smile )
Nach oben Nach unten
Benutzerprofil anzeigen http://www.howrse.de/joueur/fiche/?id=3514836
 
Layouts Coden
Nach oben 
Seite 1 von 1
 Ähnliche Themen
-
» Layouts coden mit Firefox und Firebug oder mit Chrome
» Layouts coden
» [TUT]: Layouts coden mit NVU
» Layouts Coden mit NVU (Auch für Verschobene Scrollboxen)
» Layout erstellen mit Gimp (mit Coden!)

Befugnisse in diesem ForumSie können in diesem Forum nicht antworten
Grafik-Welt :: Grafikschule :: Tutorials-
Gehe zu: