wie würdet ihr das machen...

LRG · 16.03.2009

so hallo allerseits,

ich steh grad vor nem gewissen Problem, ich soll folgendes Layout umsetzen:

jetz hab ich als erstes dran gedacht, die DIV-Tags zu überlagern, mit z-Index geht das ja, nur bekomm ich sie dann nichtmehr "sauber" zentriert wie z.B. mit margin:auto...
denn ich muss die position ja als absolut angeben wenn mich ned alles täuscht und somit hängt mir das ganze layout wenn ichs überall stabil haben will oben links in der ecke...

nun meine frage, wie würdet ihr das machen ? einfach zb. durch das herz schneiden und den teil in der navi mitnehmen und unten wieder...nur verzieht es das dann nicht ? ich hab da angst das das nicht pixel auf pixel passt...

mir wär mit anregungen oder evtl. verbesserungen meiner idee sehr geholfen

vielen dank schonmal...

LRG

cebito · 16.03.2009

AW: wie würdet ihr das machen...

Wenn die absoluten dein einziges Problem sind. Bau einen container position:relative (ausgerichtet wo du willst) drumrum und dann kannst den Rest da drin absolute (ausgerichtet an deinem container) machen...

LRG · 16.03.2009

AW: wie würdet ihr das machen...

cebito schrieb:
Wenn die absoluten dein einziges Problem sind. Bau einen container position:relative (ausgerichtet wo du willst) drumrum und dann kannst den Rest da drin absolute (ausgerichtet an deinem container) machen...

klingt nach ner verdammt guten idee, werd ich nacher oder morgen gleich mal testen, wenns klappt, dankesehr für den tipp

lonelyhawk · 17.03.2009

AW: wie würdet ihr das machen...

das bild hat doch ne fixe größe? warum gibst du die standorte der divs obendrauf nicht normal mit margin an. das kannst du pixelgenau machen und es gibt keinen grund warum sich irgendetwas verschieben sollte...

<body style="background:#222222;">
<div style="width:1024px;height:768px;background:#000000 url('DEIN_BILD') no-repeat;">
<div style="margin:380px 0 0 500px;">
Hallo Welt
</div>
</div>

hab das css der einfachheit halber mal per style-attribut in die tags geschrieben...

LRG · 17.03.2009

AW: wie würdet ihr das machen...

lonelyhawk schrieb:
das bild hat doch ne fixe größe? warum gibst du die standorte der divs obendrauf nicht normal mit margin an. das kannst du pixelgenau machen und es gibt keinen grund warum sich irgendetwas verschieben sollte...

hab das css der einfachheit halber mal per style-attribut in die tags geschrieben...

du meinst also nicht mit z-index überlagern sondern untereinander die Div-tags, also ein teil des herzes noch im header mitgeschnitten, teil in der navi, teil unten und dann mit margin auf den pixel genau hinschieben ?...

muss ichs mal so probieren, wenn das gemeint war, weil mit der ersten lösung komm ich ned wirklich klar, ich leg nen div container drunter macht den relative aber mittig bekomm ich da gar nichts hin...vll bin ich auch nur zu doof den code an die richtige stelle zu setzen, ich post heut abend mal nen ausschnitt, falls bis dahin nicht geklärt

danke

LRG

lonelyhawk · 17.03.2009

AW: wie würdet ihr das machen...

LRG schrieb:
du meinst also nicht mit z-index überlagern sondern untereinander die Div-tags, also ein teil des herzes noch im header mitgeschnitten, teil in der navi, teil unten und dann mit margin auf den pixel genau hinschieben ?...

nicht ganz. ich meine, du kannst einen div-contaier in den hintergrund legen, als "untendrunter" jetzt im sinne von eine ebene dahinter... dem du das hintergrundbild gibst. und anschließend erstellst du in diesem div-container weitere div-container in denen der inhalt/das menü ist. also "obendrauf". dafür brauchst du kein z-index, da das umschließende div (mit dem hintergrund bild) eh im hintergrund bleibt. und eine relative oder absolute positionierung benötigst du auch nicht. sondern du kannst die div-container untereinander als bezugspunkte nehmen.

hier in diesem bsp mußt du nur "dein_bild" durch den pfad zu deinem bild erstezten und die datei dann aufrufen, und du wirst sehen, wie ich das meine.

HTML:

<body style="background:#222222;">

<div style="width:1024px;height:768px;background:#aaaaaa url('DEIN_BILD') no-repeat;">

  <div style="width:1024px; height:100px;margin:10px 0 0 100px;">
    Ich bin ein "Inhalts-Div" im headerbereich aber ich hab kein Hintergrundbild oder -Farbe. Das Hintergrundbild liegt im div-container unter mir!
  </div>

  <div style="margin:300px 0 0 400px;">
    Ich bin z.B. das horizontale menü, auch ich habe keinen Hintergrund.
  </div>

  <div style="margin:40px 0 0 400px;">

    <div style="float:left;height:100px;width:100px;margin-right:60px;">
      Ich bin eine gespaltene
    </div>

    <div style="height:100px;width:100px;">
      Persönlichkeit... ohne Hintergrund. Ich habe jetzt einen etwas längeren Inahlt, damit man sieht das an dieser Stelle zwei divs nebeneinander sind, falls das benötigt wird.
    </div>

  </div>

  <div style="margin:300px 0 0 400px;clear:left;">
    Ich bin der Footer, mir geht es hier unten ziemlich gut. Ach ja und ich habe auch keinen Hintergrund...
  </div>

</div>

vielleicht hilft das ja weiter...

LRG · 17.03.2009

AW: wie würdet ihr das machen...

lonelyhawk schrieb:
vielleicht hilft das ja weiter...

aufjedenfall, ich werds daheim mal testen, ich kann ja dann auch jedem div-tag der momentan keinen hintergrund hat einen hintergrund geben oder...

ansonsten müsst ich den background als ein bild machen also mit herz und navi leiste und die texte halt so anordnen das es so aussieht wie auf dem bild, weiß zwar nicht ob das so ein toller stil is :uhm:

ich werds daheim gleich mal testen, is ja gleich feierabend

danke dir schonmal recht herzlich

EDIT:

so ich habs mal probiert aber...ehm ja das ja ansich nichts wirklich neues

so würde ich nen layout normal aufbauen, div-tags untereinander...(von oben nach unten) aber ich bräuchte sie ja überlappend, wegen dem herz das ganz oben drauf is...sprich background, navi u. content und dann das herz und da gibts doch nur z-index dafür

oder eben ich mach das her und die navi leiste mit ins background bild und setz dann den text zurecht, is halt ned die beste/sauberste art zu arbeiten glaub oder ? weil ich dann ein fixes bild hab und nur transparente div-tags drüberleg...oder kann an das schon machen ?

danke nochmal

lonelyhawk · 17.03.2009

AW: wie würdet ihr das machen...

LRG schrieb:
oder eben ich mach das her und die navi leiste mit ins background bild und setz dann den text zurecht, is halt ned die beste/sauberste art zu arbeiten glaub oder ? weil ich dann ein fixes bild hab und nur transparente div-tags drüberleg...oder kann an das schon machen ?

danke nochmal

viele der grafisch etwas aufwändigeren seiten sind so programmiert. früher hat man das hintergrundbild in kleine teile zerhackt, damit die einzelbilder schneller geladen werden... aber das ist heut zum glück nicht mehr notwendig. ich sehe keinen grund, warum das 'unsauber' oder 'schlecht' sein soll, die seite so zu erstellen. ist standart. natürlich kann mans auch komplizierter machen...

LRG · 18.03.2009

AW: wie würdet ihr das machen...

lonelyhawk schrieb:
die seite so zu erstellen. ist standart. natürlich kann mans auch komplizierter machen...

ah okey, dann hab ichs mir bis jetzt meist schwerer gemacht als es hätte sein müssen, ich hab nämlich was ging (bzw. für mich sinn machte haha) in unterteilt

aber dann werd ich das mal so versuchen, danke dir vielmals

jackprince · 18.03.2009

AW: wie würdet ihr das machen...

LRG schrieb:
ah okey, dann hab ichs mir bis jetzt meist schwerer gemacht als es hätte sein müssen, ich hab nämlich was ging (bzw. für mich sinn machte haha) in unterteilt
aber dann werd ich das mal so versuchen, danke dir vielmals

Hast du nicht, weil es humbuck ist das als standart zu bezeichnen.

Was ist wenn ihr mal auf die Idee kommt das mehr Inhalt rein soll?
Soll sich dann einfach das Bild wiederholen?
Wie sieht das ganze bei unterschiedlich großen Bildschirmen aus?
Weißer Rand drumherum?
Was ist mit der Ladegewschwindigkeit? Auch in den Zeiten von DSL
ist Ladezeit = Geld ... hab ich im Netz meine Informationen nicht gleich,
such ich sie mir woanders.

Und das Layout ist nicht so schwer umzusetzen.
Bei bedarf zeig ich das mal ... aber jetzt geh ich duschen ^_^

LRG · 18.03.2009

AW: wie würdet ihr das machen...

jackprince schrieb:
Und das Layout ist nicht so schwer umzusetzen.
Bei bedarf zeig ich das mal ... aber jetzt geh ich duschen ^_^

Hier wär Bedarf, klingt nämlich einleuchtend, vorallem das mit dem längeren inhalt...
das weißer Rand drum herum is, wird wohl so sein ja weil ichs margin:auto setzen möcht und dann natürlich der 22" (wie zb hier) nen weißen rand hat...
stört aber nicht wirklich wenn ich vll nen schatten unter das ganze setz..

ich komm nämlich nicht wirklich weiter wenn ich die divs überlagern und mittig haben möcht, überlagern geht ja noch, siehe oben aber dann das der unterste mittig is und so spielchen :S

wobei der text nicht viel länger wird da der background ja fest is und ich den ned einfahc nach unten weitermachen kann da es kein einfarbiger oder nen muster ist...nur den orangen content zu verlängern seh auch bescheiden aus...

naja wie dem auch sei, wär verdammt cool wenn du das zeigen könntest

danke schonmal, LRG

jackprince · 18.03.2009

AW: wie würdet ihr das machen...

Ich werds mir heut abend mal zur brust nehmen

lonelyhawk · 19.03.2009

AW: wie würdet ihr das machen...

jackprince schrieb:
Hast du nicht, weil es humbuck ist das als standart zu bezeichnen.

Was ist wenn ihr mal auf die Idee kommt das mehr Inhalt rein soll?
Soll sich dann einfach das Bild wiederholen?

Wie sieht das ganze bei unterschiedlich großen Bildschirmen aus?
Weißer Rand drumherum?
Was ist mit der Ladegewschwindigkeit? Auch in den Zeiten von DSL
ist Ladezeit = Geld ... hab ich im Netz meine Informationen nicht gleich,
such ich sie mir woanders.

deswegen habe ich gefragt, ob das bild eine fixe größe haben soll...

das der hintergrund bei größerer auflösung auch mehr zu sehen ist, sollte klar sein. aber warum soll der hinergrund weiß sein? den sollte man natürlich an das bild/an die seite anpassen... oder willst du das bild je nach browsergröße ziehen...? das sieht bestimmt gut aus... :rolleyes:

und was den längeren inhalt angeht sollte es kein problem sein, ein - das obere html umschließenden - div zu nutzen, der den weiteren inhalt darstellt... natürlich wieder mit einem definierten hintergrund. aber wie das bild schon vermuten ließ, und es jetzt der themenersteller auch bestätigt hat, soll der inhalt ja vorerst auch gar nicht länger werden...

wobei der text nicht viel länger wird da der background ja fest is und ich den ned einfahc nach unten weitermachen kann da es kein einfarbiger oder nen muster ist...nur den orangen content zu verlängern seh auch bescheiden aus...

jackprince schrieb:
Und das Layout ist nicht so schwer umzusetzen.

stimmt. und es gibt dafür viele wege...

jackprince schrieb:
Bei bedarf zeig ich das mal ...

bin gespannt, wie du das fixe bild dem längeren inhalt anpassen willst.

und wo vor allem dann der unterschied zu meinem aufbau ist.

btw: insgesamt betrachtet benötigt eine seite mit mehreren kleineren bildern eine längere ladzeit als ein großes. man nutzt(e) die 'zerhack'-technik nur, damit der nutzer schon mal was sieht, bis dann irgendwann alle bilder geladen wurden. mit nem 28kbit modem hat man da für ein 300kb bild ne weile gewartet. heute ist das in einer sekunde geladen, egal ob zerhackt oder komplett.

kannst du selbst gern testen. nimm ein großes bild, mach kleine teile daraus, (gleiche komprimierungstufe) und schau mal wieviel speicherplatz das große und wieviel speicherplatz die kleinen zusammen benötigen. davon abgesehen belasten mehrere anfragen (wegen vieler kleinen bilder) den server mehr als eine anfrage wegen des großen bildes... natürlich sind diese unterschiede nicht gigantisch. aber die ladezeit ist definitiv kein kriterium gegen komplette hintergründe.

LRG · 19.03.2009

AW: wie würdet ihr das machen...

also ich hab mich jetz einfach mal rangemacht, den background schon fertig mit herz und navi leiste zu bearbeiten...
bis jetzt hat das auch gut geklappt...der text kann bzw. sollte zumindest nicht länger werden da ich das bild nicht einfach größer machen kann an der seite, also können schon nur müsst ich dann selbst was hinwurschtln und dann noch so das ichs repeaten kann etc. etc. kennt das ja...

also das layout besteht sowieso aus ziemlich vielen bildern, den text bekomm ich per css ja nicht schräg gestellt und da die das möchten werd ich den, sowie die flyer jeweils als eigenes bild einfügen und schrägstellen...
zwar alles andere als suchmaschinenoptimiert aber naja...

ich denk es werden bestimmt noch nen paar fragen zu der seite kommen, denn ich muss in diesen kleinen content da unten noch eine galerie reinquetschen, da werd ich wohl auf flash gehen oder ? also eine flash app da rein und da "gleitet" man dann von galerie zu galerie und kann die bilder groß machen...was anderes viel mir spontan nicht ein...

und ein musikplayer soll auch noch drauf, ich halt da nicht viel davon aber für ne club-seite, naja kunde is könig

jackprince · 19.03.2009

AW: wie würdet ihr das machen...

Hab leider im moment noch mit einer Immobilien Seite zu schafen, da müssen neue
Datenbank/Forumlar Felder zu den Immobilien, und das dauert leider etwas.