При создании основ моего веб-сайта (верхний колонтитул, нижний колонтитул и основное тело) я собирал 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>
Итак, в какой момент я ошибся и как это исправить? Заранее спасибо за вашу помощь!
3 ответа
Это отдельный файл? И вы связываете эту таблицу стилей из своего HTML с чем-то вроде:
<link rel="stylesheet" type="text/css" href="path/to/my/css/file/style.css">
Если да, выньте первую строку:
<style type="text/css">
И последняя строка:
</style>
Они не нужны в отдельной таблице стилей.
Если я правильно вас понял, вы говорите, что собрали весь код CSS со всех страниц сайта и вставили все в один файл?
Как вы справились с объединением конфликтующих спецификаций?
Например, если на двух страницах было два разных определения для body, то каково было ваше окончательное определение? Вы использовали оба в отдельных блоках? Вы использовали все значения из обоих в одном блоке? Как вы объединили отдельные ценности, которые были разными?
По сути, сейчас вы применяете множество спецификаций стиля к страницам, на которых раньше их не было, поэтому неудивительно, что макет вашего сайта изменился.
Я не знаю ни одного автоматического способа исправить это, особенно потому, что трудно найти автоматизированные инструменты для проверки визуальных элементов (например, результирующие макеты). Объединяя все стили, вы существенно меняете стиль своего веб-сайта. Это потребует ручной работы, как ни крути.
Изменить: Я только что посетил ваш сайт и заметил, что ваш файл CSS все равно не работает. Удалите теги HTML <script>. Это файл CSS, а не файл HTML.
Также стандартной практикой является проверка вашей разметки при решении подобных проблем. Ваша разметка симпатичная на самом деле близко к действительному, и это хорошо. Но нужно немного поработать над CSS.
Я собирал css на разных страницах (заголовок css в файле заголовка, нижний колонтитул в нижнем колонтитуле и т.д.), и теперь, когда я скопировал и вставил все туда, он изменил сайт.
Если посмотреть на ваш файл CSS, он содержит открывающий и закрывающий теги <style>. попробуйте удалить как первую, так и последнюю строку в этом файле:
<style type="text/css">
...
</style>
Вам нужно только иметь CSS внутри тега <style>, если ваши правила CSS находятся внутри HTML.
Я надеюсь, что это решит проблему.
Если это не решит проблему, если вы правильно скопировали содержимое различных файлов css в том же порядке , в котором они были загружены раньше, и этот единственный файл CSS теперь находится там, где находился первый из остальных. , то у вас должен быть такой же результат.
Возможно, вы просто изменили порядок, в котором раньше появлялись различные правила CSS, или забыли что-то скопировать.
Также я предполагаю, что вы загружали весь свой CSS в одно и то же место в разделе <head> своего веб-сайта. В противном случае есть вероятность, что какой-то другой встроенный стиль (если он у вас есть) теперь отменяет некоторые правила.
Вам следует вернуться к отдельным файлам CSS (они все еще есть, верно ...?) И снова аккуратно скопировать их в один файл.
Попытка «исправить» ваш CSS-код, как вы просите, без полного HTML-кода, который у вас был раньше, просто исключена.
Похожие вопросы
Новые вопросы
css
CSS (каскадные таблицы стилей) - это язык таблиц стилей представления, используемый для описания внешнего вида и форматирования документов HTML (язык разметки гипертекста), XML (расширяемый язык разметки) и элементов SVG, включая (но не ограничиваясь) цвета, макет, шрифты, и анимации. Также описывается, как элементы должны отображаться на экране, на бумаге, в речи или на других носителях.
En Español