• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Scrollbaren Bereich einblenden, wenn im DIV Container viel Text enthalten ist

K

Kossy

New member
Hallo zusammen !

Ich habe im Anhang ein Bild hochgeladen. Hier wird ein Warenkorb darstellt, der sich beliebig mit Inhalten füllen kann. Besonders der Abschnitt "Message Text" ist für mich interessant. Denn hier kann mal mehr und mal weniger Text erscheinen. Der Text wird allerdings nciht hier direkt eingegben, sondern auf anderen Inputfeldern meiner XHTML Seiten, die dann mittels JavaScript Events (wie z.B. KeyUp oder onChanged) ausgelesen werden und die INhalten einfach in den Warenkorb bzw. in die dortige Rubrik "Message Text" geschrieben werden.

Wenn jetzt allerdings viel Text eingegeben wird, dann zieht sich dieser Warenkorb immer mehr nach unten auseinander. Ich möchte geren, dass die Schaltflächen "Cancel", "Save" und "Send" immer an ihrer Position bleiben. Sämtliche Rubriken soll bei Bedarf in der vertikalen "scrollbar" sein und der Warenkorb soll nach unten hin nicht mehr aus dem Bild wachsen bzw. wandern können. Wie kann ich das bewerkstelligen? Im Anhang habe ich außerdem noch den dazugehörigen HTML Code mit angehängt.

Vielen Dank für die Mithilfe !

Grüße
 

Anhänge

  • Unbenannt.jpg
    Unbenannt.jpg
    69,8 KB · Aufrufe: 5
  • codeausschnitt.jpg
    codeausschnitt.jpg
    66,1 KB · Aufrufe: 4
Zuletzt bearbeitet:
So ganz recht habe ich noch nicht verstanden was Du willst.

1. Du möchtst gerne dass der Scrollbereich Deines Warenkorbs ein feste vertikale Höhe hat ?
2. Die Buttons sollen außerhalb des scrollbaren Bereichs für den Warenkorb liegen ?

Wenn das so ist, dann muss Du ein DIV-Scroll definieren und die Buttons einfach außerhalb dieses DIVs legen.
Wenn Du nicht weißt wie das geht, kann ich es Dir gerne zeigen. Ist ganz einfach ...

Aber, wie gesagt, so recht habe ich Deine Frage nicht verstanden.

Schreib einfach nochmal ...

LG, Karin

-------------------------------------------------------------------------------------------------------------------
Keine Ahnung, ob ich Dir jetzt nicht 'nen Tipp gebe, der Dir nutzt und überhaupt Neues für Dich bereit hält.

Ich gebe Dir aber dennoch schon mal ein simplifiziertes Beispiel, bei dem der Warenkorb, sollte er höher als,
in diesem Beispiel, 450px sein, automatisch ein vertikaler Scrollbalken innerhalb des "srollenden" DIVs ensteht.
Die Buttons wären in diesem Fall unterhalb des DIVs in dem der Warenkorn scrollt, wenn er denn höher als das DIV ist.

HTML: 
<!-- Im head (oder einer ausgelagerten css-Datei): -->

<style>
.warenkorb{
padding:4px; // Abstand zwischen Warenkorbinhalt und Rändern des DIV

/* Breite und Höhe des DIV für den Warenkorb */
width:300px;// Bei der Breite musst Du aufpassen, dass sie groß genug ist
height:450px;// Die Höhe des DIVs. Ist der Warenkorb höher, ensteht der Rollbalken

/* Schriftattribute, wenn diese nicht im Warenkorb ohnehin festgelegt sind */
font-family:tahoma,arial,sans-serif;
color:#000040;
text-align:left;
overflow:auto;
font-size:12px;font-weight:normal;

/* horizontalen Rollbalken im Warenkorb-DIV verhindern */
overflow-x:hidden;
}
</style>

<!-- Im Body -->

<table>
<tr>
<td>
<div  class="warenkorb">

<!-- hier kommt der Warenkorb rein (am besten in einer eigenen Tabelle), und, z.B per <? include 'warenkorb.php' ?>  -->

</div>
</td>
</tr>
<tr>
<td>

<!--  hier kämen die beiden Buttons rein -->

</td>
</table>
 
Zuletzt bearbeitet:
Hallo !

Ich glaube ich habe mich mit präzise genug ausgedrückt, sorry dafür. Also auf meiner xhtml seite ist es so, dass dieser Warenkorb rechts neben eine Ansammlung weiterer html elementen liegt. Wenn ich als Benutzer nun nach oben und nach unten scrolle, dass wandert dieser Warenkorb mit hoch und herunter. Er behält dabei immer eine feste Position. Das funktioniert alles wunderbar.

Je nachdem, was nun in den html input elementen links von meinem warenkorb eintrage, sollen diese Elemnte in diesem Warenkorb angezeigt werden. Und nun ist es so, dass wenn ich ganz viel Text eingebe, dass dieser eingegebende Text dafür sorgt, dass der Warenkorb immer länger wird und quasi aus dem Bildschirm gerendert wird. Und genau das möchte ich verhindern, indem "bei Bedarf (also dann wenn der Warenkorb dabei ist aus dem Bildschirm zu wachsen bzw. zu rendern") soll vertikale Scrollbalken eingebelndet werden. Diese sollen natürlich auch dann wieder verschwinden, sobald die Texteingaben wieder reduziert werden.

Ich hoffe, ich habe mich nun verständlicher ausgedrückt. Falls nicht, dann schreib einfach noch einmal !
 
Es bleibt dabei:
Das Element, in dem der Warenkorb ist, muss in seiner Höhe begrenzt werden, damit ein Rollbalken ensteht, wenn der Inhalt des Warenkorbs höher/länger wird als gewünscht.
Da der Warenkorb selbst ja mehrere Divs enthält, musst Du das mit einem übergeordneten DIV erledigen (also VOR dem Warenkorb das DIV-Tag "eröffnen und NACH dem Warenkorb das DIV schließen).

Also, übergeordnetes Div mit den gewünschte Style-Angaben (siehe den Codeschnipsel von vorhin), wobei die entscheidenden Angaben die Höhe und Breite des DIVs ist (nachstehed habeich die Style-Anmagen direckt in das DIV geschrieben):

<DIV style="width:400px;height;450px;padding:4px;overflow-x:hidden;overflow-y:auto">

<! -- her kommt jetzt der Warenkorb rein -->

</DIV>

Das DIV muss dabei innerhalb einer Zellentabelle liegen, deren Attribute (u.a. Höhe und Breite) über die Style-Angaben festgelegt werden.

Ich hoffe, ich konnte mich verständlich ausdrücken ...

LG, Karin

Hab mal ein ganz simples Modell gestrickt. Speicher den Code als HTML Datei ab und führe die Datei im Browser aus.
Schau es Dir in Ruhe an. Ich hoffe es hilft Dir weiter ...

HTML: 
<html>
<head>
<title>test</title>
</head><body bgcolor="grey">

<! -- Hier kommt das HTML-Element des Warenkorbs -->


<table bgcolor="white">
<tr>
<td colspan="2">

<table bgcolor="white">
<tr>
<td style="border:dotted 1px #AAAAAA">
<DIV style="width:400px;height:450px;padding:4px;overflow-x:hidden;overflow-y:auto:border:solid 1px red">

<br /><b>Hier ist der Warenkorbinhalt</b><br /><br />
test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test ...

</DIV>
</td>
</tr>
</table>

</td>
</tr>
<tr>
<td width="50%">
<input type="button" value="Button 1">
</td>
<td width="50%">
<input type="button" value="Button 2">
</td>
</tr>
</table>
<! -- Ende des HTML-Elementes des Warenkorbs -->


</body>
</html>

Und das Ganze kannst Du dann wo auch immer innerhalb Deiner Seite plazieren, auch als residentes Element ...
 
Zuletzt bearbeitet:
Hallo noch einmal !

Herzlich dank für den letzten Post.

Ich habe das nochmal gestestet und es funktioniert fast perfekt.

Was mir jetzt noch fehlt, wäre ein Mechanismus, um die Höhe nicht fest zu setzen, sondern um sie in Abhängigkeit von der jeweiligen Bildschirmauflösung dynamisch berechnen zu lassen. Das ganze sollte dann natürlich auch im IE laufen. Meine bisherige Lösung schaut so aus:

<div style="height:720px;overflow-x:hidden;overflow-y:auto;">

Bisher greift bei mir für die Formatierung des Warenkorbes folgendes CSS (also für die Wanderung):

position: fixed; top: 35px;
 
Zuletzt bearbeitet:
Freut mich, dass ich Dir ein wenig weiterhelfen konnte... :icon7:

Das noch anstehende "Problerm" könntest Du mit Javascript mlösen. Zuerst die Bildschirmhöhe des Besuchers abfragen.
Dann verweist Du mit einer Weiche auf die ensprechende Seite mit dem Warenkorb.

Ich mach das normalerweise so, dass ich solche Sachen für 2 Bildschirmgrößen ausgebe.
Eine für Bildschimhöhe (sreen.height) bis < 950 Pixel und ein 2. für Bildschirmhöhen => 950 Pixel.

Das ist zwar nicht perfekt, aber man (ich ) kann damit leben. (** siehe Anmerkung in der Fußnote)

Bei Dir könnte das also wie folgt aussehen:

Code: 
<script language = "Javascript">
 {
   var Hoehe=screen.height;  // Bildschirmhöhe des Brwosers

   if (Hoehe<950)
    {
       location = "Warenkorb_small.php"      
    }
   if (Hoehe>=950)
    {
       location = "Warenkorb_big.php"      
    } 
 }
</script>

Jetzt legst Du nach dem Muster das Du schon probiert hast. 2 Warenkorb HTML-Eelemente an und weißt denen eben verschiedene Höhen-Werte in dem übergordneten DIV zu .
Ich hoffe, ich hab mich einigermaßen verständlich ausdrücken können.

Das Problem ist dabei nur (ich seh das aber nicht als Problem, weil kaum jemand Javascript in seinem Browser deaktviert hat) , dass es OHNE Javascript nicht geht, weil die Ernmittlung der Bildschirmhöhe cleintseiteig passiert und damit, meines Wissens, NUR mit Javascript möglich ist.

WennDu jetzt noch sicher gehe willst, dass der Besucher, solte er tatsächlich Javascriot deaktiviert haben, darauf hingewiesen wird, dann baust Du gleich auf der 1. Seite Deiner Präsenz folgend Schnipsel ein:

HTML: 
.
.
.
<body>
<noscript>
<center>
Sie müssen Javascript in Ihrem Browser aktvieren, da die Darstellung der Webseiten sonst nicht optimal ist.
</center>
</noscript>
.
.
.

So, jetzt hoffe ich, Du kommst weiter ...

LG, Karin

** Besser wäre die innere Höhe des Browserfensters abzufragen, weil das genauer ist und Du damit genauer auf die Höhendefinition Deines Warenkorb-DIVs reagieren kannst.
Dafür gibt es in Javascript "inner.height", was aber im IE leider, wieder nur meines Wissens, nicht funktioniert.
Da müsstest Du noch mal googeln, da gibt es einige Lösungsansätze.
 
Zuletzt bearbeitet:
schlegel.berlin schrieb:
Freut mich, dass ich Dir ein wenig weiterhelfen konnte... :icon7:

Das noch anstehende "Problerm" könntest Du mit Javascript mlösen. Zuerst die Bildschirmhöhe des Besuchers abfragen.
Dann verweist Du mit einer Weiche auf die ensprechende Seite mit dem Warenkorb.

Ich mach das normalerweise so, dass ich solche Sachen für 2 Bildschirmgrößen ausgebe.
Eine für Bildschimhöhe (sreen.height) bis < 950 Pixel und ein 2. für Bildschirmhöhen => 950 Pixel.

Das ist zwar nicht perfekt, aber man (ich ) kann damit leben. (** siehe Anmerkung in der Fußnote)

Bei Dir könnte das also wie folgt aussehen:

Code: 
<script language = "Javascript">
 {
   var Hoehe=screen.height;  // Bildschirmhöhe des Brwosers

   if (Hoehe<950)
    {
       location = "Warenkorb_small.php"      
    }
   if (Hoehe>=950)
    {
       location = "Warenkorb_big.php"      
    } 
 }
</script>

Jetzt legst Du nach dem Muster das Du schon probiert hast. 2 Warenkorb HTML-Eelemente an und weißt denen eben verschiedene Höhen-Werte in dem übergordneten DIV zu .
Ich hoffe, ich hab mich einigermaßen verständlich ausdrücken können.

Das Problem ist dabei nur (ich seh das aber nicht als Problem, weil kaum jemand Javascript in seinem Browser deaktviert hat) , dass es OHNE Javascript nicht geht, weil die Ernmittlung der Bildschirmhöhe cleintseiteig passiert und damit, meines Wissens, NUR mit Javascript möglich ist.

WennDu jetzt noch sicher gehe willst, dass der Besucher, solte er tatsächlich Javascriot deaktiviert haben, darauf hingewiesen wird, dann baust Du gleich auf der 1. Seite Deiner Präsenz folgend Schnipsel ein:

HTML: 
.
.
.
<body>
<noscript>
<center>
Sie müssen Javascript in Ihrem Browser aktvieren, da die Darstellung der Webseiten sonst nicht optimal ist.
</center>
</noscript>
.
.
.

So, jetzt hoffe ich, Du kommst weiter ...

LG, Karin

** Besser wäre die innere Höhe des Browserfensters abzufragen, weil das genauer ist und Du damit genauer auf die Höhendefinition Deines Warenkorb-DIVs reagieren kannst.
Dafür gibt es in Javascript "inner.height", was aber im IE leider, wieder nur meines Wissens, nicht funktioniert.
Da müsstest Du noch mal googeln, da gibt es einige Lösungsansätze.
Zum Vergrößern anklicken....

Oder frag wg. der Sache mit dem "inner.height" und dem IE mal die Moderatoren mikdoe oder kkapsner. Die haben echt Ahnung ...
 
Das geht auch ohne JS.

Gib' dem fixen Element keinerlei Höhenangabe, sondern eine top und eine bottom Angabe, dann wird das Element entsprechend vergrößert/verkleinert:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
div {
	position: fixed;
	top: 30px;
	bottom: 30px;
	left: 20%;
	right: 50%;
	background-color: blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- funktioniert auch im IE.

@schlegel.berlin: screen.height bzw. screen.width beziehen sich auf die Monitorgröße und hat deswegen nur bedingte Aussagekraft über die wirkliche Fenstergröße.
 
Hallo kkapsner,

grandiose Idee. Bin ich leider nicht drauf gekommen, obwohl sie die Lösung doch so naheliegend wie einfach ist...
Danke, damit hast Du Kossy echt geholfen (und ich denk beim nächstenMal mit ähnlicher Problemstellung auch dran :)) ...

LG, Karin
 
Hallo,

das automatische scrollen funktioniert nur solange ich eine feste höhe für den scrollbaren DIV Container definiere. So weit so gut, aber diesen Höhenwert muss ich irgendwie berechnen. ich vermute mal evtl. anhand der Bildschirmauflösung und evtl. der Höhe des übergeordneten DIV Containers, der dann quasi den scrollbaren DIV Container beinhalten soll.

Also ich komme irgendwie nicht so recht weiter. Die Lösung von KKapsner funktiiniert leider auch nicht. Hierbei sieht der Warenkorb komisch verzerrt aus


MFG
Kossy
 
Schau Dir das ma lan. Das funktioniert.
Die Sytel-Angaben seteh direkt in den DIV Tags ...

LG, Karin

HTML: 
<html>
<head>
<title>test</title>
</head><body bgcolor="lightyellow">

<! -- Hier kommt das HTML-Element des Warenkorbs -->


<table border="0" style="width:100%;width:100%;">
<tr>
<td>

<table>
<tr>
<td style="border:dotted 1px #AAAAAA" colspan="2">
<DIV style="background-color:white;position: fixed;width:400px;left:60%;top:100px;bottom:150px;padding:4px;overflow-x:hidden;overflow-y:auto;border:dotted 1px #AAAAAA">

<br /><b>Hier ist der Warenkorbinhalt</b><br /><br />
test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test ...

</DIV>
</td>
</tr>
<tr>
<td width="200"><DIV style="position: fixed;bottom:120px;left:60%;">
<input type="button" value="Button 1"></div>
</td>
<td width="200"><DIV  style="position: fixed;bottom:120px;left:70%;">
<input type="button" value="Button 2"></div>
</td>
</tr>
</table>

</td>
</tr>
</table>
<! -- Ende des HTML-Elementes des Warenkorbs -->
Hier steht der übrige Seiteninhalt<br /><font color="red">Hier steht der übrige Seiteninhalt</font><br />Hier steht der übrige Seiteninhalt<br /><font color="red">Hier steht der übrige Seiteninhalt</font><br />Hier steht der übrige Seiteninhalt<br /><font color="red">Hier steht der übrige Seiteninhalt</font><br />Hier steht der übrige Seiteninhalt<br /><font color="red">Hier steht der übrige Seiteninhalt</font><br />Hier steht der übrige Seiteninhalt<br /><font color="red">Hier steht der übrige Seiteninhalt</font><br />Hier steht der übrige Seiteninhalt<br /><font color="red">Hier steht der übrige Seiteninhalt</font><br />Hier steht der übrige Seiteninhalt<br /><font color="red">Hier steht der übrige Seiteninhalt</font><br />Hier steht der übrige Seiteninhalt<br /><font color="red">Hier steht der übrige Seiteninhalt</font><br />Hier steht der übrige Seiteninhalt<br /><font color="red">Hier steht der übrige Seiteninhalt</font><br />Hier steht der übrige Seiteninhalt<br /><font color="red">Hier steht der übrige Seiteninhalt</font><br />Hier steht der übrige Seiteninhalt<br /><font color="red">Hier steht der übrige Seiteninhalt</font><br />Hier steht der übrige Seiteninhalt<br /><font color="red">Hier steht der übrige Seiteninhalt</font><br />Hier steht der übrige Seiteninhalt<br /><font color="red">Hier steht der übrige Seiteninhalt</font><br />Hier steht der übrige Seiteninhalt<br /><font color="red">Hier steht der übrige Seiteninhalt</font><br />Hier steht der übrige Seiteninhalt<br /><font color="red">Hier steht der übrige Seiteninhalt</font><br />Hier steht der übrige Seiteninhalt<br /><font color="red">Hier steht der übrige Seiteninhalt</font><br />Hier steht der übrige Seiteninhalt<br /><font color="red">Hier steht der übrige Seiteninhalt</font><br />Hier steht der übrige Seiteninhalt<br /><font color="red">Hier steht der übrige Seiteninhalt</font><br />Hier steht der übrige Seiteninhalt<br /><font color="red">Hier steht der übrige Seiteninhalt</font><br />Hier steht der übrige Seiteninhalt<br /><font color="red">Hier steht der übrige Seiteninhalt</font><br />Hier steht der übrige Seiteninhalt<br /><font color="red">Hier steht der übrige Seiteninhalt</font><br />Hier steht der übrige Seiteninhalt<br /><font color="red">Hier steht der übrige Seiteninhalt</font><br />Hier steht der übrige Seiteninhalt<br /><font color="red">Hier steht der übrige Seiteninhalt</font><br />Hier steht der übrige Seiteninhalt<br /><font color="red">Hier steht der übrige Seiteninhalt</font><br />Hier steht der übrige Seiteninhalt<br /><font color="red">Hier steht der übrige Seiteninhalt</font><br />Hier steht der übrige Seiteninhalt<br /><font color="red">Hier steht der übrige Seiteninhalt</font><br />Hier steht der übrige Seiteninhalt<br /><font color="red">Hier steht der übrige Seiteninhalt</font><br />Hier steht der übrige Seiteninhalt<br /><font color="red">Hier steht der übrige Seiteninhalt</font><br />Hier steht der übrige Seiteninhalt<br /><font color="red">Hier steht der übrige Seiteninhalt</font><br />Hier steht der übrige Seiteninhalt<br /><font color="red">Hier steht der übrige Seiteninhalt</font><br />Hier steht der übrige Seiteninhalt<br /><font color="red">Hier steht der übrige Seiteninhalt</font><br />Hier steht der übrige Seiteninhalt<br /><font color="red">Hier steht der übrige Seiteninhalt</font><br />Hier steht der übrige Seiteninhalt<br /><font color="red">Hier steht der übrige Seiteninhalt</font><br />Hier steht der übrige Seiteninhalt<br /><font color="red">Hier steht der übrige Seiteninhalt</font><br />Hier steht der übrige Seiteninhalt<br /><font color="red">Hier steht der übrige Seiteninhalt</font><br />Hier steht der übrige Seiteninhalt<br /><font color="red">Hier steht der übrige Seiteninhalt</font><br />

</body>
</html>
 
Kossy schrieb:
Die Lösung von KKapsner funktiiniert leider auch nicht. Hierbei sieht der Warenkorb komisch verzerrt aus
Zum Vergrößern anklicken....
Was meinst du genau mit "verzerrt"?
Es kann natürlich sein, dass du deiin CSS/HTML etwas ändern musst, damit du die Ansicht bekommst, die du gerne hättest.

PS: prinzipiell ist es nicht wirklich sinnvoll, ein Element in eine Tabelle zu packen, um es dann mit position: fixed; zu positionieren... generell machen <table>-Layouts mehr Probleme, als sie lösen.
 
Hi Kossy,

die "verzerrte" Ausgabe Deines Warenkorbs liegt wahrscheinlich daran, das Die Breite desselben sich, je nach Bildschirmbreite, ändert.
Das liegt eventuell an den left, und right Angaben im CSS.

Schau mal, kkaspner hatte Dir gepostet:

Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
div {
	position: fixed;
	top: 30px;
	bottom: 30px;
	left: 20%;
	right: 50%;
	background-color: blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Wenn Du jetzt z.B. nur die prozentuale Angabe zu left (im Beispiel 20%) lässt, bzw. den prozentualen Wert nimmst, der der Plazierung (horizontal) auf Deiner Webseite entpricht und anstelle von right: 50%; die gewünschte, fixe Breite für den Warenkorb angibst, z.B. width:400px;, dann sollte das, wenn meine Vermutung stimmt, mit der "Verzerrung" weg sein.

Würde dann quasi wie folgt aussehen:
Code: 
position: fixed;
top: 30px;
bottom: 30px;
left: 20%;
width:400px; // gewünschte Warenkorbbreite angeben, anstelle von 'right:50%'
background-color: blue;
kkapsner hat natürlich Recht, man muss die Sache NICHT in einer Tabelle lösen, geht aber auch.

Kopier mal das Beispiel aus meinem letzten Post und führe die (HTML) Datei in einem Browser aus, dann siehst Du das Ergebnis meines o.g. Hinweises ...

Man kann das sicher auch (eleganter) ohne Tabelle lösen, dann müsste man aber mal Deinen Quelltext sehen, bzw. müsstest Du eine Link zu der Seite postre, damit wir uns das mal ansehen können...

LG, Karin
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben