CSS - Frage

Status
Nicht offen für weitere Antworten.
C

CMan

Grünschnabel
Hi ich hab da ein Problem das ich vieleicht mit css lösen könnte also ich habe eine website mit text und mit css blöcken die ich genau in die website eingebaut habe das ist alles o.k. aber wenn ich jetzt das fenster minimiere oder vergrößere (größere Bildschirm) dann vernändert sich alles so das die blöcke fest sind und sich vom text wegbewegen könnte mir einer sagen wie ich diese blöcke auch dynamisch mache??? Danke schonmal! Falls jemand nicht ganz kapiert was ich meine füge ich ein bild ein:
problem.bmp
 
Das Bild geht nicht, kann mir aber ungefär vorstellen, was du meinst:
Das problem ist, dass die die Blöcke absolute (position: absolute;) positionierst. Versuch es mal mit einer relativen Positionierung: position: relative;.
Dann musst du aber auch dementsprechend die Koordinaten anpassen, halt auf das vorherige Objekt bezogen.
 
Das funktioniert auch nicht wenn ich des mache und den browser dann größer bzw. kleiner mache bewegt sich nur die tabelle mit dem text die blöcke bleiben aber immer noch an ihrer stelle
 
Hallo

Zeig mal bitte den kompletten Code oder einen Link zur Seite und kein Screenshot. Dann kann ich mir das Problem besser ansehen ...

thx
 
Hier ist der code den du haben wolltest:

PHP: 
 <div id="Layer1" style="position:absolute;
    width:273; height:315;
    z-index:-1;
    background-color: 99CCFF; left:102; top:20">
<div id="Layer2" style="position:absolute;
    width:464; height:88;
    z-index:-1;
    background-color: 000099; left:212; top:214">
<div id="Layer3" style="position:absolute;
    width:273; height:315;
    z-index:-1;
    background-color: 000099; left:340; top:-214">


</div>

</div>

</div>

</div>
<div align="center">
kannst du mir jetzt helfen
 
Das ganze ist so wie du es hast etwas problematisch, da du einen div im div im div erzeugst. Schließe doch den div tag erstmal, bevor du einen neuen öffnest, vielleicht geht es dann besser.

Kann jedoch auch sein, dass es nicht hilft, da ich mit Div Dingern nicht so recht fit bin. Aber immer dran denken. Ein <div> ist nicht wirklich ein layer.
 
Hier ist der gesamte Code:
PHP: 
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Neue Seite 1</title>
</head>

<body>
<div align="center">
  <center>
  <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="934" height="219">
    <tr>
      <td width="81" height="35" align="center">&nbsp;</td>
      <td width="224" height="35" align="center">&nbsp;</td>
      <td width="18" height="35" align="center">&nbsp;</td>
      <td width="319" height="35" align="center">
      &nbsp;</td>
      <td width="6" height="35" align="center">&nbsp;</td>
      <td width="281" height="35" align="center" colspan="3">&nbsp;</td>
    </tr>
    <tr>
      <td width="81" height="175" align="center" rowspan="2">&nbsp;</td>
      <td width="224" height="258" align="center" valign="top" rowspan="3">
      <p align="left"></td>
      <td width="18" height="258" align="center" valign="top" rowspan="3">
      &nbsp;</td>
      <td width="319" height="184" align="center" rowspan="3">
      </td>
      <td width="6" height="184" align="center" rowspan="3">&nbsp;</td>
      <td width="281" height="169" align="center" valign="top" colspan="3">
      <p align="left">
      <font face="Tahoma" color="#FFFFFF">
      <br>
      &nbsp;</font></td>
    </tr>
    <tr>
      <td width="11" height="1" align="center" valign="top">
      </td>
      <td width="225" height="1" align="center" valign="top">
      </td>
      <td width="54" height="1" align="center" valign="top">
      </td>
    </tr>
    <tr>
      <td width="81" height="83" align="center">&nbsp;</td>
      <td width="11" height="67" align="center" valign="top">
      &nbsp;</td>
      <td width="225" height="67" align="center" valign="top" style="border-style: double; border-width: 3; background-color: #99CCFF">
      <p>
      </td>
      <td width="51" height="67" align="center" valign="top">
      &nbsp;</td>
    </tr>
  </table>
  </center>
<div id="Layer1" style="position:absolute;
    width:273; height:315;
    z-index:-1;
    background-color: 99CCFF; left:102; top:20">
<div id="Layer2" style="position:absolute;
    width:464; height:88;
    z-index:-1;
    background-color: 000099; left:212; top:214">
<div id="Layer3" style="position:absolute;
    width:273; height:315;
    z-index:-1;
    background-color: 000099; left:340; top:-214">


</div>

</div>

</div>

</div>
</body>

</html>
 
Code: 
<body>
<div align="center">
  <center>
Zum Vergrößern anklicken....
Oh Graus oh Graus. Bitte ersetzen durch:
Code: 
<body style="text-align: center">
Dementsprechend dann auch bitte die zugehörigen Endtags entfernen.
Ausserdem bin ich immer noch der Meinung, dass dieser Code hier
PHP: 
<div id="Layer1" style="position:absolute;
    width:273; height:315;
    z-index:-1;
    background-color: 99CCFF; left:102; top:20">
<div id="Layer2" style="position:absolute;
    width:464; height:88;
    z-index:-1;
    background-color: 000099; left:212; top:214">
<div id="Layer3" style="position:absolute;
    width:273; height:315;
    z-index:-1;
    background-color: 000099; left:340; top:-214">
</div>
</div>
</div>
nicht das erzeugt, was du willst, da du ein div im div im div erzeugst. Somit kann zum Beispiel der erste schon gar nicht korrekte 273px breit sein, da in ihm ein weiterer div der Breite 464 steckt. Meiner Meinung nach ist die Syntax schwerstens verkorxst.

//edit: auch sonst sind da ein paar Schnitzer drinne, die du dir über kurz oder lang abgewöhnen solltest. Der Font-Tag ist outdated, was soviel heisst, dass er nicht mehr verwendet werden sollte.
Auch so Konstruktionen wie diese hier
PHP: 
<td width="81" height="83" align="center">&nbsp;</td>
Lassen sich eleganter über dass CSS-Attribut padding-top in der nächsten <td> lösen.
 
Zuletzt bearbeitet:
ich hab zwar nicht verstanden, was dein Problem ist, aber vielleicht hilft dir der folgende Code.
Code: 
<div id="Layer1" style="position:absolute;
    width:400px; height:400px;
    background-color: #00FF00; left:20px; top:20px;
    z-index:3;">
    klfjasölkfjöasdlfj öasdjfölasjdföl ajsöldjöl<br>alsdfjöasdjflk<br>dlksajfölaksjdf öalsjdfölsajdfölajsölfjsaöldf jölsajfölsajfölasjdfljsadf<BR>ljdsölfjaösldfjölsadjfölsajö
    <div id="Layer2" style="position:absolute;
        width:90%; height:90%; 
        background-color: #FF0000; left:5%; top:5%;
        z-index:2;">
        <img src="asdfsf" alt="ich bin ein BILDASDFSADFJ Alskfjaölsdjflasdfj"> 
        <div id="Layer3" style="position:absolute;
            width:100px; height:100px;
            background-color: #0000FF; left:20px; top:20px;
            z-index:1;">
            JUHUUU NOCH EIN ATESTSSDRFSKCX JLKSDJF SJafLJjasDKF FDSJ Faslfjösadfjösadlfjöadlsjfölsadjföladsjflsdj
        </div>
    </div>
</div>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück