Неприятно разтягане на лист

N

NumseR

Registered
Ето първо демо на дизайна, който подготвям.


Когато добавя още radio бутони в анкетата статията със Спайдър-мен се разтяга надолу. Защо се получава това при положение, че между анкетата и статията няма нищо общо ?

Ето малко код:

Статии
HTML: 
<div id="latest-posts">
 
<ul id="latest-post-list"> 

<li class="clearfix">
   <img class="clearfix" src="img/latest4.gif" /> 
          
          <span class="list-info clearfix">
                <h1><a href="#">Zaglavie</a></h1>
                <p class="date-day">data</p>
                <p>Opisanie na statiqta</p>
                <p class="read-more"><a href="#">Read More...</a></p>
           </span>
			
</li>
</ul>
</div>


Radio бутони
HTML: 
 <div class="popular-posts-bg  pool">
			<div class="red-sticker">
				<div class="little-triangle"></div>
				<h2>Pool</h2> 
			</div>
		<h1>Who is stronger: Superman or Goku ?</h1>
		<form action="" method="">
		<fieldset> 
		<input type="radio" class="radio"/><label>dsa</label><br />
		<input type="radio" class="radio"/><label>dsa</label><br />
		<input type="radio" class="radio"/><label>dsa</label><br />
		<input type="radio" class="radio"/><label>dsa</label><br />
		<input type="radio" class="radio"/><label>dsa</label><br />
		</fieldset>
		</form>
		</div>


Статии

[css].list-info {width: 48%; float: left;}
.list-info h1 {margin: 10px 0 0 10px; font-family: haettenschweiler, arial narrow, arial, sans-serif; font-size: 300%; text-transform: uppercase;}
.list-info .date-day {color: #b9b8b8; font-size: 100%; margin: 0 0 0 10px;}
.list-info p {color: #000; font-size: 100%; margin: 25px 0 0 10px;}
.latest-posts-headline {font-family: arial, sans-serif; font-size: 20px; color: #353535; margin: 270px 0 0 10px;}

#latest-post-list li {width: 100%; border-bottom: 1px solid #dcdcdc; margin-left: 10px; padding-bottom: 20px;}

#left-container h1 a:hover {color: #355c7d;}
#left-container h1 a {line-height: 1;}
#latest-post-list li:last-child {border: none;} [/css]

Radio бутони

[css] .pool {margin-top: 30px;}
.pool h2 {margin-left: 17px;}
.pool fieldset {margin: 20px 0 0 10px; display: inline;}
[/css]
 
На мозила въобще не излиза добре !
На хром е по добре !
Мести се не горната статия а долната отива надолу -мисля че заради марджина!
 
Дам възможно е да има и други проблеми под различните резолюции понеже за първи път ще правя responsive дизайн, а съм все още в началото и не съм го дооправял.

Иначе за кой margin става на въпрос ? :)
 
Просто като добавяш нови елементи увеличаваш цялото и марджина избутва долния елемент надолу !
 
Ако въпросният див го направиш absolute и си го наместиш със марджини няма ли да стане?
 
Да, с absolute се оправи, но не съм сигурен дали това е най-правилният начин за разрешаването на проблема
 
Не знам как точно си направил дивовете, но щом ти се получава едва ли си го направил така:

див за неща | див с анкета

Т.е., да разделиш страницата на два дива - лява и дясна част. Така лявата и дясната част няма да имат нищо общо и няма да ти се разместват. Обаче тогава идва един друг проблем - спайдърмена и анкетата няма да са на едно ниво (няма горните им краища да съвпадат). Затова направи дивовете така:
Див с неща преди спайдърмена ляво | Див с неща преди спайдърмена дясно
Див за спайдърмена | Анкета
Див след спайдърмена | Тук не правиш нищо - анкетата си продължава надолу, в същия този див са ти дясната част за след акетата.(т. е. това е дива с анкетата.

Така става малко оплетено може би, но ако не го разбираш можеш просто да направиш така:
Вариант 2

Див с анкетата:
Код: 
Въпрос на анкетата<br />
<div style="
маргини, височини и т.н. ;
overflow:auto;
">
<input type=radio дъра-бъра />Нещо 1
<input type=radio дъра-бъра />Нещо 2
<input type=radio дъра-бъра />Нещо 3
</div>
Това ще направи да прави скролерче само за възможните отговори, ако ти става много дълго(или много широко).Нещо такова:

Въпрос
Нещо1 | скро-
Нещо2 | лер
Нещата, които правят височината по-голяма от зададената, няма да се виждат и ще се скролват надолу, за да се видят.

НО! Ако не му зададеш конкретно height пак ще ти се разтяга. Виж колко ти е висок спайдърмена например, и му задай същата височина
 
NumseR каза:
Да, с absolute се оправи, но не съм сигурен дали това е най-правилният начин за разрешаването на проблема
Увеличете...
Правиш го absolute и го разтягаш колкото си искаш и си го поставяш където си поискаш :)
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе