Willkommen
myGully
Links
Forum
#1
Erfahrener Newbie
Registriert seit: Dec 2010
Ort: Luzern, Schweiz
Beiträge: 144
Bedankt: 553
Abgerundete Navigation IE
Hallo Zusammen
Ich versuche eine Navigation mit abgerundeten Ecken zu erstellen. Im
Google Chrome funktioniert dies auch perfekt: siehe Bild
Leider wird es im
IE überhaupt nicht so dargestellt wie ich mir das vorstelle. Siehe Bild
Was mache ich falls, bzw. was muss ich verändern. Momentan arbeite ich ohne Bild (nur CSS) und möchte dies auch weiterhin so tun. Könnt ihr mir vielleicht weiterhelfen??
Vielen Dank
__________________
Win7 x64 + Ubuntu 11.04 AMD Phenom X4 Black Edition 955, 8GB RAM, Asus 5770
Falls Links down sein sollten bitte PN!
#2
Anfänger
Registriert seit: Jun 2010
Beiträge: 44
Bedankt: 14
Hi, je nachdem welche IE Version du nutzt (die Info fehlt hier leider) funktioniert das CSS Attribut was du genutzt haben könntest nicht.
Siehe hier: [
Link nur für registrierte Mitglieder sichtbar. Bitte einloggen oder neu registrieren ]
#3
Erfahrener Newbie
Registriert seit: Dec 2010
Ort: Luzern, Schweiz
Beiträge: 144
Bedankt: 553
Zitat:
Zitat von
sysi
Hi, je nachdem welche IE Version du nutzt (die Info fehlt hier leider) funktioniert das CSS Attribut was du genutzt haben könntest nicht.
Siehe hier: [
Link nur für registrierte Mitglieder sichtbar. Bitte einloggen oder neu registrieren ]
Vielen Dank, aber leider funktioniert das nicht ganz. Vielleicht kannst du mir weiterhelfen, die url zu dieser Seite ist: [
Link nur für registrierte Mitglieder sichtbar. Bitte einloggen oder neu registrieren ]
Vielen vielen Dank
Gruss struchli
__________________
Win7 x64 + Ubuntu 11.04 AMD Phenom X4 Black Edition 955, 8GB RAM, Asus 5770
Falls Links down sein sollten bitte PN!
#4
Erfahrener Newbie
Registriert seit: Jul 2009
Beiträge: 59
Bedankt: 611
leider wirst du für den IE alternative grafiken zur verfügung stellen müssen, da dieser in sachen nicht so fit ist wie firefox,chrome usw.
#5
Newbie
Registriert seit: Nov 2008
Beiträge: 52
Bedankt: 123
Es gibt viele Möglichkeiten auch im IE mit CSS runde Ecken hinzubekommen.
Am einfachsten ist es sicherlich den Nutzer zu zwingen das
HTC-Skript CSS Curved Corner zu verwenden. Dann wir üblich für das Element die Abrundung definieren.
Code:
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
Dürfte kein Problem sein.
2. Möglichkeit die mir so einfällt, ist das gesamte Element
stufenweise zu verschachteln.
Hier mal eine [
Link nur für registrierte Mitglieder sichtbar. Bitte einloggen oder neu registrieren ].
(Das produziert jedoch ziemlichen Code Salat, wenn du das oft verwendest)
Die
3. Möglichkeitist das Verwenden von
Grafiken , davon gibt es viele Varianten.
Ich würde einfach eine Gif Datei erstellen mit transparent und den gewünschten Radius im oberen und unteren Bereich in der Farbe des Hintergrundes.
Damit das ganze so wenig Serveraufrufe benötigt wie nur nötig sollteste aber
spriten via css.
Es gibt noch etliche Varianten und Möglichkeiten, aber das sind meiner Meinung nach die besten. Kannste bedenkenlos nutzen.
#6
Erfahrener Newbie
Registriert seit: Dec 2010
Ort: Luzern, Schweiz
Beiträge: 144
Bedankt: 553
Vielen Dank für die Antworten , leider hat mir nichts geholfen, ich komme einfach nicht weiter.
Vielleicht könnt Ihr mir besser weiterhelfen, wenn Ihr den Code habt.
PHP Code:
PHP-Code:
<?php // No direct access. defined ( '_JEXEC' ) or die; JHTML :: _ ( 'behavior.framework' , true ); $app = JFactory :: getApplication (); ?> echo '<!DOCTYPE html>' ; ?> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <?php echo $this -> baseurl ?> /templates/<?php echo $this -> template ?> /css/template.css" /> <?php echo $this -> baseurl ?> /templates/system/css/system.css /> <?php echo $this -> baseurl ?> /templates/system/css/general.css" type="text/css" /> <?php echo $this -> baseurl ?> /templates/dhg/css/template-ie.css" type="text/css" />
CSS Code
Code:
@charset "UTF-8";
/* CSS Document */
html{
height:100%;
width:100%;
}
body {
font: normal .8em/1.5em Arial, Helvetica, sans-serif;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(left, #ffffff 0%, #dddddd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #ffffff), color-stop(100%, #dddddd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #ffffff 0%, #dddddd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #ffffff 0%, #dddddd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #ffffff 0%, #dddddd 100%); /* IE10+ */
background: linear-gradient(left, #ffffff 0%, #dddddd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddddd', GradientType=1 ); /* IE6-9 */
width: 900px;
margin: 60px auto;
color: #666;
}
#nummer1 {
}
#login{
height:26px;
}
#container {
width:1024px;
margin: -60px auto;
}
#header {
}
#facebook {
}
#navi {
}
#content {
margin-top:30px;
margin-left:30px;
margin-right:30px;
}
#footer {
}
a {
color: #333;
}
#nav {
behavior: url(border-radius.htc);
margin: 0;
padding: 7px 6px 0;
line-height: 100%;
border-radius: 32px;
-webkit-border-radius: 32px;
-moz-border-radius: 32px;
-khtml-border-radius: 32px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
background: #c6c6c6; /* Old browsers */
background: -moz-linear-gradient(top, #c6c6c6 0%, #cbcbcb 7%, #b5b5b5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c6c6c6), color-stop(7%, #cbcbcb), color-stop(100%, #b5b5b5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #c6c6c6 0%, #cbcbcb 7%, #b5b5b5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #c6c6c6 0%, #cbcbcb 7%, #b5b5b5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #c6c6c6 0%, #cbcbcb 7%, #b5b5b5 100%); /* IE10+ */
background: linear-gradient(top, #c6c6c6 0%, #cbcbcb 7%, #b5b5b5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c6c6c6', endColorstr='#b5b5b5', GradientType=0 ); /* IE6-9 */
/* border: solid 1px #6d6d6d;*/
border:none;
}
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
/* main level link */
#nav a {
font-weight: bold;
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
background: #d1d1d1; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#a1a1a1'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#a1a1a1)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ebebeb, #a1a1a1); /* for firefox 3.6+ */
color: #444;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#nav ul a:hover {
background: #94C948 !important; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#94C948', endColorstr='#94C948'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#94C948), to(#94C948)) !important; /* for webkit browsers */
background: -moz-linear-gradient(top, #94C948, #94C948) !important; /* for firefox 3.6+ */
color: #fff !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
/* level 2 list */
#nav ul {
background: #ddd; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cfcfcf'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cfcfcf)); /* for webkit browsers */
background: -moz-linear-gradient(top, #fff, #cfcfcf); /* for firefox 3.6+ */
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
z-index:1;
}
/* dropdown */
#nav li:hover > ul {
display: block;
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: normal;
text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
}
/* level 3+ list */
#nav ul ul {
left: 181px;
top: -3px;
}
/* rounded corners for first and last child */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* clearfix */
#nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
display: inline-block;
}
html[xmlns] #nav {
display: block;
}
* html #nav {
height: 1%;
}
CSS IE Code
Code:
@charset "UTF-8";
/* CSS Document */
html{
height:100%;
}
body {
font: normal .8em/1.5em Arial, Helvetica, sans-serif;
background: -ms-linear-gradient(left, #ffffff 0%, #dddddd 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddddd', GradientType=1 ); /* IE6-9 */
width: 900px;
margin: 0 auto;
color: #666;
width:100%;
height:100%
}
#container {
width:1024px;
margin:0 auto;
height:100%
}
#header {
}
#facebook {
}
#navi {
}
#content {
}
#footer {
}
a {
color: #333;
}
#nav {
behavior: url(border-radius.htc);
margin: 0;
padding: 7px 6px 0;
line-height: 100%;
border-radius: 32px;
-webkit-border-radius: 32px;
-khtml-border-radius: 32px;
-O-border-radius: 32px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
background: #c6c6c6; /* Old browsers */
background: -ms-linear-gradient(top, #c6c6c6 0%, #cbcbcb 7%, #b5b5b5 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c6c6c6', endColorstr='#b5b5b5', GradientType=0 ); /* IE6-9 */
/* border: solid 1px #6d6d6d;*/
border:none;
}
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
/* main level link */
#nav a {
font-weight: bold;
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
background: #d1d1d1; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#a1a1a1'); /* for IE */
color: #444;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
}
#nav ul a:hover {
background: #0399d4 !important; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#04acec', endColorstr='#0186ba'); /* for IE */
color: #fff !important;
-webkit-border-radius: 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
/* level 2 list */
#nav ul {
background: #ddd; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cfcfcf'); /* for IE */
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
z-index:1;
}
/* dropdown */
#nav li:hover > ul {
display: block;
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: normal;
text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
}
/* level 3+ list */
#nav ul ul {
left: 181px;
top: -3px;
}
/* rounded corners for first and last child */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-webkit-border-top-right-radius: 9px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
}
/* clearfix */
#nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
display: inline-block;
}
html[xmlns] #nav {
display: block;
}
* html #nav {
height: 1%;
}
Vielen Vielen Dank für weiter Tipps/Hilfe!!!!
__________________
Win7 x64 + Ubuntu 11.04 AMD Phenom X4 Black Edition 955, 8GB RAM, Asus 5770
Falls Links down sein sollten bitte PN!
Du kannst keine neue Themen eröffnen
Du kannst keine Antworten verfassen
Du kannst keine Anhänge posten
Du kannst nicht deine Beiträge editieren
HTML-Code ist Aus .
Alle Zeitangaben in WEZ +1. Es ist jetzt 13:05 Uhr.
Abgerundete Navigation IE
Linear-Darstellung
