zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Abgerundete Kanten in jedem Browser?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.11.2008, 21:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.08.2008
Beiträge: 13
va!n befindet sich auf einem aufstrebenden Ast
Standard 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 &copy;  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)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 12.11.2008, 22:10
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 12.11.2008, 22:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.08.2008
Beiträge: 13
va!n befindet sich auf einem aufstrebenden Ast
Standard

@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 Zitat antworten
  #4 (permalink)  
Alt 12.11.2008, 22:42
Neuer Benutzer
neuer user
 
Registriert seit: 02.11.2008
Beiträge: 6
wave befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 12.11.2008, 22:51
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:34 Uhr.