Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:

Почтовая рассылка

Подписчиков: -1
Последний выпуск: 19.06.2015

Сайт некорректно отображается в браузерах

32K
08 февраля 2011 года
Clubberry
186 / / 19.01.2011
Нормально отображается только в опере, а в остальных браузерах, либо показывает бекграунд картинку или просто бекграунд колор и всё. С чем может быть связанно?

Код:
[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]
49K
08 февраля 2011 года
Dexogen
22 / / 06.12.2010
А CSS файл взглянуть можно?
369
08 февраля 2011 года
Kesano
451 / / 09.10.2007
Цитата:
<div id="contentbg">
<br /><br /><br /><br />
<div class="hello">Hello, there!</div>



Поржал... А теперь давайте свой CSS файлик..

274
08 февраля 2011 года
Lone Wolf
1.3K / / 26.11.2006
Цитата: Kesano
Поржал... А теперь давайте свой CSS файлик..



ну не надо.. человек только учится.. :D

2ТС. Ксс в студию

32K
08 февраля 2011 года
Clubberry
186 / / 19.01.2011
Цитата: Kesano
Поржал...


Ой :rolleyes: Спасибо, я эксперементировал и забыл убрать. :D

CSS

Код:
@charset "UTF-8";
/* 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;
}




/* TWITTER
-----------------------------------------------------------------*/
.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;
}
32K
08 февраля 2011 года
Clubberry
186 / / 19.01.2011
Кстати, а что плохого в том, что я использовал такое количество <br />?
49K
08 февраля 2011 года
Dexogen
22 / / 06.12.2010
Почему не отображает? Потому что гладиолус :D Вот так надо делать, если позицию хочешь задать:
 
Код:
background-image: url('woodenbg.jpg');
background-repeat: no-repeat;
background-position: top;


Не все браузеры принимают мешанину вроде "url('woodenbg.jpg') no-repeat top center".
369
08 февраля 2011 года
Kesano
451 / / 09.10.2007
Цитата: Clubberry
Кстати, а что плохого в том, что я использовал такое количество <br />?



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

Теперь по ЦСС...
Убирай из стилей весь следующий хлам:
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

32K
08 февраля 2011 года
Clubberry
186 / / 19.01.2011
За сайт спасибо отдельное. :)

Использую Notepad++, а он не портит код мусором, скорее мои кривые руки и опыт. :D

По поводу объединения я слышал, но ещё не пытался использовать его постоянно, где-то использую, где-то нет.

margin: 0 auto; — для body, content, twitterbg & infozone полюбому надо, иначе текст всё сдвигается и не по центру.

Паддинги исправил на пиксели.

Но сайт по прежнему не отображается в других браузерах.
49K
08 февраля 2011 года
Dexogen
22 / / 06.12.2010
Цитата: Clubberry
Но сайт по прежнему не отображается в других браузерах.


Сделай как я выше написал. После этого Firefox стал отображать то что ты понаписал.

274
08 февраля 2011 года
Lone Wolf
1.3K / / 26.11.2006
Мдя...
1. Тут и без ксс-а напортачено
Открываем - http://htmlbook.ru/html/script и читаем
Цитата:

Закрывающий тег - Обязателен.


То что браузер сам может добавлять закрывающий тэг - не означает, что так можно писать.

274
08 февраля 2011 года
Lone Wolf
1.3K / / 26.11.2006
Цитата: Dexogen
Почему не отображает? Потому что гладиолус :D Вот так надо делать, если позицию хочешь задать:
 
Код:
background-image: url('woodenbg.jpg');
background-repeat: no-repeat;
background-position: top;


Не все браузеры принимают мешанину вроде "url('woodenbg.jpg') no-repeat top center".



Это какие не понимают??

32K
08 февраля 2011 года
Clubberry
186 / / 19.01.2011
Цитата: Dexogen
Сделай как я выше написал. После этого Firefox стал отображать то что ты понаписал.


Не помогает.

32K
08 февраля 2011 года
Clubberry
186 / / 19.01.2011
Цитата: Lone Wolf
Мдя...
1. Тут и без ксс-а напортачено
Открываем - http://htmlbook.ru/html/script и читаем

То что браузер сам может добавлять закрывающий тэг - не означает, что так можно писать.


У меня же все теги закрыты. Кидал в валидатор, по поводу не закрытых тегов ничего не было.

274
08 февраля 2011 года
Lone Wolf
1.3K / / 26.11.2006
и где у тебя закрывающий тэг?
 
Код:
<script src="twitter.js" type="text/javascript" />
32K
08 февраля 2011 года
Clubberry
186 / / 19.01.2011
Lone Wolf, всё, я разобрался! Я понял о чём ты. Раньше думал, что скрипты можно закрывать сразу же
 
Код:
<script type="text/javascript" src="twitter.js" />


Спасибо тебе :*
32K
08 февраля 2011 года
Clubberry
186 / / 19.01.2011
А как убрать скроллирование? В IE теперь появился скролл.
274
08 февраля 2011 года
Lone Wolf
1.3K / / 26.11.2006
Высоту/длину правильно задать ил ине задвать вобще..
369
08 февраля 2011 года
Kesano
451 / / 09.10.2007
Цитата: Lone Wolf
Высоту/длину правильно задать ил ине задвать вобще..



Ставлю баттл пива, что человек будет копать в сторону
body {overflow: hidden; }
и скрывать скролл прочими неочевидными методами )

369
08 февраля 2011 года
Kesano
451 / / 09.10.2007
ТСу:
Выложи, плз, архив со своей пагой... Вечером вернусь и переверстаю тебе так, как должно быть и уже с результата пойдешь читать и понимать код.
274
08 февраля 2011 года
Lone Wolf
1.3K / / 26.11.2006
Цитата: Kesano
Ставлю баттл пива, что человек будет копать в сторону
body {overflow: hidden; }
и скрывать скролл прочими неочевидными методами )



Возможно. Но он же не написал где у него скролл появился. ;)

32K
08 февраля 2011 года
Clubberry
186 / / 19.01.2011
Вертикальный скролл.

Оверфлоу помог. :D
274
08 февраля 2011 года
Lone Wolf
1.3K / / 26.11.2006
Цитата: Clubberry
Вертикальный скролл.

Оверфлоу помог. :D



мдя..
а может лучше было убрать height у p ?
Зачем ты ему вобще height задал?

32K
08 февраля 2011 года
Clubberry
186 / / 19.01.2011
Цитата: Lone Wolf
мдя..
а может лучше было убрать height у p ?
Зачем ты ему вобще height задал?


Чтобы изображение выравнивалось как надо. Если убрать width & height то, бекграунд уходит вверх.

274
08 февраля 2011 года
Lone Wolf
1.3K / / 26.11.2006
хм..
выложи весь прожект с картинками.
если хочешь, что бы на будущие вопросы лучше отвечалось
32K
08 февраля 2011 года
Clubberry
186 / / 19.01.2011
Вопросов уже нет. Пока никаких проблем. Приду домой, проверю на других разрешениях монитора и на всех браузерах, а то на работе только опера и ие стоят. :)
49K
09 февраля 2011 года
Dexogen
22 / / 06.12.2010
Цитата: Lone Wolf
Это какие не понимают??


Firefox 3.0.3 и IE6 наотрез отказались отображать таким образом написанную страницу.

366
09 февраля 2011 года
int
668 / / 30.03.2005
Цитата: Dexogen
Firefox 3.0.3 и IE6

Экий вы, батенька, неформал. Интересно, а в атомастерсикх ещё стоят котлы для экстренной замены на паровых автомобилях?

274
09 февраля 2011 года
Lone Wolf
1.3K / / 26.11.2006
Цитата: Dexogen
Firefox 3.0.3 и IE6 наотрез отказались отображать таким образом написанную страницу.



:eek:
Очень сомневаюсь что проблема была в этом.
IE6 прекрасно понимает такой синтаксис. Про ФФ3.0 вобще молчу.

32K
09 февраля 2011 года
Clubberry
186 / / 19.01.2011
В данном случае проблема была именно в этом. Когда я поменял, страничка стала отображаться стабильно, ну разве что в IE сначала скролл показывал, но потом пофиксил высоту блоков.

В других случаях, всё стабильно отображалось сразу. Все браузеры нормально определяли код.
274
09 февраля 2011 года
Lone Wolf
1.3K / / 26.11.2006
"В этом" в непонимании браузерами смешаного задания background
или в неправильном переопределении в дочерных правелах?
32K
09 февраля 2011 года
Clubberry
186 / / 19.01.2011
Цитата: Lone Wolf
"В этом" в непонимании браузерами смешаного задания background
или в неправильном переопределении в дочерных правелах?


Даже не знаю. Завели в ступор честно говоря. Я вообще не до конца понимаю о правилах унаследования. :)

369
09 февраля 2011 года
Kesano
451 / / 09.10.2007
Готово...
Забирай тут

Кратко:
1. Уменьшился CSS-файл (примерно в 2 раза, при этом комменты остались)
2. Нормально ездит окошко.
3. Скроллы не появляются )))

Смотреть: http://kxserv.net/temp/artem/
Валидатор: Валидный
32K
09 февраля 2011 года
Clubberry
186 / / 19.01.2011
Почему-то отображается только текст. КСС не срабатывает.
274
09 февраля 2011 года
Lone Wolf
1.3K / / 26.11.2006
Цитата: Clubberry
Почему-то отображается только текст. КСС не срабатывает.



пути правильные?

32K
09 февраля 2011 года
Clubberry
186 / / 19.01.2011
Цитата: Lone Wolf
пути правильные?


Пути вроде как стоят правильные. Можешь сам посмотреть.
http://sources.codenet.ru/download/3875/www.html

Когда гружу в валидатор с харда, находит две ошибки. Может ты не тот архив залил?:eek:

274
09 февраля 2011 года
Lone Wolf
1.3K / / 26.11.2006
А по какому адрессу лежит у тебя все?
Так будет работать, только если inc, img лежат в корне.
369
09 февраля 2011 года
Kesano
451 / / 09.10.2007
Цитата: Clubberry
Пути вроде как стоят правильные. Можешь сам посмотреть.
http://sources.codenet.ru/download/3875/www.html

Когда гружу в валидатор с харда, находит две ошибки. Может ты не тот архив залил?:eek:



Я же написал - пути - абсолютные ))))

там где подключается ЦСС - спереди убери /
и там где скрипт - тоже...

32K
09 февраля 2011 года
Clubberry
186 / / 19.01.2011
Цитата: Kesano
Я же написал - пути - абсолютные ))))

там где подключается ЦСС - спереди убери /
и там где скрипт - тоже...



я не понимаю как это абсолютные пути)) это уже проблемы моего опыта)

жаль что фон не резиновый (

369
09 февраля 2011 года
Kesano
451 / / 09.10.2007
<link rel="stylesheet" href="/css/style.css"/> - абсолютный путь, из корня сайта (диска), т.к. впереди "/"
<link rel="stylesheet" href="css/style.css"/> относительный путь, т.к. отсутствие слэша указывает на то что путь к файлу относительно документа из которого он вызван
32K
10 февраля 2011 года
Clubberry
186 / / 19.01.2011
Спасибо за разъяснение. :)
Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог