сss, проблема с "дивами"(позиционирование)

f0rzik · January 15, 2013

Привет всем, подскажите, есть вопрос:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>[/background][/size][/font]
[font=Verdana, Tahoma, Arial, 'Trebuchet MS', sans-serif, Georgia, Courier, 'Times New Roman', serif][size=3][background=rgb(250, 250, 250)]li {
    list-style-type: none;
}
ul {
    margin-left: 0;
    padding-left: 0;
}
.full{
    width: 800px;
    margin: 0 auto;
}[/background][/size][/font]
[font=Verdana, Tahoma, Arial, 'Trebuchet MS', sans-serif, Georgia, Courier, 'Times New Roman', serif][size=3][background=rgb(250, 250, 250)].imaging{
position: fixed;
    right: 500px;
    top: 10%;
    padding: 10px;
}
.block4{
width: 200px;
}
.block5{
width: 300px;
}[/background][/size][/font]
[font=Verdana, Tahoma, Arial, 'Trebuchet MS', sans-serif, Georgia, Courier, 'Times New Roman', serif][size=3][background=rgb(250, 250, 250)]#menubar
{
position: fixed;
    right: 700px;
    padding: 10px;
}
.menu_item
{
margin: 0px auto;
margin-right: 10px;
float: right;
}
.text1{
top:1000px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">[/background][/size][/font]
[font=Verdana, Tahoma, Arial, 'Trebuchet MS', sans-serif, Georgia, Courier, 'Times New Roman', serif][size=3][background=rgb(250, 250, 250)]</head>
<body>
</br>
</br>
<div class = "full" >
	    <div class="imaging">
		    <img src="img.jpg" id="menu">
	    </div>
	    <div class="block4">
		    <ul>
		    <li><input type="button" id="btnl1" style="background: #F6F6f6;" value="1" ></li>
		    <li><input type="button" id="btnl2" style="background: #F6F6f6;" value="2"></li>
		    <li><input type="button" id="btnl3" style="background: #F6F6f6;" value="3"></li>
		    <li><input type="button" id=btnl4 style="background: #F6F6f6;" value="4"></li>
		    </ul>
	    </div>
	    <div class="block5">
		    <ul>
		    <li><input type="button" id="btnr1" style="background: #F6F6f6;" value="r1"></li>
		    <li><input type="button" id="btnr2" style="background: #F6F6f6;" value="r2"></li>
		    <li><input type="button" id="btnr3" style="background: #F6F6f6;" value="r3"></li>
		    <li><input type="button" id="btnr4" style="background: #F6F6f6;" value="r4"></li>
		    </ul>
	    </div>[/background][/size][/font]
[font=Verdana, Tahoma, Arial, 'Trebuchet MS', sans-serif, Georgia, Courier, 'Times New Roman', serif][size=3][background=rgb(250, 250, 250)]</br>
	    <div id="menubar" >
	    <div  class="menu_item">
		    <ul>
		    <li><input type="button" id="btn3" style="background: #F6F6f6;" value="3"></li>
		    <li><input type="button" id="btn6" style="background: #F6F6f6;" value="6"></li>
		    <li><input type="button" id="btn9" style="background: #F6F6f6;" value="9"></li>
		    </ul>
	    </div>
	    <div  class="menu_item">
		    <ul>
		    <li><input type="button" id="btn2" style="background: #F6F6f6;" value="2"></li>
		    <li><input type="button" id=btn5 style="background: #F6F6f6;" value="5"></li>
		    <li><input type="button" id="btn8" style="background: #F6F6f6;" value="8"></li>
		    <li><input type="button" id="btn0" style="background: #F6F6f6;" value="0"></li>
		    </ul>
	    </div>
	    <div  class="menu_item">
		    <ul>
		    <li><input type="button" id="btn1" style="background: #F6F6f6;" value="1"></li>
		    <li><input type="button" id="btn4" style="background: #F6F6f6;" value="4"></li>
		    <li><input type="button" id=btn7 style="background: #F6F6f6;" value="7"></li>
		    </ul>
	    </div>
	    </div>
<div class="text1">
блаблаблаблаблаблаблаблаблаблаблаблаблаблаблабла
блаблаблаблаблаблаблаблаблаблаблаблаблаблаблабла
блаблаблаблаблаблаблаблаблаблаблаблаблаблаблаблаб
</div>
</div>
</body>
</html>[/background][/size][/font]
[font=Verdana, Tahoma, Arial, 'Trebuchet MS', sans-serif, Georgia, Courier, 'Times New Roman', serif][size=3][background=rgb(250, 250, 250)]

как хочу видеть: сверху по средине:<div class="imaging">, по бокам от него : <div class="block4"> и <div class="block5"> (соответственно слева и справо), под <div class="imaging"> находится <div id="menubar" >, а под ним <div class="text1">.

что не получается: блоки или разьезжаются, и <div class="text1"> упорно не хочет спускаться вниз.

Noraad · January 15, 2013

Может вам это поможет?

http://csstemplater.com/

http://xhtml.ru/instr/3col_creator/

f0rzik · January 15, 2013

да не очень, но спасибо.,делал оглядываясь на сгенерируемые шаблоны и все равно <div class="text1"> не на месте.

Noraad · January 15, 2013

тогда может выложите на jsfiddle.net и дадите здесь ссылку? так вам быстрее помогут, я думаю.

f0rzik · January 15, 2013

тогда может выложите на jsfiddle.net и дадите здесь ссылку? так вам быстрее помогут, я думаю.

не знал про такой сервис.

http://jsfiddle.net/fuzBu/

boo · January 15, 2013

Ставь ширину для .imaging

Потом ставь значение left: 50% и margin-left: (ширина / 2) с отрицательным значением.

Тогда .imaging выравнивания по центру. А блокам 4 и 5 задавай float: left и right соответственно.

и position: relative выравнивай.

f0rzik · January 15, 2013

Ставь ширину для .imaging
Потом ставь значение left: 50% и margin-left: (ширина / 2) с отрицательным значением.
Тогда .imaging выравнивания по центру. А блокам 4 и 5 задавай float: left и right соответственно.
и position: relative выравнивай.

что-то все влево сдвинулось.

http://jsfiddle.net/fuzBu/1/

Edited January 15, 2013 by f0rzik

boo · January 15, 2013

Ну тогда тебе сюда

Не охото разжёвывать.

Sign In

сss, проблема с "дивами"(позиционирование)

Question

f0rzik

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

Noraad

Link to comment

Share on other sites

f0rzik

Link to comment

Share on other sites

Noraad

Link to comment

Share on other sites

f0rzik

Link to comment

Share on other sites

boo

Link to comment

Share on other sites

f0rzik

Link to comment

Share on other sites

boo

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information