Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag25.06.2010 um 22:01 (UTC)    
Titel: Header-Ecken abrunden, nur wie?

Hallo,

ich habe das Design "Iceblue" und würde nun gerne die Ecken des Headers abrunden. Weiß jemand von euch, wie das geht?

Besten Dank im Voraus

Michael
Beitrag26.06.2010 um 07:28 (UTC)    
Titel:

das geht in dem Du Dir die Headergrafik entwirst und da die Ecken transparent machst
Beitrag26.06.2010 um 10:30 (UTC)    
Titel:

netter Ansatz, doch das ist bei mir nicht möglich.

Meine Header-Grafik ist nur 920 pixel breit, der gesamte Header aber wesentlich breiter.

Meine Webseite soll ohne grosses Scrollen (in der Breite) auch mit kleineren Auflösungen betrachtet werden können, deshalb nur 920 pixek für die Grafik.

Es muss noch eine andere Möglichkeit geben, die Ecken abzurunden.
Beitrag26.06.2010 um 10:40 (UTC)    
Titel:

Hey,
füge in den Code deines Headers folgendes hinzu:

Zitat:
-moz-border-radius: 8px;


Das kommt in den CSS-Code, welcher den Header bestimmt. Die 8 bestimmt im Beispiel, dass die Ecken im Radius von 8 Pixel abgerundet werden. 0 ist garnicht abgerundet, 100 ist das höchste (dann hast du aber fast nur noch einen Kreis).

Mfg
GamingParadise
Beitrag26.06.2010 um 11:06 (UTC)    
Titel:

gamingparadise hat Folgendes geschrieben:
Hey,
füge in den Code deines Headers folgendes hinzu:

Zitat:
-moz-border-radius: 8px;


Das kommt in den CSS-Code, welcher den Header bestimmt. Die 8 bestimmt im Beispiel, dass die Ecken im Radius von 8 Pixel abgerundet werden. 0 ist garnicht abgerundet, 100 ist das höchste (dann hast du aber fast nur noch einen Kreis).

Mfg
GamingParadise


Hi,

bei diesem Code sollte man aber bedenken, dass er nur für den Mozilla firefox gültig ist. Das heißt: Andere Browser stellen keine Runden ecken dar.

Lösungen:

Zitat:
-webkit-border-radius: 10px; /*Google Chrome & Safari*/
-moz-border-radius: 10px; /*Mozilla Firefox*/
border-radius: 10px; /*W3C*/


Da die Eigenschaft border-radius eigendlich nur ein Entwurf ist und es das sogenannte "CSS3", von dem viele spreche, als offizielle Spezifikation des W3C nochgarnicht gibt, haben die Hersteller ihre eigenen CSS Eigenschaften "erfunden", die auch nur in ihren Browsern funktionieren.

Im code oben siehst du einmal den befehl für Webkitbrowser (Google Chrome und Safari), für Mozilla Firefox und den Entwurf des W3C. Für alle Eigenschaften muss derselbe Wert angegeben sein, damit es in allen Browsern richtig dargestellt wird.

Mit diesem code oben hast du alle Browser abgedeckt, außer - den Internet Explorer. Die aktuelle Version des IE unterstüzt den Entwurf leider nicht. dafür gibt es aber Hoffnung in Version 9. Sicherlich gibts da auch lösungen wie z.B. eine Grafik oder mit javascript, siehte http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/ (englisch).
______________

Beitrag26.06.2010 um 15:07 (UTC)    
Titel:

Besten Dank für alle Antworten, doch ich habe vergessen zu sagen, dass nur die oberen Ecken abgerundet sein sollen. Bei allen vier Ecken sieht das nicht aus.
Beitrag26.06.2010 um 18:28 (UTC)    
Titel:

Das wäre dann folgendes:

Zitat:


/*Oben Links*/
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
border-top-left-radius: 10px;

/*Oben rechts*/

-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
border-top-right-radius: 10px;


Du siehst, dass einfach nur eine spezifische Angabe zur Seite (left oder right) und zur position (top und bottom) gemacht werden.
______________

Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de