positionierung von container

jhaustein · 27 August 2008

hallo gemeinschaft

möchte einen container positionieren unabhängig von der auflösung - der container ist 50 x 50 gross und soll immer 100 px rechts von der mitte des bildschirmes und 100px von der oberen kante weg sein
-könnt ihr mir dabei bitte helfen

ingoS · 27 August 2008

Dazu brauchst du einen Rahmen-Container, falls es noch keinen gibt.
Dieser Rahmen-Container wird mittig positioniert (links und rechts margin: auto).
Der 50x50-Container soll 100px von der Mitte entfernt sein und hat selber 50px an Breite, also ist der Rahmencontainer bis zur Mitte 150px breit, insgesamt daher 300px.
Den 50x50-Container positionierst du in dem Rahmen-Container mit float: right.

EDIT: Loon3y hat recht, wir bauen dir hier Stück für Stück deine Homepage zusammen. ^^

jhaustein · 27 August 2008

nein nein - habe noch eine frage

wenn ich in meinem code eine tabelle verwende - ist es eigentlich möglich einen container rüber zu legen - versuche es im mom - prob ist nur, dass sich die tabelle damit verschiebt

ingoS · 27 August 2008

Das geht nur, wenn du dem Container position: absolute (vielleicht auch relative) gibst. Dann kannst du ihn mit top, left, right und bottom verschieben.
All das hört sich aber schon wieder nach irgendetwas an, was man bestimmt auch leichter lösen könnte oder auch einfach nicht verwenden sollte. :roll:

jhaustein · 27 August 2008

ich habe eine tabelle, die in keinem container liegt und nun wollte ich den container von oben über die tabelle legen - klappt bloss nicht - er schiebt die tabelle immer nach unten

ingoS · 27 August 2008

jhaustein schrieb:
ich habe eine tabelle, die in keinem container liegt und nun wollte ich den container von oben über die tabelle legen - klappt bloss nicht - er schiebt die tabelle immer nach unten

Hast du meinen Vorschlag ausprobiert und es klappt trotzdem nicht? Dann bitte Link oder Code.
Die Tabelle soll aber nicht in dem Container angezeigt werden, oder?

jhaustein · 27 August 2008

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>

#container{
{ position: relative; top: 39px; left: 49px; 
      width: 200px; height: 200px; }
</style>
</head>

<body>
<div id="container">retretertretre</div>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="47">&nbsp;</td>
    <td>fdf</td>
    <td>dsfsdfdsfdsf</td>
    <td>sdsfdsf</td>
    <td>fdffdsfdfdfdsfdsf</td>
  </tr>
  <tr>
    <td height="43">&nbsp;</td>
    <td>fdsfddsfds</td>
    <td>&nbsp;</td>
    <td>dsfdfdf</td>
    <td>dsfd</td>
  </tr>
  <tr>
    <td height="50">&nbsp;</td>
    <td>&nbsp;</td>
    <td>fsdfsdf</td>
    <td>df</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td height="57">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>fsdfdsf</td>
    <td>dsfsdfsdfsdfdf</td>
  </tr>
</table>
</body>
</html>

Loon3y · 27 August 2008

wenn du den div-container ÜBER die Tabelle legen willst, dann musst du ihn auch nach der tabelle schließen. Wenn du ihn allerdings DARÜBER haben willst, dann ist es so richtig.

Sprich:

ÜBER:

Code:

<div>
 <table>
  <tr>
   <td></td>
  </tr>
 </table>
</div>

DARÜBER:

Code:

<div> test </div>
 <table>
  <tr>
   <td></td>
  </tr>
 </table>

grüße..

jhaustein · 27 August 2008

kannst du mir vielleicht nocheinmal dabei helfen, wenn ich den container nicht mit den jetzigen positionsangaben positioniert haben möchte , sondern relativ zur mitte - also den abstand vom top fest top: 100px nur soll er nun 100px aus der mitte nach rechts verschoben werden

Loon3y · 27 August 2008

jhaustein schrieb:
kannst du mir vielleicht nocheinmal dabei helfen, wenn ich den container nicht mit den jetzigen positionsangaben positioniert haben möchte , sondern relativ zur mitte - also den abstand vom top fest top: 100px nur soll er nun 100px aus der mitte nach rechts verschoben werden

abstand von oben:

Code:

margin-top: 100px;

abstand von rechts:

Code:

margin-right: 100px;

oder:

Code:

margin: 100px 100px;

jhaustein · 27 August 2008

nee, ich meinte das, er unabhängig von der bildschirmgrösse immer 100px aus der mitte des bildschirmes nach rechts verschoben wird

Loon3y · 27 August 2008

jhaustein schrieb:
nee, ich meinte das, er unabhängig von der bildschirmgrösse immer 100px aus der mitte des bildschirmes nach rechts verschoben wird

margin-left: ( 100px + ( 1/2 * mainfensterbreite) = ) x px;

oder was magst du wissen.....?

es wäre hilfreich, da ich es nicht verstehe, wenn du es genauer formulierst oder etwas zeichnest....

jhaustein · 27 August 2008

die fensterbreite ist doch variabel - das ist doch mein problem - der container soll immer 100px rechts von der mitte des fensters stehen

Loon3y · 27 August 2008

Loon3y schrieb:
es wäre hilfreich, da ich es nicht verstehe, wenn du es genauer formulierst oder etwas zeichnest....

wenn du es mir / uns nicht aufziechnen willst, dann können wir dira uch nicht antworten

jhaustein · 27 August 2008

hatte doch meinen bsp code ringestellt - habe keinen container in dem die tabelle ist

Loon3y · 27 August 2008

ehrlich gesagt mag ich mich nicht nochmals wiederholen.

jhaustein · 27 August 2008

muss ich denn jetzt die ganze tabelle in einen container stellen, damit ich mich bei der breite auf diesen beziehen kann - der container, in dem dietabelle drin wäre hätte aber eine breite von 100%

jhaustein · 27 August 2008

BEKOMME ES NICHT HIN, dass der container über die tabelle sich legt

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Neuhaus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <script src="assets/scripts/camion-pourriel.js" type="text/javascript"></script>
    <script src="assets/scripts/prepopulate.js" type="text/javascript"></script>
    <script src="assets/scripts/jquery-1.2.3.pack.js" type="text/javascript"></script>
    <script src="assets/scripts/jcycle.js" type="text/javascript"></script>
    <script src="assets/scripts/jcycle_config.js" type="text/javascript"></script>
<style>
         body {    margin-left:0px;
             margin-top:0px;
            scrollbar-base-color: #E5EEF5;
            scrollbar-track-color: #f0f0e0;
            scrollbar-face-color: #CADBEB;
            scrollbar-highlight-color: #f0f0e0;
            scrollbar-3d-light-color: #CADBEB;
            scrollbar-darkshadow-color: #CADBEB;
            scrollbar-shadow-color: #CADBEB;
            scrollbar-arrow-color: #ffffff;
            line-height:100px;}
#container{ width:150px; height:35px;position: relative;
       margin-left: 50%; 
      left:100px;
      top: 100px  }
      
    
    </style>
    
<script language="JavaScript" type="text/JavaScript">
<!--



function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
</head>

<body>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr> 
    <td background="bg_kopf.jpg"><img src="bg_kopf.jpg" width="1" height="50"></td>
    <td width="27" background="bg_kopf.jpg">&nbsp;</td>
    <td width="840" background="bg_kopf.jpg">&nbsp;</td>
    <td width="27" background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
  </tr>
  <tr> 
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
  </tr>
  <tr> 
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
  </tr>
  <tr> 
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
  </tr>
  <tr> 
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
  </tr>
  <tr> 
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
  </tr>
  <tr> 
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
  </tr>
  <tr> 
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
  </tr>
  <tr> 
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
  </tr>
  <tr> 
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
  </tr>
  <tr> 
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
  </tr>
  <tr> 
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
  </tr>
  <tr>
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
    <td background="bg_kopf.jpg">&nbsp;</td>
  </tr>
</table>
<div margin:0px auto; 
width:100px; height:200px; 
border:1px solid red; 
position:relative; right:100px;> 
  <div id="slideshow"> <img src="assets/images/header/worksPreviews/balate.png" width="345" height="250" alt="" /> 
    <img src="assets/images/header/worksPreviews/etatdesieges.png" width="345" height="250" alt="" /> 
   
  </div>

</div>

</body>
</html>

positionierung von container

jhaustein

Mitglied

ingoS

Aktives Mitglied

jhaustein

Mitglied

ingoS

Aktives Mitglied

jhaustein

Mitglied

ingoS

Aktives Mitglied

jhaustein

Mitglied

Loon3y

Neues Mitglied

jhaustein

Mitglied

Loon3y

Neues Mitglied

jhaustein

Mitglied

Loon3y

Neues Mitglied

jhaustein

Mitglied

Loon3y

Neues Mitglied

jhaustein

Mitglied

Loon3y

Neues Mitglied

Anhänge

jhaustein

Mitglied

jhaustein

Mitglied

Neueste Beiträge