Im Header meines Blogs habe ich ein Bild, das ImageMaps für die Hauptnavigation enthält. Das Bild ist in zwei GIF's und JPEG's unterteilt.
Hier das Blog: http://195.176.254.164/da/blog/
Etwas habe ich dabei anscheinend falsch gemacht. Im Opera-Browser wird zwar alles korrekt dargestellt. Aber in Firefox wird um die Bilder zusätzlich ein blauer Rahmen von etwa 3 Pixel Breite gezogen. Im Internetexplorer verschiebt es mir dazu noch die Sidebar unter den Content.
Der entsprechende Teil im header.php sieht so aus:
PHP
<?php wp_head(); ?>
</head>
<body>
<div id="header">
<div id="header_lo">
<img src="wp-content/themes/allmend/images/header_bg_lo.gif" alt="DA">
</div>
<div id="header_mo">
<img src="wp-content/themes/allmend/images/header_bg_mo.jpg" alt="asdf" usemap="#header_bg_mo">
<map name="header_bg_mo">
<area shape="rect" coords="0,10,191,33" href="http://195.176.254.164/da/wiki/pmwiki.phpda" alt="asdf" title="asdf">
<area shape="rect" coords="572,3,742,33" href="http://195.176.254.164/da/wiki/pmwiki.phpmo" alt="asdf" title="asdf">
</map>
</div>
<div id="header_ro">
<img src="wp-content/themes/allmend/images/header_bg_ro.gif" alt="DA" usemap="#header_bg_ro">
<map name="header_bg_ro">
<area shape="circle" coords="0,33,29" href="http://195.176.254.164/da/wiki/pmwiki.phpro" alt="asdf" title="asdf">
</map>
</div>
<div id="header_unten">
<img src="wp-content/themes/allmend/images/header_bg_u_mit_navi.jpg" alt="asdf" usemap="#header_bg_u">
<map name="header_bg_u">
<area shape="rect" coords="0,0,191,5" href="http://195.176.254.164/da/wiki/pmwiki.phpda" alt="asdf" title="asdf">
<area shape="rect" coords="604,0,800,120" href="http://195.176.254.164/da/wiki/pmwiki.phpu" alt="asdf" title="asdf">
</map>
</div>
</div> <!-- /header -->
<div id="page">Und der CSS-Abschnitt sieht so aus:
Code
/* Begin Structure */
body {
background-image: url("images/body_bg.png");
}
#header {
margin-top: 10px; /* Abstand zum oberen Bildschirmrand */
margin-right: auto; /* Damit der Header mittig zentriert wird */
margin-bottom: 0px; /* Abstand nach Header */
margin-left: auto; /* Damit der Header mittig zentriert wird */
padding: 0;
width: 806px;
height: 153px;
}
#header_lo {
width: 32px;
height: 33px;
float: left;
}
#header_mo {
width: 742px;
height: 33px;
float: left;
}
#header_ro {
width: 32px;
height: 33px;
float: left;
}
#header_unten {
clear: both;
width: 806px;
height: 120px;
}
#page {
margin: 0px auto; /* oben und unten 0px, seitlich "auto", damit zentriert */
padding: 0px 0px 0px 0px;
width: 806px;
background: url("images/main_bg_o.png");
}
.narrowcolumn { /* Content Postings */
float: left;
padding: 0px 16px 23px 16px;
margin: 0px 16px 23px 19px;
width: 539px;
/*background-color: Aqua;*/
}
.widecolumn {
float: left;
padding: 0px 16px 23px 16px;
margin: 0px 16px 23px 19px;
width: 539px;
}
.post {
margin: 0 0 40px;
text-align: justify;
}
.widecolumn .post {
margin: 0;
}
.narrowcolumn .postmetadata {
padding-top: 5px;
}
.widecolumn .postmetadata {
margin: 30px 0;
}
.widecolumn .smallattachment {
text-align: center;
float: left;
width: 128px;
margin: 5px 5px 5px 0px;
}
.widecolumn .attachment {
text-align: center;
margin: 5px 0px;
}
.postmetadata {
clear: left;
}
#main_unten {
margin: 0px auto; /* oben und unten 0px, seitlich "auto", damit zentriert */
width: 806px;
height: 5px;
background-image: url("images/main_bg_u.png");
}
#clear{
clear: both;
}
#footer {
margin: 0px auto; /* oben und unten 0px, seitlich "auto", damit zentriert */
padding: 12px 0px;
width: 800px;
text-align: center;
}
#footer p {
margin: 0;
text-align: center;
}
/* End Structure */Ausgegangen bin ich vom aktuellen Kubrick-Theme. WP ist Version 2.03.