Проблем с DIV и CSS

emcuemnecu · 30 Май 2012

Здравейте. Имам "малък" проблем на който решение не открих и поради тази причина се обръщам към вас за съдействие и помощ

Прилагам снимка:

Проблемни са ми емотиконите, показват се едно под друго а не трябва да са така!Проблем е "етикети" и те не трябва да са както е на снимката. Решение?

Ето и Css отговарящ за този DIV, в който се намира кода
[css]display:block;
overflow:hidden;
position:relative;
float:left;
margin-right:40px;
width:600px;

margin-top:15px;[/css]
Възможно ли да е в това проблем нещо ?

Vladkata · 30 Май 2012

[css]
display: inline;
[/css]

Виж това

emcuemnecu · 30 Май 2012

Няма промяна и с inline

mo7ika · 30 Май 2012

display:block; незнам за какво ти е това ако нямаш листи... ако имаш пак го махни и го замени само с float:left;
overflow:hidden; и това незнам за какво ти е при положение, че нямаш определена височина и никога нама да стигнат някакъв лимит за да започват да не се показват

Battleman · 30 Май 2012

float-ни самите емотиконки.

bytheway · 30 Май 2012

Покажи HTML-a на този div, ако е възможно.

По принцип <img> елемента е инлайн, така че всяка снимка трябва да застава една до друга, а не една под друга, освен ако това не се промени чрез CSS.

Но, ако дадеш малко повече код, мисля че ще решим проблема

emcuemnecu · 30 Май 2012

Ето това ми е кода в който емотиконите и етикети излизат както си искат.

PHP:

<div style='width: 600px; margin: 0 auto;'>
<?php
			if(isSet($_GET['mode'])) {
				$mode = (int)$_GET['mode'];
				$mode = str_replace ("-", "", $mode);
			} else {
				$mode = "";
			}
			if(in_array($mode, array('1'))) {
				$mode = $mode;
			} else {
				$mode = '';
			}
			switch($mode){
				case "1";
					if(isSet($_GET['id'])) {
						$id = (int)$_GET['id'];
						$id = str_replace ("-", "", $id);
					} else {
						$id = "";
					}
					$query = mysql_query("SELECT * FROM `music` WHERE id='{$id}';") or die(mysql_error());
					if ((mysql_num_rows($query) > 0)&& ($id != NULL)) {
						while($row = mysql_fetch_array($query)) {
							mysql_query ("UPDATE `music` SET views=views+1 WHERE id='{$id}';") or die(mysql_error());
							$id     = $row['id'];
							$author = $System->user($row['uid']);
							$title  = $row['title'];
							$etiketi= $System->tags($row['tags']);
							$date   = date("Y-m-d / h:m", $row['date']);
							if($row['locked'] == 0) {
								$lock = "oтключена";
							} else {
								$lock = "заключена";
							}
							if($row['image'] == NULL) {
								$picture = "pictures/default.jpg";
							} else {
								$picture = $row['image']."";
							}
							echo "Име: {$title} <br />Добавена на: {$date}<br />Добавена от: {$author}<br />
							<a href=\"../Music\">Върнете се назад за още Хип-Хоп звук от България</a><br />
							<img src=\"{$picture}\" alt=\"\" height=\"300px\" width=\"535px\" /> <br />
							<embed src=\"player.swf\" bgcolor=\"undefined\" allowscriptaccess=\"always\" allowfullscreen=\"false\" flashvars=\"file={$row['url']}&autostart=false&showeq=true&showstop=true\" height=\"19\" width=\"535\"><br />
							Етикети: {$etiketi}<br /><br /><br /><br />";
							if($row['locked'] == 0) {
							echo "
							 
					
							
							
							
							
							
							<script>
							function emoticon(text) {
							var txtarea = document.form1.message;
							text = ' ' + text;
								if (txtarea.createTextRange && txtarea.caretPos) {
									var caretPos = txtarea.caretPos;
									caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? caretPos.text + text + ' ' : caretPos.text + text;
									txtarea.focus();
								} else {
									txtarea.value += text;
									txtarea.focus();
								}
							}
							</script>
							<form method=\"post\" name=\"form1\">
							<a href=\"javascript:emoticon(':beer:');\"><img src=\"smilies/68.gif\" border=\"0\" ></a>
							<a href=\"javascript:emoticon(':alien:');\"><img src=\"smilies/alien.png\" border=\"0\" ></a>
							<a href=\"javascript:emoticon(':angry:');\"><img src=\"smilies/angry.png\" border=\"0\" ></a>
							<a href=\"javascript:emoticon(':blink:');\"><img src=\"smilies/blink.png\" border=\"0\" ></a>
							<a href=\"javascript:emoticon(':blush:');\"><img src=\"smilies/blush.png\" border=\"0\" ></a>
							<a href=\"javascript:emoticon(':cheerful:');\"><img src=\"smilies/cheerful.png\" border=\"0\" ></a>
							<a href=\"javascript:emoticon(':cool:');\"><img src=\"smilies/cool.png\" border=\"0\" ></a>
							<a href=\"javascript:emoticon(':cwy:');\"><img src=\"smilies/cwy.png\" border=\"0\" ></a>
							<a href=\"javascript:emoticon(':devil:');\"><img src=\"smilies/devil.png\" border=\"0\" ></a>
							<a href=\"javascript:emoticon(':dizzy:');\"><img src=\"smilies/dizzy.png\" border=\"0\" ></a>
							<a href=\"javascript:emoticon(':ermm:');\"><img src=\"smilies/ermm.png\" border=\"0\" ></a>
							<a href=\"javascript:emoticon(':getlost:');\"><img src=\"smilies/getlost.png\" border=\"0\" ></a>
							<a href=\"javascript:emoticon(':grin:');\"><img src=\"smilies/grin.png\" border=\"0\" ></a><br />
							<a href=\"javascript:emoticon(':happy:');\"><img src=\"smilies/happy.png\" border=\"0\" ></a>
							<a href=\"javascript:emoticon(':heart:');\"><img src=\"smilies/heart.png\" border=\"0\" ></a>
							<a href=\"javascript:emoticon(':kissing:');\"><img src=\"smilies/kissing.png\" border=\"0\" ></a>
							<a href=\"javascript:emoticon(':laughing:');\"><img src=\"smilies/laughing.png\" border=\"0\" ></a>
							<a href=\"javascript:emoticon(':ninja:');\"><img src=\"smilies/ninja.png\" border=\"0\" ></a>
							<a href=\"javascript:emoticon(':pinch:');\"><img src=\"smilies/pinch.png\" border=\"0\" ></a>
							<a href=\"javascript:emoticon(':pouty:');\"><img src=\"smilies/pouty.png\" border=\"0\" ></a>
							<a href=\"javascript:emoticon(':sad:');\"><img src=\"smilies/sad.png\" border=\"0\" ></a>
							<a href=\"javascript:emoticon(':shocked:');\"><img src=\"smilies/shocked.png\" border=\"0\" ></a>
							<a href=\"javascript:emoticon(':sick:');\"><img src=\"smilies/sick.png\" border=\"0\" ></a>
							<a href=\"javascript:emoticon(':sideways:');\"><img src=\"smilies/sideways.png\" border=\"0\" ></a>
							<a href=\"javascript:emoticon(':silly:');\"><img src=\"smilies/silly.png\" border=\"0\" ></a>
							<a href=\"javascript:emoticon(':sleeping:');\"><img src=\"smilies/sleeping.png\" border=\"0\" ></a><br />
							<a href=\"javascript:emoticon(':smile:');\"><img src=\"smilies/smile.png\" border=\"0\" ></a>
							<a href=\"javascript:emoticon(':tongue:');\"><img src=\"smilies/tongue.png\" border=\"0\" ></a>
							<a href=\"javascript:emoticon(':unsure:');\"><img src=\"smilies/unsure.png\" border=\"0\" ></a>
							<a href=\"javascript:emoticon(':w00t:');\"><img src=\"smilies/w00t.png\" border=\"0\" ></a>
							<a href=\"javascript:emoticon(':wassat:');\"><img src=\"smilies/wassat.png\" border=\"0\" ></a>
							<a href=\"javascript:emoticon(':whistling:');\"><img src=\"smilies/whistling.png\" border=\"0\" ></a>
							<a href=\"javascript:emoticon(':wink:');\"><img src=\"smilies/wink.png\" border=\"0\" ></a>
							<a href=\"javascript:emoticon(':wub:');\"><img src=\"smilies/wub.png\" border=\"0\" ></a>
							<br />
							<label for=\"username\">Потребител *</label> <input type=\"text\" name=\"username\" id=\"username\" /><br />
							<textarea name=\"comment\" id=\"message\" cols=\"85\" rows=\"7\"></textarea><br>
							<p>Писането на КИРИЛИЦА е задължително. Коментар на ЛАТИНИЦА ще бъде коригирван!</p><br />
							<p>Обидите към друг потребител са ЗАБРАНЕНИ, както и обидите към конкретен изпълнител.</p><br />
							<input type='submit' name='comment_submit' value='Коментирай'>
							</form>
							";
							if (isSet($_POST['comment_submit'])) {
								$username = (empty($_POST['username'])) ? '' : $_POST['username'];
								$comment = (empty($_POST['comment'])) ? '' : $_POST['comment'];
								$time = time();
								if ($comment!=NULL) {
									if ($username!=NULL) {
										mysql_query("INSERT INTO `comments` SET item='{$id}', comment='{$comment}', avtor='{$username}', time='{$time}'") or die (mysql_error());
										echo "Коментара е добавен успешно.";
									} else {
										echo "Не сте въвели потребител.";
									}
								} else {
									echo "Не сте написали коментар.";
								}
							}
							} else {
								echo "Тази песен не може да бъде коментирана.";
							}
							$query_com = mysql_query("SELECT * FROM `comments` WHERE item='{$id}';")or die(mysql_error());
							$num = mysql_num_rows($query_com);
							echo "<br />Коментари: {$num}<br /><table>";
							while($row_com = mysql_fetch_array($query_com)) {
								$date_com  = date("Y-m-d / h:m:s", $row_com['time']);
								$comment   = $System->emot($row_com['comment']);
								echo "
								<tr>
									<td width=\"150px\" style=\"border: 1px solid #f5f5f5;\"><b>{$row_com['avtor']}</b><br />({$date_com})</td>
									<td style=\"border: 1px solid #f5f5f5;\">{$comment}</td>
								</tr>";
							}
							echo "</table>";
						}
					} else {
						echo "Песента не съществува..";
					}
					echo '
';
				break;
				default;
					$query = mysql_query("SELECT title, id, uid, views, date, image FROM `music` ORDER BY id DESC;")or die(mysql_error());
					if(mysql_num_rows($query) > 0) {
						echo "<table style='border: 1px solid #f5f5f5;'>
						<tr>
							<td style='border: 1px solid #f5f5f5;'>#</td>
							<td width=\"120px\" style='border: 1px solid #f5f5f5;'>Снимка</td>
							<td width=\"250px\" style='border: 1px solid #f5f5f5;'>Заглавие</td>
							<td width=\"60px\" style='border: 1px solid #f5f5f5;'>Коментари</td>
							<td width=\"60px\" style='border: 1px solid #f5f5f5;'>Слушана</td>
						</td>";
						$i='0';
						while($row = mysql_fetch_array($query)) {
							$title     = $row['title'];
							$title_url = $System->ctol__($title);
							$num_com = $System->numcom($row['id']);
							$i++;
							if($row['image'] == NULL) {
								$picture = "pictures/default.jpg";
							} else {
								$picture = $row['image']."";
							}
							echo "
							<tr>
							<td>{$i}</td>
							<td style='border: 1px solid #f5f5f5;'><img src=\"{$picture}\" width=\"120px\" height=\"90px\" alt=\"\" /></td>
							<td><a href=\"index.php?mode=1&id={$row['id']}\" title=\"{$title}\">{$title}</a></td>
							
							<td style='text-align: center;'>{$num_com}</td>
							<td style='text-align: center;'>{$row['views']}</td>
							</tr>";
						}
						$i='0';
						echo "</table>";
					} else {
						echo "Все още няма добавени песни.";
					}
				break;
			}
			?>

Който прави връзка с по-горния споменат от мен CSS

bytheway · 31 Май 2012

Сори, но кода ти е малко като миш-маш

Комбинираш CSS, HTML, php и JavaScript в едно и от всичко това имаш страшно много ненужни повторения и излишно усложняване.

Например border=0, който слагаш към всяка емотиконка. Използвай външен CSS стил, а не инлайн. Така става много по-лесно.

Също така img тага не ти е правилно затворен. Този елемент се затваря с дясно наклонена черта преди края на тага <img src="..." />

Също така не е нужно да echo целия HTML код. Можеш да го направиш по следния начин, което дава същия резултат:

PHP:

<?php 
     if($row['locked'] == 0) {
?>
     <form method="post" name="form1">
     <a href="javascript:emoticon(':beer:');"><img src="smilies/68.gif" border="0" /></a>
     .... останала част на кода
<?php
     }
?>

Имам сайт, в който пиша уроци по HTML и CSS. Разгледай го. Надявам се, че ще научиш някои неща.

vikay · 5 Юни 2012

Я пробвай да го направиш с табличка и после с border: 0px ?

Проблем с DIV и CSS

emcuemnecu

Registered

Vladkata

Registered

emcuemnecu

Registered

mo7ika

Registered

Battleman

Registered

bytheway

Registered

emcuemnecu

Registered

bytheway

Registered

vikay

Registered