Проблем с поле

[pain]

Здравейте! Заглавието не е много точно, но ще се опитам тук да обесня. Пиша един сайт, но възникна проблем с едно поле, в което слагам css. Ето картинка да видите :


Вижте как уроците излизат нагоре .. Ето кода да видите(ламерски е но сега се уча 🙂 ) :
html + php :

<div id="last-tutorials"></div>
<div id="last-name">Последно Добавени Уроци</div>
<div id="last-body">
<div id="last-content">
<?php
include "uroci/config.php";
$sql = "SELECT * FROM novina ORDER BY id ASC LIMIT 0,5";
$result = mysql_query($sql) or die (mysql_error());
echo "<table width='400'>";

while($data = mysql_fetch_assoc($result)) {
$sql = "SELECT * FROM cats WHERE id='$data[kategoria]'";
$res = mysql_query($sql) or die (mysql_error());
$row = mysql_fetch_assoc($res);
echo "<tr>
<td style='border: 1px solid #ff0000; background: #ccc; font-weight: bold;'>Заглавие: $data[title] Категория: $row[kategoria]</td>
</tr>
<tr>
<td style='border: 1px solid #ababab;'>Описание: $data[opisanie]</td>
</tr>
<tr>
<td align='right' style='border: 1px dashed red;'><a href='uroci/read_more.php?novina=$data[id]'>Прочети нататък</a>";

if($userdata['user_level'] == 1)
{
echo "
<a href='edit.php?id=$data[id]'>Редактирай</a>
<a href='uroci/delete.php?id=$data[id]'>Изтрий</a>
";
}
echo"
</td></tr>";
}
echo "</table>";
?>
</div>
</div>
<div id="lastfooter"></div>

CSS :

#last-tutorials {
position:absolute;
background:url('images/last.png');
width:500px;
height:29px;
left:250px;
top:60px;
}

#last-name {
position:absolute;
left:380px;
top:66px;
font-size:14px;
text-transform:uppercase;
color:#FFF;
font-weight:bold;
font-family:Helvetica,Arial,Verdana,sans-serif;
text-align:center;
}

#last-body {
background:url('images/statii.png');
width:510px;
margin-top:-269px;
margin-left:14px;
}

#lastfooter {
background:url('images/footer2.png');
width:510px;
height:33px;
margin-left:14px;
}

#last-content {
width:480px;
margin-left:30px;
height:auto;
padding-top:10px;
}

 

[fani7117]

Re: Проблем с поле

Пробвай да махнеш това от css-a:
margin-top:-269px;

или ако не стане пробвай така:

#last-body {
clear:both;
background:url('images/statii.png');
width:510px;
margin-top:-269px;
margin-left:14px;
}

всъщност .... какво искаш да направиш?

 

[pain]

Re: Проблем с поле

Намалих margina на 127px; и стана , но когато се добави по-голямо описание на урок, пак отива нагоре.. трябва да се заступори някакси 🙁

Искам уроците да си излизат в полето а не над него ..

 

[sami]

Re: Проблем с поле

Когато имаш position:absolute, някъде трябва да си задал position:relative, за да знае спрямо кой див да мери.

 

[Kompota]

Re: Проблем с поле

По принцип избягвай абсолютното позициониране (има ситуации, в които може да се използва, ама не трябва така безразборно). Махни positioning от всички div-ове и ги направи примерно float:left (може с едно правило за div), така ще се наредят един под друг.

 

[pain]

Re: Проблем с поле

Благодаря на всички. Дадохте ми идея и се получи :

<div id="last">
<div id="last-tutorials"></div>
<div id="last-name">Последно Добавени Уроци</div>
<div id="last-body">
<div id="last-content">
<?php
include "uroci/config.php";
$sql = "SELECT * FROM novina ORDER BY id DESC LIMIT 0,5";
$result = mysql_query($sql) or die (mysql_error());
echo "<table width='400'>";

while($data = mysql_fetch_assoc($result)) {
$sql = "SELECT * FROM cats WHERE id='$data[kategoria]'";
$res = mysql_query($sql) or die (mysql_error());
$row = mysql_fetch_assoc($res);
echo "<tr>
<td style='border: 1px solid #ff0000; background: #ccc; font-weight: bold;'>Заглавие: $data[title] Категория: $row[kategoria]</td>
</tr>
<tr>
<td style='border: 1px solid #ababab;'>Описание: $data[opisanie]</td>
</tr>
<tr>
<td align='right' style='border: 1px dashed red;'><a href='uroci/read_more.php?novina=$data[id]'>Прочети нататък</a>";

if($userdata['user_level'] == 1)
{
echo "
<a href='edit.php?id=$data[id]'>Редактирай</a>
<a href='uroci/delete.php?id=$data[id]'>Изтрий</a>
";
}
echo"
</td></tr>";
}
echo "</table>";
?>
</div>
</div>
<div id="lastfooter"></div>
</div>

#last-tutorials {
position:relative;
background:url('images/last.png');
width:500px;
height:29px;
margin-left:25px;
}

#last-name {
position:relative;
font-size:14px;
text-transform:uppercase;
color:#FFF;
font-weight:bold;
font-family:Helvetica,Arial,Verdana,sans-serif;
text-align:center;
margin-top:-22px;
}

#last-body {
background:url('images/statii.png');
width:510px;
margin-top:5px;
margin-left:20px;
}

#last-content {
padding-top:10px;
margin-left:25px;
width:480px;
}

#lastfooter {
background:url('images/footer2.png');
width:510px;
height:33px;
margin-left:20px;
}

#last {
position:absolute;
top:60px;
}