Abstände, CSS [Archiv] - 3DCenter Forum

Archiv verlassen und diese Seite im Standarddesign anzeigen : Abstände, CSS

Hardwaretoaster

2006-08-26, 00:12:41

Zu erstmal die Dateien um die es geht:

index.htm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Webseite</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style/screen.css" rel="stylesheet" type="text/css" />
</head>
<div id="box">
<div id="top">
test
</div>
test 
test 
test 
test 
test 
test 
test 
test 
test 
test 
test 
test 
test 
test 
test 
test 
test 
test 
test 
test 
test 
test 
test 
test 
test 
test 
test 
test 
test 
test 
test 
test 
test 
test 
test 
test 
test 
test 
test 
test 
test 
test 
test 
test 
test 
test 
test 
test 
<div id="footer">
blub
</div>
</div>
<body>
</body>
</html>

und das Stylesheet:
/*
screen.css
*/

/* Main */

body{
background-color: #d5d5d5;
color: #00008B;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}

/* Box */

#box{
background-color: #FFFFFF;
border: 1px solid Black;
margin: 0px;
padding: 0px;
position: relative;
width: 100%;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}

/* Box => Top */
#box #top{
background-image: url(../images/bg_top.jpg);
background-repeat: repeat-x;
position: absolute;
top: 0%;
left: 0%;
height: 125px;
width: 100%;
color: #FFFFFF;
font-size: 86px;
text-align: center;
}

/* Box => Footer */
#box #footer{
background-color: #808080;
position: relative;
top: 90%;
left: 0%;
height: 10%;
width: 100%;
}

Die VErsion ist noch nicht das, was ich mal will, ist aber mal zum Veständnis:
Warum hat die "box" noch einen Abstand zum Rand, ich habe die auf 0 positioniert, dazu auch margin=0, aber ich krieg die Abstände nicht weg (=>es später auch nicht so positioniert, wie gewünscht)
Was übersehe ich? Habe schon länger nix mehr gemacht...

DanMan

2006-08-26, 00:54:44

Body margin und padding auf 0 gesetzt?

Hardwaretoaster

2006-08-26, 09:32:11

ist mir auch noch aufgefallen, hat auch oben funktioniert, aber am linken Rand mogeln mir sowohl FF als auch IE noch ein paaar Pixel unter, was zur Folge hat, das eine unpraktische und hässliche vert. Scrollleiste auftaucht...

Ich war wohl gestern etwas müde, hatte nur padding auf Null gesetzt, margin vergessen...
aber unten die hässliche ver Scrollleiste werde ich nicht los, ist minimal lang, aber nervig...

Edit2 Ich sollte nur noch im wachen Zustand CSS coden, ich hatte an einer Stelle zu viel width angegeben...

Hardwaretoaster

2006-08-26, 09:55:01

Habe aber noch eine weitere Frage:
Wenn ich im footer ein padding - Innenabstand - setze, ragt der footer auf einmal über die box hinaus, wieso?

darph

2006-08-26, 12:44:18

Habe aber noch eine weitere Frage:
Wenn ich im footer ein padding - Innenabstand - setze, ragt der footer auf einmal über die box hinaus, wieso?Weil padding nicht, wie man annehmen sollte, den Boxinhalt nach innen hin verkleinert, sondern die ganze Box nach außen hin vergrößert.

Das ist ja so geschichtet: Inhalt, padding, border, margin

Der IE hat früher, wenn du padding gesetzt hast, die border festgehalten und dementsprechend den Inhalt verkleinert. Halte ich für intuitiver, ist aber laut Spezifikation falsch. Korrekterweise muß der Inhalt festgehalten werden, wodurch sich natürlich die border verschiebt.

Meine persönlich Ansicht ist, daß das völlig unsinnig ist, weil nicht intuitiv - aber so ist es festgelegt.

DanMan

2006-08-26, 13:01:41

Weil padding nicht, wie man annehmen sollte, den Boxinhalt nach innen hin verkleinert, sondern die ganze Box nach außen hin vergrößert.

Das ist ja so geschichtet: Inhalt, padding, border, margin

Der IE hat früher, wenn du padding gesetzt hast, die border festgehalten und dementsprechend den Inhalt verkleinert. Halte ich für intuitiver, ist aber laut Spezifikation falsch. Korrekterweise muß der Inhalt festgehalten werden, wodurch sich natürlich die border verschiebt.

Meine persönlich Ansicht ist, daß das völlig unsinnig ist, weil nicht intuitiv - aber so ist es festgelegt.
Sehe ich änlich, weil es einem im praktischen Alltag auch (Rechen-)Arbeit ersparen würde, aber was will man machen...

Hardwaretoaster

2006-08-26, 13:33:01

Das heißt, ich muss die Außenmaße um padding verkleinern, damit es letztendlich wieder da reinpasst, wo es soll?
Wirklich, dass ist echt nicht intuitiv...

Edit: Arghh, vom Prinzip her geht es so, aber ich habe um die Box border: 1px
Das macht an den Seiten nichts, aber unten steht der Footer GENAU den einen Pixel über.

Nase

2006-08-26, 15:08:59

Sehe ich änlich, weil es einem im praktischen Alltag auch (Rechen-)Arbeit ersparen würde, aber was will man machen...Grundsätzlich nicht so das Problem, vor allem da es jetzt ja endlich mal vereinheitlicht umgesetzt wird (Stichwort: IE7).

Hardwaretoaster

2006-08-26, 15:21:40

So, cih ahbe nochmal 'ne Farge mehr:
1. ich gebe #box keine explizite Höhe und plaziere #content relative drain, erstmal nur mit margin, nur das hängt jetzt beständig über #box hinaus, sollte sich die Box in der Höhe nicht anpassen?

Edit:Hier mal ein Bild, um das Ganez zu verdeutlichen
http://img246.imageshack.us/img246/588/namenlosfa2.th.jpg (http://img246.imageshack.us/my.php?image=namenlosfa2.jpg)
Das weiße soll autom. so groß sein, wie das grüne.
Farbe udn Text erstmal nur zum basteln, daran wird noch gefeilt.

Edit2: Ein Work-Around mom. ist, dass ich margin-bottom rel. groß (~175px) wähle, dann korrigiert er das, aber das kann ja auch keine Lösung sein.

DanMan

2006-08-26, 22:27:31

Wenn du die html Datei irgendwo hochladen würdest, so dass man sie im Browser begutachten kann wär es für alle leichter dir weiterzuhelfen.

Hardwaretoaster

2006-08-27, 00:51:36

Ja, habe ich mal gemacht: (zwischendrin wieder was gebastelt)
http://hwt.hw.funpic.de/test/
Sorry, hätte ich auch vorher schon gemacht, aber kam nicht zu...

DanMan

2006-08-29, 09:46:58

Ja, habe ich mal gemacht: (zwischendrin wieder was gebastelt)
http://hwt.hw.funpic.de/test/
Sorry, hätte ich auch vorher schon gemacht, aber kam nicht zu...
So. Ich sehe, dass du den Unterschied zwischen den Positionierungsarten noch nicht begriffen hast. Was nicht schlimm ist, da das eines der schwer verständlichen Teile ist.

Kurz gesagt geht es dabei um das Verhalten zueinander:
- absolut positionierte Elemente interessieren sich nur für andere Elemente ihrere Art. Alles andere ist ihnen egal, auch wo im Code sie stehen (IE mal ausgenommen...). Darum kannst du sie auch beliebig auf der Seite platzieren.
- bei relativ positionierten Elementen hat es Einfluss, wo im Code sie stehen. Sie verhalten sich relativ zu den Elementen auf gleicher Hierachie. Kann man auf deiner Seite schön sehen, wenn man die Navi von relativ auf absolut umstellt. Dann rutscht nömlich der Text daneben an die Stelle, die er soll.

HWT@school

2006-08-29, 13:33:12

Ja, so ganz hab' ich das noch nicht, stimmt.
Aber was mir jetzt immer noch unklar ist:
Warum positioniert er die Box (extra weiß) quasi so, wie ich es mir vorstelle und den text IN der Box nicht?

Sollte man nach Mäglichkeit immer eins vom Beiden für einen gewissen Bereich durchziehen, oder ist es kein schlechter Stil, das "wild" zu mixen?

DanMan

2006-08-29, 21:43:06

Genau kann ich dir das auch nicht sagen. Aber ich denke mal, dass durch die relative Positionierung dieser Platz für die Navi-Box reserviert wird. Warum das so ist hab ich ja oben schon erklärt. ;)

Hardwaretoaster

2006-08-29, 21:54:53

DanMan

2006-08-30, 09:28:31

Naja, wenn ich ehrlich bin:
ich habe da hin udn wieder den Eindruck, dass die Ideen zwar nicht schlecht, aber das ganez doch in sich manchmal etwas uneinheitlich udn inkonsistent rüberkommt.
Die Woche über werd ich nicht viel dran machen, vielleicht finde ich am WE nochmal Zeit zum Basteln.
Am Anfang hab ich mir auch Nächte um die Ohren gehauen, in denen ich ständig rumprobiert hab, wie sich dies und das auswirkt, wenn ich sel und jenes ändere. Irgendwann begreift man es dann und findets eigentlich ganz dufte. Wenn da nur nicht dieser IE6 wäre. ;)

HWT@school

2006-08-30, 11:46:31

Dann suche ich mal nach ein paar Tagen, die nicht so wichtig sind, sodass ich mir die Nächte davor um die Ohren hauen kann...*g*

Hardwaretoaster

2006-09-12, 18:42:46

Habe endlich mal wieder ein wenig Zeit dazu: wenn ich den Content auf absolut setze,rutscht z.B. der Footer ganz nach oben...ich blick's nicht.

DanMan

2006-09-12, 19:33:36

Habe endlich mal wieder ein wenig Zeit dazu: wenn ich den Content auf absolut setze,rutscht z.B. der Footer ganz nach oben...ich blick's nicht.
Absolut positionierte Elemente schweben quasi über statisch positionierten. Sie sind nicht Teil des Textflusses, halten also nicht den Platz frei => Footer rutscht nach oben.

Hardwaretoaster

2006-09-12, 20:00:02

Habe es hinbekommen:
Alles auf relativ umgestellt, die textverschiebung lag wohl daran, dass der linke Abstand quasi permanent gemssen wird, einmal zur benachbarten Box, sopnst zur äußeren, habe auch left rausgehauen und dafür margin-left gesetzt, die bezieht sich immer auf das übergeordnete element, ich glaub, so langsam schnaggel ich das :D

DanMan

2006-09-12, 21:36:08

Hardwaretoaster

2006-09-12, 22:06:27

Mille Grazie!!
Mit eurer Hilfe und einer guten Portion Learning by doing (so durchsteigen ohne praktische Tests wäre IMHO nicht möglich) klappt das so langsam.