Поплыл шаб

Dark_Semi · March 31, 2012

Добрый день!

Поплыли блоки в сайтебаре, подскажите как поправить...

Хочу вот так -

Пока вот так -

А так же подскажите, как сделать белый блок (для всего контента + сайтебар) (есть в 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css"/>
<title>GRead beta</title>
</head>

<body>
<div class="main">
<div class="head">
</div>


<div class="content">
<div class="post-main">
<h1><a href="#">Welcom</a></h1>
<div class="post"> 
Hello, Friends.</p>GRead helps you to read book conveniently. But I will not tell a lot better to look screencast: </p>
If you have any question, send in to me: <a href="#">spirt40@gmail.com</a>

</div>
</div></div>


<div class="sitebar">
<div class="vidget">
<h2>Log in</h2>
<ul>
<form method="post" name="registration" id="registration" action="#">
						<span id="text1">Username:	</span>
						<input type="text" name="name" id='name' />

						<span id="text1">Password:</span>
						<input type="password" name="password1" id="pass"/>

						<div class="send-form">
							<input type="submit" name="submit" value="Sing up" onclick="check()" class="send-button"/>  <a href="#">remember me password</a>
						</div>
				</form>
				<img src=Images/bg-menu.jpg align="left">
		or use OpenID: <a href="#">Google</a> <a href="#">Yahoo</a> <a href="#">other</a>		
</ul>

</div>
<div class="reklama">
<div class="vidget2">
<h2>Sign in</h2>
<ul>
		<script language="JavaScript">

			function check() {
				var name = document.getElementById('name').value;
				var pass = document.getElementById('pass').value;
				var email = document.getElementById('email').value;

				if (name == ''||pass == ''||email == '')
				return alert('Please fill in all fields');

				var reg = /[0-9a-z_]{2,8}/i;

				if(reg.exec(pass) == null){
					alert("Username must be up to 8 characters"); 
					document.getElementById('pass').value=""; return false; 
				}

				if(reg.exec(email) == null){
					alert("Please correctly enter your e-mail"); 
					document.getElementById('email').value=""; return false; 
				}

				if(reg.exec(pass) == null){
					alert("Password must be 8 characters long and contain only letters tsyfry"); 
					document.getElementById('pass').value=""; return false; 
				}

				reg = /[0-9a-z_]+@[0-9a-z_^.]+\.[a-z]{2,3}/i;

			}
	</script>
				<form method="post" name="registration" id="registration" action="#">
						<li><span id="text1">Username:	</span>
						<input type="text" name="name" id='name' /></p></li>

						<li><span id="text1">E-Mail:</span>       
						<input type="text" name="email" id="email" /></p></li>

						<li><span id="text1">Password:</span>
						<input type="password" name="password1" id="pass"/></p></li>

						I have agree to the <a href="#">Terms:</a>    <input type="checkbox" name="option" value="a4"></p>

						<div class="send-form">
							<input type="submit" name="submit" value="Sing up" onclick="check()" class="send-button"/>
						</div>
				</form>
				</ul>

<div class="reklama1">
<div class="vidget22">
<h2>News</h2>
<div class="post"> 
Now fix bug with " ". If U have this
symbol in a book, then click to "reProcess book" in edit's book menu.


</div></div>
<div class="footer">
</div></div>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */
* { padding:0; margin:0;} 
body {background:#e7e7df url(Images/bg-body.jpg) left  top no-repeat;
}
		.main {
	width:1050px; margin:0 auto;}

	.head{
		height:40px;}



.content-main{
	background:#fffdfd; overflow:hidden;

}

	.content{
		width:730px; float:right; margin:15px 15px 15px 0; 
	}
	.post-main{
		background:#ffffff; margin:0;

	}
	.post-main h1{
		font:14px Verdana, Geneva, sans-serif;color:;background:#4ebbff;

		padding:5px 20px 8px 15px; margin:0;
	}
	.post-main h1 a{
		font: normal 14px Verdana, Geneva, sans-serif;color:#000000;text-decoration:none;
	}
	.post-main h1 a:hover{
		font: normal 14px Verdana, Geneva, sans-serif;color:#000000;text-decoration:underline;
	}
	.imgstyle{
		float:left; margin:0;
	}
	.post{
		margin:0;
	}
	.post p{
		font:12px Verdana, Geneva, sans-serif;color:#000; margin:0;
	}
	.post p a{ 
	color:#423e3e; text-decoration:underline;
	}






	.sitebar{
		width:275px; float:left; margin:15px 15px 15px 15px;
	}
	.vidget{
		background:#ffffff; margin:0;


	}
		.vidget h2{
	 font:14px Verdana, Geneva, sans-serif; background:#66cc9a;	color:#000;
	 padding:5px 20px 8px 15px; margin:0;

		}
		.vidget ul{
		list-style:none;padding:10px 10px;	
			}




	.reklama{width:275px; float:left; margin:15px 15px 15px 15px;
	}
	.vidget2 {
		background:#ffffff; margin:0;


	}
	.vidget2 h2{
	 font:14px Verdana, Geneva, sans-serif; background:#f3a950;	color:#000; padding:5px 20px 8px 15px; margin:0;

		}
	.vidget2 ul{
		list-style:none;padding:10px 10px;	
			}
		.vidget2 2ul li{
			font:14px Verdana, Geneva, sans-serif; color:#000; padding:5px 5px 5px 20px;
		}
		.vidget2 ul li a{
		text-decoration:none; color:#000;
		}



			.reklama1 {width:275px; float:left; margin:15px 15px 15px 15px;
	}
	.vidget22 {
		background:#ffffff; margin:0;


	}
	.vidget22 h2{
	 font:14px Verdana, Geneva, sans-serif; background:#fc575e;	color:#000; padding:5px 20px 8px 15px; margin:0;

		}
	.vidget22 ul{
		list-style:none;padding:25px 15px;	
			}
		.vidget22 2ul li{
			font:14px Verdana, Geneva, sans-serif; color:#000; padding:5px 0 5px 20px;
		}
		.vidget22 ul li a{
		text-decoration:none; color:#000;
		}

.footer {
			font:14px Verdana, Geneva, sans-serif;
		}

Edited March 31, 2012 by Dark_Semi

terminotor · March 31, 2012

Вот так допустим


@charset "utf-8";
/* CSS Document */
* { padding:0; margin:0;} 
body {background:#e7e7df url(Images/bg-body.jpg) left  top no-repeat;
}
                .main {
        width:1050px; margin:0 auto;}

        .head{
                height:40px;}



.content-main{
        background:#fffdfd; overflow:hidden;

}

        .content{
                width:730px; float:right; margin:15px 15px 15px 0; 
        }
        .post-main{
                background:#ffffff; margin:0;

        }
        .post-main h1{
                font:14px Verdana, Geneva, sans-serif;color:;background:#4ebbff;

                padding:5px 20px 8px 15px; margin:0;
        }
        .post-main h1 a{
                font: normal 14px Verdana, Geneva, sans-serif;color:#000000;text-decoration:none;
        }
        .post-main h1 a:hover{
                font: normal 14px Verdana, Geneva, sans-serif;color:#000000;text-decoration:underline;
        }
        .imgstyle{
                float:left; margin:0;
        }
        .post{
                margin:0;
        }
        .post p{
                font:12px Verdana, Geneva, sans-serif;color:#000; margin:0;
        }
        .post p a{ 
        color:#423e3e; text-decoration:underline;
        }






        .sitebar{
                width:275px; float:left; margin:15px 15px 15px 15px; 
        }
        .vidget{
                background:#ffffff; margin:0;


        }
                .vidget h2{
         font:14px Verdana, Geneva, sans-serif; background:#66cc9a;     color:#000;
         padding:5px 20px 8px 15px; margin:0;

                }
                .vidget ul{
                list-style:none;padding:10px 10px;      
                        }




        .reklama{width:275px; float:left; margin:15px auto;
        }
        .vidget2 {
                background:#ffffff; margin:0;


        }
        .vidget2 h2{
         font:14px Verdana, Geneva, sans-serif; background:#f3a950;     color:#000; padding:5px 20px 8px 15px; margin:0;

                }
        .vidget2 ul{
                list-style:none;padding:10px 10px;      
                        }
                .vidget2 2ul li{
                        font:14px Verdana, Geneva, sans-serif; color:#000; padding:5px 5px 5px 20px;
                }
                .vidget2 ul li a{
                text-decoration:none; color:#000;
                }



                        .reklama1 {width:275px; float:left; margin:15px auto ;
        }
        .vidget22 {
                background:#ffffff; margin:0;


        }
        .vidget22 h2{
         font:14px Verdana, Geneva, sans-serif; background:#fc575e;     color:#000; padding:5px 20px 8px 15px; margin:0;

                }
        .vidget22 ul{
                list-style:none;padding:25px 15px;      
                        }
                .vidget22 2ul li{
                        font:14px Verdana, Geneva, sans-serif; color:#000; padding:5px 0 5px 20px;
                }
                .vidget22 ul li a{
                text-decoration:none; color:#000;
                }

.footer {
                        font:14px Verdana, Geneva, sans-serif;
                }

Edited March 31, 2012 by terminotor

Dark_Semi · April 1, 2012

terminotor, спасибо) А как сделать белый фон не на весь шаб, а для контента и сайтебара (как на 1 картинке)

terminotor · April 2, 2012

terminotor, спасибо) А как сделать белый фон не на весь шаб, а для контента и сайтебара (как на 1 картинке)

Задать им этот цвет фона, естественно в CSS

Dark_Semi · April 2, 2012

terminotor, спасибо) А как сделать белый фон не на весь шаб, а для контента и сайтебара (как на 1 картинке)
Задать им этот цвет фона, естественно в CSS

Пробывал прописать стиль после .main, и задать ему параметры в css - заливается либо шапка, либо весь фон сайта, а мне нужен только этот блок

Sign In

Поплыл шаб

Question

Dark_Semi

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

terminotor

Link to comment

Share on other sites

Dark_Semi

Link to comment

Share on other sites

terminotor

Link to comment

Share on other sites

Dark_Semi

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information