Feste box in bestimmter größe

Hallo ihr Experten,

ich möchte auf meiner Seite eine Div Box einrichten die zentriert ist und nur 75% der eigentlichen Fläche ausnutzt.

Jetzt hab ich außerdem noch in in meinen Hintergrund bild oben und unten jeweils einen Streifen und diese Box soll nur innerhalb dieser Streifen bleiben wenn der Inhalt länger wird soll nur in der Box gescrollt werden.

kann man da was machen?

Hoffe ihr könnt mir helfen

mfg

Hi,

Das ist kein Problem, ich würd es so machen:

Die div - ich nenne sie jetzt mal id=„box“ bekommt diese CSS Eigenschaften:

#box {
position: absolute;
overflow: hidden;
top: *;
width: 75%;
height: *;
}

Bei height würde ich eine feste größe in Pixel eitragen damit die box nicht über die Streifen im Hintergrund ragt… Und bei top bestimmst Du den Abstand von oben, hier würde ich auch eine angabe in Pixel machen damit die Box keine Streifen überlagert.

und die Html würd ich dann so aufbauen:

***Hier der Inhalt der div !!!***

Hoffe ich konnte Dir helfen,
lg. Meganova

Hallo
danke erstmal hat mir wunderbar geholfen allerdings hab ich jetzt noch zwei porblemchen
ersten knallt der mir den Text jetzt irgendwie rechts an die seite obwohl ich center geasgt hab

und ich brauch noch ne Scrolleiste an der box

hi,
Also das die box jetzt rechts ist… Hmmm ??? Das ist komisch :smile: !!
dann versuch doch mal, der box die eigenschalft „align: middel;“ zu geben.

Der Scrollbalken kommt erst wenn Du mehr Text in der div hast als die div hoch ist.

also align: middle bringt auch nix
habs grad mal noch mit feierfox probiert da is die box links aber der text in der box zentriert

text ist mehr drin als die box hoch ist hab trotzdem keine scrolleiste :frowning:

hi,

also wegen dem Scolbalken hab ich noch mal nachgesehen, da muss „overflow: scroll;“… sorry :smile: !!!

Aber wegen der Position hmmm. versuch mal „aling:center;“ vielleicht geht das ?!?!?!

Achso neee…

Mach das aling: center; mal in CSS unter „body {}“ dann geht das betimmt !!!

also ich geh mal davon aus dass ich was falsch mache daher hier mal mein quelltext für die css vereinbarung

#body {
align: center;
}

#box {
position: absolute;
overflow: hidden;
top: 200;
width: 50%;
height: 300;
align: center;
overflow: scroll;
}

passt das so oder muss ich das anders machen?

absolute positionierung und mitte gesetzter layer passen so nicht zusammen. außerdem würde ich nur links in der box den scrollbalken anzeigen lassen. mit margin-top kannst du den relativ gesetzten layer auch zu anderen besser positionieren. der zusätzliche html-code setzt dir die gesamtseite in die mitte. - funkt in der art bei explorer und firefox - hoffe es hilft dir.

probier es mal damit:

New Document

#body {
text-align: center;
}

#box {

margin-top: 200;
width: 50%;
height: 300;
overflow-y:scroll;
overflow-x:auto;
}
nur linker scrollbalken- unterer wird nicht angezeigt

hallo danke probier ich dann gleich mal hab aber noch ne andere lösung gefunden
habe die eigenschaft der div um

left: 150;
right:150;

ergänzt :wink:

Hi,
das mit dem Quelltext war eine gute Idee, bei „body“ brauchst Du keine # vorweg zu machen und bei „id=box“ ist das „overflow: hidden;“ zuviel.

<b>#</b>body {
align: center;
}

#box {
position: absolute;
<b>overflow: hidden;</b>
top: 200;
width: 50%;
height: 300;
<u>align: center;</u>
overflow: scroll;
}

„align: center;“ in der „id=box“ läst den text in der Box mittig darstellen, wenn Du dass nicht möchtest kannst Du daraus auch „align: left;“ machen, dann ist es Links.

So, ich glaub dann müsste es das sein, wenn dann immer noch ein Problem sein sollte meld dich noch mal.

lg. Meganova

align und CSS

Achso neee…

Mach das aling: center; mal in CSS unter „body {}“ dann geht
das betimmt !!!

Hallo Meganova,

mal nebenbei: ein Befehl align:center; oder sonstwas gibt es in CSS nicht, das sollte text-align:center; heißen.

Gruß,
Maja

Hi Maya,

Text-align und auch nur align geht bei mir beides wenn ich in der HTML-Seite: angebe !!!

kann natürlich sein das, der Browser im fall von nur align dann selbstständig text-align daraus macht. aber probleme hatte ich bisher nie damit.

lg. Meganova

Hi Meganova,

dass dein Browser gnädig war, ändert nichts an der Tatsache, dass die align Angabe in dem CSS-Abschnitt falsch ist, auch wenn du Transitional-Doctype verwendest.
D.h. du hast bisher einfach Glück gehabt und man sollte das so nicht verwenden, sondern besser gleich richtig schreiben.

Um solchen Nachsichtigkeiten auf die Spur zu kommen ist der CSS- Validator immer eine Hilfe:

http://jigsaw.w3.org/css-validator/

Schöne Grüße
Maja