Suche im Forum:
Suchen


Autor Nachricht
Beitrag22.01.2010 um 22:44 (UTC)    
Titel: Border-Ecken abrunden

Hallo!

Ich würde gerne die Ecken meines Content- und Headerborders abrunden. Man kann das hier auf der webme Fehlerseite sehen:
http://www.feuerwehr-aktuell.de.tl/ (Seite gelöscht)

Außerdem hätte ich gerne ein paar Leerzeilen unter meinem Content. Mit br oder &nbsp klappt's nicht, das hab' ich schon versucht.

Würde mich über Eure Hilfe freuen.

Liebe Grüße
Andy
Beitrag23.01.2010 um 14:26 (UTC)    
Titel:

Hi,

Soweit ich weiß funktioniert das am schnellsten wen du grafiken selber einbindest die dann runde ecken haben. Es gibt auch eine Methode mit CSS habe ich irgendwo mal gelesen aber das ist etwas kompliziert.

MfG, Master-Place
______________
Beitrag23.01.2010 um 18:04 (UTC)    
Titel:

es ist nicht kompliziert....bei den CSS Anweisungen einfügen.
Code:
für oben

-moz-border-radius-topright: 5px;    
-khtml-border-radius-topright: 5px;    
-webkit-border-top-right-radius: 5px;    
-moz-border-radius-topleft: 5px;    
-khtml-border-radius-topleft: 5px;    
-webkit-border-bottom-top-radius: 5px;

für unten

-moz-border-radius-bottomright: 5px;    
-khtml-border-radius-bottomright: 5px;    
-webkit-border-bottom-right-radius: 5px;    
-moz-border-radius-bottomleft: 5px;    
-khtml-border-radius-bottomleft: 5px;    
-webkit-border-bottom-left-radius: 5px;


für den Abstand kannst du auch padding nutzen:

Code:
   padding: 10px 10px 40px 10px;


im Beispiel ist überall ein Abstand zum Rand von 10 pixel nur unten eben 40 pixel.
______________
 


Zuletzt bearbeitet von vw-golf-4 am 23.01.2010, 19:08, insgesamt einmal bearbeitet
Beitrag26.01.2010 um 20:35 (UTC)    
Titel:

vw-golf-4 hat Folgendes geschrieben:
es ist nicht kompliziert....bei den CSS Anweisungen einfügen.
Code:
für oben

-moz-border-radius-topright: 5px;    
-khtml-border-radius-topright: 5px;    
-webkit-border-top-right-radius: 5px;    
-moz-border-radius-topleft: 5px;    
-khtml-border-radius-topleft: 5px;    
-webkit-border-bottom-top-radius: 5px;

für unten

-moz-border-radius-bottomright: 5px;    
-khtml-border-radius-bottomright: 5px;    
-webkit-border-bottom-right-radius: 5px;    
-moz-border-radius-bottomleft: 5px;    
-khtml-border-radius-bottomleft: 5px;    
-webkit-border-bottom-left-radius: 5px;



Ich habe den Code ausprobiert, da tut sich aber nicht sehr viel, außer dass sich der Content ein wenig vom Header differenziert (wahrscheinlich die 5px).

Wie füge ich denn diese Grafiken ein und woher bekomme ich diese?

Viele Grüße + Danke für Eure Hilfe
Andy
Beitrag27.01.2010 um 15:39 (UTC)    
Titel:

hast du es so gemacht?

Code:
#grossheader {
background-image: url(http://img.webme.com/pic/s/sikuner/titel1.jpg);
width: 922px;
height: 103px;
border: 1px solid #999999;
-moz-border-radius: 5px;   
-khtml-border-radius: 5px;   
-webkit-border-radius: 5px;   
}


sollte so klappen. (geht mit dem Internet Explorer nicht )
______________
 
Beitrag27.01.2010 um 15:41 (UTC)    
Titel:

Hallo,
das abrunden mit CSS funktioniert bisher nur bei Firefox!
Für den IE muss man weiterhin Grafiken erstellen, die abgerundet sind...

mfg Dominik
______________
Besucht die offizielle Hilfeseite vom Homepage-Baukasten:

Iceblue Generator | Red Generator | Butterfly Generator
Beitrag31.01.2010 um 20:21 (UTC)    
Titel:

Das mit der Firefox-Methode hat zu 50% geklappt, vielen Dank!
Nur: Ich hätte gerne, dass die Ecken nur an der Oberseite des Headers abgerundet sind und am Ende des Contents - gibt es denn hierfür auch einen Code?
Könnt ihr mir sagen, wie ich diesen Header und Content für den IE "abrunde".

Danke für eure Bemühungen + einen schönen Restsonntag
Andreas
Beitrag01.02.2010 um 15:48 (UTC)    
Titel:

Zitat:
Hallo,
das abrunden mit CSS funktioniert bisher nur bei Firefox!
Für den IE muss man weiterhin Grafiken erstellen, die abgerundet sind...

mfg Dominik


Dominik hat es doch ausreichend erklärt oder nicht?

Zum anderen Problem:
Für den Header:
Zitat:
-moz-border-radius: 5px 5px 0px 0px;

Für den Content:
Zitat:
-moz-border-radius: 0px 0px 5px 5px;


Zuletzt bearbeitet von tjpeiler-designs am 01.02.2010, 19:17, insgesamt 3-mal bearbeitet
Beitrag07.02.2010 um 10:52 (UTC)    
Titel:

Es hat anscheinend funktioniert!
Rückmeldung wäre beim nächsten Mal schön Wink

vg tjpeiler
Beitrag07.02.2010 um 13:13 (UTC)    
Titel:

Das sehe ich auch so! Danke an die Helfer!

Ich schließe ...

Gruß Marco
______________
Mit besten Grüßen Marco
www.harley-motorcycles.de

Beiträge der letzten Zeit anzeigen:   


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