|
|||
Rundungen (3 spaltig) darstellen
Hallo,
ich würde gerne so ähnlich wie in der Grafik im Anhang angedeutet so Ellipsen-förmige Elemente benutzen um meine Überschriften ansprechend darzustellen. Die Grafik ist natürlich stark abstrahiert aber ich denke damit sollte es klar werden: Links gibt es eine Rundung (mit fixer Breite) und rechts gibt es eine Rundung (mit fixer Breite). Das in der Mitte wird beliebig wiederholt (da kommt dann auch der Überschriften-Text rein). Auch wenn das grad alles in einer Farbe ist, so sollen das nachher eigene Bilder sein (was das Ganze eigentlich erst richtig erschwert...). Jetzt stellt sich mir (als Nicht-HTML/CSS-Profi) aber die Frage wie ich sowas am besten realisiere? Gibt ja viele Tutorials zu abgerundeten Ecken mit CSS. Allerdings treffen die alle nicht wirklich auf meinen Fall hier zu.... Was ich mir überlegt (und schon probiert) hatte, das mit Tabellen zu lösen (sprich eine Zeile mit 3 Spalten...). Gab da aber auch Probleme und scheint mir heutzutage nicht mehr so ganz modern zu sein Welche Möglichkeiten hätte ich denn da ohne Tabellen? Hat da jemand Ansätze bzw. das schon mal versucht? Ich hab wie gesagt auch schon paar Versuche gemacht (auch mit divs), aber irgendwie hat das nie so richtig geklappt... |
Sponsored Links |
|
|||
Hallo Zwiebelritter,
ja klar, ich will ja auch Bilder hierfür verwenden 3 Stück um ganz genau zu sein (links eine "Ecke", rechts eine "Ecke", und in der Mitte ein wiederholbares (repeat-x)). Es hapert "lediglich" an der Umsetzung via CSS (oder falls das eher schwer/unmöglich wird via Tabellen). |
|
|||
Mach dich mal zu "Sliding Doors of CSS" schlau. Ob da jetzt runde oder ovale "Ecken" umgesetzt werden sollen spielt dabei keine Rolle.
Tabellen brauchst du ganz sicher nur, wenn der Inhalt sie erforderlich macht.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Re
mhh naja ich weiß nicht wie du das positionieren willst aber ein Ansatz wäre,
zm mach ich das immer so eine div in html um das gewünschte Gesamtelement machen dann 3 Divs nach da drin legen und diese dann floaten das mittlere dann mit einer Auto Größe also in etwa so... HTML-Code:
<div id="abgerundete_box"> <div id="linke_rundung"></div> <div id="füller"></div> <div id="rechte_rundung"></div> <div id="inhalt_text"></div> </div> Code:
#abgerundete_box { height: 36px;//höhe der grafik min-width: 951px; //minimale breite damit text und grafiken nebeneinander stehen können } #linke_rundung { background-image:url("Images/rundung_left.png"); height: 36px; width:475px; float: left; } #rechte_rundung { background-image:url("Images/rundung_right.png"); height: 36px; width:475px; float: right; margin-top: -36px; } #menue_middle { background-image: url("Images/füller.png"); height:36px; width:auto; margin: 0 475px;//hällt abstand links und rechts zu den grafiken damit der browser weiss wie viel er aufüllen muss weil ja rechts und links eine grafik von 475px in meinem fall ist } #inhalt_text { float:none; width:100%; height:36px; line-height: 36px; font-size: 22px; position: absolute; text-align:center; margin-top: -36px; min-width: 951px; clear:both; } Geändert von TheBlackPitcher (03.02.2010 um 18:46 Uhr) |
|
|||
Zitat:
Funktioniert jetzt... ich hatte das zuvor genau so ähnlich ohnehin schon mal probiert, aber ohne Erfolg... bis ich vorhin gemerkt hab, dass ich das jeweilige kleine "genaue" Bild, was eine Rundung darstellt nicht transparent speichern darf, sondern dem auch immer die entsprechende Hintergrundfarbe der Seite geben muss (weil es sonst ja das andere "füllende" Hintergrundbild aufgrund der Transparenz durchscheint). Ist das korrekt so? (Nur verständnishalber...) |
|
|||
Ich weiß nicht.
Zeig doch einfach, was du gemacht hast. Link?
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Andere Version der Seite mit IE5 darstellen als mit IE7 z.B. | JS-Gestaltung | (X)HTML | 7 | 23.10.2009 15:48 |
Datensätze aus MySql darstellen | hieger | CSS | 22 | 08.08.2007 07:24 |
ge-float-ete Listeneinträge - Liste mittig darstellen | Hasch | CSS | 3 | 03.11.2006 16:56 |
Bildergalerie - wie am besten Bilder darstellen? | Boris | CSS | 8 | 06.09.2004 00:19 |
Tutorial für Boxen mit Rundungen? | terry | CSS | 7 | 15.01.2004 00:35 |