Designumsetzung content verlängern, navi nicht?

[maltehsv]

Hallo,

ich bin grad dabei eines meiner ersten Designs alleine umzusetzen. Ich arbeite mit divs. Nun ist das ja so, dass sich der content automatisch verlängert, wenn der Text länger ist. Bei folgendem Beispiel: Beispiel
soll aber nur der content (also in der mitte das) länger werden, die Navi allerdings NICHT. Wie kann ich das einstellen?
Hab schon stunden lang gegooglet und hier im Forum gesucht, allerdings nichts passendes gefunden. Eine feste Größe für das Hintergrundbild der Navi einzustellen hab ich schon probiert, funktioniert nicht.

Würd mich freuen, wenn jemand nen tipp hat.
lg maltehsv

[tomgk]

Hallo!

Mein Tipp: Die Navi und den Content nicht in eine Tabelle tun.

[maltehsv]

Hallo!

Mein Tipp: Die Navi und den Content nicht in eine Tabelle tun.

Ich arbeite nicht mit tabellen, nur mit divs. Oder hab cih dich falsch verstanden?

[tomgk]

Hallo!

Ich arbeite nicht mit tabellen, nur mit divs. Oder hab cih dich falsch verstanden?

Warum?
Hier im Quelltext sehe ich table-Tags!

MfG
tomgk

[maltehsv]

Hier im Quelltext sehe ich table-Tags!

Ja, das ist für die Grafiken, so aus Photoshop exportiert.

[suit]

Ja, das ist für die Grafiken, so aus Photoshop exportiert.

trotzdem ist es ungut gelöst

wenn du beim tabellen layout bleiben möchtest, kannst du noch mehr tabellen einfügen - wenn du ein css-basierendes layout mit "divs" (bzw semantisch vernünftigen code) daraus machst, ist dieser effekt geschenkt

es ist ein feature von tabellen, dass nebeneinanderliegende tabellenzellen die selben höhe haben - wäre das nicht so, wäre es ziemlich uncool - nachdem tabellen nicht zum layouten da sind, ist das aber idr kein problem

[maltehsv]

Ja, das ist für die Grafiken, so aus Photoshop exportiert.
trotzdem ist es ungut gelöst

wenn du beim tabellen layout bleiben möchtest, kannst du noch mehr tabellen einfügen - wenn du ein css-basierendes layout mit "divs" (bzw semantisch vernünftigen code) daraus machst, ist dieser effekt geschenkt

es ist ein feature von tabellen, dass nebeneinanderliegende tabellenzellen die selben höhe haben - wäre das nicht so, wäre es ziemlich uncool - nachdem tabellen nicht zum layouten da sind, ist das aber idr kein problem

Ah ok, jetzt verstehe ich. Ich muss also aus Photoshop nur die Bilder slicen und abspeichern und dann komplett mit div's positionieren anstatt das LAyout in html und bildenr ausgeben zu lassen?!

Wie gesagt, bin halt noch anfänger...

[suit]

Ah ok, jetzt verstehe ich. Ich muss also aus Photoshop nur die Bilder slicen und abspeichern und dann komplett mit div's positionieren anstatt das LAyout in html und bildenr ausgeben zu lassen?!

am besten verwendest du NICHT das slice-feature von photoshop sondern denkst selbst nach, wie du layout zerlegst ;)

Wie gesagt, bin halt noch anfänger...

das macht nix, jeder fängt mal irgendwo an

mach dir in erster linie eine vorstellung um den inhalt (ignoriere das design), dann beginne mit dem rest

das ganze sollte dann im grundstock etwa so aussehen (darum natürlich das <http://de.selfhtml.org/html/allgemein/grundgeruest.htm@title=html grundgerüst>) - oder noch besser: xhtml (am besten 1.0 strict ;))

<h1>Cachefrei.de</h1>  
<div id="inhalt">  
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elit ...</p>  
</div>  
<ul id="navigation">  
  <li>menu1  
    <ul>  
      <li>menüpunkt1</li>  
      <li>menüpunkt2</li>  
      <li>menüpunkt3</li>  
      <li>menüpunkt4</li>  
    </ul>  
  </li>  
  <li>menu2  
    <ul>  
      <li>menüpunkt1  
        <ul>  
          <li>menüpunkt12  
            <ul>  
              <li>menüpunkt123</li>  
            </ul>  
          </li>  
        </ul>  
      </li>  
    </ul>  
  </li>  
</ul>

für diesen grundlegenden code bindest du dann ein stylesheet ein und beginnst, die sache zu formatierieren

(das h1-element bekommt deine dicke headergrafik als hintergrund, der text wird ausgeblendet)

der inhalt floatet rechts, das menü dann rechts daneben

damit das ganze eine feste breite hat (für den anfang sollte es damit einfacher sein, als gleich ein flüssiges layout zu machen) bekommt das body-element noch eine entsprechende breite

um deinen inhaltsbereich zu formatieren, wirst du ggf noch ein paar zusätzliche elemente brauchen - aber wir wollen vorerst nichts überstürzen

wenn du die zeit hast, versuch mal obrigen vorschlag umzusetzen ;)

[maltehsv]

für diesen grundlegenden code bindest du dann ein stylesheet ein und beginnst, die sache zu formatierieren

(das h1-element bekommt deine dicke headergrafik als hintergrund, der text wird ausgeblendet)

der inhalt floatet rechts, das menü dann rechts daneben

damit das ganze eine feste breite hat (für den anfang sollte es damit einfacher sein, als gleich ein flüssiges layout zu machen) bekommt das body-element noch eine entsprechende breite

um deinen inhaltsbereich zu formatieren, wirst du ggf noch ein paar zusätzliche elemente brauchen - aber wir wollen vorerst nichts überstürzen

wenn du die zeit hast, versuch mal obrigen vorschlag umzusetzen ;)

Super! Danke für die Tipps, freut mich sehr. Genau sowas habe ich gebraucht =)... Ich werdds versuchen umzusetzen.

Danke
lg maltehsv

[maltehsv]

für diesen grundlegenden code bindest du dann ein stylesheet ein und beginnst, die sache zu formatierieren

(das h1-element bekommt deine dicke headergrafik als hintergrund, der text wird ausgeblendet)

der inhalt floatet rechts, das menü dann rechts daneben

damit das ganze eine feste breite hat (für den anfang sollte es damit einfacher sein, als gleich ein flüssiges layout zu machen) bekommt das body-element noch eine entsprechende breite

um deinen inhaltsbereich zu formatieren, wirst du ggf noch ein paar zusätzliche elemente brauchen - aber wir wollen vorerst nichts überstürzen

wenn du die zeit hast, versuch mal obrigen vorschlag umzusetzen ;)

Also, ich hab jetzt alles nur mit divs gemacht und dann als hintergrundgrafik die Bilder fstegelegt, die ich gesliced hab. Allerdings hab cih festgestellt, dass sich der divbereich nicht automatischv erlängert, wenn ich einen längeren Text eingebe. mit den tabellen hat das ja geklappt, aber wie mache ich das dann mit den Div's?

würd mcih über ne Antwort freuen.
lg maltehsv

[suit]

Also, ich hab jetzt alles nur mit divs gemacht und dann als hintergrundgrafik die Bilder fstegelegt, die ich gesliced hab.

ich hoffe das war jetzt nicht erst gemeint - _alles_ mit div-elementen auszuzeichnen ist mindestens genauso schlimm wie mit tabellen zuarbeiten ;) dein menü ist hoffe ich noch eine unsortierte liste :)

Allerdings hab cih festgestellt, dass sich der divbereich nicht automatischv erlängert, wenn ich einen längeren Text eingebe.

jedes element passt sich seinem inhalt an, wenn dies nicht irgendwie unterbunden wurde - wenn du deinen div-elementen eine feste höhe zuweist, wachsen sie zb nicht mit

mit den tabellen hat das ja geklappt, aber wie mache ich das dann mit den Div's?

kann man das online sehen, ich kann deinen ausführungen nicht folgen

[maltehsv]

ich hoffe das war jetzt nicht erst gemeint - _alles_ mit div-elementen auszuzeichnen ist mindestens genauso schlimm wie mit tabellen zuarbeiten ;) dein menü ist hoffe ich noch eine unsortierte liste :)

Wie soll man das sonst machen, vorher hatte ich ja Tabellen und Divs, da wurde auch gemeckert^^

jedes element passt sich seinem inhalt an, wenn dies nicht irgendwie unterbunden wurde - wenn du deinen div-elementen eine feste höhe zuweist, wachsen sie zb nicht mit

Stimmt, aber wenn ich keine feste Größe angebe, ist die Divebene nur eine zeile hoch und man sieht dementsprechend nur einen kleinen teil des Bildes.

kann man das online sehen, ich kann deinen ausführungen nicht folgen

Das alte mit den tabellen und divs
Da hat das verlängern geklappt, allerdings hat sich die Navi mit verlängert, wie man sieht.
Das neue nur mit divs
Da is das problem, das der Hintergrund nciht verlängert

lg maltehsv

[suit]

Wie soll man das sonst machen, vorher hatte ich ja Tabellen und Divs, da wurde auch gemeckert^^

ich sagte bereits: vernünftiges markup :D

Das neue nur mit divs
Da is das problem, das der Hintergrund nciht verlängert

naja, dein code ist "scheisse" ;) wie bereits erwähnt, es ist unklug alles mit "divs" zu machen - eine entsprechende html-vorlage hatte ich dir ja bereits gegeben

ich bin mal so frei und mach dir dafür einen css-schnipsel - aber ich muss jetzt erst mal kurz weg ;)

[suit]

ich bin mal so frei und mach dir dafür einen css-schnipsel - aber ich muss jetzt erst mal kurz weg ;)

so, ausgehen von meinem ursprünglichen vorschlag für deinen quelltext hab ich das hier gemacht
example1.html

wie du siehst, ist hier von design noch nichts zu sehen - lediglich struktur ist da (das wofür html gut ist) in einer imho klugen, logischen abfolge (wenn auch etwas unvollständig)

zu diesem zeitpunkt muss dir das design scheissegal sein - der inhalt muss gut "aussehen", ohne stylesheet muss die seite für einen benutzer bedienbar sein

der nächste schritt ist es, die strukturbildenden elemente in etwa so hinzurücken, wie es das layout erfordert - das geht fast immer ohne etwas im html zu verändern (auch in diesem fall)
siehe dazu example2.html - die strukturbildenden elemente sind in verschiedenen grautönen gefärbt, damit man die verschachtelung ansehen kann

mehr sollte man vorerst nicht machen, das ganze sollte natürlich von den abmessungen zum design passen, ab hier muss man also sein köpfchen anstrengen (mit zunehmender erfahrung immer weniger) zur arbeitserleichterung färbt man alles bunt ein - manche verwenden auch gepunktete rahmen (von denen rate ich allerdings ab, da sie im box-model zur breite des elements dazugerechnet werden - das könnte bei pixelgenauen layouts zu problemen führen, da man das auch wärenden dem testen immer bedenken muss)

wie du siehst hab ich noch kein weiteres element im html-quelltext hinzugefügt

wenn das soweit steht, kann man mit verschiedenen browsertests beginnen: pseudoinhalt rein und raus, viewport kleiner und größer machen, das ganze in verschiedenen browsern ansehen usw - wenn alles passt und das layout überall gleich aussieht (das ist in diesem stadium eigentlich bis auf die texte eigentlich problemlos möglich) kann man weiter zum nächsten schritt

jedes element bekommt jetzt hintergrundbilder:
example3.html diese sollten so gewählt werden, dass sie jedem element den hintergrund verpassen, den sie zum großteil haben werden (in der regel also sich widerholende hintergrundgrafiken) - ich hab mir dafür mal deine ausgeliehen, auch wenn diese für den zweck eigentlich z groß bemessen sind oder teilweise ungünstig ausgeschnitten wurde - wie gesagt, hier ist etwas nachdenken gefragt: du musst das layout sinnvoll zerschneiden, damit jedes element das richtige hintergrundbild bekommt

auch das wird wieder getestet (wie beim vorherigen schritt) um zu sehen was passiert, ob die verläufe alle bei unterschiedlichen größen passgenau sind (bei den von mir verwendeten grafiken aus deinem layout ist das natürlich nicht der fall - du musst drauf achten, dass es so wenig überlappungen wie möglich gibt und sich widerholende grafiken (wie zb der hintergrund des html-elements) so klein wie möglich sind und wirklich nahtlos aneinanderliegen können

im übrigen solltest du die bilder aufgrund ihrer selektoren benennen, da jedes element ohnehin nur ein hintergrunbild haben kann, ist das ein meiner erfahrung nach sehr effizentes systeme - das hintergrundbild von <body /> heisst also body.png - das hintergrundbild des divs mit der id "inhalt" heisst inhalt.png - usw

jedenfalls haben wir jetzt festgestellt, dass wir ein problem haben - die kästen selbst haben in deinem fall oben und unten auch einen rahmen (der aber nicht durch das sich widerholende hintergrundbild abgedeckt werden kann) bei flüssigen layouts kommt jetzt eine beliebige "runde ecken"-technik zum einsatz (sprich 4 ineinanderliegende elemente), in deinem fall reichen 2 weitere (da wir in summe nur 3 grafiken brauchen)

diese könnte man zwar mittels css als pseudo-element erzeugen, aber leider spielen da manche "browser mit blauem e im logo" nicht mit ;) - darum werden echte elemente eingefügt, wie in diesem beispiel:
example4.html

das sollte aber nur da gemacht werden, wo es wirklich notwendig ist und nicht, weil man sich nicht zu helfen weiss

im falle deiner navigation zb brauchst du keine elemente einfügen - du hast einerseits die 2 li-elemente aussen herum (die bekommen den oberen teil, wie in meinem beispiel), das darinliegende ul-element bekommt den unteren teil und die wiederum darinliegen li-elemente (also die eigentlichen menüpunkte) bekommen dann den sich widerholenden hintergrund (mit den gepunkteten strichen)

alternativ kannst du auch das äusserste li-element mit einem verlauf versorgen, das span-element (also die "überschrift" der ebene) so verwenden wie ich das im inhalt getan habe und das ul-element dann den unteren teil erledigen lassen - möglichkeiten gibts da mehrere

die beste vorgehensweise ist in den meisten fällen von aussen nach innen zu arbeiten bzw noch besser zuvor alle standardelemente zu formatiere (textabsätze, überschriften, listen usw)

so, und jetzt hoffe ich, dass du damit was anfangen kannst und ich nicht umsonst geschrieben habe :D

[maltehsv]

ich bin mal so frei und mach dir dafür einen css-schnipsel - aber ich muss jetzt erst mal kurz weg ;)

so, ausgehen von meinem ursprünglichen vorschlag für deinen quelltext hab ich das hier gemacht
example1.html

wie du siehst, ist hier von design noch nichts zu sehen - lediglich struktur ist da (das wofür html gut ist) in einer imho klugen, logischen abfolge (wenn auch etwas unvollständig)

zu diesem zeitpunkt muss dir das design scheissegal sein - der inhalt muss gut "aussehen", ohne stylesheet muss die seite für einen benutzer bedienbar sein

der nächste schritt ist es, die strukturbildenden elemente in etwa so hinzurücken, wie es das layout erfordert - das geht fast immer ohne etwas im html zu verändern (auch in diesem fall)
siehe dazu example2.html - die strukturbildenden elemente sind in verschiedenen grautönen gefärbt, damit man die verschachtelung ansehen kann

mehr sollte man vorerst nicht machen, das ganze sollte natürlich von den abmessungen zum design passen, ab hier muss man also sein köpfchen anstrengen (mit zunehmender erfahrung immer weniger) zur arbeitserleichterung färbt man alles bunt ein - manche verwenden auch gepunktete rahmen (von denen rate ich allerdings ab, da sie im box-model zur breite des elements dazugerechnet werden - das könnte bei pixelgenauen layouts zu problemen führen, da man das auch wärenden dem testen immer bedenken muss)

wie du siehst hab ich noch kein weiteres element im html-quelltext hinzugefügt

wenn das soweit steht, kann man mit verschiedenen browsertests beginnen: pseudoinhalt rein und raus, viewport kleiner und größer machen, das ganze in verschiedenen browsern ansehen usw - wenn alles passt und das layout überall gleich aussieht (das ist in diesem stadium eigentlich bis auf die texte eigentlich problemlos möglich) kann man weiter zum nächsten schritt

jedes element bekommt jetzt hintergrundbilder:
example3.html diese sollten so gewählt werden, dass sie jedem element den hintergrund verpassen, den sie zum großteil haben werden (in der regel also sich widerholende hintergrundgrafiken) - ich hab mir dafür mal deine ausgeliehen, auch wenn diese für den zweck eigentlich z groß bemessen sind oder teilweise ungünstig ausgeschnitten wurde - wie gesagt, hier ist etwas nachdenken gefragt: du musst das layout sinnvoll zerschneiden, damit jedes element das richtige hintergrundbild bekommt

auch das wird wieder getestet (wie beim vorherigen schritt) um zu sehen was passiert, ob die verläufe alle bei unterschiedlichen größen passgenau sind (bei den von mir verwendeten grafiken aus deinem layout ist das natürlich nicht der fall - du musst drauf achten, dass es so wenig überlappungen wie möglich gibt und sich widerholende grafiken (wie zb der hintergrund des html-elements) so klein wie möglich sind und wirklich nahtlos aneinanderliegen können

im übrigen solltest du die bilder aufgrund ihrer selektoren benennen, da jedes element ohnehin nur ein hintergrunbild haben kann, ist das ein meiner erfahrung nach sehr effizentes systeme - das hintergrundbild von <body /> heisst also body.png - das hintergrundbild des divs mit der id "inhalt" heisst inhalt.png - usw

jedenfalls haben wir jetzt festgestellt, dass wir ein problem haben - die kästen selbst haben in deinem fall oben und unten auch einen rahmen (der aber nicht durch das sich widerholende hintergrundbild abgedeckt werden kann) bei flüssigen layouts kommt jetzt eine beliebige "runde ecken"-technik zum einsatz (sprich 4 ineinanderliegende elemente), in deinem fall reichen 2 weitere (da wir in summe nur 3 grafiken brauchen)

diese könnte man zwar mittels css als pseudo-element erzeugen, aber leider spielen da manche "browser mit blauem e im logo" nicht mit ;) - darum werden echte elemente eingefügt, wie in diesem beispiel:
example4.html

das sollte aber nur da gemacht werden, wo es wirklich notwendig ist und nicht, weil man sich nicht zu helfen weiss

im falle deiner navigation zb brauchst du keine elemente einfügen - du hast einerseits die 2 li-elemente aussen herum (die bekommen den oberen teil, wie in meinem beispiel), das darinliegende ul-element bekommt den unteren teil und die wiederum darinliegen li-elemente (also die eigentlichen menüpunkte) bekommen dann den sich widerholenden hintergrund (mit den gepunkteten strichen)

alternativ kannst du auch das äusserste li-element mit einem verlauf versorgen, das span-element (also die "überschrift" der ebene) so verwenden wie ich das im inhalt getan habe und das ul-element dann den unteren teil erledigen lassen - möglichkeiten gibts da mehrere

die beste vorgehensweise ist in den meisten fällen von aussen nach innen zu arbeiten bzw noch besser zuvor alle standardelemente zu formatiere (textabsätze, überschriften, listen usw)

so, und jetzt hoffe ich, dass du damit was anfangen kannst und ich nicht umsonst geschrieben habe :D

Hi, erstmal danke, dass du dir soviel zeit dafür nimmst :)... da muss ich mir mal in Ruhe für zeit nehmen. Ich bin am wochenende erstmal nicht online, ich werds dann versuchen nächste Woche umzusetzen und melde mcih dann bei fragen nochmal =).

lg maltehsv