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

Maurice. · 8. März 2014

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;
}

Diverse · 8. März 2014

Probiere mal:

CSS

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


}

Wenn es das ist, was du meinst

DJ Deagle · 9. März 2014

@Rox97: das klappt nicht, grad versucht.

Versuch mal das:

Code

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

iBlacky · 9. März 2014

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

xinnu · 9. März 2014

Mit % und Media Queries arbeiten.

Maurice. · 9. März 2014

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">

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

Diverse · 9. März 2014

Was meinst du damit, dass sie nicht stehen bleiben?

Zitat von Excuse

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;

Maurice. · 9. März 2014

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

PStar · 9. März 2014

#Website {
width:1920px;
margin: 0 auto;
position: relative;
}

Probier es mal so

Maurice. · 9. März 2014

Dann passt es sich aber nicht anjeden bildcshirm an. Wenn leute einen bildschirm von 840 oder so haben passt es nicht

**palwal** · 12. März 2014

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

Diverse · 12. März 2014

@Vorposter
So komplex brauch es garnicht sein.
Nimm für die Leisten und Buttons folgende Angaben:
[Css]
Positio: relative;
Margin:0;

Left:30%;
[/code]

Austrianer · 12. März 2014

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.

Binär · 12. März 2014

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

DJ Deagle · 12. März 2014

Wie genau funktioniert bootstrap?

Edgar · 12. März 2014

Zitat von Binär

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;

Binär · 12. März 2014

Zitat von ScriptingFreak

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;

Alles anzeigen

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.

**palwal** · 12. März 2014

Zitat von Binär

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

Das ist aber keine gute Hilfe für den der lernen will wie das ganze funktioniert.

Edgar · 12. März 2014

Zitat von Binär

Und genau sowas sagt jemand der keine Ahnung hat.

Ach so Meister, wusste gar nicht, dass Ich keine Ahnung davon habe
Wie palwal schon sagte, kannst dir sein Beitrag Ja nochmal durchlesen.

breadfish.de 12. März 2022