смещение списка

Elusive · August 30, 2008

Подскажите почему список в диве смещен в право и как это исправить?

<style type="text/css">
<!--
#container {
	width: 250px;
	position: relative;
	}
#container li a {
	text-decoration: none;
	display: block;
	background:	#CCC;
	}
#container li {
	list-style: none;
	}

-->
</style>
</head>

<body>
<div id="container">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Home</a></li>
<li><a href="">Home</a></li>
<li><a href="">Home</a></li>
</ul>
</div>
</body>

rus · August 30, 2008

ul {
margin:0;
padding:0;
}

Elusive · August 30, 2008

все гениальное просто)) спасибо большое.

Elusive · August 31, 2008

Возник еще одни вопрос.

Подскажите почему content не подымаеться вверх? а находиться ниже sidebar?

Заранее спасибо за ответ

<style type="text/css">
<!--
body {
	margin: 0 0;
	padding: 0;
	background: #c9f;
	}
#container {
	background: #ccc;
	width: 700px;
	margin: 0 auto:
	}
#header {
	height: 100px;
	position: relative;
	background: #990;
	}
#sidebar {
	width: 230px;
	float: left:
	background: #9c9;
	}
#sidebar li a {
	text-decoration: none;
	display: block;
	text-align: center;
	line-height: 40px;
	}
#sidebar li {
	list-style: none;
	}
#sidebar ul {
	margin: 0;
	padding: 0;
	}
.table {
	border-top: 1px solid #000;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
}
.bottom {
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
}
#container a:link, a:visited {
	background: #ccc;
	color: #0cc;
	}
#container a:hover, a:active {
	background: #0cf;
	color: #90c;
	}
#content {
	margin-left: 250px;
	background: #c96;
	padding: 0;
	margin-top: 0;
	}
.clearfloat {
	clear: both;
	}
#wrap {
	margin: 0 0;
	}
#footer {
	background: #36c;
	}


-->
</style>
</head>

<body>
<div id="container">
	<div id="header">
	<h1>NAME</h1>
	</div>
	<div id="wrap">
	<div id="sidebar">
		<ul>
			<li><a href="" class="table">Home</a></li>
			<li><a href=""class="table">Home</a></li>
			<li><a href=""class="table">Home</a></li>
			<li><a href=""class="bottom">Home</a></li>
		</ul>
	</div>
	<div id="content">
	<p>web web web web web web</p>
	</div>
	<br class="clearfloat" />
	</div>
	<div id="footer">
	page
	</div>
</div>
</body>

rus · August 31, 2008

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!--
body {
    margin: 0;
    padding: 0;
    background: #c9f;
    }
#container {
    background: #ccc;
    width: 700px;
    margin: 0 auto:
    }
#header {
    height: 100px;
    position: relative;
    background: #990;
    }
#sidebar {
    position:absolute;
    top:0px;
    left:0;
    bottom:0;
    width: 230px;
    float: left:
    background: #9c9;
    }
#sidebar li a {
    text-decoration: none;
    display: block;
    text-align: center;
    line-height: 40px;
    }
#sidebar li {
    list-style: none;
    }
#sidebar ul {
    margin: 0;
    padding: 0;
    }
.table {
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}
.bottom {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}
#container a:link, a:visited {
    background: #ccc;
    color: #0cc;
    }
#container a:hover, a:active {
    background: #0cf;
    color: #90c;
    }
#content {
    position:relative;
	width:470px;
    margin-left: 230px;
    background: #c96;
    }
.clearfloat {
    clear: both;
    }
#wrap {
    margin: 0;
	height:auto !important;
	min-height:100%;
	height:100%;
	position:relative;
	min-width:800px;
    }
#footer {
    background: #36c;
    }


-->
</style>
</head>

<body>
<div id="container">
    <div id="header">
    <h1>NAME</h1>
    </div>
    <div id="wrap">
    <div id="sidebar">
        <ul>
            <li><a href="" class="table">Home</a></li>
            <li><a href=""class="table">Home</a></li>
            <li><a href=""class="table">Home</a></li>
            <li><a href=""class="bottom">Home</a></li>
        </ul>
    </div>
    <div id="content">
    <p>web web web web web web</p>
    <p>web web web web web web</p>
    <p>web web web web web web</p>
    <p>web web web web web web</p>
    <p>web web web web web web</p>
    <p>web web web web web web</p>
    <p>web web web web web web</p>
    <p>web web web web web web</p>
    </div>
    <br class="clearfloat" />
    </div>
    <div id="footer">
    page
    </div>
</div>
</body>

Elusive · August 31, 2008

Получилось сделать вот так:

<head>
<style type="text/css">
<!--
body {
	margin: 0;
	padding: 0;
	}
#container {
	background: #fc6;
	width: 700px;
	margin: 0 auto;
	}
#header {
	height: 150px;
	background: #f90;
	margin: 0px 0px;
	padding: 0 0;
	}
#sidebar {
	width: 200px;
	float: left;
	background: #f30;
	margin: 0 0:
	}
#content  {
	margin-left: 220px;
	background: #c06;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	padding: 0 0;
	position: relative;
	}
#content p {
	margin: 0 0; 
}
#footer {
	background: #9cf;
	margin: 0 0;
	}
#footer p {
	margin: 0 0;
}
.clearfloat { 
	clear: both;
	}

-->
</style>
</head>
<body>
<div id="container">
	<div id="header">
	</div>
			<div id="sidebar">
				<ul>
					<li>Home</li>
					<li>Home</li>
					<li>Home</li>
				</ul>
  </div>
  <div id="content">
	<p>me Home Home Home Home Home Home Home Home Home Home Hlk</p>
  </div>
		<br class="clearfloat" />	
  <div id="footer">
		<p>home</p>
  </div>
	</div>
</body>

Добился желаемого результата.

Возник вопрос, почему были пробелы между дивами header и content вызваные параграфами (до того, как я установил margin: 0 0; параграфам в сонтент) если параграфы находяться внутри дива?

rus · August 31, 2008

К сожалению точно на этот вопрос я не смогу ответить.

А зачем вы дублируете:

padding: 0 0;

когда достаточно просто записать: padding: 0;

Edited August 31, 2008 by rus

Elusive · August 31, 2008

первое значение по вертикали, а второе по горизонтали. можно и один раз указать ноль, но я уже что бы наверняка знать, что не здесь прокол. а то я в этом деле начинающий, так что страхуюсь)

rus · August 31, 2008

первое значение по вертикали, а второе по горизонтали. можно и один раз указать ноль, но я уже что бы наверняка знать, что не здесь прокол. а то я в этом деле начинающий, так что страхуюсь)

Перестраховываться не зачем.

Вот, смотри как выглядет сокращенная запись:

padding: 0;

И вот как выглядет (тоже своего рода сокращенная) другая запись:

padding: 5px 10px 15px 20px;

Почему (тоже своего рода сокращенная)? Потому что в не сокращенном виде выглядет так:

padding-top: 5px;

padding-right: 10px;

padding-buttom: 15px;

padding-left: 20px;

Sign In

смещение списка

Question

Elusive

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

rus

Link to comment

Share on other sites

Elusive

Link to comment

Share on other sites

Elusive

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

Elusive

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

Elusive

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information