[HTML, CSS] Ecke realisieren

[Andreas L.]

Hi,
ich versuche mit folgenden Code eine Ecke zu erstellen. Klappt auch optimal. Doch rechts von der Ecke muss ein Farbverlauf fortgesetzt werden. Und jetzt bekomme ich ständig horizontale Scrollbars. Die Breite des Farbverlaufs kann ich natürlich nicht hardcoden, weil sich die Fensterbreite ändern kann.

HTML-Schnipsel:

XML-Code:

 <div class="contentedge">

  <div class="contentbottom">

   blabla

  </div>

 </div>

CSS-Schnipsel:

Code:

body
 {
   background-color: #ffffff;
   font-family: Tahoma, Arial, sans-serif;
   font-size: 10pt;
   margin: 0px;
   margin-left: 50px;
 }

...
...

div.contentbottom
 {
   margin-left: 16px;
   background-image: url(../images/bodybottom.png);
   background-repeat: repeat-x;
   min-height: 16px;
   height: 16px;
   line-height: 16px;
   width: -16px;
 }

div.contentedge
 {
   background-image: url(../images/bodyedge.png);
   background-repeat: no-repeat;
   min-height: 16px;
   background-position: left;
   margin-left: 50px;
 }

Im Anhang ist ein Screenshot wie es derzeit aussieht. Ich will das sich die Breite immer anpasst. Der Scrollbalken muss weg...

Schonmal Danke :-)

[Ghostwalker]

a) width: -16px

Bringt dir nix, da z.B. der IE damit garnix anfangen kann.

Nimm stattdessen eine Width mit Prozentangabe (99% z.B.). Das passt sich der Browserfenstergröße an. :)

[Andreas L.]

Hab ich auch schon probiert. Der Scrollbalken besteht weiterhin. Ich habe auch 100% - 16px; ausprobiert. Geht aber auch nich.

[Namenloser]

Nach meiner Erfahrung interpretieren verschiedene Browser eine Prozentangabe bei width und heigth unterschiedlich: beim IE bezeiht es sich immer auf die Fensterbreite, bei FireFox auf das Übegeordnete Element (oder anderherum).

Ich habe das Problem auch gerade, aber weil es sich um eine Navigation handelt habe ich es einfach mit einer fixen Breite umgangen.

[Thorben77]

An deinem Ausschnitt lässt sich das Problem nicht nachvollziehen. Ein div-Element füllt als Blockelement normalerweise die ganze Breite des Elternelements aus und du machst nichts, was dieses Verhalten ändern würde.
Zeig mal den ganzen Quelltext oder am Besten ein Onlinebeispiel.

Zu Ecken gibt es bei SELFHTML einen Artikel.

[OG Karotte]

Ich hatte mal ein ähnliches Problem und bin dann u.a. hier fündig geworden.

Na ja, es ist nicht ganz das was ich brauchte aber mit dem Ansatz und in Verbindung mit diesem hier sowie ein paar Anpassungen hat es dann geklappt.

[Ghostwalker]

Das er 100%-16px nicht versteht wundert mich nicht. Er kann nicht von einem Stoß Äpfel 16 Birnen abziehen :)

Wie mein Vorredner schon sagte, mußt du beide DIV's begrenzen, sonst nimmt einer der beiden die volle Breite ein -> Balken.

Als Alternative (wenn der Content nicht gescrollt werden soll) kannst du noch beide DIV's auf
'overflow:none;' setzen. Sollte der Inhalt dann zu groß werden, wird abgeschnitten.

[Andreas L.]

Ich verzweifel noch. Ein Stückchen weiter oben im Code hab ich was ganz ähnliches gemacht, was auch funktioniert.

Hier die Seite: http://cap-systems.de/?language=deutsch
Und die CSS: http://cap-systems.de/includes/main.css

Hoffe jemand findet den Fehler :coder2:

[Andreas L.]

Problem gelöst. Fehler lag ein Stückchen weiter oben. Hatte ein width: 100%; zuviel. :-)