(Beginner)Probleme beim Layout

[m@yaman]

Hallo zusammen

,

Ich hab da ein kleines Problem mit meiner Seite und hoffe das ich diesbezueglich hier Erleuchtung finden werde.


lange Vorgeschichte:
Fuer meine Bewerbung als Grafiker ist die erstellte Grafik natuerlich das was zaehlt. Da Bilder und Videos nicht so dolle fuer den email-Verkehr sind, wollte ich (wie es auch ueblich ist-) eine eigene Seite haben um mein Portfolio zu praesentieren. Um maximale Erreichbarkeit zu gewaehrleisten wollte ich diese nur mit html und css erstellen.

Das ganze sollte dann so aussehen das einmal links der Objektname steht und danach eine Reihe (oder 2, je nachdem) die jeweiligen Images dazu mit einem duennen Rand.

Das hat nach 3 Tagen fuer die erste Reihe auch einigermassen geklappt, nur hab ich gestern beim rueckgaengigmachen zum falschen Zeitpunkt gespeichert, dann kam noch nach den Undo's was ganz anderes raus als vorher war, der Editor ist abgestuerzt und dann hatte ich nur noch Schrott.

Damit mir das gleiche nicht nochmal passiert wollte ich nach Tipps und Moeglichkeiten Fragen wie ich das realisieren kann.


Kurze Frage:
Wie bekomme ich das angehangene Layout hin. Ich hab da wohl einige Probleme was das Positionieren angeht. Wenn ich was aendere fliegt alles kreuz und quer, fuer mich nicht nachvollziehbar.



Vielen Dank fuers vorbeischauen

 

[XraYSoLo]

tja, das WIE ist schnell mit CSS beantwortet, musste eben lernen. aber ich kann dich beruhigen, der lernaufwand dafür ist nicht sonderlich groß. in 'nem monat hast du das drin.

Nils aka XraYSoLo

 

[m@yaman]

Hehe, dabei bin ich ja aber ich befuerchte das ein Monat doch etwas lange ist.
Sicher werde ich, wenn diese Rohseite steht weitermachen und das ganze ausbauen. Aber vielleicht sollte ich einfach was konkreter Fragen.

Beispiel heute:






Das erste Bild zeigt die Darstellung im Editor und das 2te die Darstellung im FF.

Eigentlich wollte ich das eher so, das das der Rand horizontal zentriert zum Text steht und das Image halt komplett zentriert zum Rand.

Der Code schaut dann so aus:

    <div class="row1"> 
        <p style="float:left;">Druide
        <div class="ImageBorder" style="text-align:center; top:50px;">
        <img src="images/small/druide_0001.png"/>
        </div></p>
  </div>

und dann noch die Klassen:

.row1 {
    left:70px;
    top:50px;
    position:relative;
    }

.ImageBorder {
    width:200px;
    height:200px;
    border:dotted #666;
    }

(Thumbnails haben 160px size)

Das div.ImageBorder reagiert nicht auf meine top-left-Angaben und ist auch nicht zentriert. Kann ich mich auf den Kopp stellen. Und vor allem stoert mich, das mir was ganz anderes angezeigt wird als wirklich rauskommt. Wenn ich wuesste woran es liegt, wuerde ich danach suchen, aber mir fehlen da die entsprechenden Schlagwoerter.


Ps: es gibt badische und unsymbadische.

 

[XraYSoLo]

ich kenn' deinen code nicht, aber jag' deine seite mal durch den validator und korrigiere jeden fehler, der auftritt, dann sollte es in jedem browser gleich aussehen.

Nils aka XraYSoLo

 

[prm]

Sieh dir mal hier das Beispiel 5 an: Text zu Bildern anordnen

Die Border-Angaben mach mal so:

border:1px dotted #666;

Ansonsten ist ein Link zur Seite immer hilfreicher als die Grafik, damit man alles im Zusammenhang sieht.

 

[m@yaman]

Soo, nach einigen gemurkse bin ich wieder hier angekommen.

Ueber den Validator bin ich schon mal gestolpert, ist aber dann wieder in Vergessenheit geraten. Danke das du mich nochmal drauf hingewiesen hast.

Beim Link ist das positionieren sehr gut erklaert. Mit dem hier (Learn CSS Positioning in Ten Steps: position static relative absolute float ) so ziemlich das beste was ich zu dem Thema bis jetzt gefunden habe. Auch dir vielen Dank.

Bloss...sprunghaft wie ich bin hab ich mich dann doch dafuer entschieden das Layout komplett ueber den Haufen zu werfen als ich eine nette Vorlage entdeckt habe. Noch ein paar Kleinigkeiten aendern und dann steht sie.

mayaman.gotdns.org (mein erstes Layout, nicht weitergemacht) mayaman.gotdns.org (und hier das neue, (noch Imagegroesse anpassen und den roten Hintergrund weg und durch den Validator muss der auch noch))

Ansonst Comments&Critiques welcome ;ugl