frage zu "div-boxen"

alleswarschonbelegt · 17. April 2006

hi

ich versuche, einen text in einer html-seite mittels einer "div-box" (weiss nicht, ob man so dazu sagt) genau oben an den rand zentral auf die seite zu machen.

die box definiere ich so:

<style type="text/css">

</style>

im body rufe ich dann die box mit

<div id="box1">
TEXT
</div>

auf. damit ist die schrift ganz oben am rand. aber ich krieg die schrift nicht in die mitte der seite. ein "text-align: center" in der box-definition hab ich schon probiert, das funzt nicht. ein <center> [...] </center> um die div-tags bringt auch nix. über eine tabelle innerhalb des div klappt es, aber dann bleibt die box nicht ganz oben am rand (das ist aus platzgründen ein muss).

wäre nett, wenn mir einer sagen könnte, wie ich die schrift in die mitte kriegen kann. irgendwie muss man das der box ja klarmachen können.

vielen dank schon mal

norman

kills · 17. April 2006

Hi,

versuch mal mit

margin: auto;

Gruß,

Markus

alleswarschonbelegt · 17. April 2006

danke für die antwort, aber damit klappt es auch nicht.

zaubi · 18. April 2006

Hi!

<style type="text/css">

<!--

body {

	margin: 0px;

}

#box1 {

	position: relative;

	text-align: center;

	top: 0px;

}

-->

</style>

und

<div id="box1">

	TEXT

</div>

funktioniert sowohl im Internet Explorer als auch in Mozilla Firefox.

MfG Zaubi

geloescht_JesterDay · 18. April 2006

text-align betrifft nur den Inhalt des DIV. Da das DIV per default so breit wie die Anzeige ist, ist damit auch der Inhalt in der Mitte. Wenn die Box aber einen Rahmen o.ä. hat geht es damit nicht mehr.



<style type="text/css">

<!--


#box1 {

  margin: 0 auto;

  width: 50%;

  border: 1px solid #000000;

}

-->

</style>


...


<div id="box1">

TEXT

</div>

sollte aber gehen.

Ach ja: Nur weil die Box in der Mitte ist, ist es der Inhalt deswegen noch nicht Dann brauchst du u.U. doch den text-align.

zaubi · 18. April 2006

Man sieht: viele Wege führen nach Rom. Es gibt noch weitere Möglichkeiten, einen DIV-Container zu zentrieren. Hier geht es allerdings um den Text/Inhalt des Containers (zumindest habe ich das so verstanden). Und dieser lässt sich mit text-align: center; zentrieren.

Der Knackpunkt war jedoch das position: absolute;. Dieses sorgt dafür, dass sich der Container in der oberen linken Ecke befindet und genau so breit ist wie sein Inhalt. Eine Kombination aus den letzten beiden Lösungsansätzen dürfte dich ans Ziel bringen.

Grüße, Zaubi

alleswarschonbelegt · 18. April 2006

super, damit klappts jetzt

die box wird sauber in die mitte gepflanzt.

vielen dank zaubi und jester

geloescht_JesterDay · 18. April 2006

Der Knackpunkt war jedoch das position: absolute;. Dieses sorgt dafür, dass sich der Container in der oberen linken Ecke befindet und genau so breit ist wie sein Inhalt.i

Kann man vereinfacht so sagen, aber genauer nimmt ein position:absolute; das so gestylte Element aus dem Textfluss (wie ein Float) und es schwebt sozusagen über allen anderen Elementen. Da sich ein Element normalerweise nach seinem Elternelement ausrichtet und das Elternelement ja jetzt nicht mehr vorhanden ist, hängt es einfach am Anfang (oben, links) und die 100% Breite (des Elternelements) fällt eben auch weg.

EDIT:

Ganz aus dem Textfluss aber auch wieder nicht, denn floatende Elemente haben einen eigenen Textfluss.

Wie dieses Bsp. beweist:


<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

  <head>

    <title>New Document</title>

    <meta http-equiv="content-type" content="text/html; 

  charset=iso-8859-1" />

		<style type="text/css">

<!--

#box1 { position: absolute;

             left: 30%;

             border: 1px solid #000000;

             width: 50%;

	     height: 125px; }

#box2 { position: absolute;

            right: 0;

	    border: 1px solid #ff0000;

	    height: 50px; }

//-->

</style>

  </head>

  <body>

    <div id="box1">

	<div id="box2">

	  Test2

	</div>

      Test1

    </div>

  </body>

</html>

zaubi · 19. April 2006

Da hast du Recht. Wollt's nur vereinfacht auf dieses Besipiel beziehen.

@ alleswarschonbelegt: Kein Problem, immer wieder gerne...

Ich denke, damit sollten wir das Thema bei dem belassen. Alles, was jetzt nocht kommt, wäre OT.

Grüße, Zaubi

Anmelden

frage zu "div-boxen"

Empfohlene Beiträge

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Dein Kommentar

Fachinformatiker Jobs

Fachinformatiker.de, 2024 by SE Internet Services

Links

Fachinformatiker.de App

Kontakt

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte