Wie verkleinern Sie die gesamte Seite, wenn sie ausgezoomt ist?

-1

Wenn die Seite ausgezoomt ist, wie kann ich die Webseite und den gesamten Inhalt verkleinern? Dies ist vor dem Herauszoomen. Diese ist nach Auszoomen Wie verkleinern Sie die gesamte Seite, wenn sie ausgezoomt ist?

Wie Mitte der Seite zu schrumpfen, während Auszoomen?

-Code im mit ist

<title>Demo</title> 
<head>This is a demo</head> 
<style> 
#my-div{ 

    margin-left: auto; 
    margin-right: auto; 

    width: 80%; 
    height: 50%; 
} 
#nav 
{ 
background-color: red; 
float: left; 
width: 200px; 
position:relative; 

} 

#detail 
{ 
background-color: green; 
float : right; 
width: 800px; 
position:relative; 
} 

div.testDetail 
{ 
margin-top:10px; 
margin-left:20px; 
margin-right:20px; 
margin-bottom:10px; 
} 

#container 
{ 
width:1000px; 
position:relative; 
} 
</style> 

<hr> 
<body style="background-color:blue";> 


<div id="my-div"> 
<div id="container"> 
<div id="nav"> 
    <ul>Tests</ul> 
</div> 
<div id="detail"> 
    <div class="testDetail"> 
     <image style="float:right;margin:5px;" src="test1.jpg" width="50px" height="50px"/> 
     <image style="float:right;margin:5px;" src="test2.jpg" width="50px" height="50px"/> 
     <image style="float:right;margin:5px;" src="test3.jpg" width="50px" height="50px"/> 
     <image style="float:right;margin:5px;" src="test4.jpg" width="50px" height="50px"/> 
     <h3>Title</h3> 
     <p>Testing</p> 
    </div> 
    </div> 
    <hr> 
</div> 
</div> 
<body>

Quelle

2016-05-04 Ramya Selvaraj

Bitte Beispielcode angeben. Sie könnten wahrscheinlich "margin: auto" hinzufügen, um sicherzustellen, dass der Inhalt zentriert ist. – phpheini

bieten Code Beispiel, und was Sie bisher versucht haben. – LorDex

ja, ich habe diesen Beispielcode –

Vielleicht können Sie Codebeispiel teilen?

Sie können versuchen, CSS-Eigenschaft zu verwenden:

margin:0 auto; um Ihren Blockes zum Zentrum (vielleicht Körper in Ihrem Fall).

Grüße.

[Bearbeiten]

Zuerst haben Sie Fehler in Ihrem HTML:

schließen Body-Tag richtig
entfernen ';' in offenen Body-Tag
Wrap-Code mit HTML-Tag
hinzufügen Doctype (html5 in meinem Code verwendet wird)
Put-Stil innerhalb head-Tag
put Titel innerhalb head-Tag
entfernen Textknoten in head-Tag

Bitte auch einrücken.

[Bearbeiten]

Hier Code funktioniert nach Korrekturen, verwende ich Prozent statt Pixelabmessung, genießen:

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Demo</title> 
     <style> 
      body{ 
       margin: 0 auto; 
       width: 100%; 
      } 

      #my-div{ 
       margin: 0 auto; 
       width: 80%; 
       height: 50%; 
      } 

      #nav 
      { 
       background-color: red; 
       float: left; 
       width: 20%; 
       position:relative; 

      } 

      #detail 
      { 
       background-color: green; 
       float : right; 
       width: 80% 
       position:relative; 
      } 

      div.testDetail 
      { 
       margin-top:10px; 
       margin-left:20px; 
       margin-right:20px; 
       margin-bottom:10px; 
      } 

      #container 
      { 
       width:auto; 
       position:relative; 
      } 
     </style> 
    </head> 
    <body style="background-color:blue"> 
     <div id="my-div"> 
      <div id="container"> 
       <div id="nav"> 
        <ul>Tests</ul> 
       </div> 
       <div id="detail"> 
        <div class="testDetail"> 
         <image style="float:right;margin:5px;" src="test1.jpg" width="50px" height="50px"/> 
         <image style="float:right;margin:5px;" src="test2.jpg" width="50px" height="50px"/> 
         <image style="float:right;margin:5px;" src="test3.jpg" width="50px" height="50px"/> 
         <image style="float:right;margin:5px;" src="test4.jpg" width="50px" height="50px"/> 
         <h3>Title</h3> 
         <p>Testing</p> 
        </div> 
       </div> 
       <hr> 
      </div> 
     </div> 
    </body> 
</html>

Quelle

2016-05-04 12:48:17

ja geteilt ich habe diesen Code geteilt –

Sie Bootstrap-Framework in CSS verwenden sollten

Quelle

2016-05-04 12:53:05

Hier ist Ihre Lösung: https://jsfiddle.net/xkzomtvd/2/

Halten Sie die ganze Seite in main div und wenden Klasse auf diese fo r Beispiel:

alle Inhalte hier

geben Stil zu dieser Klasse:

.wrapper {

margin:0 auto; 
max-width:400px; /* required width fixed or percentage */ 
background:red;

}

Quelle

2016-05-04 12:55:23

Sie die Seite tatsächlich Zentrierung, es ist nur nicht klar, jetzt sofort. Der Grund ist die Breite von 80% in Ihrem # my-div-Element, während alle ihre untergeordneten Elemente in einem 1000px-Container sind.

Dies wird Ihr Problem lösen:

#my-div{ 
    width: 1000px; 
}

Sie max-width alternativ verwenden könnte, aber für Ihr Beispiel, gibt es wirklich keinen Grund zu.

Quelle

2016-05-04 12:58:12 TheThirdMan

Wie verkleinern Sie die gesamte Seite, wenn sie ausgezoomt ist?

Antwort

Verwandte Themen