Сайт некорректно отображается в браузерах
Код:
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Artem Korolenko is a Graphic Designer specializing in desktop customization, icons, user interfaces." />
<meta name="keywords" content="Design, Graphic Design, Web Design, Desktop Customization, Icons, User Interfaces, Web Interfaces, Logo, Logotype, Artem, Korolenko" />
<meta name="classification" content="Graphic Design" />
<meta name="copyright" content="Copyright Artem Korolenko" />
<title>I'm a designer</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:regular,italic' rel='stylesheet' type='text/css' />
<link href="favicon.ico" rel="icon"/>
<link href="favicon.png" rel="shortcut icon"/>
<link rel="stylesheet" type="text/css" href="style.css" media="Screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" />
<script src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js" type="text/javascript" />
<script src="twitter.js" type="text/javascript" />
</head>
<body>
<div id="contentbg">
<div class="hello">Hello, there!</div>
<div class="description">I'm a designer of desktop customization, icons, user interfaces and other pretty things.</div>
<div class="twitterbg">
<p id="twitter"><a href="http://www.twitter.com/clubb3rry">@Clubb3rry</a> says: Welcome to my cute homepage! ;)</p>
</div>
<div id="content">
<table width="477" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="mylinks" align="right">You can see me and my works on:</td>
<td class="dribbble"><a href="http://dribbble.com/clubberry" target="_blank">Dribbble</a></td>
<td class="deviantart"><a href="http://clubberry.deviantart.com" target="_blank">deviantART</a></td>
<td class="twitter"><a href="http://twitter.com/clubb3rry" target="_blank">Twitter</a></td>
<td class="vk"><a href="http://vkontakte.ru/iksde" target="_blank">Vkontakte</a></td>
</tr>
</table>
</div>
</div>
<div id="infozone">
<p>Artem Korolenko is the self-educated designer with experience in design sphere about 6~ years. Currently working as software tester in <a href="http://isd.dp.ua">Information Systems Development</a>
Artem currently resides in Ukraine, Dnepropetrovsk with his lovely family and his beatiful girlfriend.
<br />
If you want ask me anything, be sure to <a class="mailto" href="mailto:artkorolenko@russia.ru">get in touch</a></p>
</div>
</body>
</html>[/HTML]
<br /><br /><br /><br />
<div class="hello">Hello, there!</div>
Поржал... А теперь давайте свой CSS файлик..
ну не надо.. человек только учится.. :D
2ТС. Ксс в студию
Ой :rolleyes: Спасибо, я эксперементировал и забыл убрать. :D
CSS
/* CSS Document */
/* BODY
-----------------------------------------------------------------*/
body, td, th {
color: #000;
}
body {
background: #000;
margin: 0 auto;
text-align: center;
height: 100%;
}
#contentbg {
background: #333 url('woodenbg.jpg') no-repeat top center;
width: 100%;
margin: 0 auto;
text-align: center;
padding-top: 3%;
padding-bottom: 3%;
}
/* INTRODUCE
-----------------------------------------------------------------*/
.hello {
margin: 0 auto;
font-family: "Droid Serif", Georgia, Trebuchet MS, Times New Roman, serif;
font-style: italic;
font-size: 60px;
color: #eaeaea;
text-align: center;
text-shadow: 0px 3px 0px #000;
}
.description {
margin: 0 auto;
font-family: "Droid Serif", Georgia, Trebuchet MS, Times New Roman, serif;
font-size: 11px;
color: #eaeaea;
text-align: center;
text-shadow: 0px 2px 0px #000;
}
-----------------------------------------------------------------*/
.twitterbg {
background: url('talkbox.gif') no-repeat top center;
height: 147px;
margin: 25px;
text-align: center;
}
.twitterbg p {
font-family: "Droid Serif", Georgia, Trebuchet MS, Times New Roman, serif;
font-size: 16px;
color: #000;
text-align: left;
width: 445px;
margin: 0 auto;
height: 100px;
padding: 15px;
}
.twitterbg a {
color: #A32100;
text-decoration: none;
border-radius: 5px;
-moz-border-radius: 5px;
padding: 3px;
margin: -3px;
}
.twitterbg a:hover {
color: #FF3300;
background: #000;
border-radius: 5px;
-moz-border-radius: 5px;
padding: 3px;
margin: -3px;
}
#twitter ul {
list-style: none;
padding: 0;
margin: 0;
}
/* CONTENT + LINKS
-----------------------------------------------------------------*/
#content {
width: 477px;
margin: 0 auto;
margin-top: -15px;
text-shadow: 0px 2px 0px #000;
}
.mylinks {
font-family: "Droid Serif", Georgia, Trebuchet MS, Times New Roman, serif;
font-size: 12px;
color: #eaeaea;
margin: 0 auto;
margin-top: 10px;
margin-left: 200px;
padding-right: 6px;
}
.deviantart a {
font-family: "Droid Serif", Georgia, Trebuchet MS, Times New Roman, serif;
font-size: 12px;
color: #A32100;
text-decoration: none;
}
.deviantart a:hover {
color: #FF3300;
border-bottom: dashed;
border-width: 1px;
}
.vk a {
font-family: "Droid Serif", Georgia, Trebuchet MS, Times New Roman, serif;
font-size: 12px;
color: #A32100;
text-decoration: none;
}
.vk a:hover {
color: #FF3300;
border-bottom: dashed;
border-width: 1px;
}
.twitter a {
font-family: "Droid Serif", Georgia, Trebuchet MS, Times New Roman, serif;
font-size: 12px;
color: #A32100;
text-decoration: none;
}
.twitter a:hover {
color: #FF3300;
border-bottom: dashed;
border-width: 1px;
}
.dribbble a {
font-family: "Droid Serif", Georgia, Trebuchet MS, Times New Roman, serif;
font-size: 12px;
color: #A32100;
text-decoration: none;
}
.dribbble a:hover {
color: #FF3300;
border-bottom: dashed;
border-width: 1px;
}
/* FOOTER
-----------------------------------------------------------------*/
#infozone {
background: url('artemphoto.jpg') fixed 50% bottom;
}
#infozone p {
width: 400px;
height: 400px;
font-family: "Droid Serif", Georgia, Trebuchet MS, Times New Roman, serif;
font-size: 11px;
color: #666;
line-height: 20pt;
margin: 0 auto;
padding: 3%;
text-shadow: 0px 2px 0px #000;
}
#infozone p a {
color: #A32100;
text-decoration: none;
}
#infozone p a:hover {
color: #FF3300;
border-bottom: dashed;
border-width: 1px;
}
background-repeat: no-repeat;
background-position: top;
Не все браузеры принимают мешанину вроде "url('woodenbg.jpg') no-repeat top center".
Ну это как мерять ширину стола собственных пенисом: нелогично и неточно... Проще сделать отступ указав маржин...
Теперь по ЦСС...
Убирай из стилей весь следующий хлам:
1. width: 100% - для всех элементов, для которых не задан float или position:absolute - ширина всегда 100%.
2. margin: 0 auto; - вообще бред, тем более к бади..
3. Паддинги в % - это вообще жесть...
4.
[HTML]margin: 0 auto;
margin-top: 10px;
margin-left: 200px;[/HTML]
Это вообще очень смешной участок кода.
+ огромное количество мелких огрех...
Скорее всего из-за непонимания как что работает...
Если вы указываете
border-bottom: dashed;
то зачем потом внизу писать border-width:1px;
Логичней так:
border-bottom: dashed 1px #color;
Двойные указания марджинов, паддингов...
Очень много мусора...
При чем, претензии исключительно к CSS файлу...
Собственно, вы используете Dreamweaver... Он любит кучу мусора вставлять... Попробуйте сами... и обязательно обратитесь к документации по CSS на http://htmlbook.ru
Использую Notepad++, а он не портит код мусором, скорее мои кривые руки и опыт. :D
По поводу объединения я слышал, но ещё не пытался использовать его постоянно, где-то использую, где-то нет.
margin: 0 auto; — для body, content, twitterbg & infozone полюбому надо, иначе текст всё сдвигается и не по центру.
Паддинги исправил на пиксели.
Но сайт по прежнему не отображается в других браузерах.
Сделай как я выше написал. После этого Firefox стал отображать то что ты понаписал.
1. Тут и без ксс-а напортачено
Открываем - http://htmlbook.ru/html/script и читаем
Закрывающий тег - Обязателен.
То что браузер сам может добавлять закрывающий тэг - не означает, что так можно писать.
background-repeat: no-repeat;
background-position: top;
Не все браузеры принимают мешанину вроде "url('woodenbg.jpg') no-repeat top center".
Это какие не понимают??
Не помогает.
1. Тут и без ксс-а напортачено
Открываем - http://htmlbook.ru/html/script и читаем
То что браузер сам может добавлять закрывающий тэг - не означает, что так можно писать.
У меня же все теги закрыты. Кидал в валидатор, по поводу не закрытых тегов ничего не было.
Спасибо тебе :*
Ставлю баттл пива, что человек будет копать в сторону
body {overflow: hidden; }
и скрывать скролл прочими неочевидными методами )
Выложи, плз, архив со своей пагой... Вечером вернусь и переверстаю тебе так, как должно быть и уже с результата пойдешь читать и понимать код.
body {overflow: hidden; }
и скрывать скролл прочими неочевидными методами )
Возможно. Но он же не написал где у него скролл появился. ;)
Оверфлоу помог. :D
Оверфлоу помог. :D
мдя..
а может лучше было убрать height у p ?
Зачем ты ему вобще height задал?
а может лучше было убрать height у p ?
Зачем ты ему вобще height задал?
Чтобы изображение выравнивалось как надо. Если убрать width & height то, бекграунд уходит вверх.
выложи весь прожект с картинками.
если хочешь, что бы на будущие вопросы лучше отвечалось
Firefox 3.0.3 и IE6 наотрез отказались отображать таким образом написанную страницу.
Экий вы, батенька, неформал. Интересно, а в атомастерсикх ещё стоят котлы для экстренной замены на паровых автомобилях?
:eek:
Очень сомневаюсь что проблема была в этом.
IE6 прекрасно понимает такой синтаксис. Про ФФ3.0 вобще молчу.
В других случаях, всё стабильно отображалось сразу. Все браузеры нормально определяли код.
или в неправильном переопределении в дочерных правелах?
или в неправильном переопределении в дочерных правелах?
Даже не знаю. Завели в ступор честно говоря. Я вообще не до конца понимаю о правилах унаследования. :)
Забирай тут
Кратко:
1. Уменьшился CSS-файл (примерно в 2 раза, при этом комменты остались)
2. Нормально ездит окошко.
3. Скроллы не появляются )))
Смотреть: http://kxserv.net/temp/artem/
Валидатор: Валидный
пути правильные?
Пути вроде как стоят правильные. Можешь сам посмотреть.
http://sources.codenet.ru/download/3875/www.html
Когда гружу в валидатор с харда, находит две ошибки. Может ты не тот архив залил?:eek:
Так будет работать, только если inc, img лежат в корне.
http://sources.codenet.ru/download/3875/www.html
Когда гружу в валидатор с харда, находит две ошибки. Может ты не тот архив залил?:eek:
Я же написал - пути - абсолютные ))))
там где подключается ЦСС - спереди убери /
и там где скрипт - тоже...
там где подключается ЦСС - спереди убери /
и там где скрипт - тоже...
я не понимаю как это абсолютные пути)) это уже проблемы моего опыта)
жаль что фон не резиновый (
<link rel="stylesheet" href="css/style.css"/> относительный путь, т.к. отсутствие слэша указывает на то что путь к файлу относительно документа из которого он вызван