#html #css #width #border #fixed-width
#HTML #css #ширина #граница #фиксированная ширина
Вопрос:
Я пытаюсь выяснить, как растянуть границу div, содержащего макет из трех столбцов, по всей странице. Оно правильно растягивается вправо, но неправильно с левой стороны. Кто-нибудь может дать мне несколько советов?
В качестве дополнительного вопроса, это причина, по которой третий столбец в моем div content-container недоступен для редактирования? По какой-то причине я не могу изменить форматирование в третьем столбце этого макета, и я думаю, что это связано с первой проблемой.
Я проверил тег width, и, похоже, для него установлено значение auto.
<body>
<div id="wrapper">
<div id="logo">
<p align="left"><img src="assets/virael-logo.jpg" alt="logo"/></p>
</div>
<div id="menu">
<ul><p align="right">
<li><a class="button" href="..//FinalProject/playerprofiles.html">Media</a></li>
<li><a class="button" href="..//FinalProject/Tourneyschedule.html">Resources</a></li>
<li><a class="button" href="..//FinalProject/Tourneyschedule.html">Blog</a></li>
</p>
</div>
</ul>
<p>
</p>
<div id="content-container">
<div id="section-navigation">
<ul>
<li><a href="#">Chapter 1</a></li>
<li><a href="#">Chapter 2</a></li>
<li><a href="#">Chapter 3</a></li>
<li><a href="#">Chapter 4</a></li>
</ul>
</div>
<div id="content">
<h2>
Introduction to New Media
</h2>
<p>
Lorem ipsum dolor sit amet consect ...
</p>
<p>
Ut wisi enim ad minim veniam, ...
</p>
<p>
Duis autem vel ...
</p>
</div>
<div id="aside">
<h3>
Glossary
</h3>
<p>
Critical Theory, Continental Philosophy, Horkheimer,
</p>
</div>
</div>
<!--This is the Footer-->
<!--This is the end tag for wrapper div--></div></div>
</body>
</html>
И ТАБЛИЦА CSS
@charset "utf-8";
/* CSS Document */
<style type="text/css">
}
* {
margin: 0;
}
html, body {
margin:0;
padding:0;
height:100%;
width: auto;
}
#header {
padding:10px;
background:#5ee;
}
#content-container
{
clear: left;
width: 1024px;
background: white;
}
#section-navigation
{
float: left;
width: 0;
padding: 40px 0px;
margin: 20px 0px;
display: inline;
}
#section-navigation ul
{
margin: 0px;
}
#section-navigation ul li
{
margin: 0px 0px 0px;
padding: 0px;
list-style-type: none;
}
#content {
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Arial, sans-serif;
margin: 0 0 0 85px;
display:inline-block;
padding-top: 30px;
padding-bottom: 30px; /* Height of the footer element */
padding-left: 165px;
padding-right: 430px;
position: absolute;
top: 100px;
text-align: justify;
width: auto;
border-top: 7px solid black;
border-left: none;
border-right: none;
border-bottom: 7px solid black;
overflow: auto;
}
#content h2 { margin: 0;
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro,'Myriad Pro', Arial, sans-serif; }
#aside
{
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Arial, sans-serif;
float: right;
width: 50px;
padding: 50px 0;
margin: 0 20px 0 0;
display: inline;
}
#aside h3 { margin: 0; }
#logo{
background-repeat: no-repeat;
background-position: right top;
margin-left: auto;
margin-right: auto;
float: left;
margin: 0px 30px 0px 25px;
overflow: hidden;
}
#logo2{
visibility: hidden;
margin: 0px 30px 0px 25px;
float: left;
}
#menu {
margin-left: auto;
margin-right: auto;
float: both;
overflow: hidden;
}
ul {
float: left;
list-style-type:none;
text-align:center;
margin: 0;
padding: 0;
}
li {
display: inline-block;
text-align: center;
}
a:link, a:visited {
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro,'Myriad Pro', Arial, sans-serif;
display: block;
font-size: 18pt;
font-weight: bold;
width: 256px;
color: black;
background-color: white;
text-align: center;
padding: 16px;
text-decoration: none;
text-transform: capitalize;
}
a:hover, a:active {
color: purple;
}
.content {
width:960px;
background: #F0F0F0;
border: 1px solid #CCC;
height: auto;
margin: 70px auto;
overflow: scroll;
}
#footer {
margin-left: auto;
margin-right: auto;
float: both;
}
#footer_menu {
margin-left: auto;
margin-right: auto;
float: left;
overflow: hidden;
.wrapper {
min-height: 100%;
height: auto;
height: 100%;
margin: 0 auto -345px;
}
.footer, .push {
height: 345px;
}
#footer {
text-align: center;
text-transform: capitalize;
background: black;
line-height: 100px;
color: #FFFFFF;
}
</style>
</head>
<body>
Комментарии:
1. Мы не сможем сильно помочь, если вы не предоставите некоторый код
2. Как мне добавить код? Я пытался в течение последнего часа?
3. @user Отредактируйте свой пост, скопируйте и вставьте свой код
4. Он продолжает говорить, что ваша запись содержит код, который неправильно отформатирован как код. что-то насчет отступа в 4 пробела и т.д. И т.п. Это совсем не просто. Почему я не могу просто скопировать и вставить это в поле?
5. jsfiddle. net Поместите сюда свой код, нажмите сохранить, опубликуйте ссылку.
Ответ №1:
Замените это в вашем CSS
*{
margin:0px;
padding:0px;
margin-left:0px;
padding-left:0px;
padding-top:0px;
left:0px;
}
Комментарии:
1. Это не помогло? Что означает * ?
2. Это означает всю страницу, и она уже есть в вашем css. Просто замените то, что я опубликовал, тем, что у вас есть. В настоящее время у вас есть: * { margin: 0; } Замените это на мой код, и это решит вашу проблему.
3. Нет, это не исправило. Я не вижу никаких изменений при обновлении CSS, как вы просили. Есть предложения относительно того, почему я этого не вижу? Кстати, я использую последнюю версию Chrome. Должно ли это что-то делать с шириной, которую я установил для контейнера содержимого div?
4. Удалите отступы для #header и установите #content-container width на 100% .
5. Это приводит к тому, что раздел глоссария полностью удаляется с правой стороны страницы. Это ничего не меняет в левой части страницы. Но это помогает ответить на мой побочный вопрос 🙂 Спасибо за ваше терпение