Abstände zum Fensterrand?

Foulfang

Hi

Hab wiedermal ne Frage und zwar:

Wie kann ich ein Element (zbs. eine Schrift) punktgenau positionieren? Zbs. dass es oben ein Abstand von 5 Pixel, unten ein Abstand von 5 Pixel, links und rechts ein Abstand von 5 Pixel zum Rand gibt?

Es müsste jedoch bei allen Browsern gleich aussehen.

Kann mir da jemand helfen?

Foulfang

Sorry der Doppelpost aber ich hab jetzt ne Lösung gefunden (dachte ich). Aber leider sind die Abstände zwischen den Elementen unter jedem Browser wieder anderst.

Guckst du hier:

http://www.zelda-forum.com/jukebox/jukebox.htm

Was mach ich falsch?

CSS

Code

margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 5px;

Marcus

Genau, geht aber auch kürzer, wenn der Abstand überall gleich sein soll:

Code

margin:5px

oder zusammenfassen (Trouble-Regel: Top, Right, Bottom, Left):

Code

margin:5px 4px 3px 2px

Margin ist übrigens der äußere Abstand des Elements, mit Padding kann man den inneren Abstand bestimmen und Border liegt zwischen den beiden:

http://de.selfhtml.org/css/formate/box_modell.htm

Gruß
Marcus

Foulfang

Danke. Aber es sind mehrere Elemente dessen Abstand definiert werden müssen.

Hier könnt ihr den Quelltext checken:

http://www.zelda-forum.com/jukebox/jukebox.htm

Trotzdem sind die Abstände je nach Browser verschienden. Wieso das?

Marcus

Um so besser. leg doch eine css-classe an:

HTML

<html>
<head>
<title>P mit Rand</title>
<style type="text/css">
.rand{margin:5px}
</style>
</head>
<body>
<p class="rand">Ich hab Rand</p>
</body>
</html>

Alles anzeigen

du kannst das Stylesheet auch auslagern, und dann für das ganze Projekt verwenden:

*.html:

HTML

<html>
<head>
<title>P mit Rand aber mit externem CSS</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<p class="rand">Ich hab Rand</p>
</body>
</html>

styles.css:

Code

.rand{margin:5px}

Gruß
Marcus

Foulfang

Hab's ja mit CSS gemacht. Hier ein Ausschnitt des Quelltextes:

HTML

<html>
<head>
<style type="text/css">
div.beispiel1 { margin-top:1px; margin-left:50px; }
div.beispiel2 { margin-top:10px; margin-left:12px; }
div.beispiel3 { margin-top:10px; margin-left:12px; }
div.beispiel4 { margin-top:20px; margin-left:13px; }
div.beispiel5 { margin-top:15px; margin-left:77px; }
div.beispiel6 { margin-top:25px; margin-left:27px; }
</style>
</head>

Alles anzeigen

Code

<body>
<div class="beispiel1">
[b]<font face="Verdana" size="1" color="#000000">Zelda-Forum Jukebox</font>[/b]</div>

Trotzdem gibt es noch minimale Unterschiede unter versch. Browsern. An was könnte das liegen?

Hier findet ihr den gesamten Quelltext:

http://www.zelda-forum.com/jukebox/jukebox.htm

Marcus

Hi,

evtl. hilft

Code

padding:0

denn die Browser haben alle ihre eigenen Vorstellungeen, was die Standardvorgaben für unformatierten Text angeht, also bestimmt man am besten alles selbst, das gleihe gilt für die Schriftgröße usw, die sich übrigens auch mit CSS bestimmen lassen (auch in pixeln, wenn man es ganz genau braucht).

Gruß
Marcus

Foulfang

Wo muss ich dieses padding: 0 einfügen?

Tags