Boxen, Grafiken usw. in jedem Browser permanent positionieren aber wie ?

Juare · 9 Januar 2013

Guten Abend!

Ich bin momentan am erstellen meiner Homepage.
Nun aber bin ich auf ein Problem gestoßen.

Und zwar habe ich jetzt schon mein Layout permanent positioniert
das es bei allen Desktops ab 1200x gut aussieht.

Jetzt möchte ich aber noch kleinere Boxen positionieren das es
bei jeder Auflösung gleich ist das will aber leider nicht funktionieren.

(siehe unten Bilder)

Hier sehen wir, wie es richtig aussehen soll:

Hier sehen wir, wie es nicht aussehen soll:

CSS CODE:

@charset "utf-8";

/* Layout*/
body {
background-color: #C9C7C3;
}
#logo {
background-image:url(img/logo.png);
background-repeat:no-repeat;
max-width: 1200px;
height: 200px;
margin: auto;
z-index: 1;
}
#box {
background-color:#3F3F3F;
background-repeat:no-repeat;
max-width: 1200px;
height: auto;
margin: auto;
z-index: 2;
}
#footer {
background-image:url(img/footer.png);
background-repeat:no-repeat;
max-width: 1200px;
height: 30px;
margin: auto;
z-index: 3;
}

@charset "utf-8";

/* Login Area */
#box1 {
position:absolute;
top: 208px;
left: 360px;
background: #FA7C00;
width: 230px;
height:150px;
padding:2px;
font-family:arial;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style>
a { text-decoration: none; }
</style>
<link rel="stylesheet" type="text/css" href="extern.css" />
<link rel="stylesheet" type="text/css" href="write.css" />
<div id="logo" /></div>
<div id="box1" /></div>
<div id="box" />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<div id="footer" /></div>
<body>
</body>
</html>

bodil · 9 Januar 2013

Hi Juare, Willkommen bei html.de!

permanent positioniert

Das würde ich mir ja zu gerne mal anschauen. Leider funktionieren die Bilder nicht. Hast du nicht nen Link zur Seite?

Grüße!

Bodil

Tronjer · 9 Januar 2013

Ich kann dir sagen, woran es liegt: Du hast alle Elemente auf margin:auto gesetzt, und dadurch werden sie horizontal mittig positioniert.

Aber bevor du dich jetzt weiter verrennst, fang lieber noch mal von vorne an. Wenn deine Seite hinterher in allen Auflösungen gleich aussehen soll, dann lade dir ein Template bei initializr.com herunter, und mache dich mit Responsive Design vertraut. Außerdem verwendet man keine HTML-Tags, wie <br /> zur Positionierung, weil diese Elemente von den internen Stylesheets der Browser teilweise unterschiedlich interpretiert werden. Selbst wenn das nur 1px in der Höhe sein sollte, macht es sich bei 8x <br /> schon bemerkbar.

Juare · 10 Januar 2013

Tronjer schrieb:
Ich kann dir sagen, woran es liegt: Du hast alle Elemente auf margin:auto gesetzt, und dadurch werden sie horizontal mittig positioniert.

Aber bevor du dich jetzt weiter verrennst, fang lieber noch mal von vorne an. Wenn deine Seite hinterher in allen Auflösungen gleich aussehen soll, dann lade dir ein Template bei initializr.com herunter, und mache dich mit Responsive Design vertraut. Außerdem verwendet man keine HTML-Tags, wie <br /> zur Positionierung, weil diese Elemente von den internen Stylesheets der Browser teilweise unterschiedlich interpretiert werden. Selbst wenn das nur 1px in der Höhe sein sollte, macht es sich bei 8x <br /> schon bemerkbar.

verstehe nicht ganz hier der link:

Unbenanntes Dokument

Boxen, Grafiken usw. in jedem Browser permanent positionieren aber wie ?

Juare

Neues Mitglied

bodil

Mitglied

Tronjer

Senior HTML'ler

Juare

Neues Mitglied

Neueste Beiträge