|
|||
Abgerundete Kanten in jedem Browser?
Hallo!
Ich bin noch recht frisch was CSS und XHTML programmierung angeht. Da ich im moment an einer Website für ein OpenSource Project arbeite, welches dank FireFox-CSS-Befehle mit schönen abgerundeten Ecken daherkommt, ist nun die Frage, wie ich die Website (CSS/XHTML) ändern muß, damit auch in anderen Browsern wie IE und co die Seite sauber mit abgerundeten Ecken (wie in Firefox) dargestellt wird? Hier der link der noch nicht fertigen "preview" Website... nLibs - the package for easier programming .:[ www.nlibs.com ]:. XHTML Code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de" > <!-- ~~~~~~~~~~ H E A D ~~~~~~~~~~ --> <head> <!-- <meta http-equiv="Content-Type" content="text/html; charset=uft-8" /> --> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <meta name="description" content="" /> <meta name="keywords" content="veranstaltungen; nrw; events" /> <meta name="language" content="de" /> <meta name="author" content="Thorsten Will" /> <meta http-equiv="imagetoolbar" content="no" /> <title>nLibs - the package for easier programming .:[ www.nlibs.com ]:.</title> <link rel="stylesheet" type="text/css" href="style.css" /> <!-- ~~~~~~~~~~ I R G E N D W I E E X T E R N I N C S S ~~~~~~~~~~ --> <style type="text/css"> .navigation {padding:0 0 0 32px; margin:0; list-style:none; height:35px; background:#fff url(images/navigation/button1.gif); position:relative; border-width:0 1px; border-bottom:1px solid #444; -moz-border-radius-bottomLeft:10px; -moz-border-radius-bottomRight:10px;} .navigation li {float:left;} .navigation li a {display:block; float:left; height:35px; line-height:35px; color:#aaa; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;} .navigation li a b {float:left; display:block; padding:0 16px 0 8px;} .navigation li.current a {color:#fff; background:url(images/navigation/button3.gif);} .navigation li.current a b {background:url(images/navigation/button3.gif) no-repeat right top;} .navigation li a:hover {color:#fff; background:#000 url(images/navigation/button2.gif);} .navigation li a:hover b {background:url(images/navigation/button2.gif) no-repeat right top;} .navigation li.current a:hover {color:#fff; background:#000 url(images/navigation/button3.gif); cursor:default;} .navigation li.current a:hover b {background:url(images/navigation/button3.gif) no-repeat right top;} </style> </head> <!-- ~~~~~~~~~~ B O D Y ~~~~~~~~~~ --> <body> <div id="layout_init"> <div id="layout_container"> <!-- ~~~~~~~~~~ Banner ~~~~~~~~~~ --> <div id="layout_banner"> </div> <!-- ~~~~~~~~~~ NavigationBar ~~~~~~~~~~ --> <ul Class="navigation"> <li class="current"><a href="#nogo"><b>About</b></a></li> <li><a href="download.htm"><b>Download</b></a></li> <li><a href="license.htm"><b>License</b></a></li> <li><a href="theteam.htm"><b>The Team</b></a></li> <li><a href="contact.htm"><b>Contact</b></a></li> <li><a href="imprint.htm"><b>Imprint</b></a></li> </ul> <!-- ~~~~~~~~~~ Content ~~~~~~~~~~ --> <div id="main_left"> <br/> nLibs alias newLibs is an alternate open lib package. The project initiative was started by Thorsten Will (aka "Mr.Vain/Secretly!") in 2006 with the goal <br/> <br/> <br/> </div> <!-- ~~~~~~~~~~ Footbar ~~~~~~~~~~ --> <div id="layout_footbar"> <p>Copyright © 2006-2008 by nlibs - All rights resvered.</p> </div> <!-- ~~~~~~~~~~ End Container ~~~~~~~~~~ --> </div> </div> </body> </html> CSS Code: Code:
/* Author: Thorsten Will, Copyright 2008 Domain: http://www.secretly.de */ /* ---------------------------------------- Standard Elements ------------------------------------------- */ * { margin: 0; padding: 0; } html { height: 100%; padding-bottom: 1px; /* force scrollbars */ } body { background: #A1C1D8 url("http://xhtmlforum.de/images/design/background.jpg") repeat-x left top; font: normal 13px Verdana,sans-serif; } /* ---------------------------------------- Layout ------------------------------------------- */ #layout_init { margin: 25px auto 0; width: 960px; } #layout_container { background-color: #fff; border: 1px solid #444; color: #333; padding: 5px 5px; -moz-border-radius: 15px; -khtml-border-radius: 15px; } #layout_banner { background: url("http://xhtmlforum.de/images/design/secretly_banner.jpg") no-repeat left top; border: 1px solid #444; height: 138px; /* FIX THIS */ padding: 10px 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -khtml-border-radius-topleft: 10px; -khtml-border-radius-topright: 10px; } #layout_footbar { background: url("http://xhtmlforum.de/images/design/bgfooter.jpg") repeat-x left top; border: 1px solid #444; color: #FAFCFF; font-size: 0.85em; height: 25px; padding: 14px 10px 2px; -moz-border-radius:10px; -khtml-border-radius:10px; } #layout_content { background-color: #FFFF00; } /* Main Layout */ #main_left {width: 545px;} #main_right {width: 220px;} /* ---------------------------------------- Miscellaneous ------------------------------------------- */ /* Floats */ .left {float: left;} .right {float: right;} #content { background-color: #FFFF00; float: left; width: 780px; margin: 0; border-right: 1px dashed gray; padding-top:15px; padding-left: 35px; padding-right:30px; padding-bottom:40px; } Geändert von va!n (12.11.2008 um 21:22 Uhr) |
Sponsored Links |
|
|||
G++gle mal nach nifty corners / nifty cubes, da wirst Du fündig.
Ist zwar mit JS, aber wers abgeschaltet hat, bekommt eben eckige Boxen zu sehen.... nicht so schlimm
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
Sponsored Links |
|
|||
@Valentino:
Yep, ich weiss, dass IE leider diese FF-spezifischen CSS commands leider nicht beherrscht... daher ist ja die frage, wie man das ganze so lösen kann, das es auch in anderen Browsern als nur FF, mit abgerundeten Ecken dargestellt werden kann? @Andir: Danke für die info... Allerdings soll die Website komplett frei von JS sein... suche daher nach eine andere Alternative, wie ich den XTHML/CSS code oder Grafik(en) so ändern kann, dass auch ohne JS in jedem Browser die Website mit abgerundeten Kanten dargestellt wird ^^ |
|
|||
Mit CSS wirst du da wohl nicht weiter kommen, die Eigenschaft soll wohl erst in CSS 3.1 enthalten sein, bloß Firefox unterstützt sie jetzt schon ansonsten kann ich nur sagen du wirst wohl z.Z. keine andere Möglichkeit außer Grafiken haben.
|
|
|||
Du wirst kaum um JS herumkommen, wenn Du deinen Quelltext nicht über Gebühr aufblasen willst. Nifty Corners oder Cubes ist da schon sehr ordentlich, zumal unobstrusive.
Ansonsten diese Übersicht: CSSgallery.info Rounded cornes - CSS
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Iron Browser | klootzak | Offtopic | 1 | 01.11.2008 00:41 |
Super Browser - Ein Browser alle Engines? | tichy | Ressourcen | 6 | 17.04.2008 00:50 |
Abgerundete Kanten | Dizzy | CSS | 8 | 23.07.2007 16:34 |
[php] Default Browser | lomtas | Serveradministration und serverseitige Scripte | 5 | 14.12.2006 18:48 |
Problem mit Schriftgröße in Tabellen | pospiech | Knowledge Base | 20 | 11.08.2005 00:12 |