zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Rundungen (3 spaltig) darstellen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.02.2010, 17:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.02.2009
Beiträge: 8
Freecastle befindet sich auf einem aufstrebenden Ast
Standard 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...
Angehängte Grafiken
Dateityp: png ellipse.PNG (1,9 KB, 8x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.02.2010, 17:35
Neuer Benutzer
neuer user
 
Registriert seit: 14.01.2010
Beiträge: 19
Zwiebelritter befindet sich auf einem aufstrebenden Ast
Standard

Ich glaub solche rundungen sind nicht möglich.
Da wirst du wohl auf Bilder zurückgreifen müssen...
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.02.2010, 18:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.02.2009
Beiträge: 8
Freecastle befindet sich auf einem aufstrebenden Ast
Standard

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).
Mit Zitat antworten
  #4 (permalink)  
Alt 03.02.2010, 18:19
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 03.02.2010, 18:35
Neuer Benutzer
neuer user
 
Registriert seit: 02.02.2010
Beiträge: 12
TheBlackPitcher befindet sich auf einem aufstrebenden Ast
Standard 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>
jetz zum css bei dem ganzen
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)
Mit Zitat antworten
  #6 (permalink)  
Alt 03.02.2010, 21:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.02.2009
Beiträge: 8
Freecastle befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
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.
Das war genau das was ich meinte bzw. suchte (wusste nur nicht wie ich das besser ausdrücken sollte), danke schön!
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...)
Mit Zitat antworten
  #7 (permalink)  
Alt 03.02.2010, 21:32
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Freecastle Beitrag anzeigen
Ist das korrekt so? (Nur verständnishalber...)
Ich weiß nicht.
Zeig doch einfach, was du gemacht hast. Link?
Mit Zitat antworten
Antwort

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
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:52 Uhr.