CSS falsche Auflösung der Seite

  • Hey,


    Ich habe soeben meine Seite erstellt & fertig gecodet.
    Nur ist die Auflösung unterschiedlich, was ich bereits weiss ist das man @media screen usw. verwenden sollte sowie fixe angaben (%).
    Nur ich hab jetzt echt keine Ahnung wie *sad*


    Hier zwei Bilder:


    Spoiler anzeigen
    Mein Desktop:

    Spoiler anzeigen
    Der meines Freundes:


    Mein Code:


    PHP
    #bodyContainer{	margin-left: 435px;	margin-top: 380px;}#thtext{	margin-left: 450px;	margin-top: -365px;}#cssicon{	margin-left: 55px;	margin-top: 75px;}#ts3icon{	margin-left: 255px;	margin-top: -115px;}#gmodicon{	margin-left: 475px;	margin-top: -105px;}#forumicon{	margin-left: 700px;	margin-top: -120px;}#csspureicon{	margin-left: 600px;	margin-top: -305px;}

    PHP
    <!DOCTYPE HTML><html>	<title>The Survivors Enterpage</title>	<link rel="stylesheet" type="text/css" href="style.css">	<body bgcolor="#000000">		<div id="bodyContainer">			<img src="images/container.png">		</div>		<div id="thtext">			<img src="images/text/logo.png">		<div>		<div id="cssicon">			<a href="server:ip"><img src="images/icons/css.png" /></a>		</div>		<div id="ts3icon">			<a href="ts3://"><img src="images/icons/teamspeak3.png" /></a>		</div>		<div id="gmodicon">			<a href="gmod://"><img src="images/icons/gmod.png" /></a>		</div>		<div id="forumicon">			<a href="http://thesurvivors.eu"><img src="images/icons/forum.png" /></a>		</div>		<div id="csspureicon">			<img src="images/icons/csspure.png">		</div>		</body></html>

  • Du hast die Lösung doch bereits genannt.
    Der Code wie er ist, ist keine besonders gute Lösung, besonders die Art, wie du versuchst den Container zu zentrieren.


    Ein paar Tipps:
    Horizontales zentrieren per margin: auto; Vertikal könntest du mit einem Wrapper der display: table hat, dem Container selbst musst du dann display: table geben.
    Die einzelnen Bilder würde ich per Float ausrichten, kannst dabei aber getrost auf ein fertiges Grid-System, zurückgreifen, gibt einige gute, auch solche, die fluid sind. Damit hat sich dein Problem auch schon gelöst. Media Queries wären hier auch eine Möglichkeit, sind aber im Grunde genommen aber eher unpassend (bzw. nutze die Fluid Grid Systeme sowieso welche).

    Moderator der Bereiche: Coding, Vorstellungsrunde und Handelsecke. Über Verwarnungen, falls du zu den Wenigen gehörst, die eine Verwarnung von mir erhalten haben, kannst du jederzeit mit mir reden, sofern der Umgangston stimmt.


    expect us. / unkompetent. Das neue dynamisch. / easy-stripping.net - coming soon! / "9§. the entire website bestands out of english." / Vollprofi in allem, wo gibt und noch mehr; kann auch OOP.
    Kleine Coding-Frage? Schau doch in #dev im IRC vorbei, wir können dir sicher helfen.


    Ich bin für Aufträge im Bereich der Webentwicklung (z.B. User Control Panel) zu haben. Kontaktiere mich diesbezüglich einfach in einer privaten Nachricht mit deinen, möglichst konkreten, Vorstellungen.


    lesen.denken.posten. - [22:54:14] <Goldkiller2> früher gabs immer so coole user da stand in der signatur "lesen.denken.posten."


    Mafia 2 Multiplayer (m2mp.de) - Eine kostenlose Modifikation für Mafia 2, die es, ähnlich wie SAMP, erlaubt über das Internet oder LAN mit bis zu 1000 anderen Spielern zu spielen.

  • Waaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaas?!


    Sobald ich margin: auto; mache verschieben sich sämtliche Texte etc. nach unten Links.
    -> Was ist ein Grid System (Google will da nicht) und, was wäre die Lösung mit Media Queries? (Ich lass mich auch gerne von dem Grid quatsch überzeugen wenn er gut ist ^^ @dead: )

  • Pack das ganze mal auf jsfiddle.net und ich bau dir das um.

    Moderator der Bereiche: Coding, Vorstellungsrunde und Handelsecke. Über Verwarnungen, falls du zu den Wenigen gehörst, die eine Verwarnung von mir erhalten haben, kannst du jederzeit mit mir reden, sofern der Umgangston stimmt.


    expect us. / unkompetent. Das neue dynamisch. / easy-stripping.net - coming soon! / "9§. the entire website bestands out of english." / Vollprofi in allem, wo gibt und noch mehr; kann auch OOP.
    Kleine Coding-Frage? Schau doch in #dev im IRC vorbei, wir können dir sicher helfen.


    Ich bin für Aufträge im Bereich der Webentwicklung (z.B. User Control Panel) zu haben. Kontaktiere mich diesbezüglich einfach in einer privaten Nachricht mit deinen, möglichst konkreten, Vorstellungen.


    lesen.denken.posten. - [22:54:14] <Goldkiller2> früher gabs immer so coole user da stand in der signatur "lesen.denken.posten."


    Mafia 2 Multiplayer (m2mp.de) - Eine kostenlose Modifikation für Mafia 2, die es, ähnlich wie SAMP, erlaubt über das Internet oder LAN mit bis zu 1000 anderen Spielern zu spielen.

  • http://jsfiddle.net/F56F9/1/
    Ohne Bilder und genaues Wissen über eben solche, kann ich da nicht viel machen, aber so der Ansatz.

    Moderator der Bereiche: Coding, Vorstellungsrunde und Handelsecke. Über Verwarnungen, falls du zu den Wenigen gehörst, die eine Verwarnung von mir erhalten haben, kannst du jederzeit mit mir reden, sofern der Umgangston stimmt.


    expect us. / unkompetent. Das neue dynamisch. / easy-stripping.net - coming soon! / "9§. the entire website bestands out of english." / Vollprofi in allem, wo gibt und noch mehr; kann auch OOP.
    Kleine Coding-Frage? Schau doch in #dev im IRC vorbei, wir können dir sicher helfen.


    Ich bin für Aufträge im Bereich der Webentwicklung (z.B. User Control Panel) zu haben. Kontaktiere mich diesbezüglich einfach in einer privaten Nachricht mit deinen, möglichst konkreten, Vorstellungen.


    lesen.denken.posten. - [22:54:14] <Goldkiller2> früher gabs immer so coole user da stand in der signatur "lesen.denken.posten."


    Mafia 2 Multiplayer (m2mp.de) - Eine kostenlose Modifikation für Mafia 2, die es, ähnlich wie SAMP, erlaubt über das Internet oder LAN mit bis zu 1000 anderen Spielern zu spielen.