✔ horizontale Ausrichtung

Grafixboy

Grafixboy

Erfahrenes Mitglied
Hi Leute wie schon im Titel zu lesen ist,
stimmt bei meinem css was nicht
mit der horizontalen Ausrictung.

HTML: 
...
<script src="../js/prototype.js" type="text/javascript"></script>
<script src="../js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="../js/lightbox++.js" type="text/javascript"></script>
<link href="../css/lightbox.css" rel="stylesheet" type="text/css" media="screen">

<style type="text/css"> 
    *{
        margin: 0;
        padding: 0;
        
    }
    body{
        color: black;
        background-image: url(pics/bgcloud.png);
        background-color: #333;
    }
    #hmitte {
    position:absolute;
    left:50%;
    top:20px;
    width:1px;
    height:1px;
    z-index:1;
    }
    #innen {
    position:absolute;
    left:-204px;/* so würde es im IE mittig sein weil 740/2 = left:-370px;  mit -204 iste es im ff mittig siehe bilder im anhang*/
    top:0px;
    width:740px;
    height:785px;
    z-index:1;
    }
</style>
</head>
<body>
<div id="hmitte">
   <div id="innen">
      <table >
  <thead>
    <tr>
      <th>Bild</th>
      <th>Details</th>
      <th>Direkt-Link</th>
    </tr>
  </thead>
  <tbody>
    ...
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    ...
  </tbody>
</table>
   </div>
</div>
</body>
</html>
und so schaut es aus:

weiß einer rat

PS: Das Dokument ist 100% valide auch das CSS aber scheinbar nur der Syntax :(

Kann das auch an der Lightbox-script liegen
funktioniert nähmlich nur so 100%ig im FF bei IE und Opera zu 90%
 
Zuletzt bearbeitet:
Moin,

setz dein Vorhaben im CSS so um, und die horizontale Zentrierung der Box stimmt in allen Browsern überein:

CSS: 
    #hmitte {
    position:absolute;
    left:50%; /* linker Boxenrand sitzt in der Fenstermitte, und die Box somit außermittig nach rechts versetzt */
    top:20px;
    /*width:1px;*/ /* auskommentiert = deaktiviert */
    /*height:1px;*/ /* auskommentiert = deaktiviert */
    width:740px;
    height:785px;
    margin-left:-370px; /* negative Hälfte der Boxenbreite rückt die Box von rechts nach links in die Fenstermitte */
    z-index:1;
    }
    #innen {
    /*position:absolute;*/ /* auskommentiert = deaktiviert */
    /*left:-204px;*/ /* auskommentiert = deaktiviert */
    /*top:0px;*/ /* auskommentiert = deaktiviert */
    width:740px;
    height:785px;
    /*z-index:1;*/ /* auskommentiert = deaktiviert */
    }

Beachte bitte bei deiner gewählten Positionierungstechnik zur Zentrierung der Box im Browserfenster, dass der linke Bereich der Boxen aus dem Anzeigebereich des Browserfensters geschoben wird, sobald die Fensterbreite die Breite der Box unterschreitet, wo er für den Seitenbesucher dann nicht mehr zugänglich ist - siehe hierzu auch das Demo http://d-graff.de/selfhtml/center1.html, in dem das Problem ebenso für den oberen Bereich der vertikal zentrierten Box gilt, wenn die Fensterhöhe geringer ist, wie die definierte Höhe der Box.

Besser ist in diesem Fall diese Variante: http://d-graff.de/fricca/center.html

Hier verharrt die Box dann am linken und oberen Fensterrand, und es erscheinen die Scrollbalken.

mfg Maik
 
Danke Maik für die schnelle Antwort
:)
führte leider noch nicht zum Erfolg(!)

So sieht es jetzt aus alles weiter links sonst nix passiert:
firefox_jetzt
ie_jetzt
opera_jetzt

aber danke für den Link

MfG Grafixboy

PS: Ok in einer einzelnen Datei funktioniert es .
Hier
Aber so funktioniert auch mein script von vorher hm ...
Dann muss ich wohl nochmal den php-part überprüfen.
 
Zuletzt bearbeitet:
Bei mir stimmt mit meinem geänderten Stylesheet die Ausrichtung der Box #hmitte (weiß hinterlegt) in den genannten Browsern überein:

ff.jpg ie.jpg opera.jpg
(v.l.n.r.: Firefox, IE, Opera)

Gleiches trifft aber auch für die anderen Browser (Netscape, Safari, Google Chrome, usw.) zu.

Kann man sich deine Seite mal irgendwo in vollem Umfang näher anschauen?

mfg Maik
 
ich sende dir eine PM

bitte nix löschen :-)

Mein design ist ja garnicht mehr 740px sondern nur noch 404px Oops
Code: 
#hmitte {
    position:absolute;
    left:50%; /* linker Boxenrand sitzt in der Fenstermitte, und die Box somit außermittig nach rechts versetzt */
    top:20px;
    width:404px;
    height:785px;
    margin-left:-202px; /* negative Hälfte der Boxenbreite rückt die Box von rechts nach links in die Fenstermitte */
    z-index:1;
    }
    #innen {
    width:404px;
    height:785px;
    }
 
Zuletzt bearbeitet:
Grafixboy hat gesagt.:
ich sende dir eine PM

bitte nix löschen :-)

Mein design ist ja garnicht mehr 740px sondern nur noch 404px Oops :eek:

Code: 
#hmitte {
    position:absolute;
    left:50%; /* linker Boxenrand sitzt in der Fenstermitte, und die Box somit außermittig nach rechts versetzt */
    top:20px;
    width:404px;
    height:785px;
    margin-left:-202px; /* negative Hälfte der Boxenbreite rückt die Box von rechts nach links in die Fenstermitte */
    z-index:1;
    }
    #innen {
    width:404px;
    height:785px;
    }
Zum Vergrößern anklicken....

Achtung ich pass das jetzt mal an.
 
Ich tippe da mal auf das Attribut align="center" im <table>-Tag, das in deinem hier gezeigten Code nicht enthalten ist, wodurch der IE die Tabelle innerhalb der umschliessenden Box horizontal zentriert, Firefox hingegen aber nicht, sondern sie darin linksbündig ausrichtet.

Mit Opera (10.10) kann ich mich seltsamerweise nicht einloggen :confused:

Muß mal schauen, ob da in seinen Einstellungen irgendwo ein Riegel vorgeschoben ist.

mfg Maik
 
Ok das war der Fehler jetzt geht es :D

Danke Danke für deine Hilfe.

Schönen Tag noch Maik

sorry habe den Benutzer nur schonwieder entfernt weil jetzt ja alles geht ; -)

Frage am Rande:
Kennst du dich mit "Parallax scrolling" aus
hast ja jetzt meine Seite gesehen würde sich da gut machen
wegen der transparenzen

##EDIT##

Ok für alle die es interessiert bin hier fündig gewurden.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück