zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Umsetzung eines grafischen Rahmens von Tabellen in CSS

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.03.2009, 01:17
CSS-Krieger
neuer user
Thread-Ersteller
 
Registriert seit: 22.03.2009
Ort: Franken
Beiträge: 4
HeyJ befindet sich auf einem aufstrebenden Ast
Frage Umsetzung eines grafischen Rahmens von Tabellen in CSS

Liebe Xhtml-Gemeinde,

ich hoffe mal das ich in meinem ersten Beitrag nicht gleich gesteinigt werde, aber ich habe schon ein wenig recherchiert und nichts endgültig funktionierendes für mein Problem gefunden.

irgendwie bin ich mit css noch nicht so richtig warm geworden. ich werd immer wieder vor irgendwelche bescheuerten probleme gestgellt die ich bisher mit meinen Tabellen nicht hatte *g*... ne ich will hier auf keinen fall wieder irgendwelche diskusionen anfangen (ich versuchs ja zu lernen ) ich erklärs nun einfach mal

ich hab mal eine grafik erstellt wie es aussehen soll (soweit hab ichs mit css fast schon geschaft):

es funktioniert soweit allerdings mit nur einer einzgen Box... auf Grund der css-eigentschaft "position" werden nachfolgende Boxen immer darüber gelegt... mir ist schon bewusst, dass diese eigentschaft eigentlich mist ist, allerdings hab ich bisher keine andere möglichkeit gefunden, dass die box nur annähernd so aussieht wie ich will.
aktuell sieht es wie folgt aus, wenn ich mehrere solche Boxen hintereinander im HTML-Code unterbringe was sicher an dem position-Attribut hängt:

(in dem Beispiel sind unterschiedlich lange Texte verwendet; Bei gleich langen Texten liegt ja alles genau übereinander; Engine hier: FireFox3)

ich geb euch mal meinen bisherigen code:

CSS:
Code:
.article_box {
      position:absolute;
      width: 450px;
      padding-right: 24px;
      padding-bottom: 27px;
      padding-top: 10px;
      padding-left: 10px;
      background-position: right;
      background-image: url('../grafik/r.gif');
      background-repeat: repeat-y;
      z-index: 4;
}
.box-ro {
      position:absolute;
      top:0px;
      right:0px;
      width:22px;
      height:8px;
      z-index:1;
      background-image: url('../grafik/ro.gif');
      background-repeat: no-repeat;
}
.box-ru { 
      position:absolute;
      bottom:0px;
      right:0px;
      width:22px;
      height:25px;
      z-index:3;
      background-image: url("../grafik/ru.gif");
      background-repeat: no-repeat;
}
.box-u { 
      position:absolute;
      bottom:0px;
      left: 17px;
      height:25px;
      width: 450px;
      z-index:2;
      background-image: url('../grafik/u.gif');
      background-repeat: repeat-x;
}
.box-lu { 
      position:absolute;
      bottom:0px;
      left:0px;
      width:17px;
      height:25px;
      z-index:3;
      background-image: url('../grafik/lu.gif');
      background-repeat: no-repeat;
      background-position: bottom;
}
HTML:
Code:
<div class="article_box">
<div class="box-ro"></div>
<div class="box-r"></div>
<div class="box-ru"></div>
<div class="box-u"></div>
<div class="box-lu"></div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua
.</div>
mein Ziel ist es eine mit CSS gestylte Box zu schaffen die in Höhe und Breite Variabel ist. Aktuell ist sie in der Breite fix auf 450px. Das wäre soweit auch nicht so schlimm und auf jedenfall akzeptabel.
Die Box besteht aus 5 Bildern: 1) rechte obere Ecke 2) Mittelteil rechts 3) Ecke rechts unten 4) unteres Mittelteil 5) linke untere Ecke
Ich hab bisher nur mit der Position-Mehtode geschafft die Bilder an die korrekte Position zu verpflanzen. Wenn ich aber dem umgebenden DIV-Container "article_box" das position-Attribut entziehe, dann verflüchtigen sich auch alle verschachtelten Elemente auf das gesamte Browserfenster...

Wäre toll wenn mir jemand dabei helfen könnte und evtl den fehler in meinem Quellcode beheben kann *g* bzw. mir erklären kann welcher Web für dieses Problem der bessere wäre. Vielen Dank schon mal an die CSS Gurus hier

Gute Nacht noch!
Gruß Christian
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.03.2009, 07:36
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 06.06.2006
Beiträge: 188
hubert17 befindet sich auf einem aufstrebenden Ast
Standard

der text muß in die div's und diese müssen verschachtelt werden.

wenn du Runde und andere Ecken (Webdesign) | andreas-kalt.de durcharbeitest, wirst du dein problem lösen können.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.03.2009, 10:16
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.843
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

Es könnte auch schon reichen, wenn Du der Artikel-Box anstelle von "position:absolute" ein "position:relative" gibst, dadurch sollten die Artikel-Boxen nicht mehr aus dem Dokumentenfluss genommen werden und regulär untereinander dargestellt werden und die Angaben zu "position:absolute" für die Rahmen beziehen sich dann auf die Eltern-Box (hier: Artikel-Box).

Ansonsten, wie im verlinkten Artikel.
Mit Zitat antworten
  #4 (permalink)  
Alt 22.03.2009, 12:02
CSS-Krieger
neuer user
Thread-Ersteller
 
Registriert seit: 22.03.2009
Ort: Franken
Beiträge: 4
HeyJ befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von mantiz Beitrag anzeigen
Es könnte auch schon reichen, wenn Du der Artikel-Box anstelle von "position:absolute" ein "position:relative" gibst
Echt super! Vielen Dank, das hilft ... so einfach kann es sein *g*
Mal schaun was sich noch für Probleme ergeben...

Denk Link werd ich mir trotzdem nochmal genauer zu gemüte führen!

Danke schonmal!
Mit Zitat antworten
  #5 (permalink)  
Alt 22.03.2009, 14:22
XHTML/CSS Freak since '07
neuer user
 
Registriert seit: 17.03.2009
Beiträge: 28
Manko befindet sich auf einem aufstrebenden Ast
Standard

Wenn ich mich nicht irre, dann müsste doch ein einfaches repeat-x statt dem y die Lösung des Problems sein.

HTML-Code:
.article_box {
      position:absolute;
      width: 450px;
      padding-right: 24px;
      padding-bottom: 27px;
      padding-top: 10px;
      padding-left: 10px;
      background-position: right;
      background-image: url('../grafik/r.gif');
      background-repeat: repeat-x /* statt dem y? */;
      z-index: 4;
}
Warum eigentlich repeat-y? Da komm ich jetzt nicht ganz mit!
Mit Zitat antworten
  #6 (permalink)  
Alt 23.03.2009, 15:25
CSS-Krieger
neuer user
Thread-Ersteller
 
Registriert seit: 22.03.2009
Ort: Franken
Beiträge: 4
HeyJ befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Manko Beitrag anzeigen
Wenn ich mich nicht irre, dann müsste doch ein einfaches repeat-x statt dem y die Lösung des Problems sein.
[...]
Warum eigentlich repeat-y? Da komm ich jetzt nicht ganz mit!
Hi,

das Problem ist ja schon gelöst ... Das Repeat-x/y hätte das Problem natürlich nicht behoben. Das gibt ja nur an in welche Richtung sich das Bild wiederholen soll. Die Problematik war ja auch nicht, dass der Rahmen nicht aufgebaut werden kann (das hab ich ja immerhin mit einem einzelnen geschafft) sondern, dass ich nicht mehrere untereinander platzieren konnte.

und bei dem Tag article_box hab ich einfach die Grafik für den vertikalen rechten Streifen eingebaut und dieser muss sich natürlich auch von oben nach unten wiederholen. Deshalb Repeat-y (du erinnerst dich doch sicher an die X-Y-Graphen aus deiner Mathematik-Schulzeit ; so kann man sichs merken)

Viele Grüße
Christian
Mit Zitat antworten
  #7 (permalink)  
Alt 23.03.2009, 15:42
XHTML/CSS Freak since '07
neuer user
 
Registriert seit: 17.03.2009
Beiträge: 28
Manko befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von HeyJ Beitrag anzeigen
Hi,

das Problem ist ja schon gelöst ... Das Repeat-x/y hätte das Problem natürlich nicht behoben. Das gibt ja nur an in welche Richtung sich das Bild wiederholen soll. Die Problematik war ja auch nicht, dass der Rahmen nicht aufgebaut werden kann (das hab ich ja immerhin mit einem einzelnen geschafft) sondern, dass ich nicht mehrere untereinander platzieren konnte.

und bei dem Tag article_box hab ich einfach die Grafik für den vertikalen rechten Streifen eingebaut und dieser muss sich natürlich auch von oben nach unten wiederholen. Deshalb Repeat-y (du erinnerst dich doch sicher an die X-Y-Graphen aus deiner Mathematik-Schulzeit ; so kann man sichs merken)

Viele Grüße
Christian
Ich bin mir schon im klaren über die Funktion von repeat-x/y. Aber weshalb soll sich der Hintergrund vertikal wiederholen?
Mit Zitat antworten
  #8 (permalink)  
Alt 23.03.2009, 15:49
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.843
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

Weil der Hintergrund, der sich dort vertikal wiederholt für den rechten Rahmen verantwortlich ist und man nicht weiß, wie hoch die Box ist?
Mit Zitat antworten
  #9 (permalink)  
Alt 23.03.2009, 16:24
CSS-Krieger
neuer user
Thread-Ersteller
 
Registriert seit: 22.03.2009
Ort: Franken
Beiträge: 4
HeyJ befindet sich auf einem aufstrebenden Ast
Standard

Die Box ist immer so hoch wieder deren Inhalt...
Ich hab die "article_box" ja so eingestellt, dass das Padding auf die Breite der Plazierten Bilder eingestellt ist sodass der Content die Bilder nicht überlagert und die Grafik für rechts wiederholt sich ja sowieso nur bis zum ende der Box... per z-index hab ich festgelegt welche der Grafiken welche Reihenfolge hat.

Ich hoff dass ichs selbst richtig wiedergegeben hab
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
bilder, box, css, grafisch, grafischer rahmen, rahmen

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
3-Spalten in CSS und Tabellen IE/FF IceMan CSS 7 20.07.2008 13:05
Tabellen Layout umsetzen in CSS! Im IE funzts nicht :-( losninos CSS 3 23.05.2004 21:25
Newbiefrage wegen CSS anstatt Tabellen Corto CSS 2 23.05.2004 21:00
css vs. tabellen - übersichtlichkeit captain CSS 0 19.02.2004 12:08
Wie am besten alte HTML Seite mit Tabellen in CSS Layout ? Fidi CSS 0 07.01.2004 12:27


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:57 Uhr.