Mit Css div Elemente begrenzen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
ahnung
anpassen
attribut
auto
begrenzung
beispiel
bereich
bild
browser
code
container
design
hintergrundbild
http
image
layout
position
posten
text
url
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Setz einfach height und width fest und setz dann overflow: auto.
LG cookies
Also z.B.:
#id_des_divs { height: 200px; width: 500px; overflow: auto; }
Beitrag zuletzt geändert: 27.12.2009 19:06:09 von cookies -
cookies schrieb: Setz einfach height und width fest und setz dann overflow: auto.
LG cookies
Also z.B.:
#id_des_divs { height: 200px; width: 500px; overflow: auto; }
Super, das Funktioniert.
Kann man auch um diesen Bereich eine Linie ziehen?
So sieht man genau die Begrenzungen.
Beitrag zuletzt geändert: 27.12.2009 19:07:49 von julian101 -
Super, das Funktioniert.
Kann man auch um diesen Bereich eine Linie ziehen?
So sieht man genau die Begrenzungen.
#id_des_divs { height: 200px; width: 500px; overflow: auto; border:1px solid; }
Zu overflow gibt es folgende Möglichkeiten:
hidden -> abschneiden
visible -> Grösse wird nicht verändert, Text hängt evtl. über
scroll -> Scrollbalken anzeigen
auto -> meistens Scroll, je nach Browser -
auto -> meistens Scroll, je nach Browser
Zumindest im Firefox wird bei scroll immer der Scrollbalken angezeigt, bei auto nur, wenn der Inhalt zu groß ist.
LG cookies -
So, das mit dem Scrollbalken funktioniert super.
Allerdings habe ich auch oft bei manchen Designs gesehen, das das Layout automatisch mit geht.
Also das wenn der Text länger wird, automatisch ein neues Bild hinzugefügt wird. So das es länger ist.
Beispiel
___________________________
~.* TEXTTEXTTEXTTEXTTEXTTEXT
~.* TEXTTEXTTEXTTEXTTEXTTEXT
~.* TEXTTEXTTEXTTEXTTEXTTEXT
___________________________
Das ~.* soll jetzt mal ein Bild sein.
Wenn der Text jetzt z.B. eine Zeile länger wird soll auch automatisch das ~.* hinzugefügt werden.
Geht das?
Beitrag zuletzt geändert: 27.12.2009 20:36:15 von julian101 -
Wenn das ~.* dein Hintergrundbild wäre, könntest du das irgendwie so machen:
#deindiv { background-image:url("deinbild.gif"); background-repeat:repeat-y; background-position:left; }
Ich habe keine Ahnung, ob das das ist, was du meinst.
Was ich meine ist:
http://www.w3schools.com/css/tryit.asp?filename=trycss_background-repeaty
Edit: Kannst du evtl. mal ein Link posten, wo du das gesehen hast?
Beitrag zuletzt geändert: 27.12.2009 20:53:03 von x-black -
x-black schrieb:
Wenn das ~.* dein Hintergrundbild wäre, könntest du das irgendwie so machen:
#deindiv { background-image:url("deinbild.gif"); background-repeat:repeat-y; background-position:left; }
Ich habe keine Ahnung, ob das das ist, was du meinst.
Was ich meine ist:
http://www.w3schools.com/css/tryit.asp?filename=trycss_background-repeaty
Edit: Kannst du evtl. mal ein Link posten, wo du das gesehen hast?
Ich meine, das wenn der Text länger wird, das auch automatisch das bild länger wird.
Also das man z.B. keinen Scrollbalken braucht.
Beispiel:
z.B. bei Telelos Homepage (an Telelo: Hoffe es ist dir recht wenn ich deine HP als beispiel nutze)
Wenn er hier: http://telelo.de/?site=blog mehr schreibt geht das Design mit.
Beitrag zuletzt geändert: 27.12.2009 20:57:32 von julian101 -
x-black schrieb:
Ah easy sorry ich hab dich voll falsch verstanden.
Wenn du deinem Div kein Height-Attribut gibst, und kein overflow setzt (oder auto), sollte sich der Container automatisch dem Text anpassen.
Nein, das funktioniert ja nicht.
Ich benutze ja z-index und das geht dann ja einfach da drüber.
Wie funktioniert das denn mit dem automatischem anpassen?
Könntest du eventuell ein beispiel Posten? -
Das Problem, bei deiner Seite ist halt, dass du mit absoluten Positionen arbeitest.
So ist z.B ul genau 4.4 cm vom Linken Rand und 10.8 cm vom oberen Rand entfernt.
Das ist dann ein statisches Design.
Das ganze kannst du viel einfacher machen, in dem du anstatt Absolute Angaben, relative benutzt.
Das Problem ist jetzt also nicht das Left-Attribut, sondern das Top (weil du ja willst, dass sich die Grösse anpasst)
Schau dir am besten mal das an:
http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout
Grundsätzlich solltest du soviel wie möglich relative Angaben anstatt absolute benutzen. (nicht alle Leute haben den Gleichgrossen Monitor). So wäre z.B #div{width:800px} weitaus weniger vernünftig anstatt #div{width:80%;}. Beim ersteren sieht es zwar bei allen gleich aus, aber bei manchen wird der Browser dann Scrollbalken anzeigen, beim letzteren ist es immer 80% des Browserfensters. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
