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