поле: 0 авто; не работает при подключении к внешнему CSS - PullRequest
Новая
       16

поле: 0 авто; не работает при подключении к внешнему CSS

0 голосов
/ 08 июля 2011

Когда я ссылаюсь на свою внешнюю таблицу стилей, кажется, что стили моей обертки нарушены.Если я вставляю стили в заголовок моего index.html, он работает просто отлично, но не при ссылке на .css.Все остальные правила CSS работают в любом случае, нарушается только стиль оболочки.

Единственное правило, применяемое к обертке, - центрировать ее в браузере, поэтому, если есть еще один разумный способ сделать это, я все уши.

#wrapper { 
    width: 960px; 
    margin: 0 auto; 
}

и html (минус содержание): 

<body>
    <div id="wrapper">
        <div id="header">
        </div>
        <div id="nav">
        </div>
        <div id="content">
            <div id="cont_left">
            </div>
            <div id="cont_right">
            </div>
        </div>
        <div id="footer">
        </div>
    </div>
</body>

Любая помощь или совет будут великолепны.

РЕДАКТИРОВАТЬ: вот полный CSS: 

#wrapper {
width: 960px;
margin: 0 auto;
}

#header {
width: 960px;
height: 144px;
background-image: url(../images/header.jpg);
background-repeat: repeat-x;
margin-bottom: -14px;
}

#logo {
margin-right: 48px;
margin-top: 33px;
float: right;
}

#logo a img {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

#tagline {
margin-top: 90px;
margin-left: 48px;
float: left;
clear: both;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
color: #CCC;
}

#nav {
width: 960px;
height: 48px;
background-image: url(../images/nav_bar.jpg);
background-repeat: repeat-x;
}

#nav_bar {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
margin-left: -50px;
padding-top: 14px;
}

#nav_bar li {
display: inline;
padding-left: 58px;
}

#nav_bar li a {
text-decoration: none;
color: #999;
padding: 4px;
}

#nav_bar li a:hover {
color: #fff;
background-color: #666;
}

.current {
color: #CCC;
}

#content {
float: left;
width: 960px;
background-image: url(../images/content.jpg);
background-repeat: repeat-x;
}

#cont_left {
width: 40%;
margin: 48px;
float: left;
}

#cont_right {
width: 40%;
margin: 48px;
float: right;
}

#footer {
clear: both;
height: 48px;
width: 960px;
background-image: url(../images/footer.jpg);
background-repeat: repeat-x;
}

#footer_list {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666;
font-style: normal;
text-align: center;
padding-top: 16px;
}

#footer_list li {
display: inline;
padding: 18px;
}

#footer_list li a {
text-decoration: none;
color: #666;
padding: 4px;
}

#footer_list li a:hover {
color: #000;
text-decoration: underline;
}

h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 48px;
line-height: 20px;
font-weight: normal;
margin: 0px;
padding-top: 0px;
padding-bottom: 12px;
}

p {
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 20px;
}

body {
background-image: url(../images/background.jpg);
background-repeat: repeat-x;
}

РЕДАКТИРОВАТЬ ДОБАВИТЬ: Сайт не работает, поэтому у меня нет ссылки, чтобы предоставить, извините.Все еще на ранней стадии разработки, застрял в этом вопросе.

Ответы [ 4 ]

1 голос
/ 08 июля 2011

Просмотрите исходный код страницы, которую вы используете, и нажмите на документ CSS, на который вы ссылаетесь. Он должен открыть страницу CSS с вашими стилями, если нет, то вы либо 1) не правильно связали его, либо 2) существует проблема с разрешениями на сервере.

ADD: Проверьте это в инструментах разработчика (F12 -> IE, щелкните левой кнопкой мыши> осмотреть элемент -> chrome, Firefox).

1 голос
/ 08 июля 2011

Какой браузер вы используете? Я только что попробовал ваш пример в IE8, и он вообще не будет центрироваться, если я не включу тип документа XHTML: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Не знаю, почему, или если у вас есть это или нет, но это может помочь.

0 голосов
/ 08 июля 2011

Не имеет значения, будет ли ваше правило CSS во внешней таблице стилей или в теге

0 голосов
/ 08 июля 2011

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

Убедитесь, что вы правильно приложили таблицу стилей: 

<link href="Default.css" rel="stylesheet" type="text/css" />

Если она находится в папке (например, «Стили»): 

<link href="Styles/Default.css" rel="stylesheet" type="text/css" />

Если ваша веб-страница находится в папке, вам нужно добавить "../" на передний план 

<link href="../Styles/Default.css" rel="stylesheet" type="text/css" />

Вы также можете попробовать !important

#wrapper { 
    width: 960px; 
    margin: 0 auto !important; 
}

Еслиэто не работает, затем щелкните правой кнопкой мыши элемент wrapper и выберите «проверить элемент» в Chrome.Это покажет вам все примененные CSS для этого элемента, и что было переписано чем.Это даст вам лучшее представление о том, что на самом деле происходит (также полезна загрузка Firebug для firefox)

...