|
|||
![]()
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 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; } 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> 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 |
Sponsored Links |
|
|||
![]()
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. |
Sponsored Links |
|
|||
![]() Zitat:
![]() Mal schaun was sich noch für Probleme ergeben... Denk Link werd ich mir trotzdem nochmal genauer zu gemüte führen! Danke schonmal! |
|
|||
![]()
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; } ![]() |
|
|||
![]() Zitat:
das Problem ist ja schon gelöst ![]() 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 ![]() Viele Grüße Christian |
|
|||
![]() Zitat:
![]() ![]() |
|
|||
![]()
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 ![]() |
Sponsored Links |
![]() |
Stichwörter |
bilder, box, css, grafisch, grafischer rahmen, rahmen |
Themen-Optionen | |
Ansicht | |
|
|
![]() |
||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
3-Spalten in CSS und Tabellen IE/FF | IceMan | CSS | 7 | 20.07.2008 12:05 |
Tabellen Layout umsetzen in CSS! Im IE funzts nicht :-( | losninos | CSS | 3 | 23.05.2004 20:25 |
Newbiefrage wegen CSS anstatt Tabellen | Corto | CSS | 2 | 23.05.2004 20:00 |
css vs. tabellen - übersichtlichkeit | captain | CSS | 0 | 19.02.2004 11:08 |
Wie am besten alte HTML Seite mit Tabellen in CSS Layout ? | Fidi | CSS | 0 | 07.01.2004 11:27 |