Moin,
ich habe mich in den letzten Tagen mal etwas intensiver mit CSS beschäftigt, bin jedoch bei der Positionierung von durchsichtigen Linkboxen auf ein Problem gestoßen, was ich mir so eigentlich nicht erklären kann.
Es geht um folgenden Code:
index.php
system-hp/design.css
/system-hp/sys-elemente.css
Bei [...] wurden jeweils unwichtige Codebestandteile weggelassen. Die *.js Dateien habe ich ganz weggelassen, da diese nur die Popups koordinieren. Ebenso habe ich die sys-elemente.php weggelassen, da durch diese nur dynamisch den Inhalt der title Elemente in der index.php gefüllt werden (funktioniert auch).
Problem ist, dass die divs anscheinend alle von einem anderen Ursprungspunkt aus positioniert werden müssen, um sie im Firefox 3 richtig positioniert anzuzeigen (siehe *website*). Im Internet Explorer 7 hingegen liegen alle divs durcheinander gewürfelt.
Die komplizierte Methode mit einem gestreckten durchsichtigen Bild innerhalb einem in der Position definierten div habe ich gewählt, da ich jeweils mit nur Bild bzw. nur div Fehler hatte (z.B: unsichtbare Linkfelder, wo keine hätten sein sollen).
Die Frage ist also: Wie positioniere ich die divs so, dass sowohl IE als uch FF alles richtig darstellt.
Ich hoffe ihr könnt mir helfen.
ich habe mich in den letzten Tagen mal etwas intensiver mit CSS beschäftigt, bin jedoch bei der Positionierung von durchsichtigen Linkboxen auf ein Problem gestoßen, was ich mir so eigentlich nicht erklären kann.
Es geht um folgenden Code:
index.php
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de" >
<head>
<title>Svens Multimedia-System Okt. 2008</title>
<link rel="stylesheet" href="/system-hp/css/design.css" type="text/css" />
<link rel="stylesheet" href="/system-hp/css/sys-elemente.css" type="text/css" />
<script type='text/javascript' src='/system-hp/java/jquery-1.2.6.min.js'></script>
<script type='text/javascript' src='/system-hp/java/tooltip.js'></script>
<?php include('/www/htdocs/w00a6677/system-hp/php/sys-elemente.php'); ?>
</head>
<body>
<div class='site'>
<div class='main-header'></div>
<div class='main-system'>
<div id='lcd'><a href="#" title="<?php echo $lcd; ?>"><img src="/system-hp/images/spacer.png" id='lcd'></img></a></div>
<div id='receiver'><a href="#" title="<?php echo $receiver; ?>"><img src="/system-hp/images/spacer.png" id='receiver'></img></a></div>
<div id='dvdplayer'><a href="#" title="<?php echo $dvdplayer; ?>"><img src="/system-hp/images/spacer.png" id='dvdplayer'></img></a></div>
[...]
<div class='main-legend'></div>
</div>
</body>
</html>
system-hp/design.css
Code:
.site{
text-align:center;
}
.site img{
}
.main-header{
background-image: url(/system-hp/images/main-header.jpg);
background-repeat:no-repeat;
width:450px;
height:96px;
margin:auto;
}
.main-system{
background-image: url(/system-hp/images/main-system.jpg);
background-repeat:no-repeat;
width:1000px;
height:987px;
margin:auto;
text-align:left;
}
.main-legend{
background-image: url(/system-hp/images/main-legend.jpg);
background-repeat:no-repeat;
width:835px;
height:151px;
margin:auto;
}
[...]
/system-hp/sys-elemente.css
Code:
img#lcd{
width:354px;
height:247px;
}
div#lcd{
position:relative;
left:86px;
top:12px;
width:354px;
}
img#receiver{
width:226px;
height:91px;
}
div#receiver{
position:relative;
left:706px;
top:49px;
width:226px;
}
[...]
Bei [...] wurden jeweils unwichtige Codebestandteile weggelassen. Die *.js Dateien habe ich ganz weggelassen, da diese nur die Popups koordinieren. Ebenso habe ich die sys-elemente.php weggelassen, da durch diese nur dynamisch den Inhalt der title Elemente in der index.php gefüllt werden (funktioniert auch).
Problem ist, dass die divs anscheinend alle von einem anderen Ursprungspunkt aus positioniert werden müssen, um sie im Firefox 3 richtig positioniert anzuzeigen (siehe *website*). Im Internet Explorer 7 hingegen liegen alle divs durcheinander gewürfelt.
Die komplizierte Methode mit einem gestreckten durchsichtigen Bild innerhalb einem in der Position definierten div habe ich gewählt, da ich jeweils mit nur Bild bzw. nur div Fehler hatte (z.B: unsichtbare Linkfelder, wo keine hätten sein sollen).
Die Frage ist also: Wie positioniere ich die divs so, dass sowohl IE als uch FF alles richtig darstellt.
Ich hoffe ihr könnt mir helfen.
Zuletzt bearbeitet: