Кодиране на сайт

sn1p3r

Registered
Здравейте бях направил такава тема, но дадох точка за благодарност и вече не мога да пиша.

Проблема ми е следния: Не става да направя менюто на следващия ред или по-точно отляво да са 2 менюта едно под друго Меню и Анкета примерно после идва в средата Новини и в дясно Логин и Информация да кажем. Аз правя отляво Меню, средата Новини и вдясно Логин, но следващите редове не мога да ги направя :(

Първия код index.html:

Код:
</div>

	<div id="menu_left">
	<div class="box_head"><span class="head_text"><center>left</center></span></div>
	<center>
Меню
	</center>
	<div class="menu_bottom"> </div>
	</div>



<div id="menu_center">
<div class="box_head"><span class="head_text"><center>center</center></span></div>
Новини
<div class="menu_bottom"> </div>
</div>

<div id="menu_right">
<div class="box_head"><span class="head_text"><center>right</center></span></div>
<center>
Логин
</center>
<div class="menu_bottom"> </div>
</div>

Втория е style.css:

Код:
#menu_left { width: 199px; float: left; margin-top: 15px; }
#menu_center { width: 550px; float: left; margin-top: 15px; margin-left: 14px; }
#menu_right{ width: 199px; float: left; margin-top: 15px; margin-left: 14px; }



.box_head {
    background: url(../img/menu_head.png) repeat-x;
    height: 30px;
    border-bottom: 1px solid #bbb;
}
.head_text {
    line-height: 27px;
    text-align: center;
    font-size: 14px;
    color: #222;
    font-family:  Trebuchet MS, tahoma, arial, sans-serif;
}
.box_head1 {
    background: url(../img/menu_head.png) repeat-x;
    height: 30px;
	padding: 5px 0 0 0;
}
.menu_bottom {
    background: url(../img/menu_bottom.png) repeat-x;
    height:30px
}

Благодаря за помощта на всеки опитал :) Този път ще внимавам с точката да не я давам на първия пробвал :D
 
Поработи с това където съм ти отбелязъл с червено не е най-добрият вариант ама се надявам да се справиш иначе можеш да пробваш и с таблици :)

<style>
#menu_left { width: 199px; float: left; padding-top: 15px; }
#anketa { width: 199px; padding:150px 0 0px;}
#informaciq { width: 199px; padding:1px 0 0 800px;}

#menu_center { width: 550px; float: left; padding-top: 15px;

padding-left: 14px; }



#menu_right{ width: 199px; float: left; margin-top: 15px; padding-

left: 14px; }




.box_head {
background: url(../img/menu_head.png) repeat-x;
height: 30px;
border-bottom: 1px solid #bbb;
}
.head_text {
line-height: 27px;
text-align: center;
font-size: 14px;
color: #222;
font-family: Trebuchet MS, tahoma, arial, sans-serif;
}
.box_head1 {
background: url(../img/menu_head.png) repeat-x;
height: 30px;
padding: 5px 0 0 0;
}
.menu_bottom {
background: url(../img/menu_bottom.png) repeat-x;
height:30px
}





</style>



</div>

<div id="menu_left">
<div class="box_head"><span

class="head_text"><center>left</center></span></div>
<center>
Меню<br>
</center>
<div class="menu_bottom"> </div>
</div>



<div id="menu_center">
<div class="box_head"><span

class="head_text"><center>center</center></span></div>
Новини
<div class="menu_bottom"> </div>
</div>

<div id="menu_right">
<div class="box_head"><span

class="head_text"><center>right</center></span></div>
<center>
Логин
</center>
<div class="menu_bottom"> </div>
</div>



<div id="anketa">
<div class="box_head"><span

class="head_text"><center>left</center></span></div>
<center>
anketa
</center>
<div class="menu_bottom"> </div>
</div>



<div id="informaciq">
<div class="box_head"><span

class="head_text"><center>right</center></span></div>
<center>
informaciq
</center>
<div class="menu_bottom"> </div>
</div>
 
Може ли дадеш пример ако не ти е проблем пробвах много начини дори и под Chrom и Mozila да е супер под IE пак прави проблеми и затова се обърнах тук за помощ :)
 
Написах ти нов код, че предния го беше пооцапал.
Менютата ти се редят едно по друго автоматично, като ги добавяш.

Код:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#content {
	width:960px;
	height:auto;
	min-height:500px;
	background-color:#CCC;
	margin:10px auto;
	}
h2 {
	width:100%;
	text-align:center;
	margin:5px 0;
	border-bottom:1px solid #444;
	}
ul {
	background-color:#090;
	margin-bottom:20px;
	}
ul li {
	list-style-type:none;
	}
#content .left {
	width:200px;
	height:auto;
	min-height:350px;
	background-color:#999;
	float:left;
	position:relative;
	}
#content .center {
	width:520px;
	height:auto;
	min-height:350px;
	background-color:#999;
	float:left;
	position:relative;
	margin-left:20px;
	}
#content .right {
	width:200px;
	height:auto;
	min-height:350px;
	background-color:#999;
	float:left;
	position:relative;
	margin-left:20px;
	}


</style>
</head>

<body>

	<div id="content">
    	<div class="left">
        	<h2>Text</h2>
            <ul>
            	<li><a href="">Link</a></li>
                <li><a href="">Link</a></li>
                <li><a href="">Link</a></li>
                <li><a href="">Link</a></li>
            </ul>
            <ul>
            	<li><a href="">Link</a></li>
                <li><a href="">Link</a></li>
                <li><a href="">Link</a></li>
                <li><a href="">Link</a></li>
            </ul>
        </div>
        <div class="center">
        	<h2>Text</h2>
        </div>
        <div class="right">
        	<h2>Text</h2>
        </div>
    </div>

</body>
</html>
 
Благодаря ти оценявам го, но просто не е такова каквото търся :( Виж сложи си горния код и промени картинките с някакъв цвят и ще ти стане ясно пробвах твоето да го преработя да стане както искам, но абсолютно същия проблем. :\

Ето един пример http://www.radiovelikotarnovo.com/ това е просто пример виж в ляво как е менюто и отдолу веднага виждаш какво е времето (това е само пример). В средата има информация и вдясно виждаш пак по същия начин едно под друго менюта. Надявам се да ме разбра :\
 

Горе