| Autor | Nachricht | 
	
		| 
                
                    
                    
 zaza12test | 
			
				|  15.08.2007 um 10:41 (UTC) Titel: positionierung in IE &FF gleich?
 |  |  
				| 
 |  
				| guten tag erstmal
 
ich hab mein Coolmenü eben positioniert
 
aber mir ist aufgefallen dass die Positionierung im inet und firefox nicht gleich ist. (left ist in ordnung aber Top nicht? also von oben     )
 
in FF ist das menü unter dem header aber im Internet explorer ist sie schon im Header drin?
 
wie kann ich man es verhindern...     
meine HP www.zaza12.de.tl 
bie www.coolplace.de.tl 
ist die Position des menüs bei beiden browser gleich
 
mfG |  | 
	
		| ↑ |  | 
	
		|  | 
	
		| 
                
                    
                    
 rockforever2 |  | 
	
		| ↑ |  | 
	
		|  | 
	
		| 
                
                    
                    
 lucarios-site Wohnort: Dort, ja da drüben!^^ | 
			
				|  15.08.2007 um 11:01 (UTC) Titel:
 |  |  
				| 
 |  
				| ich hab auch bei lucarios-site.de.tl ein Bild positioniert (das kicklee bild links.) und im IE sieht das echt schlimm aus und deswegen wäre es meiner meinung nach aber schlauer das so zu positionieren das es bei FF besser aussieht weil die meisten haben FF und nicht IE ______________ Ich suche einen Grafiker für meine Page!
  |  | 
	
		| ↑ |  | 
	
		|  | 
	
		| 
                
                    
                    
 familyworld | 
			
				|  15.08.2007 um 11:11 (UTC) Titel:
 |  |  
				| 
 |  
				| 	lucarios-site hat Folgendes geschrieben:	ich hab auch bei lucarios-site.de.tl ein Bild positioniert (das kicklee bild links.) und im IE sieht das echt schlimm aus und deswegen wäre es meiner meinung nach aber schlauer das so zu positionieren das es bei FF besser aussieht weil die meisten haben FF und nicht IE	 
Es ist auf jeden Fall ratsam, sich für eine Browservariante zu entscheiden und die Besucher ggf. darauf hinzuweisen, mit welchem Browser die Seite erstellt ist.
 
Zum Beispiel: "Diese Seite ist für Firefox 2.o optimiert" oder sowas ähnliches. 
 
IE und FF werden immer verschiedene Darstellungsvarianten haben und meines Wissens nach gibt es keinen "Mittelweg" oder etwas, was beide Browser in der Darstellung gleichsetzt. ______________[img:545b48087d]http://img.webme.com/pic/f/familyworld/famsigbanner.gif[/img:545b48087d] |  | 
	
		| ↑ |  | 
	
		|  | 
	
		| 
                
                    
                    
 zaza12test | 
			
				|  15.08.2007 um 11:15 (UTC) Titel:
 |  |  
				| 
 |  
				| keine Ahnung     
ich wollte mein menü genau auf content_top  positionieren aber leider funktioniert es nicht...
 
vllt gibt s eine code womit man es mahcen kann
 
zB ....{position: =td.edit_content_top;}
 
oder ähnliches     
sonst lohn es sich garnicht eine navileiste oben zu erstellen |  | 
	
		| ↑ |  | 
	
		|  | 
	
		| 
                
                    
                    
 domi89 | 
			
				|  15.08.2007 um 12:01 (UTC) Titel:
 |  |  
				| 
 |  
				| Dafür gibt es einen einfachen Trick: 
 Schreibst du eine Klasse so:
 
 	Zitat:	 
coolmenue {Werte;}
 
 
 So wird der Code von beiden Browsern gelesen.
 Benutzt du folgenden CodeSchnipsel, dann kann nur der IE die Klasse gelesen.
 
 	Zitat:	 * html coolmenue {Werte;}
 
Durch * html kann nur der IE die Klasse lesen.
 
 Also ohne den Codeschnipsel die Werte für FF optimieren, mit CodeSchnipsel für IE optimieren.
 
 Wichtig: Wichtig ist erst die Klasse ohne Schnipsel zu schreiben und dann mit, dasist wichtig, weil die Codes von oben nach unten gelesen werden, also so:
 
 	Zitat:	 
coolmenue {Werte;}
 
 * html coolmenue {Werte;}
 ______________
 [color=red:ac077f9a56]Gruß domi89[/color:ac077f9a56]
 
 
 |  | 
	
		| ↑ |  | 
	
		|  | 
	
		| 
                
                    
                    
 zaza12test | 
			
				|  15.08.2007 um 20:43 (UTC) Titel:
 |  |  
				| 
 |  
				| Das ist jetzt meine Code
 
und wo soll ich die Klaasen einfügen    ?
	Code:	<div align="center">
 <style type="text/css" media="screen">
 <!--
 body
 {
 font-family: Verdana, sans-serif;
 font-size: 14px;
 overflow: auto;
 padding: 10px;
 margin: 0px;
 }
 
 ul, li
 {
 list-style-type: none;
 padding: 0px;
 margin: 0px;
 }
 
 
 div.menu
 {
 position: absolute;
 z-index: 1;top: 195px;
 left: 200px;}
 }
 
 .menu li
 {
 width: 145px;
 float: left;
 }
 
 .menu a
 {
 background-color: #00fff0;
 background-image: url();
 text-decoration: none;
 text-align: center;
 font-weight: bold;
 cursor: pointer;
 margin: 0px 1px;
 display: block;
 height: 25px;
 color: #000000;
 border: 3px double #fff;
 }
 
 .menu a:hover
 {
 background-color:;
 background-image: url();
 color: #ffffff;
 text-decoration: underline overline;
 }
 
 
 #smenu1, #smenu2, #smenu3, #smenu4, #smenu5
 {
 font-size: 14px;
 display: none;
 width: 145px;
 float: left;
 }
 
 #smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a
 {
 font-weight: bold;
 padding-top: 2px;
 border-top: 0px;
 cursor: pointer;
 color: #000000;
 }
 //-->
 
 </style>
 
 <script type="text/javascript">
 <!--
 function montre(id)
 {
 with (document)
 {
 if (getElementById)
 getElementById(id).style.display = 'block';
 else if (all)
 all[id].style.display = 'block';
 else
 layers[id].display = 'block';
 }
 }
 
 function cache(id)
 {
 with (document)
 {
 if (getElementById)
 getElementById(id).style.display = 'none';
 else if (all)
 all[id].style.display = 'none';
 else
 layers[id].display = 'none';
 }
 }
 //-->
 </script>
 <div class="menu">
 <li><a href="http://zaza12.de.tl/G.ae.stebuch.htm">Gästebuch</a> </li>
 <li><a onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" href="javascript:void(0);"> Music</a>
 <ul onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" id="smenu2">
 <li><a href="http://zaza12.de.tl/k.ue.rtce-mp3.htm">kurdisch</a></li>
 <li><a href="http://zaza12.de.tl/zazaki-mp3.htm">Zaza</a></li>
 <li><a href="http://zaza12.de.tl">Titel</a></li>
 </ul>
 </li>
 <li><a onmouseout="cache('smenu3');" onmouseover="montre('smenu3');" href="javascript:void(0);"> Videos</a>
 <ul onmouseout="cache('smenu3');" onmouseover="montre('smenu3');" id="smenu3">
 <li><a href="http://www.zaza12.de.tl/s3.htm">Galatasaray</a></li>
 <li><a href="http://www.zaza12.de.tl/s4.htm">Comics</a></li>
 <li><a href="http://zaza12.de.tl">Titel</a></li>
 <li> </li>
 </ul>
 </li>
 <li><a href="http://zaza12.de.tl"> TITEL4</a></li>
 <li><a onmouseout="cache('smenu5');" onmouseover="montre('smenu5');" href="javascript:void(0);"> TITEL5</a>
 <ul onmouseout="cache('smenu5');" onmouseover="montre('smenu5');" id="smenu5">
 <li><a href="http://zaza12.de.tl">Titel</a></li>
 <li><a href="http://zaza12.de.tl">Titel</a></li>
 </ul>
 </li>
 </div>
 
 |  | 
	
		| ↑ |  | 
	
		|  | 
	
		| 
                
                    
                    
 domi89 | 
			
				|  15.08.2007 um 20:59 (UTC) Titel:
 |  |  
				| 
 |  
				| [quote="zaza12test"]Das ist jetzt meine Code
 
und wo soll ich die Klaasen einfügen    ?
	Zitat:	 
<div align="center">
 
 <style type="text/css" media="screen">
 <!--
 body
 {
 font-family: Verdana, sans-serif;
 font-size: 14px;
 overflow: auto;
 padding: 10px;
 margin: 0px;
 }
 
 ul, li
 {
 list-style-type: none;
 padding: 0px;
 margin: 0px;
 }
 
 div.menu
 {
 position: absolute;
 z-index: 1;
 top: 195px;
 left: 200px;}
 
 
 * html div.menu
 {
 position: absolute;
 z-index: 1;
 top: 195px;
 left: 200px;}
 
 
 .menu li
 {
 width: 145px;
 float: left;
 }
 
 .menu a
 {
 background-color: #00fff0;
 background-image: url();
 text-decoration: none;
 text-align: center;
 font-weight: bold;
 cursor: pointer;
 margin: 0px 1px;
 display: block;
 height: 25px;
 color: #000000;
 border: 3px double #fff;
 }
 
 .menu a:hover
 {
 background-color:;
 background-image: url();
 color: #ffffff;
 text-decoration: underline overline;
 }
 
 
 #smenu1, #smenu2, #smenu3, #smenu4, #smenu5
 {
 font-size: 14px;
 display: none;
 width: 145px;
 float: left;
 }
 
 #smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a
 {
 font-weight: bold;
 padding-top: 2px;
 border-top: 0px;
 cursor: pointer;
 color: #000000;
 }
 //-->
 
 </style>
 
 <script type="text/javascript">
 <!--
 function montre(id)
 {
 with (document)
 {
 if (getElementById)
 getElementById(id).style.display = 'block';
 else if (all)
 all[id].style.display = 'block';
 else
 layers[id].display = 'block';
 }
 }
 
 function cache(id)
 {
 with (document)
 {
 if (getElementById)
 getElementById(id).style.display = 'none';
 else if (all)
 all[id].style.display = 'none';
 else
 layers[id].display = 'none';
 }
 }
 //-->
 </script>
 <div class="menu">
 <li><a href="http://zaza12.de.tl/G.ae.stebuch.htm">Gästebuch</a> </li>
 <li><a onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" href="javascript:void(0);"> Music</a>
 <ul onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" id="smenu2">
 <li><a href="http://zaza12.de.tl/k.ue.rtce-mp3.htm">kurdisch</a></li>
 <li><a href="http://zaza12.de.tl/zazaki-mp3.htm">Zaza</a></li>
 <li><a href="http://zaza12.de.tl">Titel</a></li>
 </ul>
 </li>
 <li><a onmouseout="cache('smenu3');" onmouseover="montre('smenu3');" href="javascript:void(0);"> Videos</a>
 <ul onmouseout="cache('smenu3');" onmouseover="montre('smenu3');" id="smenu3">
 <li><a href="http://www.zaza12.de.tl/s3.htm">Galatasaray</a></li>
 <li><a href="http://www.zaza12.de.tl/s4.htm">Comics</a></li>
 <li><a href="http://zaza12.de.tl">Titel</a></li>
 <li> </li>
 </ul>
 </li>
 <li><a href="http://zaza12.de.tl"> TITEL4</a></li>
 <li><a onmouseout="cache('smenu5');" onmouseover="montre('smenu5');" href="javascript:void(0);"> TITEL5</a>
 <ul onmouseout="cache('smenu5');" onmouseover="montre('smenu5');" id="smenu5">
 <li><a href="http://zaza12.de.tl">Titel</a></li>
 <li><a href="http://zaza12.de.tl">Titel</a></li>
 </ul>
 </li>
 </div>
 
 	 
 So musst du den Code einfügen , das mit * html ignoriert der FF einfach. Da musst du jetzt den Wert TOP für den IE anpassen.
 ______________
 [color=red:ac077f9a56]Gruß domi89[/color:ac077f9a56]
 
 
 
 Zuletzt bearbeitet von domi89 am 15.08.2007, 22:00, insgesamt einmal bearbeitet
 |  | 
	
		| ↑ |  | 
	
		|  | 
	
		| 
                
                    
                    
 zaza12test | 
			
				|  15.08.2007 um 21:11 (UTC) Titel:
 |  |  
				| 
 |  
				| [quote="domi89"] 	zaza12test hat Folgendes geschrieben:	Das ist jetzt meine Code
 
und wo soll ich die Klaasen einfügen    ?
	Zitat:	 
<div align="center">
 
 <style type="text/css" media="screen">
 <!--
 body
 {
 font-family: Verdana, sans-serif;
 font-size: 14px;
 overflow: auto;
 padding: 10px;
 margin: 0px;
 }
 
 ul, li
 {
 list-style-type: none;
 padding: 0px;
 margin: 0px;
 }
 
 div.menu
 {
 position: absolute;
 z-index: 1;
 top: 195px;
 left: 200px;}
 
 
 * html div.menu
 {
 position: absolute;
 z-index: 1;
 top: 250px;
 left: 200px;}
 
 
 .menu li
 {
 width: 145px;
 float: left;
 }
 
 .menu a
 {
 background-color: #00fff0;
 background-image: url();
 text-decoration: none;
 text-align: center;
 font-weight: bold;
 cursor: pointer;
 margin: 0px 1px;
 display: block;
 height: 25px;
 color: #000000;
 border: 3px double #fff;
 }
 
 .menu a:hover
 {
 background-color:;
 background-image: url();
 color: #ffffff;
 text-decoration: underline overline;
 }
 
 
 #smenu1, #smenu2, #smenu3, #smenu4, #smenu5
 {
 font-size: 14px;
 display: none;
 width: 145px;
 float: left;
 }
 
 #smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a
 {
 font-weight: bold;
 padding-top: 2px;
 border-top: 0px;
 cursor: pointer;
 color: #000000;
 }
 //-->
 
 </style>
 
 <script type="text/javascript">
 <!--
 function montre(id)
 {
 with (document)
 {
 if (getElementById)
 getElementById(id).style.display = 'block';
 else if (all)
 all[id].style.display = 'block';
 else
 layers[id].display = 'block';
 }
 }
 
 function cache(id)
 {
 with (document)
 {
 if (getElementById)
 getElementById(id).style.display = 'none';
 else if (all)
 all[id].style.display = 'none';
 else
 layers[id].display = 'none';
 }
 }
 //-->
 </script>
 <div class="menu">
 <li><a href="http://zaza12.de.tl/G.ae.stebuch.htm">Gästebuch</a> </li>
 <li><a onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" href="javascript:void(0);"> Music</a>
 <ul onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" id="smenu2">
 <li><a href="http://zaza12.de.tl/k.ue.rtce-mp3.htm">kurdisch</a></li>
 <li><a href="http://zaza12.de.tl/zazaki-mp3.htm">Zaza</a></li>
 <li><a href="http://zaza12.de.tl">Titel</a></li>
 </ul>
 </li>
 <li><a onmouseout="cache('smenu3');" onmouseover="montre('smenu3');" href="javascript:void(0);"> Videos</a>
 <ul onmouseout="cache('smenu3');" onmouseover="montre('smenu3');" id="smenu3">
 <li><a href="http://www.zaza12.de.tl/s3.htm">Galatasaray</a></li>
 <li><a href="http://www.zaza12.de.tl/s4.htm">Comics</a></li>
 <li><a href="http://zaza12.de.tl">Titel</a></li>
 <li> </li>
 </ul>
 </li>
 <li><a href="http://zaza12.de.tl"> TITEL4</a></li>
 <li><a onmouseout="cache('smenu5');" onmouseover="montre('smenu5');" href="javascript:void(0);"> TITEL5</a>
 <ul onmouseout="cache('smenu5');" onmouseover="montre('smenu5');" id="smenu5">
 <li><a href="http://zaza12.de.tl">Titel</a></li>
 <li><a href="http://zaza12.de.tl">Titel</a></li>
 </ul>
 </li>
 </div>
 
 	 
 So musst du den Code einfügen , das mit * html ignoriert der FF einfach. Da musst du jetzt den Wert TOP für den IE anpassen.
 
funktioniert leider nicht 
 
ich hab den wert auch geändert   |  | 
	
		| ↑ |  | 
	
		|  | 
	
		| 
                
                    
                    
 zaza12test | 
			
				|  16.08.2007 um 11:14 (UTC) Titel:
 |  |  
				| 
 |  
				| Naja ich hab das mit der Positionierung nicht gelöst aber hab ne andere Lösung gefunden, sodass das Coolmenü immer in top_content bleibt.
 indem ich,
 
 den top_content bereich höher gemahct habe
 
 
 und mit dem navi_heading(navi titel und den sidebar_heading(rechte box-überschrift) gemacht habe...;
 
 
 und bei der positionirung
 
 	Code:	div.menu
{
 position: absolute;
 z-index: 1;
 top: 215px;
 left: 200px;}
 
 eingestellt. Dann bleibt das menü immer im top content bereich...
 
 und ich hab noch die höhe von navibuttons auf 20 px verkleinert...
 
 	Code:	{
...
 ...height:20 px;
 ...
 }
 
ist so besser als gaarnichts
 
jetzt verschiebt sich das menü nicht im header oder im content bereich. die bleibt immer im top_content bereich.
 
ich muss noch passende Hintergrungbilder für top_content, navi_heading und sidebar_heading finden, dann sieht es besser aus zumindest   unter  www.zaza12test.de.tl 
mfg 
 Zuletzt bearbeitet von zaza12test am 16.08.2007, 12:17, insgesamt 2-mal bearbeitet
 |  | 
	
		| ↑ |  | 
	
		|  | 
	
		|  |