div boxen sollen sich anpassen

[Der Martin L.]

Hallo

ich strukturiere meine Homepage so grob durch div bereiche... wenn ich jetzt in einen div bereich ein bild einfüge, sollte sich dann der bereich nicht eigentlich dem inhalt anpassen bei mir rutschen die bilder da halb raus... ich weiß sowieso noch nicht so ganz wie ich das machen soll, da ich nicht alle werte als pxl werte angeben will... das ist dann so absolut dabei hätte ich einige teile der homepage lieber relativ nur weiß ich nicht wie ich das relativ machen soll .....

(ich bin noch ziemlicher css anfänger und die tuts die ich gefunden habe lassen manche fragen noch ziemlich offen)

ich hoffe ihr könnt helfen

[gaby]

(die tuts die ich gefunden habe lassen manche fragen noch ziemlich offen)

Dein Posting auch.

ich hoffe ihr könnt helfen

nicht ohne eine Glaskugel, ersatzweise einen Link zum Problem.

Grüße
gaby

[der Martin L.]

ich probiers noch mal zu erklären:

ich habe einen div bereich... dieser hat eine blaue hintergrundfarbe damit ich erkennen kann was jetzt zu diesem bereich gehört und was nicht...

jetzt füge ich in diesen bereich ein bild ein das 159*43 pxl groß ist...

wenn ich jetzt auf vorschau klicke, dann zieht sich der bereich ( der ja blau ist ) nich um das bild herum sondern er bleibt so groß wie eingestellt also zum beispiel 50*50pxl das bild steht damit in diesem beispiel 100 pxl "über" es schaut also aus dem bereich raus (rein grafisch gesehen)

irgendwo hatte ich mal gelesen das information über der gewählten größe steht, also dass ein bereich größer wird wenn zum beispiel der text sons nicht reinpasst.... geht das denn nur bei text weil sons müssten die bilder doch ganz in dem bereich sein und dieser seine größe ändern....

ich hoffe das war verständlicher das relative lassen wir ers mal weg (ich verstehe da nur die angebe in em nicht irgendwo stand mal das hat was mit der schriftgröße zu tuen aber wie hängt das zusammen?)

[Ali]

wenn ich jetzt auf vorschau klicke, dann zieht sich der bereich ( der ja blau ist ) nich um das bild herum sondern er bleibt so groß wie eingestellt also zum beispiel 50*50pxl das bild steht damit in diesem beispiel 100 pxl "über" es schaut also aus dem bereich raus (rein grafisch gesehen)

Wenn Du das Div eine fixe Höhe gibst bleibt die auch so, egal was im Div drin ist. Hier hilft min-height...
Beim IE ists anders: da dehnt sich das Div mit dem Inhalt auf.

[gaby]

Wenn Du das Div eine fixe Höhe gibst bleibt die auch so, egal was im Div drin ist. Hier hilft min-height...

... oder einfach _gar keine_ Dimensionierung.

gaby

[Ali]

... oder einfach _gar keine_ Dimensionierung.

Jawoll, einfacher ist besser!
Aber was anderes: was sollen den die "_" bei "_gar keine_"? Ist das eine Art Betonung?

[gaby]

... oder einfach _gar keine_ Dimensionierung.

Jawoll, einfacher ist besser!
Aber was anderes: was sollen den die "_" bei "_gar keine_"? Ist das eine Art Betonung?

Ja. *g*
In Foren, in denen man seinen Text nicht (fett oder unterstrichen) formatieren kann, hat es sich teilweise eingebürgert, "_" als Ersatz fürs Unterstreichen, und "*" als Ersatz fürs Fett-Schreiben zu gebrauchen.
Vereinzelt habe ich das hier auch schon gesehen.

gaby

[Ali]

Ja. *g*
In Foren, in denen man seinen Text nicht (fett oder unterstrichen) formatieren kann, hat es sich teilweise eingebürgert, "_" als Ersatz fürs Unterstreichen, und "*" als Ersatz fürs Fett-Schreiben zu gebrauchen.
Vereinzelt habe ich das hier auch schon gesehen.

gaby

Aaaaahso, *thnx*

[Der Martin L.]

da geht man nur kurz trainieren und wiedermal wird einem wunderbar geholfen danke sehr ich denke da ist alles dabei zumindest genug um herum zu probieren aber eine frage ist noch offen (wahrscheinlich ne rethorische aber ich als anfänger blicke die vllt nicht ;-))

"was machen denn nun standartkonforme browser mit divs ohne dimensionierung"

[gaby]

"was machen denn nun standartkonforme browser mit divs ohne dimensionierung"

... die passen ihre Größe ihrem Inhalt an.

gaby

[Der Martin L.]

also ich habs mal getestet meine navi leiste erstreckt sich dann über die ganze breite und setzt die buttons nebeneinander (was auch durchaus richtig ist is ja der inhalt..

aber jetzt habe ich gedacht ich hab ne ganz schlaue lösung gefunden (gedacht)

ich hab einfach meine navi leiste fest auf 220px gestellt, dann beim inhalt margin-left:220px; angegeben und also width:100%; leider macht der das dann so groß wie das angezeigte fenster und nutzt nicht, wie ich eigentlich gedacht hatte, den angezeigten restplatz bis zum rand... es entsteht also ein scrollbalken den ich ja eigentlich verhindern wollte....

also wie kann ich dem sagen, dass der den angezeigten restplatz nutzen soll?

[gaby]

ich hab einfach meine navi leiste fest auf 220px gestellt, dann beim inhalt margin-left:220px; angegeben und also width:100%; leider macht der das dann so groß wie das angezeigte fenster und nutzt nicht, wie ich eigentlich gedacht hatte, den angezeigten restplatz bis zum rand... es entsteht also ein scrollbalken den ich ja eigentlich verhindern wollte....

also wie kann ich dem sagen, dass der den angezeigten restplatz nutzen soll?

Warum weigerst du dich eigentlich standhaft, den relevanten Quellcode, oder, noch besser, einen Link zu einer Testdatei zu posten?
Sollen wir jetzt raten, wie dein Quellcode aussieht, oder in mehreren Postings jede einzelne Eigenschaft deiner Boxen und die Verschachtelung derselben, nebst Doctype und Browser, wo der Fehler auftritt, abfragen?

Lies mal hier
http://forum.de.selfhtml.org/hilfe/charta.htm#tipps-fuer-fragende

[Der Martin L.]

hast ja recht... ;-)

also relevantes html

<!--<div id="seitenbereich">-->
<div id="kopfzeile"></div>
<div id="navi">
<img class="btn" src="bilder/btn/btn_home.gif" />
<img class="btn" src="bilder/btn/btn_gaestebuch.gif" />
<img class="btn" src="bilder/btn/btn_download.gif" />
<img class="btn" src="bilder/btn/btn_impressum.gif" />
<img class="btn" src="bilder/btn/btn_danksagung.gif" />
</div>
<div id="inhalte">hallo welt noch css und ich bin schlecht aaaaaaaargh</div>
<div id="fusszeile"></div>
<!--</div>-->

und hier die css datei:

body
 {
  background-image:url('bilder/bg.gif');
  }

#seitenbereich
  {
  width:780px;
  height:700px;
  margin:0;
  }

#kopfzeile
  {
  background-color:#ff0000;
  border-bottom:1px solid black;
  width:780px;
  height:100px;
  }

#navi
  {
  background-color:#55aaff;
  float:left;
  text-align:center;
  width:220px;
  height:500px;
  }

#inhalte
  {
  float:left;
  /*width:100%;*/
  height:500px;
  background-color:#ff00ff;
  }

#fusszeile
  {
  clear:both;
  background-color:#ff0000;
  border-bottom:1px solid black;
  width:780px;
  height:100px;
  }

.btn
  {
   margin:5px;
   width:159px;
   height:45px;
  }

dabei kann man kopf und fußzeile rauslassen die hab ich noch überhaupt nicht bearbeitet... ich bin halt momentan beim inhalt und ich teste immer in drei ansichten IE, Firefox und intern bei Phase 5.

Wenn ich jetzt float:left; da eingebe (so wie es da steht, dann nimmt sich die box genau den platz den sie braucht um den text zu erfassen....und sie schmiegt sich schön an die navi leiste

Wenn ich float:left; weglasse, dann nutzt die box allen platz den sie noch nach rechts hat nur anschmiegen tut sie sich nicht mehr zumindest nicht im IE und intern bei Phase 5 im Firefox geht alles....

beim IE und phase 5 sind so ca 5 pxl abstand zwischen den beiden divs navi und inhalt.....

O gott ich hoffe man versteht das einigermaßen ich entschuldige mich jetzt schon ;-) aber eure hilfe ist echt toll

[gaby]

Wenn ich jetzt float:left; da eingebe (so wie es da steht, dann nimmt sich die box genau den platz den sie braucht um den text zu erfassen....und sie schmiegt sich schön an die navi leiste

Wenn ich float:left; weglasse, dann nutzt die box allen platz den sie noch nach rechts hat nur anschmiegen tut sie sich nicht mehr zumindest nicht im IE und intern bei Phase 5 im Firefox geht alles....

Die lila Box bekommt kein float und kein width; nur ein entsprechend großes margin-left.

Der Abstand zwischen der Navi und dem Inhalt im IE ist Bug.
Ich glaube, das ist der 3px-Abstands-Bug, oder wie der heißt. *bg*
Ich muß mal gucken, ob ich etwas im Netz finden.

[Der Martin L.]

Naja gegen bugs kann man wohl nichts tun ist aber auch nicht schlimm, da nachher sowieso ein hintergrund für die ganze seite genommen wird sich immer wiederholend ob der text dann im endeffeckt 60 oder 63 pxl beträgt dürfte keinen unterschied machen ... danke sehr ich denke jetzt kann ich erst mal weitermachen^^ ich melde mich dann morgen oder gleich :-D mit neuen Problemen ;-)

also danke noch mal echt stark hier ich kenn kein forum wo man so schnell hilfe bekommt.....

[gaby]

Naja gegen bugs kann man wohl nichts tun

doch. ;-)
http://www.perun.net/2004/07/09/3-pixel-abstand/

also danke noch mal

bitte sehr :-)

echt stark hier ich kenn kein forum wo man so schnell hilfe bekommt.....

was meinst du, wie schnell das erst gegangen wäre, wenn du gleich alles Nötige gepostet hättest?  *g*

*SCNR*
http://einklich.net/usenet/begriffe.htm#s

Grüße
gaby

[Der Martin L.]

es ist gerade doch noch ein kleines Problemchen aufgetreten^^.

ich wollte eine mindest width angeben und man findet immer min-width das kennt aber wohl weder der editor noch der browser.... was mach ich falsch?

ich hab min-width:200px; genommen.....

[Der Martin L.]

so mir ist noch was aufgefallen... der IE und Firefox handeln komplett unterschiedlich wenn ein wort nicht mehr umgebrochen werden kann weil es zu lang ist.... also wenn das div element kleiner wird als das längste wort....

Firefox lässt das div elemt weiter kleiner werden bis die breite bei 0 ist... der text bleibt einfach neben der box stehen also es wird so lange umgebrochen bis zur breite des längsten wortes, dann wird der text nicht mehr verändert sondern nur noch das div element kleiner....

im IE springt das element mitsamt text nach unten also unter die navi leiste....

ich find die Firefox lösung besser, da ich nachher sowieso mit min-width (was ja noch nich klappt siehe oben ;-)) arbeiten will habe ich jetzt angst das aus irgendeinem grund meine seite auf einmal nur noch untereinander dargestellt wird da soll irgendwo schluss sein und dann die scrollbar kommen.......... oder so....

hoffe ihr könnt helfen ich mach noch ein wenig weiter hier euch allen eine gute n8^^

[Engin]

Hi Der,

"was machen denn nun standartkonforme browser mit divs ohne dimensionierung"

Sorry, war mein fehler, die schalten auf auto.
Also width nimmt bei mir den ihm zur verfügung stehenden Platz ein und height
schaltet auf auto.

Grüße,
Engin
 GYRO

[gaby]

"was machen denn nun standartkonforme browser mit divs ohne dimensionierung"

... die passen die Größe der Boxen ihrem Inhalt an.
Der IE ist zwar kein standardkonformer Browser, aber er macht es übrigens genauso.

gaby

[Engin]

Hi,

Wenn Du das Div eine fixe Höhe gibst bleibt die auch so, egal was im Div drin ist. Hier hilft min-height...

... oder einfach _gar keine_ Dimensionierung.

Und was machen Standard-Konforme Browser mit divs, die keine Dimensionierung bekommen?

Grüße,
Engin
 GYRO

[Steel]

Und was machen Standard-Konforme Browser mit divs, die keine Dimensionierung bekommen?

boese Sachen, wie Rotkaeppchen fragen wo denn wohl die Omma wohnt?

[kungschu]

Hallo.

ich habe einen div bereich... dieser hat eine blaue hintergrundfarbe damit ich erkennen kann was jetzt zu diesem bereich gehört und was nicht...
jetzt füge ich in diesen bereich ein bild ein das 159*43 pxl groß ist...

wenn ich jetzt auf vorschau klicke, dann zieht sich der bereich ( der ja blau ist ) nich um das bild herum sondern er bleibt so groß wie eingestellt also zum beispiel 50*50pxl das bild steht damit in diesem beispiel 100 pxl "über" es schaut also aus dem bereich raus (rein grafisch gesehen)

Ja. Das Bild ist ja eindeutig größer als das div-Element. Wenn du nun keine Vorgaben gemacht hast, was passieren soll, wenn der Inhalt größer ist (Stichwort: overflow), macht der Browser was er will.

irgendwo hatte ich mal gelesen das information über der gewählten größe steht, also dass ein bereich größer wird wenn zum beispiel der text sons nicht reinpasst.... geht das denn nur bei text weil sons müssten die bilder doch ganz in dem bereich sein und dieser seine größe ändern....

Nein. Wenn du absolute Angaben zu Breite und / oder Höhe machst, dann gelten die auch. Machst du keine Angaben, passt sich ein Element grundsätzlich dem Inhalt an.

ich hoffe das war verständlicher das relative lassen wir ers mal weg (ich verstehe da nur die angebe in em nicht irgendwo stand mal das hat was mit der schriftgröße zu tuen aber wie hängt das zusammen?)

Ingo Turski hat einen Artikel über em geschrieben:
http://www.1ngo.de/web/em.html

Evtl. helfen dir die Beispiele für ein CSS-Layout weiter:
http://de.selfhtml.org/css/layouts/mehrspaltige.htm

MfG, Kungschu.

[JXR]

Hallo,

floaten deine Bilder zufällig?

Sonst sollten sich die Divs der Breite des Bildes anpassen.