Notwendigkeit div zu zentrieren, aber zu stoppen, wenn an eine bestimmte linke Position gelangt, um Platz für Seitenmenü zu lassen

Question

Es gibt wahrscheinlich eine einfache Antwort für dieses ich übersehe. Mein Inhalt befindet sich in einem div-Container auf der Hauptseite. Ich möchte, dass es horizontal zentriert ist, aber wenn der Browser zu klein geschrumpft ist, überlappt er mein Seitenmenü. Ich möchte, dass es sich nicht mehr nach links bewegt, wenn es zum Beispiel 200px erreicht.

Es wird derzeit durch die Hälfte mit einer negativen Rand der Breite (-350px) dann das Positionieren es bei 50% zentriert.

Meine CSS ist hier

Papier {

position:absolute; 
z-index:6; 
overflow: hidden; 
visibility: visible; 
float: left; 
left: 50%; 
margin-top: 0px; 
padding-top: 0; 
padding-right: 0; 
padding-bottom:200; 
padding-left: 0; 
background-color: #000; 
height: 900px; 
width: 700px; 
margin-left: -350px; 

}

jede Hilfe sehr geschätzt

prost

Answer 1

Zentrum der Behälter mit würde: margin:0 auto; statt absoluter Positionierung, dann wenden Sie eine linke und r helles Padding von 200px; (padding: 0 200px;).

Dadurch wird der Container zentriert und bei der Minimierung des Browserfensters auf beiden Seiten 200px frei gelassen.

Answer 2

Sie müssen Ihre HTML und CSS zu überarbeiten, um es zu ermöglichen.

<div id = "sidebar"></div> 
<div id = "content"> 
    <div id = "content_inner"></div> 
</div> 

mit dem neuen HTML Sie auch neue benötigen CSS

#sidebar{ 
float:left; 
width:200px; 
} 

#content{ 
padding-left:200px; 
} 

#content_inner{ 
    margin:0px auto; /* This will center your box in the parent box */ 
    width:700px; 
} 

An einem bestimmten Punkt, könnte man noch gehen auf Ihrem Design lassen müssen, nicht jemand stoppen können Sie Seite sehen in einem 100px breiten Bildschirm. Sie sollten versuchen, Ihre Seiten für eine minimale Größe zu optimieren

Sie auch weitere Informationen zu finden auf diese hier vielleicht in der Lage (Eigentlich die meisten der Seiten für eine 960 Pixel-Display oder breiter entwickelt wird): http://css-tricks.com/the-perfect-fluid-width-layout/

Answer 3

Dieses erste Bit ist eher ein allgemeiner Kommentar zur Lösung von CSS-Problemen. Wenn Sie das Firebug-Add-on für Firefox installieren, können Sie bei jeder Vorschau Ihrer Seite CSS- und Inline-Stile in Echtzeit bearbeiten, um zu sehen, welche Eigenschaft Ihre Benutzeroberfläche wie gewünscht beeinflusst. In diesem Fall würden Sie Ihre Seite laden, den Divisor "Papier" überprüfen und versuchen, Eigenschaften wie Polsterung links, Position, Rand usw. zu ändern.

In diesem Fall hängt Ihr Problem mit der Tatsache zusammen, dass Dieses div ist schwebend, sodass es andere Inhalte überlappen kann. Wenn Ihr Seitenmenü auch schwebt (links), überlappt es nicht mit anderen float: linken Elementen. Da Sie den Überlauf verwenden: versteckt, wird er nicht wie gewohnt unter dem Menü angezeigt.

Schließlich ist es nicht in der OP klar, aber wenn das Menü, über das Sie sprechen auf der rechten Seite ist, dann beide Schwimmer machen: rechts.