Wie mache ich meine Webseite anpassen, um das browser-Fenster?

Arbeite ich auf meiner portfolio-Seite für die Klasse. Ich werde versuchen, die web-Seite anpassen mit dem browser, wenn der browser in der Größe verändert. Vor allem die navigation links habe ich im header. Auch wenn der Bildschirm ist voll mein Navigations-links sind in der oberen rechten Ecke. Aber wenn ich wieder das Fenster herunter, es ist Zentrum in der Mitte. Was muss ich tun? Jede Hilfe wird geschätzt. Hier ist mein code. Wenn das hilft jedem.

#header, 
#main, 
#footer{

display:block;
position:relative;
float:left;
}
#header,
#footer{
width:1100px;
height:80px;
}
#header{
margin-bottom:2px;
}
#footer{
margin-top:2px;
text-align:right;
border:2px;
}
#main{
width:650px;
height:200px;
margin-left:200px;
margin-right:200px;
margin-top:200px;
}
#leftcol{
float:left;
}
#nav{
border:2px solid #F00;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}


<html>

    <head>
        <title></title>
        <link href="styles.css" rel="stylesheet" type="text/css">
        <style type="text/css">
            .auto-style1 {
                text-align: left;
            }
        </style>
    </head>

    <body>
        <div class="auto-style1">
            <div id="header">Header

<h1>Creative Minds Inc.</h1>

            </div>
            <div id="nav">Navigation
                <ul>
                    <li><a href="homepage.html">Homepage</a>
                    </li>
                    <li><a href="#">Tips and Trick</a>
                    </li>
                    </li><a href="aboutme.html">About me</a>
                    </li>
                    <li><a href="#">Get in Touch</a>
                    </li>
                </ul>
            </div>
            <div id="main">Main

<h2>A passion for design and a creative mind.</h2>


<h3>Design, Develop, Dream</h3>

            </div>
            <div id="sidebar">Navigation</div>
            <div id="footer">Footer

<h3>Creative Minds Inc.  Jonathan Mourning</h3>

            </div>
        </div>
    </body>

</html>
Dein CSS-code ist nutzlos, ohne HTML, um es anzuwenden, leider. Aber ein Tipp: Sie benötigen in der Regel keine javascript; verwenden Sie stattdessen relative Größen, z.B. width:90%
Ich habe gerade editiert und meine html dort auch. Bitte werfen Sie einen Blick.

InformationsquelleAutor JonMo | 2013-09-03

  1. 1

    Können Sie das standard - resize - DOM-event. Dann auf

    window.onresize = function(event) {
    ...
}

    können Sie die elmenets Positionen und Größe entsprechend.

    Jedoch In der Regel, die Sie vermeiden könnten Feste Größen und stellen die prozentualen Werte für Ihre DOM-Elemente, um für Sie, um die Größe automatisch unter alle Bildschirm-Größen und-Verhältnisse. Zum Beispiel, wenn Ihre Seite hat eine vertikale Ausrichtung, ändern width zu 100% und haben Ihre #main element immer richten Sie die Mitte des Bildschirms:

    #main{
width:650px; /*or 70% */
height:200px;
margin-left:auto;
margin-right:auto;
text-align:center;
margin-top:200px;
}

    Hier ist ein Beispiel mit dem code :http://jsfiddle.net/TZGXf/4/
    Hier ist eine vollständige Bildschirm: http://jsfiddle.net/TZGXf/4/embedded/result/

    Ich Stelle gerade meine html drin. Bitte werfen Sie einen Blick.

    InformationsquelleAutor ılǝ

  2. 1

    Statt mit set-breiten wie width: 1000px; verwenden Sie die prozentualen Werte wie width: 100%;. Aber seien Sie vorsichtig, da dies kann dazu führen, unvorhergesehene Probleme.

    Warum sollte ich Sie verwenden Prozentsätze statt?
    Ich habe die Pixel zu Prozenten, und es funktionierte gut ich habe nur zu Positionen, die Dinge ein wenig herum. Danke, dass Sie so viel obwohl. Sehr geschätzt wird.

    InformationsquelleAutor Tyler

Schreibe einen Kommentar