Grafik rechts repeaten lassen

  • Hiho Freunde der Nacht :P


    Ich habe nach laaanger Zeit mal wieder ein Problem, dass ich auch nicht mit google lösen kann.
    Die Seite an der ich gerade bastel soll so aussehen:
    <!-- m --><a class="postlink" href="http://img201.imageshack.us/f/layoutpk.jpg/">http://img201.imageshack.us/f/layoutpk.jpg/</a><!-- m -->


    Die farbigen Kästchen stellen halt die inhalte / unterteilung dar.


    Mein Html Code sieht so aus:


    und mein CSS Code so:



    Habe das Problem das die blaue box(rechts.jpg) sich an schwarz-grau(braune box) ranhaften soll und sich nach rechts immer wiederholen soll.
    Aber entweder sie heftet sich nach rechts oder zersprengt die seite das alles kreuz und quer liegt. Wäre soooowas von nett wenn ihr mir nen tipp
    oder eine lösung geben könntet :D
    wer ganz krass drauf ist und das nachbauen möchte/kann/will, die höhe breite stehen ja immer soweit drauf da muss man sich ja nur n viereck mit den maßen machhen :-p


    wie immer


    mfg


    Kazu :D

  • Sinnvoll wäre, wenn du die Box die "danach" kommt auch hinter die die zuerst kommt schreiben würdest. Dann mit float: left; und repeat-x ausstatten, dann sollte es wenn du sonst keinen Fehler drin hast funktionieren. Wichtig ist, dass du die Box ja nach links an die andere Box heranrücken willst, deshalb float: left;.


    Gruß
    Laura

  • ja sind mehrer bilder, der link wäre für die gewesen die sich die bilder ebeb speichern in nem ordner und jeweils den html / css code auch noch dort anlegen und in 2 min. sieht man welches problem ich habe :)=


    der code, den ich jetzt habe sieht so aus:


    HTML


    CSS


    Wenn ich halt die breite bei der id "rechts" veränder dann wiederholt sich die grafik auch dem entsprechend oft.
    Was halt mein Problem ist, ist das sich bei float:left oder dergleichen sich die grafik nicht nach links an das schwarz-graue feld ranhaftet (siehe link erster beitrag) sondern diese eben ignoriert und sich an die navi haftet :(
    und das ist das EINZIGE was ich nicht an dieser seite hinkriege >_>

  • Korrekt :D
    Man muss sich das mal bildlich vorstellen:


    Du hast sowas:

    Code
    |navi|
    |rechts|
    |inhalt|


    prinzipiell in deiner HTML stehen. Wenn du jetzt "rechts" floatest, geht das ding natürlich gegen die navi.
    drehst du das ganze um und floatest inhalt nach links und dann "rechts" hinterher, sollte es funktionieren :D


    Einen guten Start in den Tag,
    Laura


  • irgendwie ignoriert er halt immer noch den schwarz grauen hintergrund :(

  • Du hast es ja immer noch nicht getauscht...
    Das könnte höchstens an der Verzeichnisstruktur oder so liegen, aber da kann ich ja bei dir nicht reingucken. Die Bild-Datei müsste im gleichen Ordner wie deine HTML und CSS liegen, kontrollier mal den Dateinamen inklusive Dateiendung (es ist ein Unterschied zwischen jpg, JPG, jpeg und JPEG ;))


    Gruß
    Laura

  • also die dateien sind alle im selben ordner und so jpg ist auch richtig, das ist nicht das problem. könntest du den code oben denn mal kopieren, hier direkt wieder einfügen und einfach nur vertauschen?
    das ich mir selbst dieses projekt schon wieder aufgetragen habe >_> ist halt so nervig wenns das letzte puzzlestück ist was einen an der fertigen seite hindert ^^

  • Hä? Du musst doch einfach nur die beiden divs vertauschen... aus


    Code
    <div id="rechts"></div>
    <div id="inhalt">
    </div>


    wird halt


    Code
    <div id="inhalt">
    </div>
    <div id="rechts"></div>

    ,


    wo liegt jetzt das Problem?


    Gruß
    Laura

  • Das Problem ist, dass du nicht das gemacht hast, was man dir empfohlen hat:


    Inhalt und rechts waren immer noch nicht vertauscht.
    Inhalt war nicht links gefloatet.


    Ich habe dir das mal korrigiert, Dateien im Anhang.


    Gruß
    Laura

  • bei mir hatte ich es gemacht aber vll saß ich auch schon viel zu lange davor ich danke dir trotzdem :D
    jetzt hab ich das problem, dass sich die grafik nicht nach rechts repeatet außer ich änder dessen größe. Und wenn die zu groß wird legt sich
    der repeatende teil nach unten auf die seite. Ich brauche also einen befehl, der der grafik sacht "nach rechts kannste unendlich oft repeaten, zeige aber nur soviel an, wie der bildschirm breit ist". ich muss irgendwie sagen können das es nach rechts "unendlich" weitergeht weil momentan sieht die grafik da wohl eine barriere. hoffe mir kann da weitergeholfen werden ^^


    glg


    Kazu

  • Versuch es mal so:

    Code
    #rechts {
    	background:url(rechts.jpg) repeat-x;
    	height:642px;
    	width: auto;
    	margin:50px auto 0 952px;
    	}


    Ergebnis sieht bei mir so aus:[attachment=0]<!-- ia0 -->Kazu.jpg<!-- ia0 -->[/attachment]


    Zur Erklärung: Ich gebe dem Element eine automatische Breite und befehle ihm nicht mehr, dass es ganz links liegen muss.
    Die anderen Elemente liegen durch deren float:left Links. Der Linke Außenabstand kommt daher zu stande, dass das die Breite des Mainbrereiches und der der Navigation ist, damit es neben dran liegt :)


    PS: Bitte lagere doch alles aus O.o
    Besonders die Sache mit der Navi ist ehrlich gesagt eher "suboptimal" gelöst.. .__.
    Bin daher mal so "gütig" (und mir ist langweilig xD) und zeige dir, wie es besser geht (ohne ne Id, oder Class zu verwenden [außer für die Navi] :P ).
    Aus deinem Code mache ich folgendes:


    Vorteile meiner Methode:

    • Es ist ordentlicher
    • Die Performance ist deutlich besser
    • Es ist genauer Skalierbar
    • Auch Leute ohne aktivertes JavaScript sehen deine Seite so, wie leute mit aktiviertem JavaScript
    • Du kannst alles gleichzeitig ändern und musst dafür nur wenige Zeilen ändern und das auch nur ein mal (Bsp.: Du willst die Farbe des Hover-Effektes ädern, dann musst du dafür im CSS-Teil nur eine Farbe ersetzten)


    Bei Fragen zu dem Code, weißt du ja, wo du mich findest :)
    PPS: Ich habe "meinen neuen Code" getestet und das Ergebnis müsste Identisch mit deinem sein.

  • Also ich werde mir deinen Vorschlag auf jeden fall zu herzen nehmen und in ner ruhigen minute genauer anschauen damit ichs auch verstehe.
    Ansonsten hab ich dank deiner/eurer Hilfe das Problem endlich gelöst. :D
    Sitzt, wackelt und hat Luft sag ich mal ;)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!