div verändern

Raziel

hi.
ich hatte schon ienmal erwänt, das ich keinen schimmer von divs hab(hatte) und damit nicht klarkomme...

ich hab mich jetzt ein bissel dareingehangen und ein bissel mit denen herrumprobiert.

mittlerweile kreige ich das (denke ich zumindest) hin ich weiß nur noch nicht, was style="position:absolute/relativ" bringt, aber, wenn ihr mir das sagen könntet wärs nicht schlecht, aber darum geht es jetzt nicht.

jetzt, wo ich hier herrumprobiere ist mir eingefallen, das ich hir mal etwas gehört(gelesen) habe vonwegen, das man den inhalt von einzelnen div's verändern kann...
jetzt würde mich interessieren, wei das geht.

leider hatte ich hier bei der suche keinen erfolg. bei den suchergebnissen war nichtmal annährend etwas dabei , schon allein, weil ich nicht die richtigen stichworte hatte, weil ich die befehle nicht kenne.

hoffentlich gibt es da sowas...
schonmal danke für die hilfe

driver

Zitat

absolute:
Absolute Positionierung durch die Angaben left, top, right, bottom. Absolut positionierte Elemente sind außerhalb des normalen Textfluß, sie liegen über den anderen Elementen und beeinflussen somit nicht ihr Layout. Die absolute Position wird relativ zu den Rändern des Eltern-Elements berechnet, wenn dieses ebenfalls positioniert ist, oder wenn es der Seiteninhalt (<body>) ist. Da sich der Seiteninhalt scrollen lässt, werden absolut positionierte Elemente mitgescrollt.

relative
Relative Positionierung vom normalem Fluß. Die normale Position ist wie bei static im normalem Textfluß. Die Positionierungsangaben left, top, right, bottom verschieben das Element aus dieser Position. Die nachfolgenden Elemente verhalten sich so, als wäre das Element nicht verschoben

fixed
Wie absolute, jedoch bleibt das Element beim Scrollen stehen.

static
Positionierung im Textfluss. Die Angaben left, top, right, bottom sind unwirksam.

quelle: http://www.css4you.de/position.html

sejuma

Wenn du position-Angaben nicht ganz gezielt einsetzen willst, dann lass besser die Finger davon. Führt meist irgendwann zu Problemen. Positionierungen von div's erreichst du im Normalfall besser mit float- und Margin-Angaben.
http://de.selfhtml.org/css/eigenschaf…ng.htm#position

Den Inhalt eines div's änderst du normalerweise ganz einfach über den HTML-Quelltext. Die Formatierungsangaben über CSS.

Man kann den Inhalt eines div's aber auch in eine gesonderte Datei schreiben und ihn dann in den div per PHP-Script includen, falls du das evtl. meintest.

Raziel

also... driver schonmal danke, das ist gut

aber von CSS und PHP hab ihc leider keinen schimmer... aber das klingt schonmal gut. ich bräuchte nur eine anleitung, wie das geht

sejuma

FAQ's III/4
Gilt ebenso für andere Inhalte.

synaptic

und wenn du dynamisch inhalt in dein div böllern willst geht das auch mit javascript (sofern es aktiviert ist)

HTML

<html>
<head>
  <title>divtest</title>


  <script type="text/javascript">
  function reinpacken(){
var zielobjekt =document.getElementById("meindiv");
zielobjekt.innerHTML= "[img]http://home.arcor.de/synaptic/stickerfood/a_bau08.gif[/img][img]http://home.arcor.de/synaptic/stickerfood/construction_bar_rotate_md_clr.gif[/img][img]http://home.arcor.de/synaptic/stickerfood/a_bau08.gif[/img]
Die So haste jetzt wat dymamisch in dein DIV geböllert!";


}
  </script>
</head>
<body>
<button onClick="reinpacken();">wat ins DIV böllern</button>




<div id="meindiv" style="width:500px; height:300px; background:#CFCFCF">
<p align="center">zuerst steht hier was anderes</p>
</div>
</body>
</html>

Alles anzeigen

das ganze sieht dann so aus: http://home.arcor.de/synaptic/hilfe/div.html

Raziel

danke... das probier ich gleich ma aus

Raziel

ok... es klappt alles... ich mus nurnoch ien bisel rumtufteln.
vielen dank. das war genau das, was ich miente.

aber es taucht ien ganz anderes problem auf... das hat ncihts damit zu tun, aber ich will nciht dauernd nen neues thema eröffnen...

ich hab jetzt 2 divs ineinander... also div 2 innerhalb von div1... den div 2 kann ich aber nciht positionieren... der klebt einfach links oben in der ecke fest...

was mache ich falsch?

Code

<div style="position:absolute; width:461; height:350; top:10; right:30; background-image:url(../images/elemente/buchB.jpg);">
<div style="position:relativ; width:441; height:320; top:10; right:15; background:#33dd33;">


 </div>
</div>

laangweilig

könnte es vielleicht sein das bei top & right die Px oder prozent angabe fehlt ?
weiß grad auch nich so genau , aber schreib mal bei width , height , top und right px oder % dahinter ...aber bin mir nicht sicher , bevor deine hp wegen meinem nichtischersein total zerstört wird =)

Raziel

kann ich mal probieren... aber sonst klappt das acuh immer ienwandfrei ohne... wenn kein % dahinter steht, dan zählt das als px... aber mal sehen...

[probiere es aus]

ne... funzt nit...

aber der erste div der ist ja acuh auf position...

jetzt sieht alles so aus...:

Code

<div style="position:absolute; width:461px; height:350px; top:10px; right:30px; background-image:url(../images/elemente/buchB.jpg);">
<div style="position:relativ; width:441px; height:320px; top:10px; right:15px; background:#33dd33;">


 </div>
</div>

Raziel

huch... ich habs ich trottel...
ich hab ausversehn in gedanken "relativ" und "absolute" ein bissel vermischt...

ich hab relativ eingegeben aber wei bei absulute positioniert...

das hab ichjetzt geändert und jetzt funzt es... X-D

Dominikgt

ganz nebenbei wirds auch relative nicht relativ geschrieben;) hätte also wahrscheinlich so oder so nicht funktioniert

Raziel

jo... hast recht... allerdings hätte ich den, eben weil ich mit in den schreibweisen nochnciht sicher bin von oben^^ kopiert...

jedenfalls:

ich krieg ncoh ne kriese...

Code

<div style="position:absolute; width:461; height:350; top:10; right:30; background-image:url(../images/elemente/buchB.jpg);">
 <div style="position:absolute; width:461; height:22; top:0; left:0; background-image:url(../images/elemente/buchO.jpg);">


 </div>
 <div style="position:absolute; width:461; height:25; bottom:0; left:0; background-image:url(../images/elemente/buchU.jpg);">


 </div>
 <div style="position:absolute; width:100% heiget:100%; top:0; left:0;" id="Steckbrief">
  <div style="position:absolute; width:100%; height:63; top:0; right:0;">
[img]../images/elemente/eckeRO.jpg[/img]</img>
  </div>
  <div style="position:absolute; width:441; height:320; top:15; left:10;">
  </div>
 </div>
</div>

Alles anzeigen

warum ist der teil

Code

<div style="position:absolute; width:100%; height:63; top:0; right:0;">
[img]../images/elemente/eckeRO.jpg[/img]</img>
  </div>

so komisch/falsch plaziert?
hier ist ein screen, wie das aussieht...

driver

versuchs mal mit align:right, text-align:right oder float:right; nach rechts auszurichten

Raziel

ja... text-align:right funktioniert...

ich hab nur keinen schimmer, wiso das aufeinmal dort außen stand

Raziel

nochmal zum anfangsthema...

kann man die einzelnen scripts etwa nur einmal verwenden?

ich hab mir da jetzt was schön auffändiges zusammengeschustert...
das war schön schwer...

jetzt hab ich mir ein paar sachen zusammengebastelt, die dan in das eine divs reinkommen ich hab das so gemacht, das dan sogar noch schaltflächen in das div kommen, die das div wieder verändern...

klappt alles super.

das problem ist nur, das ich mit einem button auch wieder einen script aktiviere, mit dem dan etawas da hinneinkommt, was da vorher schonmal war...

ach... sonne kagge... ihr versteht kekin wort oder?
ich versuchs ma so:

standart-->1--->2
. . . . . . . . . ^--X--

ich setze in den div den script"1" rein. in dem script "1" hab ich was, mit dem ich den script"2" in das selbe div rein setze.

soweit so gut...

in "2" hab ihc auch wieder einen drinne, der den div wieder zu "1" werden lässt... oder umindest sollte er das. das klapt aber nciht.... ich finde allerdings keine fehler...

hier mal die wichtigen teile des scripts...

Code

<script type="text/javascript"> 
  function seite1(){ 
var zielobjekt =document.getElementById("Buch"); 
zielobjekt.innerHTML= '<div style="position:absolute; width:461; height:350; top:10; right:30; background-image:url(../images/elemente/buchB.jpg);"><div style="position:absolute; width:461; height:22; top:0; left:0; background-image:url(../images/elemente/buchO.jpg);"></div><div style="position:absolute; width:461; height:25; bottom:0; left:0; background-image:url(../images/elemente/buchU.jpg);"></div><div style="position:absolute; width:462; height:350; top:0; left:0;" id="steckbrief"><div style="position:absolute; top:0; right:1;">[img]../images/elemente/eckeRO.jpg[/img]</img></div><div style="position:absolute; width:461; height:350; top:0; left:0;"><div style="position:absolute; right:80; top:56;">[img]../images/photos/ich.jpg[/img]</div><div style="position:relative; left:15; top:10;"><font size="7"><u>[b][i]Steckbrief[/i][/b]</u></font></div><div style="position:absolute; width:213; height:261; top:69; left:13; text-align:justify;">[img]../images/elemente/spacer_10x10.gif[/img]wilkommen auf meiner ersten, selber per html programmierten seite. wenn ihr interesse habt euch auch html anzueignen, dan stehen unter "<a href="Index[L].html" target="main">Links<a>", ein paar links, die mir persönlich seht geholfen haben.
bei lob und kritik ruhig eine mail an mich schreiben. wobei lob lieber gesehen wird</div><div style="position:relative; width:95; left:130; top:15; border: 1px solid silver; padding: 5;">------------>
dises hübsche
gesicht gehört
zu mir
------------>
</div><div style="position:absolute; width:215; height:43; bottom:105; right:10; text-align:center;">Ihr könnt mich erreichen, unter:
[url='mailto://www.raziel07@hotmail.de']mailto://www.raziel07@hotmail.de[/url]</div><div style="position:absolute; width:200; height:80; bottom:20; right:20; border: 1px solid silver;" align="justify">für weitere informationen über mich, blättert einfach um.
klickt dazu einfach auf die Eselsohren in den oberen ecken.</div></div></div><div>'; 


} 
  </script>

Alles anzeigen

Code

<script type="text/javascript"> 
  function seite2(){ 
var zielobjekt =document.getElementById("Buch"); 
zielobjekt.innerHTML= '<div style="position:absolute; width:461; height:350; top:10; right:30; background-image:url(../images/elemente/buchB.jpg);"><div style="position:absolute; width:461; height:22; top:0; left:0; background-image:url(../images/elemente/buchO.jpg);"></div><div style="position:absolute; width:461; height:25; bottom:0; left:0; background-image:url(../images/elemente/buchU.jpg);"></div><div style="position:absolute; width:462; height:350; top:0; left:0;" id="steckbrief"><div style="position:absolute; top:0; left:0;">[img]../images/elemente/eckeLO.jpg[/img]</img></div><div style="position:absolute; top:0; right:1;">[img]../images/elemente/eckeRO.jpg[/img]</img></div><div style="position:absolute; width:440; height:320; top:13; left:11;"><center><table border="0" width="100%"><colgroup><col width="20%" /><col width="30%" /><col width="2%" /><col width="48%" /></colgroup><tr><td align="center" colspan="4"><font size="7"><u>[b][i]Steckbrief</u>[/b][/i]</font></td></tr><tr><td colspan="4"><font size="5"><u>[b][i]Aussehen:</u>[/b][/i]</font>
</td></tr><tr><td rowspan="7"></td><td>Name:</td><td rowspan="7"></td><td>Daniel</td></tr><tr><td>Geburtstag/Alter:</td><td>31.12.90/16</td></tr><tr><td>Sternzeichen:</td><td>Steinbock</td></tr><tr><td>größe:</td><td>1.91m</td></tr><tr><td>Statur:</td><td>Schlank/relativ kräftig</td></tr><tr><td>Augenfarbe:</td><td>Blau/grau</td></tr><tr><td>Haarfarbe:</td><td>Braun(dunkelblond) momentan mit blonden stränen</td></tr></table></center></div></div><div>';


} 
  </script>

viel spaß beim helfen...

ich nehms euch nciht übel, wenn ihr euch nciht der sache annehmt...

synaptic

jo spass is immer dabei^^
hab mal buttons gemacht um die einzelnen inhalte einzufügen, denn ich hab nix gefunden, mit dem du von seite1 auf seite2 gehst und zurück.
zuerst mal als kleine info:
wenn du sowas machst, dan speichere den wunschinhalt des divs in einer globalen variable, so kann jede funktion darauf zugreifen.
globale variablen deklariert man innerhalb des scriptes außerhalb einer funktion!
dann bedenke daß du zwischen zwei gänsfüßchen nur hochkommata setzen darfst, sonst haste ne nicht abgeschlossene zeichenfolge und irgendwo wird ein semikolon erwartet, wo keins hin muss.
Beispiel:

Code

<script type="text/javascript">
var richtig = "[img][/img]";// hier die hochkommata
var falsch = "[img][/img]";// hier würde nach src=" ein semikolon erwartet, obwohls net richtig wäre
</script>

und hier zum code von dir... wie bereits erwähnt sind buttons dabei, die den inhalt ins DIV böllern!

HTML

<html>
<head>
  <title></title>
  <script type='text/javascript'>
  var inhalt1 = "<div style='position:absolute; width:461; height:350; top:10; right:30; background-image:url(../images/elemente/buchB.jpg);'><div style='position:absolute; width:461; height:22; top:0; left:0; background-image:url(../images/elemente/buchO.jpg);'></div><div style='position:absolute; width:461; height:25; bottom:0; left:0; background-image:url(../images/elemente/buchU.jpg);'></div><div style='position:absolute; width:462; height:350; top:0; left:0;' id='steckbrief'><div style='position:absolute; top:0; right:1;'>[img]../images/elemente/eckeRO.jpg[/img]</img></div><div style='position:absolute; width:461; height:350; top:0; left:0;'><div style='position:absolute; right:80; top:56;'>[img]../images/photos/ich.jpg[/img]</div><div style='position:relative; left:15; top:10;'><font size='7'><u>[b][i]Steckbrief[/i][/b]</u></font></div><div style='position:absolute; width:213; height:261; top:69; left:13; text-align:justify;'>[img]../images/elemente/spacer_10x10.gif[/img]wilkommen auf meiner ersten, selber per html programmierten seite. wenn ihr interesse habt euch auch html anzueignen, dan stehen unter '<a href='Index[L].html' target='main'>Links<a>', ein paar links, die mir persönlich seht geholfen haben.
bei lob und kritik ruhig eine mail an mich schreiben. wobei lob lieber gesehen wird</div><div style='position:relative; width:95; left:130; top:15; border: 1px solid silver; padding: 5;'>------------>
dises hübsche
gesicht gehört
zu mir
------------>
</div><div style='position:absolute; width:215; height:43; bottom:105; right:10; text-align:center;'>Ihr könnt mich erreichen, unter:
<a href='mailto://www.>> Edit by Admin :Das Posten von Email-Adressen ist hier nicht gestattet <<> Edit by Admin :Das Posten von Email-Adressen ist hier nicht gestattet << "; 




  var inhalt2 = "<div style='position:absolute; width:461; height:350; top:10; right:30; background-image:url(../images/elemente/buchB.jpg);'><div style='position:absolute; width:461; height:22; top:0; left:0; background-image:url(../images/elemente/buchO.jpg);'></div><div style='position:absolute; width:461; height:25; bottom:0; left:0; background-image:url(../images/elemente/buchU.jpg);'></div><div style='position:absolute; width:462; height:350; top:0; left:0;' id='steckbrief'><div style='position:absolute; top:0; left:0;'>[img]../images/elemente/eckeLO.jpg[/img]</img></div><div style='position:absolute; top:0; right:1;'>[img]../images/elemente/eckeRO.jpg[/img]</img></div><div style='position:absolute; width:440; height:320; top:13; left:11;'><center><table border='0' width='100%'><colgroup><col width='20%' /><col width='30%' /><col width='2%' /><col width='48%' /></colgroup><tr><td align='center' colspan='4'><font size='7'><u>[b][i]Steckbrief</u>[/b][/i]</font></td></tr><tr><td colspan='4'><font size='5'><u>[b][i]Aussehen:</u>[/b][/i]</font>
</td></tr><tr><td rowspan='7'></td><td>Name:</td><td rowspan='7'></td><td>Daniel</td></tr><tr><td>Geburtstag/Alter:</td><td>31.12.90/16</td></tr><tr><td>Sternzeichen:</td><td>Steinbock</td></tr><tr><td>größe:</td><td>1.91m</td></tr><tr><td>Statur:</td><td>Schlank/relativ kräftig</td></tr><tr><td>Augenfarbe:</td><td>Blau/grau</td></tr><tr><td>Haarfarbe:</td><td>Braun(dunkelblond) momentan mit blonden stränen</td></tr></table></center></div></div><div>"; 



  function seite1(){ 
var zielobjekt =document.getElementById("Buch"); 
zielobjekt.innerHTML= inhalt1;
}


function seite2(){ 
var zielobjekt =document.getElementById("Buch"); 
zielobjekt.innerHTML= inhalt2; 
} 




  </script> 
</head>
<body>
<input type="button" value="inhalt1 einfügen" onClick="seite1();"><input type="button" value="inhalt2 einfügen" onClick="seite2();">
<div id="Buch"></div>


</body>
</html>

Alles anzeigen

Tags