Noch nicht viel geschrieben
Juten Tach, ich wieder...
Nachdem ich mich von komplizierten Spry Geschichten und JS verabschiedet habe kann ich mich nun den kleineren Details widmen:
Hier gibt es zwischen Firefox /Win und allen anderen Browsern (auch FF auf Mac - alles bestens) ein Anpassungsproblem welches sich in den Menüs als Verschiebung von ein bis zwei Pixeln äußert.
Ich habe schon ne Menge probiert, insbesondere die Margins auf null zu setzen.
Kann es auch an der Schriftgröße liegen? Weiß jemand etwas? Ich habe auch brav die Comic verbannt - nur von italic konnte ich mich noch nicht trennen...
Sorry, noch viel nicht relevantes (wegen meiner Menüexperimente)dabei...
CSS:
Ganz zu schweigen von dem Umstand dass <=IE6 noch alles durcheinander bringt. Dürfte an fehlenden Z-Indexen liegen. Auch hier bin ich dankbar für Ratschläge.
Schonmal dankeschön fürs Reinschauen und herzliche Grüße!
Nachdem ich mich von komplizierten Spry Geschichten und JS verabschiedet habe kann ich mich nun den kleineren Details widmen:
Hier gibt es zwischen Firefox /Win und allen anderen Browsern (auch FF auf Mac - alles bestens) ein Anpassungsproblem welches sich in den Menüs als Verschiebung von ein bis zwei Pixeln äußert.
Ich habe schon ne Menge probiert, insbesondere die Margins auf null zu setzen.
Kann es auch an der Schriftgröße liegen? Weiß jemand etwas? Ich habe auch brav die Comic verbannt - nur von italic konnte ich mich noch nicht trennen...
Sorry, noch viel nicht relevantes (wegen meiner Menüexperimente)dabei...
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Unbenanntes Dokument</title>
<link href="styles/ava_style.css" rel="stylesheet" type="text/css">
<style type="text/css">
ul.men ul.erl {
background-image: url(images/ka/ka_erl.jpg);
background-repeat: no-repeat;
background-position: left top;
left: 118px;
top: 3px;
width: 172px;
font-size: 14px;
height: 106px;
position: absolute;
text-align: left;
right: 0px;
bottom: 0px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
overflow: visible;
}
ul.men ul.ang {
background-repeat: no-repeat;
left: 118px;
top: 48px;
width: 172px;
font-size: 14px;
height: 230px;
position: absolute;
text-align: left;
right: 0px;
bottom: 0px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
background-image: url(images/ka/ka_ang.jpg);
}
ul.men_x ul.erl {
background-image: url(images/ka/ka2_erl.jpg);
background-repeat: no-repeat;
background-position: left top;
left: 118px;
top: 3px;
width: 172px;
font-size: 14px;
height: 230px;
position: absolute;
text-align: left;
margin: 0px;
right: 0px;
bottom: 0px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
}
ul.men ul.coa {
background-image: url(images/ka/ka_coa.jpg);
background-repeat: no-repeat;
background-position: left top;
left: 118px;
top: 93px;
width: 172px;
font-size: 14px;
height: 83px;
position: absolute;
text-align: left;
margin: 0px;
right: 0px;
bottom: 0px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
}
ul.men ul.uns {
background-image: url(images/ka/ka_uns.jpg);
background-repeat: no-repeat;
background-position: left top;
left: 118px;
top: 138px;
width: 172px;
font-size: 14px;
height: 102px;
position: absolute;
text-align: left;
margin: 0px;
right: 0px;
bottom: 0px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
}
ul.men ul.kon {
background-image: url(images/ka/ka_kon.jpg);
background-repeat: no-repeat;
background-position: left top;
left: 118px;
top: 183px;
width: 172px;
font-size: 14px;
height: 119px;
position: absolute;
text-align: left;
right: 0px;
bottom: 0px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
margin: 0px;
}
ul.men a.erlebnis {
padding-top: 8px;
padding-right: 40px;
padding-bottom: 9px;
width: 120px;
padding-left: 18px;
background-repeat: no-repeat;
}
ul.men a.angebot {
padding-top: 8px;
padding-right: 40px;
padding-bottom: 9px;
width: 120px;
padding-left: 18px;
background-repeat: no-repeat;
}
ul.men a.coaching {
padding-top: 8px;
padding-right: 40px;
padding-bottom: 9px;
width: 120px;
padding-left: 18px;
}
ul.men a.ueberuns {
padding-top: 8px;
padding-right: 40px;
padding-bottom: 9px;
width: 120px;
padding-left: 18px;
}
ul.men a.kontakt{
padding-top: 8px;
padding-right: 40px;
padding-bottom: 9px;
width: 100px;
padding-left: 18px;
}
body {
background-repeat: no-repeat;
}
li ul {display: none;}
li:hover ul {display: block;}
</style>
</head>
<body background="http://www.psd-tutorials.de/modules/Forum/images/av/av_li.jpg">
<div id="apmen">
<ul id="menu" class="men">
<li id="er"><a
class="erlebnis"
href="erlebnis_tantramassage.html" target="_parent">Erlebnis</a>
<ul class="erl">
<li><a href="erlebnis_tantramassage.html" target="_parent">***Tantramassage</a></li>
<li><a href="erlebnis_wellnessmassage.html" target="_parent">***Wellnessmassage</a></li>
<li><a href="erlebnis_taomassage.html" target="_parent">***Taomassage</a></li>
<li><a href="erlebnis_lomi_lomi_massage.html" target="_parent">***Lomi Lomi Massage</a></li>
<li><a href="erlebnis_feedbacks.html" target="_parent">***Feedbacks</a></li>
</ul>
</li>
<li id="an"><a
class="angebot"
href="angebot_tantrische_massagen_fuer_frauen.html" target="_parent">Angebot</a>
<ul class="ang">
<li><a href=" angebot_wellnessmassagen_fuer_frauen.html" target="_parent">Für Frauen</a></li>
<li><a href=" angebot_tantrische_massagen_fuer_frauen.html" target="_parent">***Tantrische Massagen</a></li>
<li><a href=" angebot_wellnessmassagen_fuer_frauen.html" target="_parent">***Wellnessmassagen</a></li>
<li><a href=" angebot_rubensmassagen.html" target="_parent" >***Rubensmassagen</a></li>
<li><a href=" angebot_lomi_lomi_massagen_fuer_frauen.html" target="_parent" >***Lomi Lomi Massagen</a></li>
<li><a href=" angebot_tantrische_massagen_fuer_maenner.html" target="_parent" >Für Männer</a></li>
<li><a href=" angebot_tantrische_massagen_fuer_maenner.html" target="_parent" >**Tantrische Massagen</a></li>
<li><a href=" angebot_wellnessmassagen_fuer_maenner.html" target="_parent" >***Wellnessmassagen</a></li>
<li><a href=" angebot_lomi_lomi_massagen_fuer_maenner.html" target="_parent" >***Lomi Lomi Massagen</a></li>
<li><a href=" angebot_tantrische_massagen_fuer_paare.html" target="_parent" >Für Paare</a></li>
<li><a href=" angebot_tantrische_massagen_fuer_paare.html" target="_parent" >***Tantrische Massagen</a></li>
<li><a href=" angebot_wellnessmassagen_fuer_paare.html" target="_parent" >***Wellnessmassagen</a></li>
</ul>
</li>
<li id="co"><a
class="coaching"
href="coaching_tantra_experience.html" target="_parent">Coaching</a>
<ul class="coa">
<li><a href="coaching_tantra_experience.html" target="_parent">...and more</a></li>
<li><a href="coaching_tantra_experience.html" target="_parent" >***Tantra Experience</a></li>
<li><a href="coaching_rubensmassage.html" target="_parent">***Rubensmassage</a></li>
<li><a href="coaching_einzelsessions.html" target="_parent">***Einzelsessions</a></li>
</ul>
</li>
<li id="uu"><a
class="ueberuns"
href="unser_team.html" target="_parent">Über Uns</a>
<ul class="uns">
<li><a href="unser_team.html" target="_parent">***Team</a></li>
<li><a href="unser_ambiente.html" target="_parent">***Ambiente</a></li>
<li><a href="unsere_historie.html" target="_parent">***Historie</a></li>
<li><a href="unsere_vision.html" target="_parent">***Vision</a></li>
<li><a href="uns_mitarbeit.html" target="_parent">***Mitarbeit</a></li>
</ul>
</li>
<li id="kt"><a
class="kontakt"
href="kontakt_termine.html" target="_parent" >Kontakt</a>
<ul class="kon">
<li><a href="kontakt_termine.html" target="_parent">***Terminvereinbarung</a></li>
<li><a href="kontakt_blume.html" target="_parent">***Die Blume</a></li>
<li><a href="kontakt_*********html" target="_parent">***Anfahrtspläne</a></li>
<li><a href="kontakt_fragen_antworten.html" target="_parent">***Fragen & Antworten</a></li>
<li><a href="kontakt_empfehlungen.html" target="_parent">***Empfehlungen</a></li>
<li><a href="impressum.html" target="_parent" >***Impressum</a></li>
</ul>
</li>
</ul>
</div>
<!--HAUPTMENÜ-->
<div id="li_unten">
<table width="288" border="0">
<tr>
<td width="5" height="47"> </td>
<td width="10"> </td>
<td width="259"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<br>
</div>
</body>
</html>
CSS:
HTML:
@charset "UTF-8";
.sdpro #container {
width: 966px;
top: 90px;
position: relative;
height: 690px;
right: 0px;
z-index: 1;
color: #FFF;
margin-right: auto;
margin-left: auto;
}
h3 {
color:#9FF;
font-family: Tahoma, Geneva, sans-serif;
font-style: italic;
font-size: 18px;
font-weight: normal;
font-variant: normal;
}
#apmen {
position:absolute;
width:321px;
height:309px;
left: 4px;
top: 242px;
right: 0px;
bottom: 0px;
margin: 0px;
padding: 0px;
z-index: 10;
}
#apmen_x {
position:absolute;
width:321px;
height:309px;
left: 4px;
top: 242px;
right: 0px;
bottom: 0px;
margin: 0px;
padding: 0px;
}
#menu {
width:305px;
height:308px;
margin: 0px;
padding: 0px;
}
#menu_x {
width:305px;
height:308px;
margin: 0px;
padding: 0px;
}
ul.men {
list-style-type: none;
font-size: 18px;
line-height: 45px;
left: 14px;
bottom: 0px;
top: 0px;
right: 0px;
position: absolute;
font-style: italic;
font-weight: normal;
font-variant: normal;
font-family: Tahoma, Geneva, sans-serif;
margin: 0px;
padding: 0px;
text-transform: none;
text-decoration: none;
}
ul.men_x {
list-style-type: none;
font-size: 18px;
line-height: 45px;
left: 14px;
bottom: 0px;
top: 0px;
right: 0px;
position: absolute;
font-family: Tahoma, Geneva, sans-serif;
font-style: italic;
font-weight: normal;
font-variant: normal;
margin: 0px;
padding: 0px;
}
ul.men a {
color: #FFF;
font-weight: normal;
list-style-type: none;
text-decoration: none;
font-family: Tahoma, Geneva, sans-serif;
margin: 0px;
padding: 0px;
}
ul.men_x a {
font-family: Tahoma, Geneva, sans-serif;
color: #FFF;
font-style: italic;
font-weight: normal;
list-style-type: none;
text-decoration: none;
padding-top: 10px;
}
ul.men a:hover {
color: #9FF;
}
ul.men a:active {
color: #FF7F55;
}
ul.men ul li {
list-style-type: none;
line-height: 17px;
font-size: 14px;
padding-left: 0px;
}
ul.men_x ul li {
list-style-type: none;
line-height: 17px;
font-size: 14px;
padding-left: 0px;
}
ul.men li:hover a.erlebnis {
background-image: url(../images/hg/hg_erl.jpg);
background-repeat: no-repeat;
background-position: left top;
}
ul.men li:hover a.angebot {
background-image: url(../images/hg/hg_ang.jpg);
background-repeat: no-repeat;
background-position: left top;
}
ul.men li:hover a.coaching {
background-image: url(../images/hg/hg_coa.jpg);
background-repeat: no-repeat;
background-position: left top;
}
ul.men li:hover a.ueberuns {
background-image: url(../images/hg/hg_uns.jpg);
background-repeat: no-repeat;
background-position: left top;
}
ul.men li:hover a.kontakt {
background-image: url(../images/hg/hg_kon.jpg);
background-repeat: no-repeat;
background-position: left top;
}
#li_unten {
position:absolute;
width:303px;
height:92px;
z-index:20;
background-image: url(../images/ka/untenlinks.jpg);
background-repeat: no-repeat;
background-position: left bottom;
font-family: Tahoma, Geneva, sans-serif;
font-size: 16px;
color: #FFF;
overflow: hidden;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 5px;
text-align: left;
white-space: normal;
font-style: italic;
font-weight: normal;
left: 18px;
top: 582px;
}
#li_unten table tr td {
font-size: 18px;
text-align: right;
}
#links {
position:absolute;
width:336px;
height:690px;
z-index:10;
left: 0px;
top: 0px;
visibility: visible;
background-image: url(../images/av/av_li.jpg);
}
.hidepics {
visibility: hidden;
}
Ganz zu schweigen von dem Umstand dass <=IE6 noch alles durcheinander bringt. Dürfte an fehlenden Z-Indexen liegen. Auch hier bin ich dankbar für Ratschläge.
Schonmal dankeschön fürs Reinschauen und herzliche Grüße!
Zuletzt bearbeitet: