• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Auflösungen....

tarik02

tarik02

Mitglied
Hey,

ich hab mich mal wieder an ein "Design" ran gesetzt :D

Auf meiner Auflösung sieht auch alles so aus wie es soll.... jedoch sobald ich es auf einer Auflösung wie z.B. 1024x768 teste, ist das Bildchen wo jetzt noch "Platzhalter" drauf steht verschoben.... Ich möchte natürlich das es auf seinem Platz bleibt ;)


Danke im Vorraus!


Edit: Ups, Link vergessen : http://our-world.bplaced.net/Index.php

T02
 
Zuletzt bearbeitet:
Webseiten erstellt man nicht für Auflösungen, höchstens für Viewports.

Dein Problem wird durch prozentuale Angaben per margin verursacht. Verwende feste Pixelangaben bei den Eigenschaften left und top - nicht margin!
 
Okay, aber wenn ich dies nun so mache wie beschrieben also mit left und top... das passt es zwar z.B. bei 1024x768 aber wieder nicht bei 1680x 1050...


Hier der Code:
HTML: 
body
{
font-size: 1em;
background: #363636;
height: 100%;
font-family:'Arial',Times,serif ; 
}

.Header
{
width: 100%;
height: 219.9px;
background: url(Img/Header.png);
margin-top: 2%;
background-repeat:repeat-x;

}

.Headerpic
{
width: 400px;
height: 220px;
background: url(Img/HeaderPicc.png);
left: 500px;
top: 0px;
position: absolute;
}

div#Inhalt
{
background: url(Img/Inhalt.png);
margin-left: 10%;
width: 60%;
padding-bottom: 5px;
}

div#Inhalt p
{
padding-left: 5px;
padding-right: 5px;
}


div#Neuigkeiten
{
background: url(Img/Inhalt.png);
margin-top: -32.6%;
width: 25%;
margin-right: 3%;
float: right;
}

.NeuigkeitenÜberschrift
{
list-style: none;
font-size: 1.5em;
}

.Datum
{
list-style: none;
padding-left: 4%;
font-weight:bold;
}


.Neuigkeiten
{
list-style: none;
padding-right: 4%;
}


T02
 
Wie soll es denn eigentlich aussehen?

Wozu die absolute Positionierung und das negative Margin von dem Platzhalter?
 
tarik02 schrieb:
Ich hab das Bild so positioniert...
Zum Vergrößern anklicken....
Ja, die Frage ist, warum? Und warum mit prozentualen Abständen? Wenn du die Seite nun verkleinerst wird der Inhalt länger, also wandert der Platzhalter nach unten. Lösung wurde von threadi schon genannt, px nicht %.

Was soll es denn später mal für ein Bild sein? Eines mit Inhalt oder nur eines zur Zierde?
 
Setz ihn vor den Inhalt im Quellcode. Du hast ihn gefloatet, dann muss er vor dem Element stehen, welches ihn umfließen soll.
 
Hallo,

ist ja super geil.;) Ich melde mich grade im Forum an, weil ich eine Frage habe, und sofort das erste Thema das ich sehe, befasst sich damit. ;)

Also ich habe eine Seite gemacht die eher so aus Spaß gedacht ist. Problem ist nun, wie vom Threadersteller beschrieben, dass sich bei anderen Auflösungen als bei meiner, etwas verrückt.
Bei Ihm ist es nur der Header, bei mir ist es ALLES.

Nun bin ich ja nicht hiehrergekommen um euch vor das Problem zu stellen und euch machen zu lassen. Ich habe mich bereits mit einigen auseinandergesetzt. Nun kann man ja Angaben in %, px, pt und em machen.

Witzig ist, dass mir einer riet, es in % zu machen, ein weiterer in px, wiederum einer in pt und der letzte, oh wer hätte es gedacht, em.
Es geht mir darum, dass die Seite bei verschiedenen Auflösungen möglichst identisch aussieht. Ich dachte mir so, andere Seiten schaffen das doch auch, wieso ich denn nicht?

Dann wurde mir etwas von div´s erzählt, wodurch ich mich mit den Worten wrapper und co. befasst habe.
Nun komme ich damit soweit klar, nur hat das mein Problem nicht wirklich gelöst.

Könnt ihr mir helfen? Wie soll ich es bewerkstelligen?:)

mfG
theSonGoku
 
Hallo,
erstmal Willkommen im Forum :)
Grundsätzlich soll man für alle Viewports coden. Am sinnvollsten ist da ein flexibles Layout, welches sich der Fenstergröße von selbst anpasst. Flexible Maßeinheiten sind % und em. % bezieht sich dabei auf die Fenstergröße, em auf die Standardschriftgröße des Browsers.
Allerdings werden häufig fixe Layouts gemacht, da es der Meinung vieler Webdesigner besser aussieht und zunächst weniger kompliziert zu handhaben ist. Das Problem bei einer festen Seitenbreite (bspw. 900px) ist, dass Nutzer mit kleineren Auflösungen horizontal scrollen müssen, von mobilen Nutzern ganz zu schweigen.
Wenn du uns einen Link zu deiner Seite oder Quelltext postest, können wir dir i.d.R. besser helfen. ;)
 
Naja, ich meine dazu muss es ja eine Faustregel geben, sozusagen, denn dieses Problem werde ja nicht ich alleine haben, sondern schon millionen von Leuten gehabt haben.;)

Ursprünglich ist die Seite hier zu finden madarame.ma.ohost.de/Counter-Strike/Statistik/main.php aber nun wird mir gesagt, die seite bräuche JavaScript, was ich allerdings aktiviert habe.^^ Oh man. :D

Naja, ich habs halt mal in % und in px versucht, aber beides stieß nicht auf Erfolg.
Ich poste einfach mal den Quelltext. Und schreibt mir ruhig alles, was euch negativ auffällt. ;) Will ja schließlich lernen. :)

main.php
Code: 
<?php
if(!isset($_SESSION['login']))
{
include('index.php');
}
elseif(isset($_SESSION['login']))
        {
        include('haupt.php');
        }
        else
            {
            include('haupt.php');
            }
?>

index.php
Code: 
<?php 
session_start();
//include ('functions.php');
include ('connect.php');
// ::::: LOGIN :::::             
if($_POST['loginbutton'])
    {
    $nick                 = $_POST['benutzer'];
    $_SESSION['user']     = $nick;
    $password     = (md5($_POST['password']));
        
    $sql = mysql_query("SELECT `nick`, `password` FROM `team_user` WHERE nick='".$nick."' AND password='".$password."'");
    while($sql1 = mysql_fetch_array($sql))
        {
        $nickname = $sql1['nick'];
        $passwort = $sqll['password'];
        }
    
    if(($nickname == $nick) && ($passwort == $password))
        {
        $_SESSION['user'] = $nick;
        alert($nick);
        $sql = mysql_query("SELECT `logins` FROM `team_user`");
        $logins = $sql['logins'];
        
        if($logins == "")
            {
            $logins = 1;
            }
            else
                {
                $logins++;
                $sql2 = mysql_query("UPDATE `team_user` SET logins='$logins' WHERE nick='$nick'");
                }
        include('haupt.php');
        }
        elseif(($nickname != $nick) || ($passwort != $password))
            {
            //alert("LogIn fehlgeschlagen. Bitte geben Sie die korrekten Daten ein");
            include('index.php');
            }
    }
    echo mysql_error();
?>
<html>
<head>
<link href="forms.css" type="text/css" rel="stylesheet" /> <!-- CSS verweis -->
<title>Team - Statistik - Login</title></head>
<body>
<a class="a_eins" href="reg.php">Registrieren</a>
<div id="login">
<table class="login">
<form method="post">
    <tr class="tabellen_ueber"><td><p class="tabellen_über">LogIn</p></td></tr>
    <tr><td><br>
    <span class="main_nick_pw">Nickname:</span><input class="eingabefeld1" style="margin: 0px 0px 3px 45px;" type="text" name="benutzer" value="" maxlength="10" size="21"><br>
    <span class="main_nick_pw">Passwort:</span><input class="eingabefeld1" style="margin: 0px 0px 6px 50px;" type="password" name="password" value="" maxlength="10" size="21"><br>
<center><input class="login-button" type="submit" name="loginbutton" value="                 Login                 "><center>
</form>
                                                 </td></tr></table></center></div>                             
</body>
</html>

haupt.php
Code: 
<?php
session_start();         // Um SESSION Variablen benutzer zu können
//include ('functions.php');
include ('connect.php');
?>
<html>
<head>
<link href="forms.css" type="text/css" rel="stylesheet" /> <!-- CSS verweis -->
<title>Team - Eingeloggt als <?php echo $_SESSION['user']; ?></title></head>
<body><center>
<ul id="navigation">
<li class="navi-punkt"><a class="a1" href="main.php">Startseite</a></li>
<li class="navi-punkt"><a class="a1" href="main.php">Statistik</a></li>
<li class="navi-punkt"><a class="a1" href="main.php">Strafpunkte</a></li>
</ul></center>
<br  clear="all"/>
</body>
</html>

mfG
theSonGoku
 
theSonGoku schrieb:
Ursprünglich ist die Seite hier zu finden madarame.ma.ohost.de/Counter-Strike/Statistik/main.php aber nun wird mir gesagt, die seite bräuche JavaScript, was ich allerdings aktiviert habe.^^ Oh man. :D
Zum Vergrößern anklicken....

Die Seite gibt es nicht. Deswegen wird eine Error-Seite deines Hosters geladen die wiederum eine JavaScript-Abfrage macht und danach eine Error404-Seite anzeigt. Bist Du sicher, dass diese URL stimmt? Ich würde sagen nein, denn sie scheint nicht vorhanden zu sein. Achte auf Groß-/Kleinschreibung von Verzeichnissen und Dateinamen, das muss 100%ig stimmen.

Ich poste einfach mal den Quelltext.
Zum Vergrößern anklicken....

Was bringt mir dieser Quellcode, wenn Du ein HTML-/CSS-Problem hast? Zeig also nur das was an den Browser geliefert wird und kein PHP.

Im übrigen ist dieser Code nicht valide. Sorge erst dafür, dass er fehlerfrei ist - dann kann man sich auch über Darstellungsprobleme unterhalten.
 
Der Quelltext, den du gepostet hast, hilft uns nicht, dein Problem zu lösen - wir benötigen den HTML-Quelltext, den dein Script erzeugt plus dazugehörigem CSS. ;)
 
Der Quelltext beinhaltet doch den HTML Teil. ;)
Lediglich der CSS Teil fehlt, da muss ich dir recht geben. ;):)

forms.css

Code: 
/* === Hintergrundbild ===*/
#login
{
background-image: url(http://img.banjig.net/d/bb/user_uploads/374188/counter-strike-3_202b0d77.jpg);
width: (1024);
height: (780); 
}

/* === Alle Links ununterstrichen ===*/
a
{
text-decoration: none;
}

a.a1
{
text-decoration: none;
color: #ffffff;
font: bold Verdana 12px;
}

/* === LOGIN SEITE: Registrierungsvorgabe ===*/
.a_eins
{
margin: 0px 0px 0px 895px;
text-decoration: none;
font: bold 17px Verdana;
color: #ffac00;
}

body
{
background-color: #000000;
padding: 0px;
margin: 0px;
}

/* === LOGIN SEITE: Login Bereich ===*/
table.login
{
margin: 200px 0px 211px 225px;
padding: 0px;
width: 500px;
height: 55px;
border-color: #000000;
border-style: solid;
}

/* === LOGIN SEITE: erster <tr> der Tabelle ===*/
table.login.tr
{
padding: 0px;
margin: 0px;
width: 800px;
text-align: center;
}

/* === LOGIN SEITE: Tabellenüberschrift ===*/
.tabellen_ueber
{
padding: 0px;
margin: 0px;
background-color: #63B8FF;
border-bottom-style: solid;
border-bottom-color: #000000;
padding: 15px 100px;
color: #ffffff;
font: 20px Arial;
text-align: center;
}

/* === LOGIN SEITE: Schriftzüge ===*/
.main_nick_pw
{
margin: 10px 10px 23px 10px;
padding: 0px;
font: bold 18px Verdana;
color: #ffffff;
}

/* === LOGIN SEITE: Login Button ===*/
.login-button
{
margin: 0px 0px 6px 6px;
padding: 0px 7px;
border: 1;
background-color: #ff0000;
border-color: #000000;
border-style: solid;
}

/* CLASS EINGABEFELD */
.eingabefeld1
{
border: 2px solid #000000;
color: #000000;
background-color: #63B8FF;
}

/* === Navigation === */
ul#navigation
{
border-left-style: 1px solid;
border-left-color: #006400;
margin: 0px 0px 0px 50px;
width: 400px;
}

ul#navigation li.navi-punkt
{
border-bottom-style: 1px solid;
border-bottom-color: #006400;
border-top-style: 1px solid;
border-top-color: #006400;
border-right-style: solid;
border-right-color: #006400;
float: right;
list-style-type: none;
margin: -1px 1px 0px 0px;
padding: 10px;
text-decoration: none;
float: left;
display: inline;
width: 100px;
}

ul#navigation li.navi-punkt a
{
color: #ff4500;
font: bold 12px Verdana;
}

ul#navigation li.navi-punkt:hover
{
background-color: #FFFFFF;
width: 130px;
}
 
Vielleicht, weil nicht ersichtlich ist, was du überhaupt möchtest. Dein Quelltext beinhaltet ein Formular bzw. drei Links. Mit Seitenlayout hat das m.E. nicht viel zu tun...
 
Letztendlich möchte ich lediglich wissen, wie ich ein Design an verschiedene Bildschirm- bzw. Browserfenster anpassen kann, so das es möglichst überall gleich aussieht und nicht verschoben ist.

Soll ich hierfür %, em, px oder pt nehmen und sowas eben. Also was ich dabei beachten muss. Mehr nicht. ;) Dabei ist das Design an sich egal, finde ich. ;)
 
Hallo

Letztendlich möchte ich lediglich wissen, wie ich ein Design an verschiedene Bildschirm- bzw. Browserfenster anpassen kann, so das es möglichst überall gleich aussieht und nicht verschoben ist.
Zum Vergrößern anklicken....
Das geht schlicht und einfach nicht.

Entweder du nimmt ein starres Layout. Dann verschiebt sich der Inhalt deiner Seite nicht (von Ausnahmen abgesehen). Dafür haben Besucher mit breitem Bildschirm einen Rand links und rechts und Besucher mit kleinem Bildschirm müssen seitlich scrollen. Dann sind Pixel am sinnvollsten.

Oder du machst ein flexibles Layout. Dann kann und wird sich dein Inhalt aber verschieben. Dann sind % und em gefragt.

Wenn du volle Kontrolle haben willst musst du zu PDF-Dateien greifen.

pt sollten nur für die Druckausgabe genutzt werden, da es sich um eine Größe für Drucker handelt.

HTML und CSS sind für flexible Layouts ausgelegt. Der Seitenersteller muss den Quellcode halt so schreiben, das der Inhalt sich bei jeder Auflösung zwar verschieben kann, aber trotzdem noch sinnvoll angezeigt wird.

Mit starren Layouts quält man seine Besucher nur unnnötig - das ist jedenfalls meine Erfahrung. Weil bei solchem Vorgehen in der Regel noch viele unnötige Grafik und seltsame Farbkombinationen hinzukommen, die das Erfassen der Seite erschweren.

Gruss

MrMurphy
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben