Webseiten Größe automatisch überall anpassen ( An jeden Monitor )

  • Hallo,


    ich frage mich schon die ganze zeit wie ich es mache das sich alles an jeden Monitor anpasst. Hier mal ein kleiner ausschnitt aus meinen css code:


    body {
    background-color:#ececec;
    text-align:center;
    }


    #Website {
    width:1920px;
    margin: 0 auto;


    }


    #logo {
    background-image: url('/images/logo.png');
    width: 1920px;
    height: 310px;
    background-repeat: no-repeat;
    background-position: center center;
    z-index:1;
    position:absolute;

    }
    #header {
    background-image: url('/images/header.png');
    width:1920px;
    height:330px;
    background-repeat: no-repeat;
    background-position: center 40px;
    z-index:0;
    }




    #menu2 {
    background-image: url('/images/navi2.png');
    width:1920px;
    height:58px;
    background-repeat: no-repeat;
    background-position: center center;


    }
    nav#menu {
    margin-top:-50px;
    margin-left: 740px;
    }
    nav#menu ul{
    padding:0;
    margin:0;


    }
    nav#menu li{
    float:left;
    margin-top:10px;
    }
    nav#menu li a{
    line-height:left;
    font-weight: bold;
    font:15,58 Pt Arial, Helvetica, sans-serif;
    color:#ffffff;
    margin-left: 40px;
    padding:px 0px 2px 0px;
    }
    nav#menu li a:hover{
    color: black;
    }



    #text
    {
    font-family: Arial;
    font-size: 16px;
    color: #FFFFFF;
    margin-top: -25px;
    margin-right: 490px;
    z-index:6;
    position:right;
    text-align: right;
    }


    #Forum
    {
    font-family: Arial;
    font-size: 16px;
    color: #FFFFFF;
    margin-top: -25px;
    margin-left: 480px;
    z-index:6;
    position:absolute;
    }


    .login2 {
    font: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color:hsl(0,0%,0%);
    text-shadow:1px 1px hsla(0,0%,20%,0.25);
    z-index:1;
    margin-left: 612px;
    margin-top: 90px;
    position:absolute;

    }

    .submit2 {
    font: Arial, Helvetica, sans-serif;
    color:hsl(0,0%,0%);
    text-shadow:1px 1px hsla(0,0%,20%,0.25);
    z-index:1;
    margin-left: 812px;
    margin-top: 106px;
    position:absolute;
    }


    #UCPLoginText {
    color: #9c9c9c;
    font-weight: bold;
    font: Arial, Helvetica, sans-serif;
    z-index:1;
    margin-left: 612px;
    margin-top: 40px;
    position:absolute;
    }


    #absenden {
    background-image: url('/images/absenden.png');
    width:90px;
    height:25px;
    background-position: center center;
    background-repeat: no-repeat;
    z-index:2;
    margin-top: 12px;
    margin-left:17px ;
    position:absolute;
    }
    .pw {
    font: Arial, Helvetica, sans-serif;
    color:hsl(0,0%,0%);
    text-shadow:1px 1px hsla(0,0%,20%,0.25);
    z-index:1;
    margin-left: 595px;
    margin-top: 130px;
    position:absolute;

    }
    #myButton{
    width:130px;
    height:50px;
    background-repeat: no-repeat;
    background-position: center -9px;
    }
    input[type=text], input[type=password] {
    font-size: 12px;
    font-family: Tahoma;
    border: none;
    width:125px;
    height: 25px;
    /*Textbox Schatten*/
    -webkit-box-shadow: inset 0px 0px 0px 1px #f2f2f2;
    -moz-box-shadow: inset 0px 0px 0px 1px #f2f2f2;
    box-shadow: inset 0px 0px 0px 1px #f2f2f2;
    /*Textbox Verlauf*/
    background: #cdcdcd;
    background: -moz-linear-gradient(top, #cdcdcd 0%, #f0f0f0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdcdcd), color-stop(100%,#f0f0f0));
    background: -webkit-linear-gradient(top, #cdcdcd 0%,#f0f0f0 100%);
    background: -o-linear-gradient(top, #cdcdcd 0%,#f0f0f0 100%);
    background: -ms-linear-gradient(top, #cdcdcd 0%,#f0f0f0 100%);
    background: linear-gradient(top, #cdcdcd 0%,#f0f0f0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdcdcd', endColorstr='#f0f0f0',GradientType=0 );
    /*Textbox Kontur*/
    border: 1px solid hsla(0,0%,20%,1);
    /*Textbox Rundung*/
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding-left: 5px;
    padding-right: 5px;
    margin-left: 12px;
    margin-right: 12px;
    margin-top: 10px;
    }
    input[type=text]:hover, input[type=password]:hover{
    font-size: 12px;
    font-family: Tahoma;
    border: none;
    width:125px;
    height: 25px;
    /*Textbox Schatten*/
    -webkit-box-shadow: inset 0px 0px 0px 1px #f2f2f2;
    -moz-box-shadow: inset 0px 0px 0px 1px #f2f2f2;
    box-shadow: inset 0px 0px 0px 1px #f2f2f2;
    /*Textbox Verlauf*/
    background: #cdcdcd;
    background: -moz-linear-gradient(top, #cdcdcd 0%, #f0f0f0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdcdcd), color-stop(100%,#f0f0f0));
    background: -webkit-linear-gradient(top, #cdcdcd 0%,#f0f0f0 100%);
    background: -o-linear-gradient(top, #cdcdcd 0%,#f0f0f0 100%);
    background: -ms-linear-gradient(top, #cdcdcd 0%,#f0f0f0 100%);
    background: linear-gradient(top, #cdcdcd 0%,#f0f0f0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdcdcd', endColorstr='#f0f0f0',GradientType=0 );
    /*Textbox Kontur*/
    border: 1px solid hsla(0,0%,75%,1);
    /*Textbox Rundung*/
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding-left: 5px;
    padding-right: 5px;
    margin-left: 12px;
    margin-right: 12px;
    margin-top: 10px;
    }

  • Probiere mal:

    CSS
    #Website {
    	width:100%;
    	margin: 0 auto;
    
    
    }


    Wenn es das ist, was du meinst

    Hauptsache ist ja immer, dass du es verstehst und das es funktioniert. Es bringt nichts, wenn du einen Code hast den du nicht verstehst, und noch weniger bringt es was wenn du einen Code hast der nicht tut. Naja, und wenn beides zusammen kommt, dann wirds lustig.

  • Du musst anstatt mit pixeln mehr mit % arbeiten um das design "Dynamisch" zu machen :)
    Beispiel: Du möchtest einen header in der Breite des Bildschirmsschirms bzw. der Auflösung machen nimmst du nicht 1920px (da es auch größere bzw. auch kleine Bildschirme/auflösungen gibt) sondern 100%.


    Die % werte müssen grob gesagt in den breiten und höhen Abständen verwendet werden. Mit ein wenig überlegen und probieren sollte das kein Problem darstellen :)

  • Ok, ich habe es halbwegs hinbekommen aber jetzte bleiben die Buttons nicht stehen mit relative hier mal mein code:


    .login2 {
    font: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color:hsl(0,0%,0%);
    text-shadow:1px 1px hsla(0,0%,20%,0.25);
    margin-top: -25px;
    z-index:6;
    position:relative;
    text-align: center;

    }

    .submit2 {
    width:center;


    font: Arial, Helvetica, sans-serif;
    color:hsl(0,0%,0%);
    text-shadow:1px 1px hsla(0,0%,20%,0.25);
    margin-top: -315px;
    margin-left: 600px;
    z-index:6;
    position:relative;
    text-align: center;
    }


    #UCPLoginText {
    color: #9c9c9c;
    font-weight: bold;
    font: Arial, Helvetica, sans-serif;

    top: 40px;
    z-index:6;
    position:relative;
    text-align: center;
    }


    #absenden {
    background-image: url('/images/absenden.png');
    width:center;


    height:25px;
    background-position: center center;
    background-repeat: no-repeat;
    margin-top: 125px;
    margin-left: 600px;
    z-index:6;
    position:relative;
    text-align: center;
    }
    .pw {
    font: Arial, Helvetica, sans-serif;
    color:hsl(0,0%,0%);
    text-shadow:1px 1px hsla(0,0%,20%,0.25);
    top: 10px;
    margin-left: 600px;
    z-index:6;
    position:relative;
    text-align: center;

    }
    #myButton{
    height:50px;
    background-repeat: no-repeat;
    background-position: center -9px;
    top: -26px;
    margin-left: 590px;
    padding-right: 140px;
    z-index:6;
    position:relative;
    }


    #login {

    top: 60px;
    margin-left: 190px;
    z-index:6;
    position:relative;
    text-align: center;
    }


    #login3 {
    top: 92px;
    margin-left: -30px;
    z-index:6;
    position:relative;
    text-align: center;
    }


    #passwort2 {
    top: 77px;
    margin-left: -30px;
    z-index:6;
    position:relative;
    text-align: center;
    }


    #passwort {
    margin-left: 190px;
    top: 40px;
    z-index:6;
    position:relative;
    text-align: center;
    }


    <tr class="login2">
    <td>
    <div id="login3">
    <font color="#9c9c9c">Name: </font>
    </div>
    <div id="login">
    <input type="text" name="Name" value='<?php echo $username?>' />
    </div>
    </font>

    </td>
    </tr>
    <tr class="pw">
    <td>
    <div id="passwort2">
    <font color="#9c9c9c">Passwort:</font>
    </div>
    <div id="passwort">
    <input type="password" name="Passwort"/>
    </div>
    </td>
    </tr>
    <tr class="submit2">


    <td>

    <div id="myButton">

    <input type="image" src="/images/button.png" name="submit" value="login">
    </div>

    </td>
    </tr>


    Ich weiß dort sind unnötige div aber ich habe es damit nur versucht

  • Was meinst du damit, dass sie nicht stehen bleiben?

    aber jetzte bleiben die Buttons nicht stehen mit relative


    Wenn du willst, dass sie auf dem Bildschirm an der gleichen Position bleiben (z.B. beim Scrollen) nimmst du

    HTML
    Position:Fixed;


    Wenn du sie an der selben stelle lasssen willst, wenn nicht gescrollt wird probier mal:

    HTML
    Position:absolute;

    Hauptsache ist ja immer, dass du es verstehst und das es funktioniert. Es bringt nichts, wenn du einen Code hast den du nicht verstehst, und noch weniger bringt es was wenn du einen Code hast der nicht tut. Naja, und wenn beides zusammen kommt, dann wirds lustig.

  • Das bringt nix ich mache mal ein beispiel.



    So soll es normalerweise aussehen



    und wenn jemand ein größenden Bildschirm hat soll es aber dann so wie oben dann sein stattdesen ist es dann so:



    wie mache ich es so das es wie beim 1. Screen aussieht. Bei den anderen Texten ( UCPLoginText ) Funzuniert es ja

  • Dann schau mal nach Responstive CSS (Das ist CSS3) und passt sich automatisch deinem Bildschirm an.
    ein Wichtiger Parameter ist @Media


    Liebe Grüße
    palwal

    Wer PALWAL-Sternchen vergibt, bekommt aus Prinzip ein Like 😏


    @palwal Donald Trump ist einer der besten Präsidenten welche die USA je hatte, meine Meinung.

  • @Vorposter
    So komplex brauch es garnicht sein.
    Nimm für die Leisten und Buttons folgende Angaben:
    [Css]
    Positio: relative;
    Margin:0;
    <!---Und bei bedarf:-->
    Left:30%;
    [/code]

    Hauptsache ist ja immer, dass du es verstehst und das es funktioniert. Es bringt nichts, wenn du einen Code hast den du nicht verstehst, und noch weniger bringt es was wenn du einen Code hast der nicht tut. Naja, und wenn beides zusammen kommt, dann wirds lustig.

  • Was du auch machen könntst das du immer beim Laden deiner Website per Javascript immer die Breite des Fensters ausliest und dann die Breite setzen lässt per JS.


    Beispiel ist so angepasst das ich immer einen Abstand zu links und rechts habe das sich immer 1024px in der Seite ausgeht.


    Code
    function cssanpassungen() {
    	/* CSS - Anpassungen an die Fensterbreite */
    	var outerW = $(window).outerWidth() - 1024; // Ausrechnen wie viel breiter das Fenster ist als 1024px
    	if (outerW < 0) outerW = 0; // Zurücksetzen auf 0
    	var leftright = outerW / 2; // Durch zwei damit man links und rechts den gleichen Abstand zum Fensterrand bekommt
    	$('#bspbox1').css("right", leftright); // Abstand rechts setzen
    	$('#bspbox2').css("left", leftright); // Abstand links setzen
    }


    Du rufst die Methode dann immer auf beim Laden der Seite.

    Die Macht etwas zu bewirken, ist in Dir. Du musst sie nur rauslassen


    cristiano-ronaldo-525-portugal-euro-2012-banner-wallpaper.jpg

    • Offizieller Beitrag

    Warum so kompliziert? Arbeite doch mit Bootstrap, da haste es viel einfacher und brauchst nicht mehr viel machen. ;)

    Genau aus diesem Grund sind kaum Website noch besonders, den Mist kann man fast schon mit dem Godfatherscripts vergleichen.


    Zurück zur eigentlichen Frage.
    Du brauchst einen "maincontent".
    du setzt die width z.b auf 1240px und den margin auf auto, schon
    hast du einen Container der immer in der Mitte ist.
    am besten dann noch mit max-width und min-width arbeiten, dann passt sich die breite auch
    an die Bildschirm Größe an.


    Ansonsten könntest du noch mit % arbeiten.


    Edit:
    Setz mal den Style deines Bodys mit

    • margin: 0;

  • Und genau sowas sagt jemand der keine Ahnung hat. Boostrap bietet einem eine gute Basis, kann ja keiner was für wenn jeder hingeht und die Standard-Stylings so lässt weil er damit nicht umgehen kann. Nur mit Bootstrap kann
    man sich Zeit und Arbeit sparen und das ist der ausschlaggebende Punkt.