Моготи привести в порядок развращённый css код

Faran · April 13, 2010

Здравствуйте. Я подстраивал css код под свои нужда и наконец сделав это вдруг понял, что с такой вёрсткой "профессиональной" остаётся ждать косяков. Пожалуйста помогите исправить сделать его более нормальным css кодом, а то я минусами в маргине пораскидался, а как сделать тоже нормальными средствами незнаю(.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title></title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="title" content="" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

<body>

<div id="wrapper">

	<div id="header">
        <div class="header1">лого</div>
        <div class="header2">лого</div>
        <div class="header3">лого</div>
	</div><!-- #header-->

	<div id="middle">
<div class="poisk">Миниблок</div>
		<div id="container">
			<div id="content">Текст</div><!-- #content-->
		</div><!-- #container-->

		<div class="sidebar sl">Меню</div><!-- .sidebar.sl -->

	</div><!-- #middle-->

</div><!-- #wrapper -->

<div id="footer">Текст</div><!-- #footer -->

</body>
</html>

CSS

* {
	margin: 0;
	padding: 0;
}
* html .sl {
		margin-left: -90%;
		}

html {height: 100%}
body {
	font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
	width: 100%;
	height: 100%;
}
a {
	color: blue;
	outline: none;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}
p {margin: 0 0 18px}
img {
	border: none;
}
input {vertical-align: middle}
#wrapper {
	width: 1000px;
	margin: 0 auto;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}


/* Header
—————————————————————————--*/
#header {
	height: 150px;
	background: #FFE680;
}
.header1 {
    width: 250px;
    height: 100%;
    position: relative;
    float: left;
	background-image:url(img/h1.png)
}
.header2 {
    width: 386px;
    height: 100%;
    position: relative;
    float: left;
	border:1px solid black;
	background-image:url(img/h2.png)
}
.header3 {
    width: 358px;
    height: 100%;
    position: relative;
    float: left;
	border:1px solid black;
	background-image:url(img/h3.png)
}


/* Middle
—————————————————————————--*/
#middle {
	width: 950px;
	padding: 0 0 50px;
	height: 1%;
	margin-left: 24px;
}
#middle:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}
#middle .poisk {
	width:250px;
	margin-left:-23px;
	background-image:url(img/5.gif);
	background-repeat:no-repeat;
}
#container {
	width: 100%;
	float: left;
	overflow: hidden;
	margin-top:-20px;
	border-right:1px solid black;
		}
#content {
	padding: 0 0 0 5px;
	background-color:#903;
	margin-left:225px;
}

/* Sidebar Left
—————————————————————————--*/
.sl {
	float: left;
	width: 200px;
	margin-left: -100%;
	position: relative;
	background: #B5E3FF;
}
/* Footer
—————————————————————————--*/
#footer {
	width: 1000px;
	margin: -50px auto 0;
	height: 50px;
	background: #BFF08E;
}

Edited April 13, 2010 by Faran
Вы наверное шутите? Что за мегапартянки кода, да еще и с рыбой!

psywalker · April 13, 2010

Пост юморной немного)

ТС, есть спец.сайты для чистки кода.

LunatiK · April 13, 2010

А я тоже часто маригны минусю. Это моветон?

psywalker · April 13, 2010

А я тоже часто маригны минусю. Это моветон?

Ну а я просто глобал-обнуление юзаю своё, нормал, живой))

Faran · April 13, 2010

А можете подсказать как сделать рамку слева, чтобы она шла от миниблока до футера?

psywalker · April 13, 2010

Для начала тебе нужен пример, Футер всегда внизу, а далее уже и с контентом разберёшься

Faran · April 13, 2010

Когда я делаю рамку в классе sl , то она идёт до того момента, пока есть меню,, а меню до футера не доходит и соответственно левый бордер не доходит тоже до футера. а если делаю левый бордер для класса content, то рамка лезет на "миниблок". По другому не знаю как.

psywalker · April 13, 2010

Смотри пост выше!

Sign In

Моготи привести в порядок развращённый css код

Question

Faran

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

LunatiK

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Faran

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Faran

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information