nicht angemeldet
Bei hinzufügen von runden Div-Ecken fehler im ie7 durch border
Guten Abend,
habe ein Problem mit dem lieben IE7.
Und zwar benutze ich das jquery plugin - curvycorners
Plugin
alles Funktioniert wunderbar, auch mit border, aber bei meinem Menu geht es nicht.
Hier der HTML-Code
<div id="navigationDiv">
<div class="menuPlaceholder" id="menuPlaceholder1"> </div>
<div class="menuPlaceholder"></div>
<div class="menuTabs" id="menuTab1"><span><a>Start</a></span></div>
<div class="menuPlaceholder"></div>
<div class="menuTabs" id="menuTab2"><span id="current"><a>Team</a></span></div>
<div class="menuPlaceholder"></div>
<div class="menuTabs" id="menuTab3"><span><a>Anfahrt</a></span></div>
<div class="menuPlaceholder"></div>
<div class="menuTabs" id="menuTab4"><span><a>Angebote</a></span></div>
<div class="menuPlaceholder"></div>
<div class="menuTabs" id="menuTab5"><span><a>Kontakt</a></span></div>
<div class="menuPlaceholder" id="menuPlaceholderLast"></div>
<div id="navigationLineDiv1"></div>
</div>
CSS: ~~~css
#navigationDiv {
margin: 0 auto;
width: 860px;
background: url(images/mainDivShadow.gif);
padding-top: 25px;
}
.menuTabs {
height: 18px;
/border: 1px solid #999;/ WENN DIESER BORDER AUSKOMMENTIERT IST GEHTS
float:left;
height: 18px;
font-weight: bold;
font-size:1.1em;
color: #777;
background: url(images/tabBackground.gif) repeat-x;
}
.menuPlaceholder {
width: 2px;
float: left;
height: 18px;
background: url(images/menuPlaceholderBackground.gif);
}
#menuPlaceholder1 {
width: 3px;
background: transparent;
}
#menuPlaceholderLast {
width: 409px;
}
.menuTabs span{display: block;}
/* Animation */
.menuTabs span:hover {
color:#427bd6;
cursor: default;
}
#current{
background: url(images/tabBackgroundActive.gif) repeat-x bottom;
border-bottom: 2px solid #cfcfcf;
color: #427bd6;
}
/* Animation End */
#menuTab1{width:75px;}
#menuTab2{width:75px;}
#menuTab3{width:90px;}
#menuTab4{width:95px;}
#menuTab5{width:90px;}
#menuTab6{width:90px;}
#navigationLineDiv1 {
margin: auto;
height: 2px;
width: 854px;
background: #cfcfcf;
clear: left;
}
JS:
~~~java
$(function() {
$('#openingHoursDiv').corner(
{
tl: { radius: 15 },
tr: { radius: 15 },
bl: { radius: 15 },
br: { radius: 15 },
antiAlias: true,
autoPad: true,
validTags: ["div"]
});
$('#borderDiv').corner(
{
tl: { radius: 0 },
tr: { radius: 0 },
bl: { radius: 15 },
br: { radius: 15 },
antiAlias: true,
autoPad: true,
validTags: ["div"]
});
$('.menuTabs').corner(
{
tl: { radius: 5 },
tr: { radius: 5 },
bl: { radius: 0 },
br: { radius: 0 },
antiAlias: true,
autoPad: true,
validTags: ["div"]
});
});
Hat jemand eine Ahnung woran das liegen kann?
In FF3 und Opera 9 gehts ohne anstand.
Danke im Vorraus
Gruß Steffen
-
Hier der HTML-Code
<div id="navigationDiv">
<div class="menuPlaceholder" id="menuPlaceholder1"> </div>
<div class="menuPlaceholder"></div>
<div class="menuTabs" id="menuTab1"><span><a>Start</a></span></div>
<div class="menuPlaceholder"></div>
<div class="menuTabs" id="menuTab2"><span id="current"><a>Team</a></span></div>
<div class="menuPlaceholder"></div>
<div class="menuTabs" id="menuTab3"><span><a>Anfahrt</a></span></div>
<div class="menuPlaceholder"></div>
<div class="menuTabs" id="menuTab4"><span><a>Angebote</a></span></div>
<div class="menuPlaceholder"></div>
<div class="menuTabs" id="menuTab5"><span><a>Kontakt</a></span></div>
<div class="menuPlaceholder" id="menuPlaceholderLast"></div>
<div id="navigationLineDiv1"></div>
</div>[PFUIIIIIIII!!!!!!!!!!!!](http://blog.decaf.de/2007/09/divitis-ein-paar-gedanken-zum-uebermaessigen-gebrauch-von-div/) <http://de.selfhtml.org/css/layouts/navigationsleisten.htm@title=So macht man das besser!> Liebe Grüße, Felix Riesterer. -- ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hi,
das mit der liste hatte ich vorher, aber diese nicht so funktioniert hat wie ich es gerne hätte hab ich kurzerhand divs verwendet.
VOn divitis habe ich noch garnichts gehört^^
Danke für den Artikel ich werde in mir mal durchlesen und ändere das dann wieder in ne Liste.
Aber Idee warum das besagte verhalten besteht weißt du nicht oder?
-
-
Sooo,
also neues Html sieht so aus:
<div id="navigationDiv"> <ul id="navigation"> <li class="menuPlaceholder" id="menuPlaceholder1"> </li> <li class="menuPlaceholder"></li> <li class="menuTabs" id="menuTab1"><span><a>Start</a></span></li> <li class="menuPlaceholder"></li> <li class="menuTabs" id="menuTab2"><span id="current"><a>Team</a></span></li> <li class="menuPlaceholder"></li> <li class="menuTabs" id="menuTab3"><span><a>Anfahrt</a></span></li> <li class="menuPlaceholder"></li> <li class="menuTabs" id="menuTab4"><span><a>Angebote</a></span></li> <li class="menuPlaceholder"></li> <li class="menuTabs" id="menuTab5"><span><a>Kontakt</a></span></li> <li class="menuPlaceholder" id="menuPlaceholderLast"></li> </ul> <div id="navigationLineDiv1"></div> </div>css:
#navigationDiv { margin: 0 auto; width: 860px; background: url(images/mainDivShadow.gif); padding-top: 25px; } #navigation { list-style: none; margin: 0; padding: 0; } .menuTabs { border: 1px solid #999; float:left; height: 18px; font-weight: bold; font-size:1.1em; color: #777; background: url(images/tabBackground.gif) repeat-x; } .menuPlaceholder { width: 2px; float: left; height: 18px; background: url(images/menuPlaceholderBackground.gif); } #menuPlaceholder1 { width: 3px; background: transparent; } #menuPlaceholderLast { width: 409px; } .menuTabs span{display: block;} /* Animation */ .menuTabs span:hover { color:#427bd6; cursor: default; } #current{ background: url(images/tabBackgroundActive.gif) repeat-x bottom; border-bottom: 2px solid #cfcfcf; color: #427bd6; margin-top: 0px; } /* Animation End */ #menuTab1{width:75px;} #menuTab2{width:75px;} #menuTab3{width:90px;} #menuTab4{width:95px;} #menuTab5{width:90px;} #menuTab6{width:90px;} #navigationLineDiv1 { margin: auto; font-size: 0pt; height: 2px; width: 854px; background: #cfcfcf; clear: left; }Die runden ecken werden trotzdem noch nicht angezeigt (im ie7)
Danke und viele Grüße
Steffen-
Lieber steffen,
wozu brauchst Du eigentlich diese vielen Klassen und IDs? Bist Du sicher, dass das nicht auch mit weniger Aufwand geht? Insbesondere frage ich mich, ob Du das umgebende <div>-Element wirklich benötigst...
Sie doch bitte so gut und poste einen Link, damit man sich das online anschauen kann. So ohne alles kann ich das jedenfalls nicht nachvollziehen.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Guten Morgen Felix,
hier der Link http://privatepractice-forum.de/rtv/
Danke für deine Mühe.
Viele Grüße
Steffen-
Lieber steffen,
das kannste komplett ohne JavaScript viel besser machen. Auch dieses Code-Gesummse lässt sich stark verschlanken. So blicke ich da noch nicht durch. Heute abend melde ich mich wieder, und mache Dir einen Vorschlag, wie Du das rein mit CSS und etwas Bildmaterial umsetzen kannst. Muss jetzt in die Schule.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hi nochmal, auf Bilder will ich verzichten, davon halte ich gar nichts.
Trotzdem Danke.
Grüße
Steffen-
Lieber steffen,
Hi nochmal, auf Bilder will ich verzichten, davon halte ich gar nichts.
ich schrieb "Bildmaterial", meinte dabei dessen Verwendung als Hintergrundbilder via background-image-Eigenschaft in CSS. Keine <img>-Elemente natürlich. Wie sonst sollte das gehen? Auch Deine JavaScript-Lösung wird das sicherlich so machen, oder aber den Browser mit jeder Menge <div> und <span>-Elementen zuballern, die nicht gerade zur Performance beim Anzeigen beitragen...
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Ja das du den Ansatz mit background Bildern verfolgen willst hab ich verstanden.
Genau mein JS code generiert mehrere <div>'s oder <span>'s tags.
Ich möchte aber auf die background Bilder gerne verzichten da ich mit diesen auch schon gearbeitet habe und nicht soo bergeistert war.
Background-Bilder sind mir einfach zu undynamisch aus Änderungssicht.
Was mir aber wichtiger war als das Konzept zu Überarbeiten war ob jemand mir bei den runden Ecken in der Navi helfen kann?
Danke und Gruß
Steffen-
Lieber steffen,
Ja das du den Ansatz mit background Bildern verfolgen willst hab ich verstanden.
Gut.
Genau mein JS code generiert mehrere <div>'s oder <span>'s tags.
Nicht gut. Und Deinen Deppenapostroph mag ich auch nicht.
Ich möchte aber auf die background Bilder gerne verzichten da ich mit diesen auch schon gearbeitet habe und nicht soo bergeistert war.
Nicht unbedingt nachvollziehbar, aber OK. Es ist eben auch in dieser Hinsicht noch kein Meister vom Himmel gefallen. Vielleicht braucht es auch bei Dir erst noch einige Irrwege, bis Du die Dinge anders zu sehen beginnst...
Background-Bilder sind mir einfach zu undynamisch aus Änderungssicht.
Muss ich das jetzt verstehen?
Was mir aber wichtiger war als das Konzept zu Überarbeiten war ob jemand mir bei den runden Ecken in der Navi helfen kann?
Dass Dir das wichtiger war, als eine für die Zukunft Deines Projektes viel wichtigere sinnvolle Seitenstruktur, habe wiederum ich längst begriffen. Aber Du wirst es vielleicht doch irgendwann einsehen, dass die Struktur Deiner Seite für zukünftige "Redesigns" wesentlich wichtiger ist, als dieses JavaScript-Gesummse, das einen visuellen Effekt sauteuer erkauft, indem es Unmengen an Elementen in Deinen Code schmeißt, die nicht unbedingt die eh schon verbesserungswürdige Dokumentstruktur aufwerten.
Andere mögen das anders sehen, aber eine Lösung mit CSS-Code und passendem Bildmaterial ist meiner Meinung nach die pflegeleichteste und nachvollziehbarste Art, das Layout und den Look einer Seite zu erstellen und zu warten. Ich habe bereits ein Redesign an meiner CMS-betriebenen Seite hinter mir und weiß, wovon ich rede!
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Ansichtssache.
Das ist nicht meine erste Seite, ich programmiere HTML schon seit einigen Jahren und habe einige Erfahrung gesammelt.
Das die Hintergrundbilder besser gefallen ist Deine Sache, ich kann dies wiederum nicht verstehen, verurteile es deswegen aber nicht als schlecht.
Trotzdem Danke für Deine Mühen.
-
Lieber steffen,
ich programmiere HTML schon seit einigen Jahren
aha... und wie "programmierst" Du in HTML eine Schleife oder eine Funktion? HTML ist keine Programmier- oder Scriptsprache, sondern eine Auszeichnungssprache. Daher kann man in HTML nicht programmieren, sondern nur Inhalte auszeichnen.
Und von Deinem ersten Code-Beispiel ausgehend, scheinst Du im Auszeichnen nicht so wirklich zu wissen, was Du da tust, sonst würdest Du die inahltliche Natur der Textbausteine (also Deine Inhalte) mit passenden HTML-Elementen auszeichnen.
Das die Hintergrundbilder besser gefallen ist Deine Sache, ich kann dies wiederum nicht verstehen, verurteile es deswegen aber nicht als schlecht.
Sie "gefallen" mir nicht. Es ist eine technische Lösung, die genau so von den Standards her vorgesehen ist. Sie "funktioniert" ohne weitere Technologien vorauszusetzen und ist "accessible". Das dynamische Erzeugen von sinnfreien HTML-Elementen mittels JavaScript ist dagegen nicht so vorgesehen und ist auch nur bei verfügbarem JavaScript überhaupt nutzbar. Das ist fast so, als wenn Du Deine Wohnung mit einem laufenden Automotor heizen willst - teuer und so nicht vorgesehen, wenngleich bei vorhandenem Motor möglich.
Die Analogie mit dem "teuer" passt! Auch wenn das Beispiel ansonsten arg weit hergeholt ist...
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Das mit den Hintergrundbildern ist auch nicht so vorgesehen...
Wie machst du das?
Machst du ein Hintergrund für das komplette Element?Du bist einfach nicht normal...
Im Volksmund spricht man von programmieren. Oder würdest du sage du auszeichnest in HTML?
-
Lieber steffen,
Wie machst du das?
Machst du ein Hintergrund für das komplette Element?das kommt darauf an. Manche Elemente haben eine feste Breite. Dann kann ich einen Kopf und einen Fuß machen ([http://www.peutinger-gymnasium.de@title=Beispiel]). Manchmal aber sind die Elemente in Ihrer Ausdehnung nicht festgelegt und müssen wachsen können. Dann braucht es andere Herangehensweisen ([http://www.felix-riesterer.de/@title=Beispiel]).
Du bist einfach nicht normal...
Bestimmt nicht. Und das empfinde ich nicht als Makel - ganz im Gegenteil... ;-)
Im Volksmund spricht man von programmieren. Oder würdest du sage du auszeichnest in HTML?
Ich würde sagen, ich "zeichne in/mit HTML aus".
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
-
-
-
-
-
-
-
-
-
-
-
-
Lieber steffen,
hier habe ich einen Vorschlag für Dich:
Speichere alle Layout-Bilder (bei Dir momentan in "css/images") in ein Verzeichnis "images/layout". Ich finde, dass Bilddateien nicht unbedingt eine Unterkategorie von CSS-Daten sind. Dann kannst Du folgenden Entwurf nachvollziehen:
[HTML "index.html"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>xxx</title> <link rel="stylesheet" type="text/css" href="css/standard.css" media="screen" /> </head> <body> <div id="page"> <div id="header"></div> <div id="content"> <h1>xxx</h1> <p>Ihr Unternehmen bei dem Service ganz groß geschrieben wird!</p> </div> <div id="sidebar"> <h2>Wir sind für Sie da</h2> <dl> <dt>Mo-Fr:</dt> <dd>9.30 Uhr - 19.00 Uhr</dd> <dt>Sa:</dt> <dd>9.30 Uhr - 15.00 Uhr</dd> </dl> </div> <div id="navi"> <h2>Navigation</h2> <ul> <li><a href="index.html">Start</a></li> <li class="current"><a href="index.html">Team</a></li> <li><a href="index.html">Anfahrt</a></li> <li><a href="index.html">Angebote</a></li> <li><a href="index.html">Kontakt</a></li> </ul> </div> <p id="footer">© xxx</p> </div> </body> </html>[CSS "standard.css"]
/* clear defaults */ html, body { background-color: #ffffff; margin: 0; padding: 0; font-size: 100.1%; color: #000000; } html { background: url(../images/layout/pageBackground.gif); } body { margin: 0; padding: 0; background: url(../images/layout/pageHeaderBackground.gif) repeat-x; color: #666666; } #page { display: block; position: relative; top: 150px; margin: 0 auto; padding: 0; min-height: 600px; background: #ffffff url(../images/layout/mainDivShadow.gif) repeat-y; width: 860px; } #header { display: block; position: relative; top: -130px; margin: 0; padding: 0; height: 130px; background: url(../images/layout/mainDivHeader.gif) center top no-repeat; } #footer { display: block; position: absolute; bottom: -50px; left: 0px; margin: 0; padding: 0; height: 50px; width: 860px; font-size: 0.6em; text-align: center; line-height: 75px; background: url(../images/layout/mainDivFooter.gif); color: #999999; } #content { display: block; float: left; margin: -34px 0px 0px 35px; width: 475px; min-height: 230px; background: #eaeaea; border: 1px solid #cfcfcf; } #sidebar { display: block; position: absolute; top: 96px; right: 35px; width: 250px; min-height: 500px; background: #eaeaea; border: 1px solid #cfcfcf; } /* styles for navigation */ #navi { display: block; position: absolute; top: 20px; left: 3px; width: 854px; border-bottom: 4px groove #999999; } #navi h2 { display: none; } #navi ul { display: block; margin: 0; padding: 0 0 0 5px; width: 849px; list-style: none; } #navi li { display: block; float: left; margin: 0 0 0 2px; padding: 0; border: 1px solid #999999; border-bottom: none; background: url(../images/layout/tabBackground.gif) repeat-x; } #navi a { display: block; margin: 0; padding: 0 10px; font-size: 110%; font-weight: bold; color: #999999; } #navi a:link { text-decoration: none; } #navi a:hover { color: #427bd6; } #navi .current { position: relative; bottom: -2px; left: 0px; } #navi .current a:link { color: #427bd6; } #navi .current a:hover { color: #649df8; } /* regular styles for text boxes */ h1, h2, h3 { color: #427bd6; font-weight: normal; text-align: center; } h1 { font-size: 150%; } p, dl { padding: 0px 20px 1em; } dt { font-weight: bold; }Wenn Du das hast, dann sind wir schon ein Stückchen weiter. Dann müsstest Du von Deinem gegenwärtigen Stand des Projektes ein Bildschirmfoto schießen und die benötigten Grafiken daraus entwickeln. Dann kann man mit runden Ecken arbeiten. Ich warte dann hier auf Deinen Entwurf.
Es ist mir klar, dass der momentane Entwurf wahrscheinlich nur im FF einigermaßen anständig funktioniert.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)