При создании основ моего веб-сайта (верхний колонтитул, нижний колонтитул и основное тело) я собирал CSS на различных страницах (заголовок CSS в файле заголовка, нижний колонтитул в нижнем колонтитуле и т.д.), и теперь, когда я скопировал и вставил все в там поменяли сайт. Например, ширина тела теперь составляет 100% от ширины страницы, но предполагается, что она составляет 70%, а нижний колонтитул должен быть выровнен с телом слева, но примерно на 20 пикселей слева от того места, где он должен быть. и т. д. Вы можете увидеть, о чем я говорю, на моем тестовом сайте http://sunnahmatch.com или с помощью фильтрации через этот большой сборник css (если вам нужен код html и php, дайте мне знать):

<style type="text/css">
#body_container{
    margin: 200px auto 0 auto;
    width:70%;
    }
.footer_inline a:active {color:#09C; text-decoration:none; font-family:GeosansLight, sans-serif; font-size:14px;}   
#header{
    margin:0;
    padding:0;
    width:100%;
    background-color:#333;
    }
#logo{
    margin:0;
    padding:0;
    float:left;
    }
#header_menu{
    margin:0;
    padding:0;
    background-image:url(../img/header_bg_logo.jpg);
    float:right;
    width:380px;
    height:100px;;
    }
#menu_bar{
    background:url(../img/menu_bar.png);
    background-repeat:repeat-x;
    width:100%;
    float:left;
    height:42px;
    margin:0;
    padding:0;
    }
#menu_text_container{
    padding-top:8px;
    padding-bottom:6px;
    vertical-align:middle;
    }

.menu_text{
    float:left;
    }
.menu_text_span{
    margin-left:30px;
    font-family: GeosansLight;
    }
.menu_text a:link {color:#FFF; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:18px;}
.menu_text a:visited {color:#FFF; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:18px;}
.menu_text a:hover {color:#09C; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:18px;}
.menu_text a:active {color:#09C; text-decoration:none; font-family:GeosansLight, sans-serif; font-size:18px;}
.menu_text_span_top{
    margin-right:20px;
    margin-top:10px;
    float:right;
    font-family: GeosansLight, sans-serif;
    }
.menu_text_span_top a {color:#FFF; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:14px;}
.menu_text_span_top a:link {color:#FFF; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:14px;}
.menu_text_span_top a:visited {color:#FFF; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:14px;}
.menu_text_span_top a:hover {color:#09C; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:14px;}
.menu_text_span_top a:active {color:#09C; text-decoration:none; font-family:GeosansLight, sans-serif; font-size:14px;}
.menu_text_right{
    float:right;
    }
.menu_text_span_right{
    margin-right:20px;
    float:right;
    font-family: GeosansLight;
    }
.menu_text_span_right a {color:#FFF; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:14px;}
.menu_text_span_right a:link {color:#FFF; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:14px;}
.menu_text_span_right a:visited {color:#FFF; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:14px;}
.menu_text_span_right a:hover {color:#09C; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:14px;}
.menu_text_span_right a:active {color:#09C; text-decoration:none; font-family:GeosansLight, sans-serif; font-size:14px;}
#left_container{
    float: left;
    width: 63%;
    padding:5px;
    margin-right:15px;
    background-color:#069;
    -moz-border-radius-topleft: 15px 15px;
    -moz-border-radius-bottomright: 15px 15px;
    border-top-left-radius: 15px 15px;
    border-bottom-right-radius: 15px 15px;
    }
#right_container{
    float:left;
    width: 31%;
    padding:5px;
    background-color:#069;
    -moz-border-radius-topleft: 15px 15px;
    -moz-border-radius-bottomright: 15px 15px;
    border-top-left-radius: 15px 15px;
    border-bottom-right-radius: 15px 15px;
    }
.column_left_tmpl{
    background-color:#FFF;
    padding:10px;
    -moz-border-radius-topleft: 10px 10px;
    -moz-border-radius-bottomright: 10px 10px;
    border-top-left-radius: 10px 10px;
    border-bottom-right-radius: 10px 10px;
    font-family: GeosansLight, sans-serif;
    font-size: 16px;
    }
.column_right_tmpl{
    background-color:#FFF;
    padding:8px;
    -moz-border-radius-topleft: 10px 10px;
    -moz-border-radius-bottomright: 10px 10px;
    border-top-left-radius: 10px 10px;
    border-bottom-right-radius: 10px 10px;
    font-family: GeosansLight, sans-serif;
    font-size: 16px;#59C169
    }
.title {
    width:100% auto;
    padding-top:5px;
    margin-bottom:5px;
    -moz-border-radius-topleft: 5px 5px;
    -moz-border-radius-bottomright: 5px 5px;
    border-top-left-radius: 5px 5px;
    border-bottom-right-radius: 5px 5px;
    font-family: Arial, Gadget, sans-serif;
    font-size:22px;
    color:#333;
    font-weight: bold;
    }
.spacer{
    height:5px;
    }
#header_container{
    background-color:#333;
    margin:0;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    -khtml-opacity:.9; 
    -moz-opacity:.9; 
    -ms-filter:"alpha(opacity=90)";
    filter:alpha(opacity=90);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.9);
    opacity:.9;
    }   
#footer{
    width:70%;
    height:80px;
    float:none;
    clear:both;
    margin:0 auto;
    }   
.footer_inline{
    width:100%;
    margin-top:20px;
    margin-right:20px;
    float:left;
    font-family: GeosansLight, sans-serif;
    }
.footer_inline a {color:#FFF; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:14px;}
.footer_inline a:link {color:#FFF; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:14px;}
.footer_inline a:visited {color:#FFF; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:14px;}
.footer_inline a:hover {color:#09C; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:14px;}
</style>

Итак, в какой момент я ошибся и как это исправить? Заранее спасибо за вашу помощь!

0
Nathan 29 Авг 2011 в 19:28

3 ответа

Лучший ответ

Это отдельный файл? И вы связываете эту таблицу стилей из своего HTML с чем-то вроде:

<link rel="stylesheet" type="text/css" href="path/to/my/css/file/style.css">

Если да, выньте первую строку:

<style type="text/css">

И последняя строка:

</style> 

Они не нужны в отдельной таблице стилей.

2
Chris Cummings 29 Авг 2011 в 15:36

Если я правильно вас понял, вы говорите, что собрали весь код CSS со всех страниц сайта и вставили все в один файл?

Как вы справились с объединением конфликтующих спецификаций?

Например, если на двух страницах было два разных определения для body, то каково было ваше окончательное определение? Вы использовали оба в отдельных блоках? Вы использовали все значения из обоих в одном блоке? Как вы объединили отдельные ценности, которые были разными?

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

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

Изменить: Я только что посетил ваш сайт и заметил, что ваш файл CSS все равно не работает. Удалите теги HTML <script>. Это файл CSS, а не файл HTML.

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

2
David 29 Авг 2011 в 15:37

Я собирал css на разных страницах (заголовок css в файле заголовка, нижний колонтитул в нижнем колонтитуле и т.д.), и теперь, когда я скопировал и вставил все туда, он изменил сайт.

Если посмотреть на ваш файл CSS, он содержит открывающий и закрывающий теги <style>. попробуйте удалить как первую, так и последнюю строку в этом файле:

<style type="text/css">

...

</style>

Вам нужно только иметь CSS внутри тега <style>, если ваши правила CSS находятся внутри HTML.

Я надеюсь, что это решит проблему.

Если это не решит проблему, если вы правильно скопировали содержимое различных файлов css в том же порядке , в котором они были загружены раньше, и этот единственный файл CSS теперь находится там, где находился первый из остальных. , то у вас должен быть такой же результат.

Возможно, вы просто изменили порядок, в котором раньше появлялись различные правила CSS, или забыли что-то скопировать.

Также я предполагаю, что вы загружали весь свой CSS в одно и то же место в разделе <head> своего веб-сайта. В противном случае есть вероятность, что какой-то другой встроенный стиль (если он у вас есть) теперь отменяет некоторые правила.

Вам следует вернуться к отдельным файлам CSS (они все еще есть, верно ...?) И снова аккуратно скопировать их в один файл.

Попытка «исправить» ваш CSS-код, как вы просите, без полного HTML-кода, который у вас был раньше, просто исключена.

2
Jose Faeti 29 Авг 2011 в 15:38