1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Html-Tag unabhängig vom normalen Textfluss einmitten

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von Grawapple, 24.04.08.

  1. Grawapple

    Grawapple Uelzener Rambour

    Dabei seit:
    13.05.06
    Beiträge:
    373
    Hallo zusammen!

    Ich möchte ein Html-Div-Tag undabhängig (also eigentlich mit: position:absolute) vom andern Textfluss positionieren. Nun soll aber das Div horizontal immer in der Mitte des Fensters, egal wie gross es ist, sein.

    Ist sowas möglich?

    Danke und Gruss Yatekii
     
  2. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    Hi,
    mit dynamischer Größe geht das meiner Meinung nach nicht. Wenn du aber fixe Dimensionen für das DIV hast dann geht es so:

    Code:
    <style type="text/css">
    #header {
    	background: red;
    	height: 100px;
    	width: 100px;
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	margin: -50px 0 0 -50px;
    }
    </style>
    
     
  3. Skeeve

    Skeeve Pomme d'or

    Dabei seit:
    26.10.05
    Beiträge:
    3.121
    Oder man verwendet (pfui ;) Teufel!) JavaScript. Dann klappt es auch mit dynamischen Breiten, da JS die Breite des DIVs erfragen und dann passend positionieren kann.
     
  4. Der Paule

    Der Paule Königsapfel

    Dabei seit:
    26.05.07
    Beiträge:
    1.200
    Moin,

    es gibt zwar die CSS Eigenschaft vertical-align:center, die funktioniert aber bei divs nicht.

    Da könntest du mit left und top arbeiten. Ungefähr so...

    #name_div_id
    {
    position:absolute;
    top:25%;
    left:35%
    }

    Oder so...

    #name_div_id
    {
    width:200px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-50px auto auto -100px;
    text-align:center;
    }


    Kommt auch immer auf die Browser an...

    Vielleicht hilfts...

    mfg
    paule


    Damn.... to late.... :p
     
  5. Grawapple

    Grawapple Uelzener Rambour

    Dabei seit:
    13.05.06
    Beiträge:
    373
    Danke vielamls...da das div ne feste grösse hat ist mein problem gelöst...

    wie würde es denn mit (pfui-teufel) java-script gehen?
     
  6. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    Hi,
    die zweite Variante wäre dann das Layout nur horizontal vertikal zu zentrieren:

    Code:
    <style type="text/css">
    #wrapper {
    	text-align: center;
    }
    
    #div {
    	background: red;
    	width: 100px;
    	margin: 0 auto;
    	text-align: left;
    }
    </style>
    
    <div id="wrapper">
    	<div id="div">
    	
    	</div>	
    </div>
    
     
    #6 mschoening, 24.04.08
    Zuletzt bearbeitet: 24.04.08
  7. Skeeve

    Skeeve Pomme d'or

    Dabei seit:
    26.10.05
    Beiträge:
    3.121
    Wie beschrieben: Die Größe des DIVs ermitteln und dann, wie von mschoening beschrieben, die Position setzen. Halt nicht mit 100px und 50px sondern mit den ermittelten Werten.

    Ist mir momentan zu müßig, das auszuklamüsern. Ich habe sowas ähnliches aber schon mal für eine feststehende Kopfzeile programmiert. Die war dann ebenfalls ein DIV und ein JavaScript, das per body.onload gestartet wurd hat dann einen entsprechenden Margin für den darunterliegenden Text erstellt.
     
  8. Grawapple

    Grawapple Uelzener Rambour

    Dabei seit:
    13.05.06
    Beiträge:
    373
    @mschoenig:

    http://wapple.ch/design-2.html

    das ist meine site...und die blauen buttons sollten nach oben über den blauen streifen, aber weshalb sind die so weit undten? habe genau deinen code(ausser der farbe und der grösse benutzt)!
     
  9. Grawapple

    Grawapple Uelzener Rambour

    Dabei seit:
    13.05.06
    Beiträge:
    373
    @skeeve...dein karmamäleon, wie haste das gemacht? kannst mir auch eins machen? xD ich habs mal gmoddet, hab aber nur die hälfte hingekriegt...statt skeeve stand dann Yatekii...aber weiter kam ich net...weil ich neue zeichen hätt dazuschreiben müssen...
     
  10. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    Hi,
    ja du hast ja für das DIV was du absolut positionieren willst nicht die Grösse angegeben. Also du musst die Größe angeben und dann bei margin jeweils de Hälfte der Breite/Höhe nach links/oben verschieben mit einem negativen margin.
     
  11. SnowWhite

    SnowWhite Gast

    @grawapple

    Dein Html-Quelltext:

    Code:
    <center><div style="width:1200px; margin:20px auto 20px">
    <img style="" src="pic/border-top2.gif" />
    ...
    
    Mach dir doch erstmal ein CSS. Es vereinfacht die Übersicht wenn die Attribute nicht in den Tags stehen. v.a kannst du dann auch besser mit den Stylesheet "experimentieren".
     
  12. Grawapple

    Grawapple Uelzener Rambour

    Dabei seit:
    13.05.06
    Beiträge:
    373
    Ich weiss wie das geht! Doof bin ich ja net...das Design ist nur mal Beta...übrigens...wie findet ihr es?
     
  13. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    Gestrig...aber das ist Geschmackssache, hauptasche du räumst deinen Code auf und es sieht Browserübergreifend gleich aus. Das ist das wichtigste...alles andere ist subjektiv. Wenn du zu viele Leute fragst was sie von deiner Webseite halten bekommst du Antworten wie: du ich mag grün lieber, oder...mach doch lieber alles zentriert...:D
     
  14. Grawapple

    Grawapple Uelzener Rambour

    Dabei seit:
    13.05.06
    Beiträge:
    373
    jaa stimmt xDD
     
  15. SnowWhite

    SnowWhite Gast

    Ich hatte ja keine Ahnung, dass das eine "Beta" sein soll. Hätte auch gut sein können, dass du Anfänger bist, das hat auch nichts mit doof zu tun. Nun gut, man kann sich ja mal vertun...

    Stelle dein Template erstmal fertig. Unfertiges bewerten mag ich nicht. Und wenn ich bewerte dann nur die Formatierung, alles andere ist, wie bereits erwähnt, Geschmackssache. :)
     
  16. Grawapple

    Grawapple Uelzener Rambour

    Dabei seit:
    13.05.06
    Beiträge:
    373
    War auch nicht böse gemeint;)
     
  17. Bajuware

    Bajuware Oberösterreichischer Brünerling

    Dabei seit:
    23.04.08
    Beiträge:
    707
    Ich bin zwar unsicher ob ich die Frage richtig verstanden habe aber :

    #mittig { margin-left: auto; margin-right: auto; width: 100%; height: auto; min-width: ?px; max-width: ?px; }

    Für einige Browser sind für min/max-width Hacks nötig. Zusätzliches position: relative; + top/left/bottom/right/ sollte ebenfalls Spielraum geben.
     
  18. Grawapple

    Grawapple Uelzener Rambour

    Dabei seit:
    13.05.06
    Beiträge:
    373
    ja...das problem ist mit der "margin"-funktion reiht sich das an den normalen textfluss was ich ja nicht will...aber ich habs jetzt hingekriegt mit divverschachtelung...
     

Diese Seite empfehlen