Ergebnis 1 bis 15 von 33
Thema: Divs überschneiden sich
-
31-08-2016, 00:09 #1
Doppel-As
- registriert
- 30-08-2015
- Beiträge
- 110
Divs überschneiden sich
Hey Leute,
ich habe folgendes kleines Problem:
Ich habe mehrere Divs, die Beiträge in einer Timeline anordnen (ähnlich dem Posting - System auf Sozialen Netzwerken).
Diese Beiträge können natürlich kommentiert werden. Funktioniert alles dank Jquery und Php auch 1A. Das kleine optische Problem was ich nun habe:
wenn ich einen Beitrag kommentiere, und ihn absende, wird der Container gleich per Jquery aktualisiert, so dass der Kommentar direkt angezeigt wird. Das Problem ist jetzt nur, dass interessiert die anderen Divs nicht, und die Divs überschneiden sich, anstatt sich zu verschieben, wenn ein neues Kommentar erstellt wird.
Hier einmal die Struktur:
timeline_ausgabe.php: (hier werden alle Postings ausgegeben)
Code:<?php if(isset($_GET['sended'])){ include "includes/_db.php"; include "includes/_functions.php"; } ?> <div class="timeline row" data-toggle="isotope"> <div class="col-xs-12 col-md-6 col-lg-4 item"> <div class="timeline-block"> <div class="panel panel-default share clearfix-xs"> <div class="panel-heading panel-heading-gray title"> Was gibt's neues </div> <div class="panel-body"> <textarea name="status" id="status" class="form-control share-text" rows="3" placeholder="Teile deinen Status ..."></textarea> </div> <div class="panel-footer share-buttons"> <a href="#"><i class="fa fa-map-marker"></i></a> <a href="#" data-toggle="modal" data-target="#foto"><i class="fa fa-photo"></i></a> <a href="#"><i class="fa fa-video-camera"></i></a> <input type="hidden" name="id" id="id" value="<?php echo $_COOKIE['ID']; ?>"> <button type="submit" class="btn btn-primary btn-xs pull-right display-none" onclick="return timelinepost();" href="#">Posten</button> </div> </div> </div> </div> <?php $sql = "SELECT * FROM social_timeline ORDER BY timeline_date DESC"; $result = $db->query($sql); $lastfoto = 0; while($row = $result->fetch_assoc()){ if($row['timeline_type'] == "Post"){ $fotoid = $row['timeline_id']; ?> <div class="col-xs-12 col-md-6 col-lg-4 item"> <div class="timeline-block"> <div class="panel panel-default"> <div class="panel-heading"> <div class="media"> <div class="media-left"> <a href=""> <img src="<?php echo get_img_by_id($row['timeline_uid'], '50'); ?>" class="media-object"> </a> </div> <div class="media-body"> <a href="#" class="pull-right text-muted"><i class="icon-reply-all-fill fa fa-2x "></i></a> <a href=""><?php echo get_name_by_id($row['timeline_uid']); ?></a> <span><?php echo datum_formatiert($row['timeline_date']); ?></span> </div> </div> </div> <div class="panel-body"> <p><?php echo nl2br($row['timeline_text']); ?></p> </div> <div id="kommentare_<?php echo $fotoid; ?>"> <?php include "timeline_comments_comment.php"; ?> </div> </div> </div> </div> <?php }else if($row['timeline_type'] == "Foto"){ if($row['timeline_foto'] != $lastfoto){ $lastfoto = $row['timeline_foto']; ?> <div class="col-xs-12 col-md-6 col-lg-4 item"> <div class="timeline-block"> <div class="panel panel-default"> <div class="panel-heading"> <div class="media"> <div class="media-left"> <a href=""> <img src="<?php echo get_img_by_id($row['timeline_uid'], '50'); ?>" class="media-object"> </a> </div> <div class="media-body"> <a href="#" class="pull-right text-muted"><i class="icon-reply-all-fill fa fa-2x "></i></a> <a href=""><?php echo get_name_by_id($row['timeline_uid']); ?></a> <span><?php echo datum_formatiert($row['timeline_date']); ?></span> </div> </div> </div> <div class="panel-body"> <!--<p>Late Night Show Photos</p> --> <div class="timeline-added-images"> <?php $tlfoto = "SELECT * FROM social_timeline WHERE timeline_type = 'Foto' AND timeline_foto = '".$row['timeline_foto']."'"; $tlresult = $db->query($tlfoto); while($tlfoto = $tlresult->fetch_assoc()){ $fotoid = $tlfoto['timeline_foto']; echo "<a class=\"example-image-link\" href=\"usr_timeline_img/".$tlfoto['timeline_text']."\" data-lightbox=\"".$tlfoto['timeline_foto']."\"><img class=\"example-image\" src=\"usr_timeline_img/thumbnails/".$tlfoto['timeline_text']."\" width=\"80\" alt=\"photo\" /></a>"; } ?> </div> </div> <div id="kommentare_<?php echo $fotoid; ?>"> <?php include "timeline_comments_comment.php"; ?> </div> </div> </div> </div> <!-- col xs --> <?php } } } ?>
Code:<?php if(isset($_GET['sended'])){ $sqlid = $_GET['id']; //include "includes/_db.php"; //include "includes/_functions.php"; }else{ $sqlid = $fotoid; } if(isset($_GET['written'])){ include "includes/_db.php"; include "includes/_functions.php"; } $comment = "SELECT * FROM social_timeline_comments WHERE comment_postid = '".$sqlid."' ORDER BY comment_date DESC LIMIT 3"; $commentresult = $db->query($comment); $anzahlcomments = "SELECT * FROM social_timeline_comments WHERE comment_postid = '".$sqlid."' ORDER BY comment_date DESC"; $anzahl = $db->query($anzahlcomments); $anzahlcomments = $anzahl->num_rows; ?> <div class="view-all-comments"> <a type="button" data-toggle="modal" data-target="#weitere_<?php echo $sqlid; ?>"> <i class="fa fa-comments-o"></i> Zeige alle </a> <span><?php echo $anzahlcomments; ?> Kommentare</span> </div> <ul class="comments"> <?php while($comment = $commentresult->fetch_assoc()){ ?> <li class="media"> <div class="media-left"> <a href=""> <img src="<?php echo get_img_by_id($comment['comment_abs'],'50'); ?>" class="media-object"> </a> </div> <div class="media-body"> <div class="pull-right dropdown" data-show-hover="li"> <?php if($comment['comment_abs'] == $_COOKIE['ID']){ ?> <a href="#" data-toggle="dropdown" class="toggle-button"> <i class="fa fa-pencil"></i> </a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Edit</a></li> <li><a href="#" onclick="return deletecommentar(<?php echo $comment['comment_id']; ?>, <?php echo $sqlid; ?>);">Delete</a></li> </ul> </div> <?php } ?> <a href="" class="comment-author pull-left"><?php echo get_vorname_by_id($comment['comment_abs']); ?></a> <span><?php echo $comment['comment_text']; ?></span> <div class="comment-date"><?php echo datum_formatiert($comment['comment_date']); ?></div> </div> </li> <?php }* ?> <li class="comment-form"> <div class="input-group"> <span class="input-group-btn"> <a href="" class="btn btn-default"><i class="fa fa-photo"></i></a> </span> <form name="writecomment" action="" onSubmit="writeit(<?php echo $sqlid; ?>); return false;"> <input type="text" name="comment_<?php echo $sqlid; ?>" id="comment_<?php echo $sqlid; ?>" class="form-control" /> <input type="hidden" value="Foto" name="type" id="type"></form> </div> </li> </ul> <!-- Modal --> <?php $comment = "SELECT * FROM social_timeline_comments WHERE comment_postid = '".$sqlid."' ORDER BY comment_date DESC LIMIT 40"; $commentresult = $db->query($comment); $comment = $commentresult->fetch_assoc(); ?> <div class="modal fade" id="weitere_<?php echo $sqlid; ?>" tabindex="-1" role="dialog" aria-labelledby="meinModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Schließen"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="meinModalLabel"> <img src="<?php echo get_img_by_id($comment['comment_abs'],'50'); ?>" class="media-object"></h4> </div> <div class="modal-body"> <ul class="comments"> <?php while($comment = $commentresult->fetch_assoc()){ ?> <li class="media"> <div class="media-left"> <a href=""> <img src="<?php echo get_img_by_id($comment['comment_abs'],'50'); ?>" class="media-object"> </a> </div> <div class="media-body"> <div class="pull-right dropdown" data-show-hover="li"> <?php if($comment['comment_abs'] == $_COOKIE['ID']){ ?> <a href="#" data-toggle="dropdown" class="toggle-button"> <i class="fa fa-pencil"></i> </a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Edit</a></li> <li><a href="#" onclick="return deletecommentar(<?php echo $comment['comment_id']; ?>, <?php echo $sqlid; ?>);">Delete</a></li> </ul> </div> <?php } ?> <a href="" class="comment-author pull-left"><?php echo get_vorname_by_id($comment['comment_abs']); ?></a> <span><?php echo $comment['comment_text']; ?></span> <div class="comment-date"><?php echo datum_formatiert($comment['comment_date']); ?></div> </div> </li> <?php }* ?> </ul></div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button> </div> </div> </div> </div>
Ich bin mir sicher man kann das irgendwie in der Style Eigenschaft leicht verändern, hoffe ihr wisst weiter.
-
31-08-2016, 08:02 #2
AW: Divs überschneiden sich
Hast du nicht einen Link wo wir uns das live ansehen können?
-
31-08-2016, 10:42 #3
Doppel-As
- registriert
- 30-08-2015
- Beiträge
- 110
AW: Divs überschneiden sich
Doch klar:
snango.de/social/
und dann login:
user: test@test.de
pw: 123456
dann kommt ihr direkt auf die timeline
-
31-08-2016, 10:46 #4
Foren-Gott
- registriert
- 19-05-2008
- Beiträge
- 5.667
-
31-08-2016, 11:33 #5
Doppel-As
- registriert
- 30-08-2015
- Beiträge
- 110
AW: Divs überschneiden sich
Aber in wie fern meinst du das, die Struktur ist ja immer die gleiche, da sie ja durch den php include "timeline_comments_comment.php" realisiert wird, oder habe ich etwas falsch verstanden ?
Die Datei ändern sich ja nicht.
lediglich die Div wird "neu gefüllt" mit dieser Datei, bzw aktualisiert.
-
31-08-2016, 11:48 #6
Foren-Gott
- registriert
- 19-05-2008
- Beiträge
- 5.667
-
31-08-2016, 11:55 #7
Doppel-As
- registriert
- 30-08-2015
- Beiträge
- 110
AW: Divs überschneiden sich
ok, dass mit dem Dom übersteigt schon wieder etwas meine Fähigkeiten *schäm*
So sieht die Funktion aus, und eigentlich sollte er das gesamte Div einfach neu laden
Code:function writeit(id){ $.get('timeline_comment_write.php?id='+id+'&commi='+document.getElementById('comment_'+id).value+'&type='+document.getElementById('type').value, function(){ $('#kommentare_'+id).load('timeline_comments_comment.php?sended=true&written=true&id='+id).fadeIn("3000"); document.getElementById('comment_'+id).value = ""; //console.log(this) }); }
Im übrigen werden die Kommentare auch anders angezeigt. Wenn du auf die Seite gehts, und dir die Kommentare anschaust, in Chrome wurden die letzten erstellt, dann schaut es irgendwie falsch aus, bzw die Kommentare werden nur beim Maus over angezeigt, umgekehrt genau das gleiche ?!
Jetzt versteh ich nur noch Bahnhof *lach*Geändert von EvilBen (31-08-2016 um 11:57 Uhr)
-
31-08-2016, 12:25 #8
Foren-Gott
- registriert
- 19-05-2008
- Beiträge
- 5.667
-
31-08-2016, 17:26 #9
AW: Divs überschneiden sich
Verwendest du da isotope? Das musst du natürlich refreshen, da sonst die Positionen nicht aktualisiert werden.
-
01-09-2016, 08:56 #10
Doppel-As
- registriert
- 30-08-2015
- Beiträge
- 110
AW: Divs überschneiden sich
nein isotope verwende ich nicht kkapsner.
also das mit dem element untersuchen klappt nicht, da Firefox dann immer auf google weiterleitet, WARUM AUCH IMMER !??
-
01-09-2016, 11:20 #11
Foren-Gott
- registriert
- 19-05-2008
- Beiträge
- 5.667
-
01-09-2016, 13:44 #12
Doppel-As
- registriert
- 30-08-2015
- Beiträge
- 110
AW: Divs überschneiden sich
und wie genau suche ich nach diesen Elementen tsseh
-
01-09-2016, 17:07 #13
AW: Divs überschneiden sich
-
04-09-2016, 19:14 #14
Doppel-As
- registriert
- 30-08-2015
- Beiträge
- 110
AW: Divs überschneiden sich
@kkapsner ich nutze nur divs die via php schleife ausgegeben werden. Mit bootstrap quasi. Nutze isotope, zerschießt es mir das ganze design, scheint sich mit bootstrap klassen zu beißen
würde gerne mal wissen, wieso sich das ganze überschneidet... Habe jetzt alles durchsucht, und bin nicht auf den Fehler gekommen^^ habe vermutet dass irgendwo ein </div> fehlt oder so, aber negativ...Geändert von EvilBen (04-09-2016 um 19:23 Uhr)
-
05-09-2016, 09:13 #15
AW: Divs überschneiden sich
Ähnliche Themen
-
SideToggle / Divs verschieben sich
Von hypothenuse im Forum JavaScriptAntworten: 3Letzter Beitrag: 16-09-2015, 02:04 -
2 Scripte überschneiden sich :-(
Von thomaspruess im Forum JavaScriptAntworten: 8Letzter Beitrag: 01-12-2011, 17:56 -
Blocks sollen sich nicht überschneiden
Von ralfprivat im Forum CSS und (X)HTMLAntworten: 2Letzter Beitrag: 13-12-2009, 10:25 -
Divs überschreiben sich
Von Padimi im Forum CSS und (X)HTMLAntworten: 7Letzter Beitrag: 23-09-2008, 21:15 -
Prüfen ob sich divs berühren.
Von *chris im Forum JavaScriptAntworten: 9Letzter Beitrag: 03-05-2007, 17:37
Lesezeichen