zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Navigation umbauen für IE`s

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.07.2008, 19:11
Benutzerbild von Peter Klein
CSS-Fetischist
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 27.02.2006
Ort: Berlin
Beiträge: 375
Peter Klein befindet sich auf einem aufstrebenden Ast
Standard Navigation umbauen für IE`s

Hallo,

auf folgender Seite die linke Navigation soll ich umbauen für nen Bekannten das sie auch im IE ohne Probleme klappt. Wer kan mir nen Tipp geben was ich umbauen/einbauen muss das es klappt?

Im IE 7 verschiebt sich der Navigationspunkt unter dem der einen Flyout hat um einige Pixel nach unten, kann ja eigentlich nicht an "hasLayout" liegen da die Listen eine Höhe haben, ode rliege ich da falsch?

Home

Versuche mich schlau zu machen was es mit den Tabellen in den Conditional Comments auf sich hat bei dieser Navigation http://www.cssplay.co.uk/menus/flyoutt.html, ist ja vom Prinzip her das gleiche.


Peter

Geändert von Peter Klein (07.07.2008 um 19:30 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.07.2008, 19:36
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.925
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

Erstmal solltest du die > > im XHTML ordentlich maskieren mit > > ... das kann ggfs. den Browser ein wenig irritieren.

Zitat:
Versuche mich schlau zu machen was es mit den Tabellen in den Conditional Comments auf sich hat bei dieser Navigation
Das ist die einzige Methode, um solche Menüs ohne JS für den IE5 und IE6 zu realisieren - über Tabellen, die nur die IEs sehen durch die Conditional Comments.

Ist aber nicht so wirklich mein Favorit, da das extra Markup ist, das weder nicht gut, noch übersichtlich aussieht. Ich benutze da eher: http://htmldog.com/articles/suckerfish/dropdowns/
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.07.2008, 19:43
Benutzerbild von Peter Klein
CSS-Fetischist
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 27.02.2006
Ort: Berlin
Beiträge: 375
Peter Klein befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Boris Beitrag anzeigen
Erstmal solltest du die > > im XHTML ordentlich maskieren mit > > ... das kann ggfs. den Browser ein wenig irritieren.
Ui ui, ja ich habs gerade eben gemerkt das das noch nicht geändert wurde, war ja glücklicherweise nicht meine Fehler...grins.

Das mit dem Suckerfish schaue ich mir gleich mal an, sollte ja kein Problem sein.

Bei weiteren Fragen rufe ich wieder, arbeite mich gerade ein um die ganze Navigationssache ausm FF hinzubekommen.
Habe ich lange Zeit ignoriert da ich sie nicht oft brauchte bisher.
Mit Zitat antworten
  #4 (permalink)  
Alt 07.07.2008, 21:22
Benutzerbild von Peter Klein
CSS-Fetischist
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 27.02.2006
Ort: Berlin
Beiträge: 375
Peter Klein befindet sich auf einem aufstrebenden Ast
Standard

Was müsste ich denn in dem JavaScript ändern das es auch in ner vertikalen Version funktioniert? Da scheiter ich gerade.
Mit Zitat antworten
  #5 (permalink)  
Alt 07.07.2008, 21:45
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.925
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

Das JS macht nichts, was das Horizontale oder Vertikale betrifft. Es emuliert nur :hover für den IE, indem es einem gewählten UL eine Klasse zuweist.

Wo die aufklappenden Menüs erscheinen sollen, musst du selbst im CSS festlegen.
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
  #6 (permalink)  
Alt 07.07.2008, 21:49
Benutzerbild von Peter Klein
CSS-Fetischist
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 27.02.2006
Ort: Berlin
Beiträge: 375
Peter Klein befindet sich auf einem aufstrebenden Ast
Standard

Ja das weiss ich.

Kann ich das JavaScript also bis auf die Änderung des ID-Namens übernehmen?

Hatte ich eben getan und es klappte nicht.
Mit Zitat antworten
  #7 (permalink)  
Alt 07.07.2008, 21:51
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.925
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

Zitat:
Hatte ich eben getan und es klappte nicht.
Ah, sag es uns doch genauer ... du kennst doch die XHTML Forum regeln - zeig uns deine Versuche, XHTML, CSS, mehr Input!
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
  #8 (permalink)  
Alt 07.07.2008, 21:59
Benutzerbild von Peter Klein
CSS-Fetischist
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 27.02.2006
Ort: Berlin
Beiträge: 375
Peter Klein befindet sich auf einem aufstrebenden Ast
Standard

Ja ich kenne diese. Und werd mich auch daran halten

HAbe es jetz mal mit folgender Anleitung versucht: Barrierefreies und benutzerfreundliches Suckerfish Dropdown / Flyout-Menue - pfirsich-melba

Der 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">
<head>


<title>Startseite</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="mainstyle.css" />

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/optional/jq.cleanCSSanim.js" type="text/javascript"></script>
<script src="js/optional/dimensions.js" type="text/javascript"></script>
<script src="js/jq_dickerfisch_menue-c.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
	//Funktion starten, wenn DOM-ready	
	var samp = new DickerFisch('#left_nav',{ListType:'ul'});
});
</script>


</head>
<body>
<div id="wrap">
	<div id="header">
		<h1>Rottweiler vom Wachberg</h1>
	</div><!--Ende header-->
		
<ul id="topnav">
	<li class="current"><a href="index.html">Startseite</a></li>
	<li class=""><a href="ueberuns.html">&Uuml;ber uns</a></li>
	<li class=""><a href="rasse.html">Rasse</a></li>
	<li class=""><a href="herkunft.html">Herkunft</a></li>
	<li class=""><a href="links.html">Links</a></li>
	<li class=""><a href="kontakt.html">Kontakt</a></li>
	<li class=""><a href="impressum.html">Impressum</a></li>
</ul><!-- Ende topnav-->

<div id="banner">
<p class="adkr"><span>Allgemeiner Deutscher Rottweiler Klub-Logo</span></p>
<h2 class="banner_h">Sch&ouml;n das Sie vorbei kommen!</h2>

</div><!-- Ende banner -->

<div id="mid">
<div id="linke_seite">
	<ul id="left_nav">
	<li class="navlink"><a href="zwingeranlage.html">Zwingeranlage</a></li>
	<li class="navlink"><a href="#">Zuchttiere >></a>
		<ul>
		<li><a href="zuchttier_hexe.html">Hexe</a></li>
		<li><a href="zuchttier_dorle.html">Dorle</a></li>
		<li><a href="zuchttier_ebby.html">Ebby</a></li>
		</ul>
	</li>
	<li class="navlink"><a href="verkauf.html">Verkauf</a></li>
	<li class="navlink"><a href="ahnentafeln.html">Ahnentafeln</a></li>
	<li class="navlink"><a href="galerie.html">Galerie</a></li>
	<li class="navlink"><a href="planungwelpen.html">Planung/Welpen</a></li>
	<li class="navlink"><a href="nachwuchs.html">Nachwuchs</a></li>
 </ul><!-- Ende left_nav -->
 
 <h4>Kontaktdaten</h4>
 <p class="email">g.wilkniss@t-online.de</p>
 <p>Tel. 039484/747161</p>

 <p>Mob. 0152/06631178</p>

 <p>Fax. 039484/747162</p>
 
</div><!--Ende linke_seite-->
 
<div id="inhalt">
	<p>Vor Über 20 Jahren eroberte der Rottweiler
unser Herz! Seitdem sind wir begeisterte Züchter. Wir achten ganz besonders auf
Schönheit und Leistung. Der Zwinger vom Wachberg blickt auf viele erfolgreiche
Teilnahmen an zahlreichen Wettkämpfen und Austellungen zurück. Alle unsere
Hunde sind sozial geprägt.</p>


<p>Auf unserer Website erfahren Sie mehr<a href="ueber_uns.html"> über uns</a> , können sich einen kleinen Einblick über
   unsere <a href="zuchttiere.html">Zuchttiere </a>und unseren <a href="nachwuchs.html">Nachwuchs</a> verschaffen. 
   Etwas zum Schmunzeln werden Sie in unserer  <a href="welpen.html"> Welpengalerie</a> 
   entdecken.</p>

   <p>Sollten Sie überdies noch Fragen haben, finden Sie<a href="kontakt.html">  hier </a> ein
   praktisches  Kontaktformular zum Versenden einer Nachricht an uns. Alternativ können Sie uns
   telefonisch unter 039484/747161 und mobil 0152/06631178 Uhr erreichen. </p>
<p>Viel Spaß beim Stöbern und Ausprobieren.</p>
<br />
   <h5>Bis bald bei uns,
    dem "Zwinger vom Wachberg" .</h5>

</div><!--Ende inhalt-->
</div><!-- Ende mid -->
 
<div id="footer">
bla bla bla
</div><!--Ende footer-->
 
</div><!-- Ende wrap-->
</body>
</html>
CSS:
Code:
* {
margin: 0;
padding: 0;
list-style-type: none;

}

body {
background: url(bilder/bg.gif) repeat-x #242423;
}

a {
text-decoration: none;
}

h2,h3,h4,h5,h6 {
color: #fff;
}

h1 {
display: none;
}

h4 {
color: #db6307;
margin: 10px 0 0 20px;
font-weight: normal;
}

h5 {
font-size: 110%;
}

#wrap {
background: #181819;
width: 970px;
margin: 0 auto;
border-right: 1px solid #db6307;
border-left: 1px solid #db6307;
clear: both;
}

#header {
background: url(bilder/logo.jpg) no-repeat;
height: 250px;
width: 970px;
}

/*Navigation horizontal*/

#topnav {
text-align: center;
background: url(bildernavigation/pro_four0.gif) repeat-x;
width: 870px;
height: 35px;
padding: 0 0 0 100px;
font-family: Arial, sans-serif;
font-size: 80%;
clear: both;
}

#topnav li {
height: 35px;
font-weight: bold;
float: left;
}

#topnav li a {
float: left;
display: block;
text-decoration: none;
color: #393838;
height: 27px;
padding: 8px 22px 0 22px;
margin: 0 1px;
}

#topnav li.current a,
#topnav li a:hover {
background: url(bildernavigation/pro_four_neu.gif) repeat-x;
display: block;
text-decoration: none;color: #393838;
height: 25px;
padding: 6px 20px 0 20px;
border: 2px solid #d32f2f;
}

/*Banner*/
#banner {
clear: both;
padding: 0 0 0 300px;
height: 140px;
}

.banner_h {
font-family: Georgia, serif;
font-weight: normal;
font-style: italic;
color: #fff;
padding: 55px 0 0 0;
}

.adkr {
float:right;
background: url(bilder/adrk_logo.png) no-repeat;
width: 127px;
height: 140px;
}
 #banner p span {
visibility: hidden;
}

/*Mid*/

#mid {
clear: both;
}

/*Linke Spalte*/
#linke_seite {
width: 250px;
float: left;
margin: 0 0 30px 0;
}

#linke_seite p {
margin: 10px 0 10px 20px;
color: #abaa89;
}


/*Navigation vertikal*/


#left_nav {
color: #393838;
width: 155px;
text-align: center;
font-family: Arial, sans-serif;
font-size: 80%;
margin: 0 0 40px 20px;
}

#left_nav li {
position: relative;
background: url(bildernavigation/pro_four0.gif) repeat-x;
height: 35px;
margin: 5px 0 0 0;
font-weight: bold;
}

#left_nav li a {
display: block;
text-decoration: none;
color: #393838;
height: 29px;
padding: 8px 0 0 0;
}

#left_nav li .current a,
#left_nav li a:hover {
display: block;
background: url(bildernavigation/pro_four_neu.gif) repeat-x;
text-decoration: none;
border: 2px solid #d32f2f;
color: #393838;
height: 25px;
padding: 6px 0 0 0;
}

#left_nav li ul {
position: absolute;
display: none;
width: 150px;
}

#left_nav li:hover ul {
display: block;
left: 155px;
top: -5px;
width: 100px;
}

#left_nav li ul li {
display: block;
margin-left: 5px;
}



/*Inhaltsbereich*/

#inhalt {
margin: 0 0 0 250px;
width: 550px;
padding: 0 100px 20px 50px;
color: #abaa89;
font-size: 100%;
font-family: Georgia, serif;
font-weight: normal;
}

#inhalt a {
color: #db6307;
}

#inhalt p {
margin: 0 0 15px 0 ;
}

#footer {
width: 970px;
background: #db6307;
margin: 30px 0 0 0;
padding-top: 3px;
padding-bottom: 3px;
text-align: center;
clear: both;
}

/*KLASSEN*/

.email {
margin: 10px 0 0 20px;
color: #abaa89;
font-weight: bold;
}
.unserbild {
height: 350px;
background: url(bilder/ueber_uns.png) no-repeat;
}

.zwingerbild {
height: 350px;
background: url(bilder/zwingeranlage_logo.png) no-repeat;
}

.keinewelpen {
height: 330px;
background: url(bilder/keine_welpen.jpg) no-repeat;
}
 
.keinewelpen span,
.zwingerbild span,
.unserbild span {
visibility: hidden;
}

.welpenbilder span{
visibility: hidden;
}

/*Tabelle für Links*/

#linktabelle {
width: 550px;
border: 1px solid #db6307;
}

#linktabelle thead {
background: #db6307;
text-align: left;
color: #000; 
}

#linktabelle a {
font-weight: bold;
color: #abaa89;
display: block;
padding: 8px;
text-decoration: underline;
}

#linktabelle a:hover {
color: #abaa89;
text-decoration: underline;
background: #db6307;
}

#lieblinks {
padding-left: 2px;
width: 278px;
}

#befr-links {
padding-left: 2px;
width: 118px;
}

#empf {
padding-left: 2px;
width: 98px;
}

.hell {
background-color: #666;
}

.adresse {
width: 280px;
}

.freundeslink {
width: 180px;
}

.empfehung {
width: 40px;
}

/*Kontaktliste*/

#kontaktliste {
width: 500px;
border: 1px solid #db6307;
}

.left {
float: left;
}

.right {
float: right;
}
Ich weiss nicht was los ist, aber irgendwo hängt es heute.
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
Problem mit Navigation safari CSS 12 20.04.2011 12:11
Float-Problem? mischaef CSS 33 20.10.2010 17:20
Problem mit FlyOut Menu im IE7 quarki69 CSS 5 15.03.2010 16:46
Javascript UL Navigation im IE6 ven CSS 7 29.04.2008 16:29
Container mit 2 Container darin -> Hintergrund anzeigen bendar CSS 4 05.04.2005 19:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:41 Uhr.