Позициониране на елементи

[nbacool2]

Здравейте. Как мога да накрам текста и изображенията да се позиционират едно спрямо друго. Мисля, че трябва да се получи с float , но като го приложа всичко се обърква. Ето кода и ето как излиза под Chrome

<html>
	<head>
		<style type='text/css'>
			#main {
				margin: 10px 10px 0 10px;
				width: 650px;
				height: 1000px;
				background-color: rgb(238, 238, 238);
				border-radius: 10px;
				-moz-border-radius: 10px;
				-webkit-border-radius: 10px;
			}
			h1 {
				font-weight: lighter;
				font-family: serif, Arial, monospace;
				padding-top: 15px;
				margin-left: 20px;
			}
			#content {
				padding-top: 60px;
				padding-left: 30px;
				padding-right: 15px;
			}
			img {
				display: inline-block;
				width: 194px;
				height: 126px;
			}
			.article {
				height:150px;
				padding: 20px;
				margin-bottom: 60px;
				background-color: white;
			}
			p {
				margin-left: 30px;
				position: relative;
				top: -90px;
				height: 50px;
				width: 330px;
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<div id='main'>
			<h1>Music Categories</h1>
			<div id='content'>
				<div class='article'>
				<img src='one.png' /><p>Even more websites all about website templates on <strong>Just Website Template</strong>.</p>
				</div>
				<div class='article'>
				<img src='two.png' /><p>If you're looking for beautiful and professionally made templates you can find them at <strong>Template Beauty</strong>.</strong></p>
				</div>
				<div class='article'>
				<img src='three.png' /><p>You can remove any link to our websites from this template you're free to use the template without linking back to us.</p>
				</div>
			</div>
		</div>
	</body>
</html>

 

[exec]

Картинката и параграфа имат float: left, параграфа има промени в margin. Тествах само с Firefox

[css]
#main {
margin: 10px 10px 0 10px;
width: 650px;
height: 1000px;
background-color: rgb(238, 238, 238);
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
h1 {
font-weight: lighter;
font-family: serif, Arial, monospace;
padding-top: 15px;
margin-left: 20px;
}
#content {
padding-top: 60px;
padding-left: 30px;
padding-right: 15px;
}
img {
float: left;
width: 194px;
height: 126px;
}
.article {
height:150px;
padding: 20px;
margin-bottom: 60px;
background-color: white;
}
p {
margin: 0 10px;
float: left;
height: 50px;
width: 330px;
}
[/css]

 

[M1tq96]

направи го с таблица ... тва е задалжително , не приемай новите зарибявки сичко да ти е само див-ове , щи дам пример ..

<table cepadding='3' cellspacing='3'>
   <tr>
           <td><img src=''> </td>
           <td><div id='#cont'> </div></td>
    </tr>
</table>

Ето как ще стане в цикъл ако не си работил с таблици преди ..

<?php
echo "<table cepadding='3' cellspacing='3'>";
$query()// sql
while($r = mysql_fetch_array($query))
{
 echo "
   <tr>
           <td><img src=''> </td>
           <td><div id='#cont'> </td>
    </tr>


";
}
echo "</table>";
?>

Това е дано съм ти помогнал , искам само да кажа, че и аз имах същият проблем когато започвах ....

 

[nbacool2]

Благодаря на exec +1 съпорт

 

[god_of_cs]

M1tq96, искам само да кажа, че таблици винаги използвам в краен вариант или нещо като класация от рода на:

1. Христо 5 точки
2. Пешо 4 точки
3. Иво 3 точки

и така нататък. По- хубаво с div отколкото с таблица. Все пак ако бъркам нека някой по- опитен и стар в тази сфера да ме поправи.

 

[exec]

Не бъркаш god_of_cs, точно така трябва да се прави. Тези данни които показваш са така наречените "таблични данни" и table тага е измислен точно за тях. Има си специални тагове за заглавния ред (thead) както и за последния ред (tfoot) които си имат своето приложение конкретно и само за таблични данни.

Сайтовете се правеха с таблици много, много, много отдавна, когато CSS не съществуваше. При правилно структуриран семантичен код, с малко промени в CSS могат да се направят варианти на сайта за различни устройства - телефони, таблети и т.н. Ако използваш таблица, губиш всички възможни предимства.

А в дългосрочен план - не че оставаш без работа, въобще не те взимат никъде