✔ Bei Mouseover anderer Inhalt
- Themenstarter D-LuX
- Beginndatum
- Status
M
Maik
Hi,
vermutlich beziehen sich derzeit die absoluten Positionsangaben auf die Grenzen des Dokumentkörpers / Browserfensters und haben keinen Bezug zum darunterliegenden "Layout".
Wie ist denn die Seite aufgebaut, sprich wie lautet der vollständige Code (HTML + CSS) der Seite?
vermutlich beziehen sich derzeit die absoluten Positionsangaben auf die Grenzen des Dokumentkörpers / Browserfensters und haben keinen Bezug zum darunterliegenden "Layout".
Wie ist denn die Seite aufgebaut, sprich wie lautet der vollständige Code (HTML + CSS) der Seite?
Gumbo
Erfahrenes Mitglied
Du kannst die Größenangaben und Positionierung prozentual angeben. Damit richtet sie sich bei einer absoluten Positionierung am gesamten verfügbaren Darstellungsbereich aus, falls es nicht ein übergeordnetes nicht statisch positioniertes Element gibt. Ein Beispiel:
Code:
div {
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
background-color: #F00;
}
D-LuX
Erfahrenes Mitglied
Also mit den Prozentangaben klappt es im IE und FF aber im Safari leider nicht ...
Hier mal mein Code:
CSS Code ohne Text und Farbformatierungen:
Gallerybody sind die jeweiligen Layer!
Hoffe man blickt durch
Hier mal mein Code:
Code:
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'
'http://www.w3.org/TR/html4/loose.dtd'>
<HTML>
<HEAD>
<link rel='stylesheet' type='text/css' href='format4.css'>
</HEAD>
<DIV class='buehne'>
<DIV class='links'>
<DIV class='menue'>
</DIV>
</DIV>
<DIV class='rechts'>
<DIV class='topic'> Willkommen ..</DIV>
</DIV>
<DIV class='menue_rechts'></DIV>
<DIV id='gallerybody'>
<DIV class="textheadline"> heading</DIV>
<DIV class='gallerytext'>
text menue0
</DIV>
</DIV>
<DIV id='gallerybody1'>
<DIV class="textheadline"> menue1</DIV>
<DIV class='gallerytextx'></DIV>
</DIV>
<DIV id='gallerybody2'>
<DIV class="textheadline"> menue2</DIV>
<DIV class='gallerytextx'></DIV>
</DIV>
<DIV id='gallerybody3'>
<DIV class="textheadline"> menue3</DIV>
<DIV class='gallerytextx'></DIV>
</DIV>
<DIV id='gallerybody4'>
<DIV class="textheadline"> menue4</DIV>
<DIV class='gallerytextx'></DIV>
</DIV>
</DIV>
<DIV class='footer'>
<DIV class='footer_txt'>
footer
</DIV>
</DIV>
</DIV>
</body>
</html>CSS Code ohne Text und Farbformatierungen:
Code:
body {
padding:0;
margin:0;
background-image:url(images/master-bg.png);
}
.buehne {
margin:30px auto auto auto;
width:1000px;
}
.links{
float:left;
width:200px;
height:600px;
}
.menue {
margin-top:50px;
margin-left:40px;
}
.menue_rechts {
margin-top:25px;
margin-left:40px;
}
*html .menue_rechts {
margin-top:50px;
margin-left:40px;
}
.rechts{
float:right;
width:800px;
height:600px;
}
.topic{
margin-top:50px;
margin-left:40px;
}
*html .topic{
margin-top:50px;
margin-left:40px;
}
.textheadline{
width:650px;
margin-bottom:10px;
}
#gallerybody{
visibility:visible;
position:absolute;
right:330px;
top:195px;
width:650px;
height:400px;
}
#gallerybody1{
visibility:hidden;
position:absolute;
right:330px;
top:195px;
width:650px;
height:400px;
}
#gallerybody2{
visibility:hidden;
position:absolute;
right:330px;
top:195px;
width:650px;
height:400px;
}
#gallerybody3{
visibility:hidden;
position:absolute;
right:330px;
top:195px;
width:650px;
height:400px;
}
#gallerybody4{
visibility:hidden;
position:absolute;
right:330px;
top:195px;
width:650px;
height:400px;
}
.gallerytextx{
}
.gallerytext{
margin-left:5px;
}
.gallerybild{
margin-right:5px;
margin-left:5px;
}
.footer{
clear:both;
width:1000px;
height:20px;
}Gallerybody sind die jeweiligen Layer!
Hoffe man blickt durch
Zuletzt bearbeitet:
M
Maik
Das DIV .buehne gehört in diesem Fall relativ positioniert:
Und entferne die doppelt vorhandene }-Klammer nach dem .footer-Selektor.
Code:
.buehne {
margin:30px auto auto auto;
width:1000px;
position:relative;
}Gumbo
Erfahrenes Mitglied
Wo hast du denn dort Prozentangaben?
Dein JavaScript kannst du übrigens verallgemeinern:
Der HTML-Code dazu:
Den Klassenbezeichner „foobar“ kannst du selbstverständlich austauschen.
Dein JavaScript kannst du übrigens verallgemeinern:
Code:
var divElements = new Array();
window.onload = function() {
var elems = document.getElementsByTagName("div");
for( var i=0; i<elems.length; i++ ) {
if( elems[i].className.match(/(?:^|\s+)foobar(?:\s+|$)/) ) {
divElements.push(elems[i]);
}
}
}
function showDivElement( objId )
{
for( var i=0; i<divElements.length; i++ ) {
divElements[i].style.visibility = "hidden";
}
if( document.getElementById(objId) ) {
document.getElementById(objId).style.visibility = "visible";
}
}
HTML:
<DIV class='menue_rechts'>
<a href=# onmouseover="showDivElement('gallerybody')" onmouseout="showDivElement()">menue0</a> |
<a href=# onmouseover="showDivElement('gallerybody1')" onmouseout="showDivElement()">menue1</a> |
<a href=# onmouseover="showDivElement('gallerybody2')" onmouseout="showDivElement()">menue2</a> |
<a href=# onmouseover="showDivElement('gallerybody3')" onmouseout="showDivElement()">menue3</a> |
<a href=# onmouseover="showDivElement('gallerybody4')" onmouseout="showDivElement()">menue4</a>
</DIV>
<DIV id='gallerybody'>
<DIV class="textheadline"> heading</DIV>
<DIV class='gallerytext'>
text menue0
</DIV>
</DIV>
<DIV class="foobar" id='gallerybody1'>
<DIV class="textheadline"> menue1</DIV>
<DIV class='gallerytextx'>
</DIV>
</DIV>
<DIV class="foobar" id='gallerybody2'>
<DIV class="textheadline"> menue2</DIV>
<DIV class='gallerytextx'>
</DIV>
</DIV>
<DIV class="foobar" id='gallerybody3'>
<DIV class="textheadline"> menue3</DIV>
<DIV class='gallerytextx'>
</DIV>
</DIV>
<DIV class="foobar" id='gallerybody4'>
<DIV class="textheadline"> menue4</DIV>
<DIV class='gallerytextx'>
</DIV>
</DIV>D-LuX
Erfahrenes Mitglied
die } ist da beim kopieren reingerutscht in den Post.
Also ich dachte position:absolute; ?
Das ist der alte Code ohne %-Angaben.
Hier der neue Code mit %-Angaben!
So sieht s jetzt aus ...
Also die gallerybody´s (layer) müssen noch richtig positioniert werden, aber die bühne ist jetzt schonmal im IE und FF an richtiger Stelle, nur halt Safari nicht..
@Gumbo: Das javascript übersteigt meinen aktuellen Stand des Wissens in javascript Danke trotzdem!
Also ich dachte position:absolute; ?
Das ist der alte Code ohne %-Angaben.
Hier der neue Code mit %-Angaben!
So sieht s jetzt aus ...
Also die gallerybody´s (layer) müssen noch richtig positioniert werden, aber die bühne ist jetzt schonmal im IE und FF an richtiger Stelle, nur halt Safari nicht..
@Gumbo: Das javascript übersteigt meinen aktuellen Stand des Wissens in javascript
Danke trotzdem!
Zuletzt bearbeitet:
M
Maik
Und nochmal, das DIV .buehne gehört relativ positioniert, schliesslich möchtest du es den margin-Angaben zufolge im Fenster horizontal zentrieren.
Gumbos Vorschlag bezog sich auf deine "Menü-Layer" und nicht auf das übergeordnete Element.
Gumbos Vorschlag bezog sich auf deine "Menü-Layer" und nicht auf das übergeordnete Element.
D-LuX
Erfahrenes Mitglied
Code:
.buehne {
margin:30px auto auto auto;
width:1000px;
position:absolute;
top:4%;
left: 2%;
}So, die bühne ist positioniert...
und siehe da: IE, FF und Safari en
Wow, danke
Ich hab gerade nen Hänger ....mache mal ne Pause
was macht dann: margin:30px auto auto auto; denn genau?
30px von oben und reechts,links,unten automatisch zentrieren, oder nicht?
Jetzt muss ich die einzelnen layer noch platzieren, wird ebenso funktionieren oder?
Zuletzt bearbeitet:
M
Maik
Aus diesem Grund habe ich die relative Positionierung des Elements vorgeschlagen, damit die horizontale Zentrierung über die margin-Deklaration weiterhin funktioniert, und sich die Positionsangaben der "Menü-Layer" auf die Grenzen dieser Box beziehen, denn durch die absolute Positionierung ist diese Formatierung hinfällig bzw. überflüssig, weil sie nun nicht mehr greift.
- Status
