[imho]

hi ihr lieben.

ich habe 2 anliegen, wofür ich eure hilfe brauche.

wie kann ich dem border eines divs einen abstand zuweisen? ich möchte bei dieser website den grauen rahmen mit einem abstand von 2px zu der div box ansich setzen. padding und margin helfen mir nicht weiter.

außerdem soll die website mittig des browsers sein, sprich das div mittig ausgerichtet werden, klappt auch ohne probleme, doch dann kann ich das div nicht zu null an den oberen rand des browser fenster setzen. dann rutscht es bis unter die adress-leiste.

greetz imho

[fricca]

Du machst einen der häufigsten Anfängerfehler: Du positionierst alles absolut.
Nimm alle abs. Positionierungen weg. Verwende Float um Elemente nebeneinander zu stellen. FAQ Punkt 2 hilft.
Dann erledigen sich deine Probleme.

PS: Deine Seite ist nicht im geringsten zentriert. Sie hat einen Abstand von 140px von links.

[heiko_rs]

Siehe auch FAQ.

[imho]

Zitat von fricca

PS: Deine Seite ist nicht im geringsten zentriert. Sie hat einen Abstand von 140px von links.

richtig. habe es rausgenommen nachdem es nicht funktionierte.

danke den ratschlag mit der positionierung nehme ich mir zu herzen

[imho]

Zitat von fricca

Nimm alle abs. Positionierungen weg. Verwende Float um Elemente nebeneinander zu stellen.

genau das habe ich nun erledigt. dennoch habe ich 1 absolutes div.

die div-box. wie soll ich es sonst zentrieren? sorry, ich arbeite zum ersten mal mit floats.

hier mein code:

.div_box {
	position:absolute;
	left:140px;
	top: 0;
	height:auto;
	min-height: 800px;
	width:960px;
	border-left: thick solid #ccc;
	border-right: thick solid #ccc;
	border-bottom: thick solid #ccc;
	background-color: #FFFFFF;
}
.div_head {
	float: left;
	width: 960px;
	height: 206px;
	left: 0;
	top: 0px;
	background-color: #fff;
	border-bottom-width: 20px;
	border-bottom-style: solid;
	border-bottom-color: #4c6485;	
}

#header {
    float: right;
}

#logo {
    float:left;
	margin-left: 20px;
	margin-top: 30px
}

.div_nav {
	float:left;
	clear: left;
	width: 230px;
	height: 374px;
	left: 0;
	top: 226px;
	background-color: #fff;
}

.div_main {
	float: right;
	width: 700px;
	height: 359px;
	left: 230px;
	top: 226px;
	padding-left: 15px;
	padding-top: 15px;
	padding-right: 15px;
	background-color: #fff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #000000;
	text-decoration: none;
}

.imho

[hubspe]

Hi,

Zitat von imho

die div-box. wie soll ich es sonst zentrieren? sorry, ich arbeite zum ersten mal mit floats.

du zentrierst eine Box horizontal in ihrem Elternelement, indem du ihr eine feste Breite nebst margin:0 auto; gibst.

Das klappt aber nicht bei position:absolute.

[fricca]

Zitat von imho

genau das habe ich nun erledigt.

Davon ist unter deinem Link nichts zu sehen.

die div-box. wie soll ich es sonst zentrieren?

Vertikal am besten gar nicht (warum folgst du eigentlich nicht Heikos Link?). Ein Element, das mind. 800px hoch ist, wird bei kaum jemandem noch zentriert werden können.
Feste Höhen funktionieren nicht im Web. Man weiß nie was der Besucher mit der Schrift macht.
Horizontal zentriert wird mit margin:0 auto. Die Suchfunktion hilft.

Wie immer gilt: Kauf dir ein Buch zum CSS-Lernen. Little Boxes ist geeignet.

[imho]

Zitat von hubspe

Das klappt aber nicht bei position:absolute.

ich habe ja vor, von der letzten absoluten wegzukommen.

aber ehrlich gesagt ist mir die umsetzung deiner lösung nicht klar.

ist der aufbau denn sonst korrekt?

[imho]

Zitat von fricca

Davon ist unter deinem Link nichts zu sehen.

den link habe ich auch nicht aktualisiert, daher der code.

Zitat von fricca

Vertikal am besten gar nicht

ich möchte doch auch nur horizontal zentrieren. vertikal nicht, top soll 0 sein!

Zitat von fricca

(warum folgst du eigentlich nicht Heikos Link?)

bin ich. es liegt ausgedruckt neben mir und ich habe es mir durchgelesen, sonst wäre ich nicht so weit wie jetzt.

Zitat von fricca

Horizontal zentriert wird mit margin:0 auto.

danke

Zitat von fricca

Wie immer gilt: Kauf dir ein Buch zum CSS-Lernen. Little Boxes ist geeignet.

die weihnachtsglocken läuten.


dennoch wird bei height:auto der border nicht angezeigt und es liegt nicht oben am browserfenster an trotz top 0.

[fricca]

Zitat von imho

den link habe ich auch nicht aktualisiert, daher der code.

Und wir projizieren jetzt deine CSS-Schnipsel auf deinen Code, werfen den internen Browser an und wissen dann, zu welchen Ergebnis dieses Gedankengebilde führt?
Wenn du über deinen Code sprechen willst, dann aktualisier den Link!

ich möchte doch auch nur horizontal zentrieren.

Dann ist ja gut.

bin ich. es liegt ausgedruckt neben mir

Heikos Link führt zu vertikalem Zentrieren. Warum druckst du dir das aus, wenn es gar nicht das ist, was du willst?

dennoch wird bei height:auto der border nicht angezeigt und es liegt nicht oben am browserfenster an trotz top 0.

FAQ Punkt 2 und CSS-Prolog.
Lies nach, auf welche Art von Elementen die Eigenschaft top anwendbar ist.