smartysmart34
Neues Mitglied
Hallo zusammen,
ich habe noch nicht viel Erfahrung mit HTML und CSS. Derzeit erstelle ich ein Template für Joomla und habe es als "einfache" Tabelle aufgebaut, nacdem ich mit DIVs gescheitert bin. Oben in der Mitte möchte ich die Hintergrundgrafik einblenden, die - IE kann Transparenz nicht darstellen - auch Hintergrund enthält. Nun schaffe ich es in FF oder Konqueror, diese Grafik passend zum Hintergrund auszurichten:
im IE sieht das Ganze aber falsch aus, weil er die Grafik um ein Pixel nach Oben verschiebt:
[img=http://img508.imageshack.us/img508/5020/homepage5kn7.th.jpg]
Kann mir jmd. nen einfachen Tip geben, wie ich das in beiden Browsern vernünftig anzeigen kann?
Ach so:
HTML-Code:
CSS:
Ich habe teilweise im CSS noch fragmente aus der Zeit, als ich die Seite mit DIVs bauen wollte. Ich glaube zwar, alles rausgenommen zu haben, falls jemandem was auffällt bin ich dennoch für einen Hinweis dankbar.
Danke und Gruß,
Martin
ich habe noch nicht viel Erfahrung mit HTML und CSS. Derzeit erstelle ich ein Template für Joomla und habe es als "einfache" Tabelle aufgebaut, nacdem ich mit DIVs gescheitert bin. Oben in der Mitte möchte ich die Hintergrundgrafik einblenden, die - IE kann Transparenz nicht darstellen - auch Hintergrund enthält. Nun schaffe ich es in FF oder Konqueror, diese Grafik passend zum Hintergrund auszurichten:
im IE sieht das Ganze aber falsch aus, weil er die Grafik um ein Pixel nach Oben verschiebt:
[img=http://img508.imageshack.us/img508/5020/homepage5kn7.th.jpg]
Kann mir jmd. nen einfachen Tip geben, wie ich das in beiden Browsern vernünftig anzeigen kann?
Ach so:
HTML-Code:
Code:
<?php
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
$iso = explode( '=', _ISO );
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php mosShowHead(); ?>
<?php
if ( $my->id ) {
initEditor();
}
?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $cur_template; ?>/css/template_css.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="<?php echo $GLOBALS[mosConfig_live_site]?>/images/favicon.ico" />
</head>
<body>
<table width="100%" height="100%" class="main">
<tr>
<td class="topimage" width="85px" height="96px">
</td>
<td width="112px" class="header">
</td>
<td class="header_ohnerechts">
</td>
<td rowspan="2" class="logo" width="298px">
<!-- <img src="<?php echo $mosConfig_live_site;?>/templates/krabbeln/images/Logo.png" alt=""/>
--> </td>
<td class="header_ohnelinks">
</td>
</tr>
<tr>
<td class="balken" height="46px">
</td>
<td class="lowerimage">
</td>
<td class="balken">
</td>
<td class="balken">
</td>
</tr>
<tr>
<td colspan="2" height="35px" class="header">
</td>
<td colspan="3" class="header">
</td>
</tr>
<tr>
<td colspan="2" class="left_main">
<?php if (mosCountModules('left')) { ?>
<?php mosLoadModules ( 'left' ); ?>
<?php } ?>
</td>
<td colspan="3" class="right_main">
</td>
</tr>
<tr>
<td class="footer" height="35px" colspan="5" align="center">
Powered by Joomla!
</td>
</tr>
</table>
</body>
</html>CSS:
Code:
body {height:100%;width:100%;min-width:800px;font-family:Arial,Helvetica,Serif;font-size:11px;color:#000000;background:#FFFFFF;padding:0px;margin:0px;}
/* Layout-Formate */
.main
{
/* position : absolute;*/
/* top : 0px;*/
/* left : 0px;*/
/* width : 100%;*/
/* height : 100%;*/
min-height : 600px;
min-width : 800px;
background-color : #ffffff;
border : 1px solid #000000;
border-collapse : collapse;
}
.header
{
/* position : absolute;*/
/* top : 0px;*/
/* left : 0px;*/
/* width : 100%;*/
/* height : 170px;*/
border : 1px solid #000000;
border-collapse : collapse;
background-color : #fff1a2;
}
.header_ohnerechts
{
/* position : absolute;*/
/* top : 0px;*/
/* left : 201px;*/
/* clear : both;*/
/* margin-left : 200px;*/
/* height : 170px;*/
/* width : 100%;*/
background-color : #fff1a2;
border-top : 1px solid #000000;
border-bottom : 1px solid #000000;
border-collapse : collapse;
/* overflow : visible;*/
/* min-width : 400px;*/
}
.header_ohnelinks
{
/* position : absolute;*/
/* top : 0px;*/
/* left : 0px;*/
/* width : 200px;*/
/* height : 170px;*/
background-color : #fff1a2;
border-bottom : 1px solid #000000;
border-top : 1px solid #000000;
border-right : 1px solid #000000;
border-collapse : collapse;
/* float : left;*/
}
.topimage
{
/* position : absolute;*/
/* top : 0px;*/
/* left : 0px;*/
/* width : 85px;*/
/* height : 90px;*/
border-right : 1px solid #000000;
border-collapse : collapse;
/* overflow : hidden;*/
}
.balken
{
/* position : absolute;*/
/* top : 90px;*/
/* left : 0px;*/
/* width : 100%;*/
/* height : 45px;*/
border-top : 1px solid #000000;
border-bottom : 1px solid #000000;
border-collapse : collapse;
background-color : #c8d6c1;
}
.lowerimage
{
/* position : absolute;*/
/* top : 0px;*/
/* left : 85px;*/
/* width : 115px;*/
/* height : 45px;*/
/* overflow : hidden;*/
border : 1px solid #000000;
border-collapse : collapse;
background-image : url(../images/dekofoto.png);
background-repeat: repeat-x;
}
.searchbox
{
/* position : absolute;*/
/* top : 135px;*/
/* left : 0px;*/
/* width : 100%;*/
/* height : 35px;*/
/* border : 1px solid #000000;*/
border-collapse : collapse;
background-color : #fff1a2;
}
.logo
{
/* position : relative;*/
/* left : 0;*/
/* bottom : 0;*/
/* z-index : 10;*/
background-image : url(../images/Logo.png);
background-repeat: no-repeat;
background-position : center;
min-width : 300px;
border-collapse : collapse;
/* height : 170px;*/
/* margin-left : 45%;*/
/* margin-right : 55%;*/
/* margin-top : -135px;*/
}
.right_main
{
/* position : absolute;*/
/* top : 171px;*/
/* left : 0px;*/
/* width : 100%;*/
/* height : 100%;*/
border : 1px solid #000000;
border-collapse : collapse;
background-color : #ffffff;
}
.left_main
{
/* position : absolute;*/
/* top : 0px;*/
/* left : 0px;*/
/* width : 200px;*/
/* height : 100%;*/
border : 1px solid #000000;
border-collapse : collapse;
/* float : left;*/
background-color : #fff1a2;
}
.footer
{
/* position : absolute;*/
/* top : 90px;*/
/* left : 0px;*/
/* width : 100%;*/
/* height : 45px;*/
border : 1px solid #000000;
border-collapse : collapse;
background-color : #c8d6c1;
align : center;
}Ich habe teilweise im CSS noch fragmente aus der Zeit, als ich die Seite mit DIVs bauen wollte. Ich glaube zwar, alles rausgenommen zu haben, falls jemandem was auffällt bin ich dennoch für einen Hinweis dankbar.
Danke und Gruß,
Martin
