Отдалечаване на дивове

Y

ystefanov

Registered
Разположил съм два текста в 2 отделни дива, един под друг. Искам последния ред от 1-вия див на върви последователно след първия текст от 2-рия див. Въпреки че съм прилепил плътно и задал отстъпи по нула, между тях се вижда растояние. Има ли начин с дивове текста да се направи да върви последователно (има почти цял ред разстояние)?
 
на долния див слагаш margin-top:-Xpx; където вместо Xpx си го наместваш :)
 
ystefanov каза:
Разположил съм два текста в 2 отделни дива, един под друг. Искам последния ред от 1-вия див на върви последователно след първия текст от 2-рия див. Въпреки че съм прилепил плътно и задал отстъпи по нула, между тях се вижда растояние. Има ли начин с дивове текста да се направи да върви последователно (има почти цял ред разстояние)?
Увеличете...
Малко код ако дадеш няма да е хич зле. Как да ти гадаем какво си направил точно.
 
Код

HTML: 
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>Site</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" > 
   	
    
    <style type="text/css">
	 #container {width:993px; height:auto; font-family:Verdana, Geneva, sans-serif; font-size:12px; margin:0px auto;}
	.text1 { width:auto; clear: both; text-align: justify; padding: 15px 20px 0px 20px; text-indent: 30px;}
	.text2 {width: 300px; float: left; text-align: justify; padding: 0px 0px 0px 20px;}
	.text3 {width:auto; text-align: justify;	 padding: 0px 20px 4px 20px;}
			
	.img{background-image: url(http://ziptravel.lt/uploads/news/1078.jpg); float:right; margin: 0px 32px 0px 0px; width:641px; height:486px;}	</style>

	</head><body>
	

    <div id="container">
    <div style="clear:both"></div>
	<div class="text1"><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem  Ipsum has been the industry's standard dummy text ever since the 1500s, when an  unknown printer took a galley of type and scrambled it to make a type specimen  book. It has survived not only five centuries, but also the leap into  electronic typesetting, remaining essentially unchanged. It was popularised in  the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,  and more recently with desktop publishing software like Aldus PageMaker  including versions of Lorem Ipsum.</div>
	<div class="img"></div>
	<div class="text2"><p><p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem  Ipsum has been the industry's standard dummy text ever since the 1500s, when an  unknown printer took a galley of type and scrambled it to make a type specimen  book. It has survived not only five centuries, but also the leap into  electronic typesetting, remaining essentially unchanged. It was popularised in  the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,  and more recently with desktop publishing software like Aldus PageMaker  including versions of Lorem Ipsum.
	<p><p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem  Ipsum has been the industry's standard dummy text ever since the 1500s, when an  unknown printer took a galley of type and scrambled it to make a type specimen  book. It has survived not only five centuries, but also the leap into  electronic typesetting, remaining essentially unchanged. It was popularised in  the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,  and more recently with desktop publishing software like Aldus PageMaker  including versions of Lorem Ipsum.    
	<p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem  Ipsum  simply dummy text of the printing and typesetting industry. Lorem  Ipsum simply dummy text of the printing and typesetting industry.mmy text of the printing and <strong>Това разстояние</strong> <strong>долу</strong></div>
	 <div style="clear:both"></div>
	<div class="text3"><strong>Това разстояние</strong> <strong>горе</strong> in  the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,  and more recently with desktop publishing software like Aldus PageMaker  including versions of Lorem Ipsum.
	  <p><p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem  Ipsum has been the industry's standard dummy text ever since the 1500s, when an  unknown printer took a galley of type and scrambled it to make a type specimen  book. It has survived not only five centuries, but also the leap into  electronic typesetting, remaining essentially unchanged. It was popularised in  the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,  and more recently with desktop publishing software like Aldus PageMaker  including versions of Lorem Ipsum.
		</div>
	 
	</div>   </div> 
	</body>
	</html>
 
HTML: 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Site</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" > 
	<style type="text/css">
		#container {width:993px; height:auto; font-family:Verdana, Geneva, sans-serif; font-size:12px; margin:0px auto;}
		.img{background-image: url(http://ziptravel.lt/uploads/news/1078.jpg); float:right; margin: 0px 32px 0px 0px; width:641px; height:486px;}
	</style>
</head>
<body>
	<div id="container">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam convallis turpis nec quam imperdiet a rhoncus velit tempus. Duis lorem lorem, fringilla eleifend sollicitudin ut, varius ut est. Pellentesque eleifend lacus ut nisi sagittis non congue nunc vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lobortis fermentum vestibulum. Nullam vitae lacus lacus. Aenean sollicitudin massa eros, eu pellentesque sapien. Fusce eget leo tincidunt ligula vulputate congue nec molestie enim. Nulla sed orci quis risus mattis porta. Pellentesque quis nisi at odio sagittis dignissim. Donec ut vulputate ante. 
		<div class="img"></div>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam convallis turpis nec quam imperdiet a rhoncus velit tempus. Duis lorem lorem, fringilla eleifend sollicitudin ut, varius ut est. Pellentesque eleifend lacus ut nisi sagittis non congue nunc vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lobortis fermentum vestibulum. Nullam vitae lacus lacus. Aenean sollicitudin massa eros, eu pellentesque sapien. Fusce eget leo tincidunt ligula vulputate congue nec molestie enim. Nulla sed orci quis risus mattis porta. Pellentesque quis nisi at odio sagittis dignissim. Donec ut vulputate ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam convallis turpis nec quam imperdiet a rhoncus velit tempus. Duis lorem lorem, fringilla eleifend sollicitudin ut, varius ut est. Pellentesque eleifend lacus ut nisi sagittis non congue nunc vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lobortis fermentum vestibulum. Nullam vitae lacus lacus. Aenean sollicitudin massa eros, eu pellentesque sapien. Fusce eget leo tincidunt ligula vulputate congue nec molestie enim. Nulla sed orci quis risus mattis porta. Pellentesque quis nisi at odio sagittis dignissim. Donec ut vulputate ante. 
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam convallis turpis nec quam imperdiet a rhoncus velit tempus. Duis lorem lorem, fringilla eleifend sollicitudin ut, varius ut est. Pellentesque eleifend lacus ut nisi sagittis non congue nunc vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lobortis fermentum vestibulum. Nullam vitae lacus lacus. Aenean sollicitudin massa eros, eu pellentesque sapien. Fusce eget leo tincidunt ligula vulputate congue nec molestie enim. Nulla sed orci quis risus mattis porta. Pellentesque quis nisi at odio sagittis dignissim. Donec ut vulputate ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam convallis turpis nec quam imperdiet a rhoncus velit tempus. Duis lorem lorem, fringilla eleifend sollicitudin ut, varius ut est. Pellentesque eleifend lacus ut nisi sagittis non congue nunc vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lobortis fermentum vestibulum. Nullam vitae lacus lacus. Aenean sollicitudin massa eros, eu pellentesque sapien. Fusce eget leo tincidunt ligula vulputate congue nec molestie enim. Nulla sed orci quis risus mattis porta. Pellentesque quis nisi at odio sagittis dignissim. Donec ut vulputate ante. 
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam convallis turpis nec quam imperdiet a rhoncus velit tempus. Duis lorem lorem, fringilla eleifend sollicitudin ut, varius ut est. Pellentesque eleifend lacus ut nisi sagittis non congue nunc vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lobortis fermentum vestibulum. Nullam vitae lacus lacus. Aenean sollicitudin massa eros, eu pellentesque sapien. Fusce eget leo tincidunt ligula vulputate congue nec molestie enim. Nulla sed orci quis risus mattis porta. Pellentesque quis nisi at odio sagittis dignissim. Donec ut vulputate ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam convallis turpis nec quam imperdiet a rhoncus velit tempus. Duis lorem lorem, fringilla eleifend sollicitudin ut, varius ut est. Pellentesque eleifend lacus ut nisi sagittis non congue nunc vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lobortis fermentum vestibulum. Nullam vitae lacus lacus. Aenean sollicitudin massa eros, eu pellentesque sapien. Fusce eget leo tincidunt ligula vulputate congue nec molestie enim. Nulla sed orci quis risus mattis porta. Pellentesque quis nisi at odio sagittis dignissim. Donec ut vulputate ante. 
		<div style="clear:both"></div>
	</div>
</body>
</html>
 
Пич, един съвет да ти дам. Другия път CSS'а го слагай в отделен файл, защото за сега няма проблеми, като имаш по-малко код. Обаче като тръгнеш да правиш нещо по-голямо...ще е мазало. И го подреждай така

Код: 
#divname {
style:Xpx;
style:Xpx;
style:Xpx;
}

Ще видиш ще е супер удобно ;)
 
IvanAdamov каза:
Пич, един съвет да ти дам. Другия път CSS'а го слагай в отделен файл, защото за сега няма проблеми, като имаш по-малко код. Обаче като тръгнеш да правиш нещо по-голямо...ще е мазало. И го подреждай така

Код: 
#divname {
style:Xpx;
style:Xpx;
style:Xpx;
}

Ще видиш ще е супер удобно ;)
Увеличете...

Човека е дал така цсс-а просто за демото :).

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

Back
Горе