nicht angemeldet
element soll seine höhe anpassen
<obligatorische begrüssung>
hallo liebes forumteilnehmer.
heute ist ein toller tag. was habt ihr denn so für hobbys?
ich hoffe es geht euch super!
</obligatorische begrüssung>
;)
ein element soll seine höhe automatisch anpassen, je nach gerade verfügbarem platz.
seht am besten selbst, wie es nicht aussehen soll:
<img src="http://www.volk-marketing.de/test/1404/bild.gif" border="0" alt="">
der graue balken oben sollte im idealfall ganz nach unten reichen, wird die schrift aber vom user zu gross eingestellt, entsteht unten eine weisse fläche, dadurch, dass sich das element eben _nicht_ bis ganz nach unten ausbreitet.
----------------------------------------------------------------
spiel etwas mit den textgrösseneinstellung auf dieser seite rum:
http://www.volk-marketing.de/test/1404/test.htm
das ist es life zu sehen!
----------------------------------------------------------------
mit höhenangaben wie 100% etc habe ich schon herumgespielt. ist meineserachtens aber unsinnig, da sich die prozentuale höhenangabe nur auf das sichtbare browserfenster bezieht. der graue balken kann nun aber grösser (=höher) sein als der verfügbare (sichtbare) platz. nur mehr als 100% sind dann ja unsinnig.
vielleicht habe ich da auch einen fatalen denkfehler...
mit automatischen höhenwerten klappt es ledier auch nciht so ganz...
jemand ne idee?
-
<obligatorische begrüssung>
<text> TACH! </text>
<zusatz> ;) </zusatz></obligatorische begrüssung>
Da sich die Seite mit einer Höhe von mehr als 100% aufbaut, wirst Du sicher einem Element diesen Wert auch zugewiesen haben (ich habe mir den Quellcode nicht angesehen).
Eine mögliche Lösung könnte sein, ein <div> zu verwenden, was alle anderen Layout-Elemente der linken Hälfte enthält:
<body>
<div style="float:left;width:200px;height:100%">
<div style="background:green"> </div>
<div>Join our free Email Newsletter:</div>
[...]
</div>Gruß aus Berlin!
eddi-
<obligatorische begrüssung>
<text> TACH! </text>
<zusatz> ;) </zusatz>
</obligatorische begrüssung>=)
Da sich die Seite mit einer Höhe von mehr als 100% aufbaut, wirst Du sicher einem Element diesen Wert auch zugewiesen haben (ich habe mir den Quellcode nicht angesehen).
der #content bereich richtet sich an die grösse des inhalts. die bar richtet sich auch an die grösse des inhalts, soll sich aber auf den vorhandenen platz ausdehnen (ich habe den quellcode geschrieben).
Eine mögliche Lösung könnte sein, ein <div> zu verwenden, was alle anderen Layout-Elemente der linken Hälfte enthält:
<body>
<div style="float:left;width:200px;height:100%">
<div style="background:green"> </div>
<div>Join our free Email Newsletter:</div>
[...]
</div><div id="bar">
<div id="weiss"> </div>
<div id="newsletterbox" class="center"></div>
<div id="ad"></div>
<div id="sescoi"></div>
</div><!-- bar ende -->#bar {
width:209px; /*box model hack reinmachen*/
height:100%;
/*top:0px;
left:0px;*/
background-color:#E5E5E5;
z-index:10;
float:left;
margin-right:65px;
border:0px solid blue;
}ganz ohnhe höhe attribut gehts auch nicht
Gruß aus Berlin!
eddigruss aus hessen :D
-
<obligatorische begrüssung>
<text> TACH! </text>
<zusatz> ;) </zusatz>
</obligatorische begrüssung>=)
(ich habe den quellcode geschrieben).
Und ich habe ihn mir jetzt auch mal angesehen ;). Leider ist das Layout in insgesamt drei Dateien unterteil :(
Nichts desto Trotz ist der xhtml-Code doch ein wenig aufschlußreicher.|--------|---------------------------------|
| | |
| | #header |
| | |
| |---------------------------------|
| | |
| | |
| | |
| #bar | #content |
| | |
| | |
| | |
| | |
| | |
|--------|---------------------------------|So sollte die Konstruktion aussehen. Dann ist auch gesichert, das #bar zu #content unabhängin in der Höhe ist. Damit Du den grünen Balken auch in #bar bekommst, kannst Du ja einfach noch eine <div> mit den gleichen css-Eigenschaften einfügen.
Also nochmal:
<body>
<div id="bar" style="float:left;width:200px;height:100%">
[...]
</div>Gruß aus Berlin!
eddi-
Leider ist das Layout in insgesamt drei Dateien unterteil :(
nein. das layout ist in layout.css
alle schriftsacehn sind in schrift.css
und die navigation steckt in navigation.cssNichts desto Trotz ist der xhtml-Code doch ein wenig aufschlußreicher.
aha (?)
|--------|---------------------------------|
| | |
| | #header |
| | |
| |---------------------------------|
| | |
| | |
| | |
| #bar | #content |
| | |
| | |
| | |
| | |
| | |
|--------|---------------------------------|So sollte die Konstruktion aussehen. Dann ist auch gesichert, das #bar zu #content unabhängin in der Höhe ist.
so sieht doch die konsturktion aus!
:D
weil sie so aussieht und nciht funktioienrt stelle ich ja hier die frage!header ist nen fest positioniert. content vergrösserst sich nachdem inhalt und bar soll sich bis nach unten erstrecken. wenn content aber gröser ist als ein bildschirm schlisst bar nicht mehr unten am #footer ab!
es entsteht ja dann diese weisse fläche!
»»Damit Du den grünen Balken auch in #bar bekommst, kannst Du ja einfach noch eine <div> mit den gleichen css-Eigenschaften einfügen.
weiss nicht was du meinst.
Also nochmal:
<body>
<div id="bar" style="float:left;width:200px;height:100%">
[...]
</div>ja so ist es doch?!?
kann sein, dass ich dich flasch verstanden habe.
markus
-
Re:
|--------|---------------------------------|
| | |
| | #header |
| | |
| |---------------------------------|
| | |
| | |
| | |
| #bar | #content |
| | |
| | |
| | |
| | |So sollte die Konstruktion aussehen. Dann ist auch gesichert, das #bar zu #content unabhängin in der Höhe ist.
so sieht doch die konsturktion aus!
- dann gönne doch mal #header noch "border:5px solid red" und staune!
weil sie so aussieht und nciht funktioienrt stelle ich ja hier die frage!
Nein; weil Du Antworten erst gar nicht versuchst zu verstehen!
header ist nen fest positioniert.
Na dann kann ich sicherlich nicht lesen und habe position:* übersehen...
... mehr unten am #footer ab!
demnach muß also auch #footer auch noch vom float "verschoben" werden
es entsteht ja dann diese weisse fläche!
man kann machen, was man will, sie bleibt immer 220px hoch - stimmts? BTW rechne doch mal alle margin-[top/bottom], padding-[top/bottom] und height zusammen und staune nochmal!
Damit Du den grünen Balken auch in #bar bekommst, kannst Du ja einfach noch eine <div> mit den gleichen css-Eigenschaften einfügen.
weiss nicht was du meinst.
#header
Also nochmal:
<body>
<div id="bar" style="float:left;width:200px;height:100%">
[...]
</div>Ist Dir vielleicht schon mal aufgefallen, daß bei mir #bar DIREKT nach dem body-Tag kommt?
kann sein, dass ich dich flasch verstanden habe.
Mordillo: "Ohne Worte" ( <- im Übrigen ein geniales Meisterstück!)
So und jetzt noch einen guten Link für das recherchieren von CSS:
http://selfhtml.teamone.de/css/index.htm alles weitere ist im Archiv auffindbar. Mehr an Hilfe kann ich nicht mehr geben, denn es hat mir einmal mehr gezeigt, wie unnötig man sich mühen kann, für Leute die unsensibel ihrer Meinung harren.
Noch was für's Leben:Kenne das Große, aber wisse dem Kleinen!
So - und jetzt kann ich Dir wieder sanfte Grüße versichern!
eddi-
Re:
|--------|---------------------------------|
| | |
| | #header |
| | |
| |---------------------------------|
| | |
| | |
| | |
| #bar | #content |
| | |
| | |
| | |
| | |So sollte die Konstruktion aussehen. Dann ist auch gesichert, das #bar zu #content unabhängin in der Höhe ist.
- dann gönne doch mal #header noch "border:5px solid red" und staune!
ok sie sieht so aus:
|------------------------------------------|
| #header |
| |
|-----------|------------------------------|
| | |
| | |
| | |
| | |
| | |
| #bar | #content |
| | |
| | |
| | |
| | |
| | |
| | |#footer ------------------------------------------ header ist nen fest positioniert.
Na dann kann ich sicherlich nicht lesen und habe position:* übersehen...
#header {
top:0px;
left:0px;
width:100%;
line-height:normal;
background:#00A079 url("navi_bg.gif") repeat-x bottom;
z-index:20;
border: 5px solid yellow;
}in navigation.css
du hast recht. position:absolute habe ich nicht drin, da es mir sonst meine ganzen inhalte zerreisen würde (wären ja dann "darunter").
trotz suche in selfhtml habe ich die betreffende stelle nicht gefunden, die sagt, dass ich top und left nciht ausgewertet werden, wenn ich keine positionierungsart angegeben habe.
ist auch nciht weiter schlimm, da alle browser die seite, so wie sie ist korrekt anzeigen (IE; netscape, opera, firefox)
<pose>nebenbei ist es komplett valides Xhtml</pose>
meine frage bezeiht sich nur noch auf einen kleinen anzeigefehler, der eigetnlich nciht weiter schlimm währe, mich aber von der lösung her reizt, denn anscheinend mache ich dort einen denkfehler den mir bis jetzt niemand austreiben konnte.
... mehr unten am #footer ab!
demnach muß also auch #footer auch noch vom float "verschoben" werden
das bedeutet es gibt keine möglichkeit #bar zu sagen "nimm dir soviel platz du kriegen kannst, zwischen #header und #footer"?
ich möchte ja eben nicht, dass die #bar _alles_ wegfloatet. sie soll ja eben nur links des inhaltsbereiches stehen.
wenn ich alles umfloaten lasse, müsste ich praktisch #header und #footer in #bar nochmal kurz faken damit ich die komplette horizontale linie bekomme. das erscheint mir nicht nur umständlich, sondern auch gegen die logik von css zu sprechen.
(womit ich nciht sagen möchte, dass es nciht machbar ist, sondern dass ja gerade durch verwendung von css man von einem logischen aufbau profitiert.)
es entsteht ja dann diese weisse fläche!
man kann machen, was man will, sie bleibt immer 220px hoch - stimmts? BTW rechne doch mal alle margin-[top/bottom], padding-[top/bottom] und height zusammen und staune nochmal!
??? nein.
die weisse fläche wird grösser oder kleiner je nachdem wieviel platz der text in #content einnimmt.was du mit 220px meinen könntest wäre
#weiss{
background-color:#FFF;
display:block;
height:220px;
}das ist die weisse fläche am kopf von #bar. das ist so gewollt.
#bar hat ein margin-left von 65px was zusammen mit padding einen richtigen seitenabstand für den inhalt des #contents ergibt. andere margin top/bottom sind zum beispiel innerhalb von #bar, um dort die kleinen abstände zwischen den elementen zu erzeugen.
meinst du die?
und wenn ja was haben die denn mit dem unterem abstand von #bar zu tun?Damit Du den grünen Balken auch in #bar bekommst, kannst Du ja einfach noch eine <div> mit den gleichen css-Eigenschaften einfügen.
weiss nicht was du meinst.
#header
Also nochmal:
<body>
<div id="bar" style="float:left;width:200px;height:100%">
[...]
</div>Ist Dir vielleicht schon mal aufgefallen, daß bei mir #bar DIREKT nach dem body-Tag kommt?
ja, natürlich :D
siehe float-absatz weiter obenkann sein, dass ich dich flasch verstanden habe.
Mordillo: "Ohne Worte" ( <- im Übrigen ein geniales Meisterstück!)
=)
kenne ich, die comicstrips sind coolSo und jetzt noch einen guten Link für das recherchieren von CSS:
http://selfhtml.teamone.de/css/index.htm alles weitere ist im Archiv auffindbar.ich weiss nicht was du mir unterstellst. bevor cih hier eine frage poste, habe ich mein beiden css-bücher hier auf dem schreibtisch durchgeblättert, in der hoffnung eine erklärung zu finden. ich habe mehrere sehr gute bookmarks die sich mit bestimmten css problemlösungen beschäftigen bzw genauer auf ein thema (z.b alles über float und seine tücken) eingehen, die ich regelmässig studiere.
erst wenn ich am ende meines latein angekommen bin, poste ich hier, eigetnlich sogar nur als allerletze möglichkeit, da ich in andere foren ein freundlicheres umgangsverhältnis registriere.
(womit ich nciht sagen will, dass das forum hier chlecht ist. man fühlt sich manchmal nur so von oben herab behandelt. ich versuche hier trotzdem jeden mit respekt zu behandeln, genauso wie ich erwarte hier respektiert zu werden)hier gibt es allerdins weitaus mehr "fachidioten" (nicht böse gemeint, ich zähle mich da teilweise auch dazu), die meiner hoffnung eine lösung zu finden auf die sprünge helfen könnten.
Mehr an Hilfe kann ich nicht mehr geben, denn es hat mir einmal mehr gezeigt, wie unnötig man sich mühen kann, für Leute die unsensibel ihrer Meinung harren.
ich habe keine meinung. ich suche eine lösung!
trotzdem danke, dass du dir das problem wenigstens mal angeschaut hast.Noch was für's Leben:
pingpong soll man nie mit offenem mund spielen!
gruss markus
-
Re:
<pose>nebenbei ist es komplett valides Xhtml</pose>
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.volk-marketing.de%2Ftest%2F1404%2Ftest.htm
| |-------| |------------------------------|
| | | | |
| |-------| | #header |
| |------------------------------|
| | |
| | |
| | |
| | |
| | |
| #bar | #content |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| |-------| |------------------------------|
| | | | |
| |-------| | #footer |
|-----------|------------------------------|Das Dir Bücher nicht helfen, ist mir klar, deswegen solltest Du auch im http://forum.de.selfhtml.org/archiv/ forschen!
Gruß aus Berlin!
eddi-
Re:
<pose>nebenbei ist es komplett valides Xhtml</pose>
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.volk-marketing.de%2Ftest%2F1404%2Ftest.htmich redetete dabei von der version auf meiner hd, die zwar baugleich aber validiert ist. diese version ist vom 14.4.
mmh
wenn es tatsächlich nicht die möglichkeit gibt, es so zu machen, dass es VON DER STRUKTUR her so aussieht:
|------------------------------------------|
| |#header 1 ------------------------------------------ #footer ------------------------------------------ und sich dabei 1 und 2 sich an den jenachdem verfügbaren platz ausrichten sind cascading style sheets fürn arsch!!!
ich bin mir sicher dass es eine möglichkeit geben muss, die ich nicht kenne UND nicht gefunden/gelesen habe
ich habe schon mehrfach geschrieben, dass mir viele umständlichere lösungen einfallen um dieses problem zu lösen.
die klarste und von der struktur logischste (sowie einfachste) möglichkeit entzieht sich mir aber beharrlich.bitte lies auch was ich schreibe, ich mache mir hier gedanken was ich wie schreibe.
Das Dir Bücher nicht helfen, ist mir klar,
du bist unverschämt und arrogant, DAS ist mir klar.
deswegen solltest Du auch im http://forum.de.selfhtml.org/archiv/ forschen!
hallo? sehnerv an gehirn: ich habe HIER _VERGEBLICH_ danach gesucht. ich habe vergeblich im internet und meine bookmarks danach abgesucht UND ich habe 500 seiten bedrucktes papier danach abgesucht (vergeblich). dass ich all dies gemacht habe, habe ich auch hier geschrieben (ebenfalls vergeblich)
weil ich an ende MEINES LATEINS bin, frage ich hier andere leute.
wenn du mir schon nciht helfen willst oder kannst, lass bitte auch deine sinnlosen kommentare, bzw mach sinnige kommentare. vielleicht weisst du ein bestimmtes wort was du imr sagen kannst, bei dem eine lösung zu finden sein MUSS.
und wenn du postest ohne verstand lass bitte persönliche angriffe.
Gruß aus Berlin!
eddischeint bei dir ne floskel zu sein
markus
-
-
-
-
-