Css Fotoalbum Probleme

[Krobbus]

Hallo, ich habe auf meinefotos.de.md ein Fotoalbum. Ich habe es schon meinen Wünschen angepasst, aber leider kriege ich es nicht hin das das Album nicht so weit rechts angezeigt wird. (Es soll halt links nicht so viel Platz sein)
Zweitens würde ich gerne haben, das nicht immer wieder die "Startseite" angezeigt wird, wenn man während des Fotoanschauens den Mauszeiger zu weit nach links oder rechts bewegt. (Klickt mal auf "Set 1", und dann bewegt ihr den Mauszeiger außerhalb des Fotoalbums, dann verschwindet Set 1 wieder)

Wie mache ich das? Wäre super wenn mir jemand hilft, sind bestimmt nur Kleinigkeiten aber ich bin leider noch nciht so gut mit CSS.

/* common styling */
/* set up the overall width of the menu div and the margins */
.menu2 {
font-family: verdana, arial, sans-serif; 
width:673px;
height:31px;
background:#fff;
padding:0;
margin:0 auto; 
position:relative;
z-index:1;
border-bottom:20px solid #333;
margin-bottom:650px;
}
/* position the instructions using a dl */
.menu2 dl {
font-family:verdana, arial, sans-serif;
font-size:0.9em;
position:absolute;
width:270px;
top:160px;
left:50px;
}
.menu2 dl dt {font-size:1.2em; margin-bottom:2em; font-weight:bold;}
.menu2 dl dd { padding:0; margin:0; line-height:1.7em; margin-bottom:2em;}
.menu2 dl dd:first-letter {font-weight:bold;}

/* remove the bullets and set the margin and padding to zero for the unordered list */
.menu2 ul {
padding:0; 
margin:0;
list-style-type: none;
border:0;
}
/* float the list so that the items are in a line */
.menu2 ul li {
display:block;
float:left;
width:51px;
height:31px;
}
/* style the links to be 50px wide by 31px high with a right border 1px solid white. Set the background color and the font size. */
.menu2 ul li a, .menu2 ul li a:visited {
display:block; 
float:left;
text-align:center; 
text-decoration:none; 
width:50px; 
height:31px; 
color:#ddd;
border-right:1px solid #fff;
background:#333; 
line-height:30px; 
font-size:11px;
}

/* clear the float at the end of each line of four slides */
span.clr {display:block; clear:both; width:0; height:0; font-size:0; line-height:0;}

/* make the dropdown ul invisible */
.menu2 ul li ul {
display: none;
}

/* remove the table styling */
table {
border-collapse:collapse;
margin:0; 
padding:0;
}


/* specific to non IE browsers */
/* set the background and foreground color of the main menu li link on hover */
.menu2 ul li:hover a{
color:#fff; 
background:#000;
cursor:default;
}

/* make the sub menu ul visible and position it beneath the first list item */
.menu2 ul li:hover ul {
text-align:left;
display:block; 
position:absolute; 
top:31px; 
left:0;
}

/* make the sub menu ul li the full width with padding and border. */
.menu2 ul li:hover ul li {
cursor:pointer;
width:900px;
height:483px;
border:20px solid #000;
border-width:20px 5px;
background:#ddd url(slide/linen.jpg); 
color:#fff;
padding:25px 25px;
cursor:default;
}

/* style the background and foreground color of the submenu links */
.menu2 ul li:hover ul li a {
background:#333;
width:118px;
height:118px;
border:1px solid #ddd;
border-color:#888 #000 #000 #888;
}


/* keep the large image hidden */
.menu2 ul li:hover ul li a em {
display:none;
}
/* add a border to the horizontal slide and position it centrally using a top margin */
.menu2 ul li:hover ul li a.horiz span img {
border:1px solid #888;
margin-top:21px;
}
/* add a border to the vertical slide and position it centrally using a top margin */
.menu2 ul li:hover ul li a.vert span img {
border:1px solid #888;
margin-top:9px;
}

.menu2 ul li:hover ul li a:hover {
background:#000;
}


/* make the active links zero size so the active dotted border does not show through the large image */
.menu2 ul li:hover ul li a:active, .menu2 ul li:hover ul li a:focus {background:#aaa; height:0; width:0; border:0;}
.menu2 ul li:hover ul li a:active em, .menu2 ul li:hover ul li a:focus em {background:#bbb; height:0; width:0; padding:0; margin:0; border:0;}


/* make the large image visible and set the border, position them using position absolute centrally over the slides */
/* horizontal large image styling */
.menu2 ul li:hover ul li a.horiz:active em, .menu2 ul li:hover ul li a.horiz:focus em {display:block; background:#ddd; position:absolute; left:15px; top:100px; width:640px; height:480px; z-index:200; z-index:500; cursor:default; border:1px solid #fff;}
.menu2 ul li:hover ul li a.horiz:active em img, .menu2 ul li:hover ul li a.horiz:focus em img {border:0;}
/* vertical large image styling */
.menu2 ul li:hover ul li a.vert:active em, .menu2 ul li:hover ul li a.vert:focus em {display:block; background:#ddd; position:absolute; left:95px; top:23px; width:480px; height:640px; z-index:200; z-index:500; cursor:default;  border:1px solid #fff;}
.menu2 ul li:hover ul li a.vert:active em img, .menu2 ul li:hover ul li a.vert:focus em img {border:0;}

 

[ingoS]

.menu2 {
[...]
margin:0 auto;
[...]
}

Das zentriert die gesamte Seite.
Das Album, das sich öffnet, ist aber absolut positioniert und breiter als die ursprüngliche zentrierte Seite. Daher bleibt die ursprüngliche Zentrierung erhalten und das Album wächst nach rechts raus.
Du kannst das "auto" rausnehmen. Dann hängt die Seite immer am linken Rand und das Album auch.

 

[Krobbus]

Ich hätte aber schon ganz gerne, dass das Album zentriert ist, aber halt richtig zentriert, d.h. links soll nicht mehr Rand als rechts sein. Geht das auch irgendwie? (Aber danke schonmal, dein Tipp hat auf jeden Fall funktioniert, es ist jetzt direkt am linken Rand)

 

[ingoS]

Ich hätte aber schon ganz gerne, dass das Album zentriert ist, aber halt richtig zentriert, d.h. links soll nicht mehr Rand als rechts sein. Geht das auch irgendwie?

Klar geht das, aber dazu muss halt die Ursprungs-Seite genauso breit sein wie nachher das aufgeklappte Album.
Der erste Schritt wäre, das gerade entfernte auto wieder einzufügen (;ugl). Dann müsstest du die Breite von menu2 von momentan 673px erhöhen, ich glaube auf 1022px. Zumindest ist das Album nachher 1022px breit, aber ich weiß nicht, ob ich nicht vielleicht noch irgendwelche padding-Angaben übersehen habe. Probier es einfach mal aus. ;)

 

[Krobbus]

Super, danke, das klappt sehr gut!

Jetzt habe ich nur noch das andere Problem, kann mir da noch jemand helfen? Wäre halt gut wenn sich das Album nicht immer schließt wenn man den Mauszeiger zu weit weg bewegt. Man könnte das ja umändern, das es sich nur noch schließt wenn man dann auf die weiße Fläche auch klickt, und nicht nur den Mauszeiger darüber bewegt.

 

[ingoS]

Man könnte das ja umändern, das es sich nur noch schließt wenn man dann auf die weiße Fläche auch klickt, und nicht nur den Mauszeiger darüber bewegt.

Das Problem dabei ist, dass es technisch genau umgekehrt funktioniert: Nur solange der schwarz eingerahmte Bereich vom Mauszeiger berührt wird, ist das Album offen. Das heißt also, nicht das Berühren der weißen Fläche löst das Schließen aus, sondern das Nicht-Berühren der schwarz eingerahmten Bereichs.

Ich bin mir nicht ganz sicher, aber guck mal, was passiert, wenn du .menu2 ul auch 1022px breit machst. Dann müsstest du eigentlich schon mal die obere Kante neben den schwarzen Tabs/Reitern mit den Set-Namen abdecken.