div верстка

rtl_one · November 26, 2012


<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<title>SomeSite - Главная</title>
		<!--<link rel="shortcut icon" href="favicon.ico" />-->
		<style type="text/css"> 
		body {
			background: #121212; 
			margin: 0px 135px 0px 135px;
		}
		#header {
			background: red;
			position: relative;
			clear: both;
			height: 120px; 
			background-size: cover;
		}
		#main_menu { 
			position: relative; 
			display: block; 
			height: 39px; 
			font-size: 11px; 
			font-weight: bold; 
			background: blue;
			border-top: 4px solid rgb(179, 0, 0); 
		}
		#main_menu ul { 
			margin: 0px; 
			padding: 0px; 
			list-style-type: none; width: auto; 
		}
		#main_menu ul li { 
			display: block; 
			float: left; 
			margin: 0px; 
		}
		#main_menu ul li a { 
			display: block; 
			float: left; 
			color: rgb(102, 102, 102); 
			text-decoration: none; 
			padding: 11px 20px 0px; 
			height: 23px; 
		}
		#main_menu ul li a:hover, #stylefour ul li a.current { 
			color: rgb(179, 0, 0); 
		}

		#middle {
			background: green;
			position: relative;
			clear: both;
			height: 800px; 
		}
		#left_panel {
			position: absolute;
			display: block;
			height: 750px;
			width: 166px;
			margin: 11px 0px 0px 12px;
			background: red;
			border: 1px solid #cccccc;
			font-size: 11px; 
			font-weight: bold; 
		}
		#left_panel_content {
			margin: 1px 2px 3px 400px;
			position: absolute;
			display: block;
			height: 300px;
			width: 150px;
			margin: 0;
			padding: 0;	
		}
		#left_panel_content ul li a {
			margin: 1px 2px 3px -28px;
			text-decoration:none;
			text-shadow: 0 1px #FFFFFF;
			line-height:200%; 

		}
		#user_menu {
			position: absolute;
			height: 40px;
			width: 801px;
			margin: 11px 2px 3px 184px;
			border: 1px solid #cccccc;
			background: blue;
		}
		#user_menu_content {
			position: absolute;
			margin: 13px 0px 0px 11px;

		}
		#user_menu_content ul,li {
			display: inline;
			font-size: 11px; 
			font-weight: bold; 
			font-family: Arial,Verdana,Helvitica,sans-serif; 
		}
		#content_index {
			border: 1px solid #cccccc;
			position: absolute;
			display: block;
			margin: 61px 30px 40px 185px;
			width: 800px;
			height: 700px;
			background: blue;
		}
		#list_list {
			margin: 92px 2px 3px 31px;
		}
		#list_list a {
		text-align: center;
		    color: #555555;
		    display: inline-block;
		    margin-bottom: 48px;
		    margin-left: 20px;
		    margin-right: 20px;
		    text-decoration: none;
		    text-shadow: 0 1px #FFFFFF;
		}

		#list_list a:hover {
		    color: #AA0000;
		}



		#list_list a img {
			margin-top: 12px;
		}
		#list_list a span.g_text {
		    display: block;
		    font-size: 18px;
		    margin-top: -45px;
		}
		#list_list a span.g_logo {
		    border: 1px solid #B8B8B8;
		    border-radius: 5px 5px 5px 5px;
		    box-shadow: 1px 1px 2px #B8B8B8;
		    display: block;
		    height: 200px;
		    margin-bottom: 10px;
		    width: 200px;
		}
		#list_list a:hover .g_logo {
		    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.06);

		    }

		#footer {

			background: blue;
			border-top: 1px solid #B8B8B8;
			box-shadow: 0 1px 0 0 #FBFBFB;
			font-size: 14px;
			height: 50px;
			/*margin: 22px auto 0;*/
		}
		#copyr {
			color: #555555;
			padding-top: 15px;
			text-decoration: none;
			text-shadow: 0 1px #FFFFFF;
		}
		#footer_cont {
			height: 30px;
			margin: 0 auto;
			/*padding-left: 55px;*/
			/*padding-right: 5px;*/
			width: 790px;
			text-align: center;
		}
	</style>

	</head>
	<body>
		<div id="header">
                </div>

		<div id="main_menu"> <ul> 
		</ul> </div>

                <div id="middle">
                        <div id="left_panel">
				<div id="left_panel_content">
				</div>
                        </div>

			<div id="user_menu">
				<div id="user_menu_content">
				 </div>
			 </div>

			<div id="content_index">
				<div id="list_list">
				</div>
			</div>
		</div>

		<div id="footer">
			<div id="footer_cont">
				<div id="copyr">
					© 2012 SomeSite
				</div>
			</div>
		</div>

	</body>
</html>

Как оно должно выглядеть:

На разных разрешениях естественно все плывет по причине отсутствия мозга у автора(т.е меня). Верстка говно - это есть факт. Это мои первые потуги связаные с версткой. Ранее с html и css знаком не был. Помогите привести в чувство эту верстку. Вообще по идее эта верстка должна выглядеть так же, как на скриншотах на любых разрешениях

Edited November 26, 2012 by rtl_one

Noraad · November 26, 2012

Вот это все, тоесть все что после боди...

</div>

</ul> </div>

</div>

</div>

</div>

</div>

..Положите в еще один Div, потом этот див отностильно боди отпозиционируйте и все будет хорошо)

P.S. Тоесть у вас все составные будут позиционироваться относительно фиксированого нового Дива, а не относительно боди, как было раньше.

Это самое легкое, что приходит на ум. В противном случае, "без обертки" придется прописывать очень много решений, для всех возможных вариантов разрешений.

Edited November 26, 2012 by Noraad

rtl_one · November 26, 2012

Вот это все, тоесть все что после боди...

Перефразируйте свою мысль с помощью кода

Edited November 26, 2012 by rtl_one

Sign In

div верстка

Question

rtl_one

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Noraad

Link to comment

Share on other sites

rtl_one

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information