Если на сайте страниц более, чем одна, и необходимо выдержать какой-то общий стиль на всех страницах, то всегда делаю внешний файл css, общий для всего сайта. Если некоторые элементы страницы обладают, помимо общего стиля, какими-то своими остро индивидуальными особенностями, то прописываю эти особенности прямо в html этих элеменов, в конкретных тегах.
C чего начать..
- Автор темы Dominik
- Дата начала
-
Тут может быть ваша реклама
Чем дальше изучаю, тем становится больше вопросов.
Снова вернусь к сайту (беру его как пример для своих вопросов) _http://www.simplebits.com/
1 вопрос. Верхнее навигационное меню (home, notebook, work и т.д.) - при помощи чего оно сделано? Это явно не картинка, порезанная на зоны.. Простая таблица в "головном" div-e? Или же маленькие вложенные div-ы на каждое меню?
2 вопрос. Если я делаю низ сайта не резиновый (т.е. контейнер контента будет фиксированной длины, например 768 пикселей), то с течением времени, когда одна статья или новость будут идти друг за другом вниз по дате... с течением времени блоки новостей подойдут к этому фиксированному низу, к "footer"-у сайта... Что случится? И как сделать, чтобы они отправлялись в папку "Архив"?
Я так понимаю, что чтобы это сделать, нужно будет изучать "php"? Т.е. обработка ложится в таких случаях на сервер?
А если не делать фиксированный низ, то "новости, статьи" будут идти до победного вниз?
Снова вернусь к сайту (беру его как пример для своих вопросов) _http://www.simplebits.com/
1 вопрос. Верхнее навигационное меню (home, notebook, work и т.д.) - при помощи чего оно сделано? Это явно не картинка, порезанная на зоны.. Простая таблица в "головном" div-e? Или же маленькие вложенные div-ы на каждое меню?
2 вопрос. Если я делаю низ сайта не резиновый (т.е. контейнер контента будет фиксированной длины, например 768 пикселей), то с течением времени, когда одна статья или новость будут идти друг за другом вниз по дате... с течением времени блоки новостей подойдут к этому фиксированному низу, к "footer"-у сайта... Что случится? И как сделать, чтобы они отправлялись в папку "Архив"?
Я так понимаю, что чтобы это сделать, нужно будет изучать "php"? Т.е. обработка ложится в таких случаях на сервер?
А если не делать фиксированный низ, то "новости, статьи" будут идти до победного вниз?
Рапунзель
ты теорию хоть немного читал вообще-то? Ты код полюбившегося сайта смотрел? Львиная доля ответов на твои вопросы находится именно в коде.
Насчет фиксированного футера и статей. Тебе уже посоветовали изучить разные движки, изучи их, разберись с принципом, как это работает. Вот так вот, только на вопросах-ответах, далеко не уедешь, нужна самостоятельная теоретическая подготовка, ознакомление с принципами, возможностями, приёмами. А вопросы - это когда уже ну совсем невозможно разобраться и инфу найти негде, тогда несём вопрос в массы. Ликбезом здесь заниматься вряд ли кто будет, азы надо изучить самостоятельно, тогда и вопросы будут формулироваться грамотнее, да и поубавится их.
Удачи!
ты теорию хоть немного читал вообще-то? Ты код полюбившегося сайта смотрел? Львиная доля ответов на твои вопросы находится именно в коде.
Насчет фиксированного футера и статей. Тебе уже посоветовали изучить разные движки, изучи их, разберись с принципом, как это работает. Вот так вот, только на вопросах-ответах, далеко не уедешь, нужна самостоятельная теоретическая подготовка, ознакомление с принципами, возможностями, приёмами. А вопросы - это когда уже ну совсем невозможно разобраться и инфу найти негде, тогда несём вопрос в массы. Ликбезом здесь заниматься вряд ли кто будет, азы надо изучить самостоятельно, тогда и вопросы будут формулироваться грамотнее, да и поубавится их.
Удачи!
1.
а. Можно и в ячейках таблицы сделать, но это дурной вкус.
б. Можно дивами сделать, но это тоже дурной вкус.
в. Нужно делать списком ul и задать для него не вертикальное формирование а горизонтальное. Как это сделать с помощью CSS читай в инете.
2. Начинай подучивать php, ставь Wordpress. В нем это уже все сделано. (Имею ввиду разбивку на страницы, архив, и т.д. и т.п.)
Еще раз, привет всем! 
Вордпресс ставить не хочу - есть желание писать код лишь самому в ноутпаде.
Возник вопрос после недолгой практики. Каркас сайта в виде "хидер-а" и трех полос фиксированной ширины сделан.
В шапку сайта включил свой будущий логотип в виде картинки (так, чтобы она сливалась с фоном). Следующим моим шагом было создать меню, как я указывал выше (навигационное меню в строчку оказалось достаточно простым делом - это заслуга вот этой статьи _http://www.webmascon.com/topics/coding/37a.asp).
Это навигационное меню в строку я тоже включил в див "хидер".
И я наткнулся на проблему - "див" этого навигационного меню начинает делать отступы не от краев дива "хидер", а от картинки!
Сначала я не понимал в чем дело, но убрав картинку - все стало на свои места и меню свободно центрировалось там, где я этого хотел! (В этом помогла установка третьего браузера "Фаерфокса", в котором навигационное меню съезжало и было не видно!). До осознания "виновности" картинки - решал эту проблему (чтобы меню располагалось внизу "хидера"), задавая отрицательные величины margin-ов.. Но это оказалось неверным.
Такой вопрос - как заставить верхнее навигационное меню в строку отсчитывать отступы не от картинки в "хидер-е", а от его краев, что является стандартом и здравым смыслом!
Прописать для картинки еще один "див"?
Viper-у огромный респект, что посоветовал учить "css-ную" верстку - меня это окрыляет и захватывает не-по-детски.!
Вордпресс ставить не хочу - есть желание писать код лишь самому в ноутпаде.
Возник вопрос после недолгой практики. Каркас сайта в виде "хидер-а" и трех полос фиксированной ширины сделан.
В шапку сайта включил свой будущий логотип в виде картинки (так, чтобы она сливалась с фоном). Следующим моим шагом было создать меню, как я указывал выше (навигационное меню в строчку оказалось достаточно простым делом - это заслуга вот этой статьи _http://www.webmascon.com/topics/coding/37a.asp).
Это навигационное меню в строку я тоже включил в див "хидер".
И я наткнулся на проблему - "див" этого навигационного меню начинает делать отступы не от краев дива "хидер", а от картинки!
Сначала я не понимал в чем дело, но убрав картинку - все стало на свои места и меню свободно центрировалось там, где я этого хотел! (В этом помогла установка третьего браузера "Фаерфокса", в котором навигационное меню съезжало и было не видно!). До осознания "виновности" картинки - решал эту проблему (чтобы меню располагалось внизу "хидера"), задавая отрицательные величины margin-ов.. Но это оказалось неверным.
Такой вопрос - как заставить верхнее навигационное меню в строку отсчитывать отступы не от картинки в "хидер-е", а от его краев, что является стандартом и здравым смыслом!
Прописать для картинки еще один "див"?
Viper-у огромный респект, что посоветовал учить "css-ную" верстку - меня это окрыляет и захватывает не-по-детски.!
я так понял структура примерно так:
<div>
<div id=1>header+<img src="картинко">
<div id=2><ul><li>menu...</div>
</div>
</div>
ты хочеш чтобы отступы дива 2 считались от дива 1, а не от "картинко". Тогда вложенный див не поможет. все равно будет считать от картинки. вариант это сделать div 1 по размеру картини, задать ему в css background картинку с логотипом, а в него уже вложить див 2. в этом случае отсупы див 2 будет считать не от картинки, а от границ дивa 1.
<div>
<div id=1>header+<img src="картинко">
<div id=2><ul><li>menu...</div>
</div>
</div>
ты хочеш чтобы отступы дива 2 считались от дива 1, а не от "картинко". Тогда вложенный див не поможет. все равно будет считать от картинки. вариант это сделать div 1 по размеру картини, задать ему в css background картинку с логотипом, а в него уже вложить див 2. в этом случае отсупы див 2 будет считать не от картинки, а от границ дивa 1.
Viper, структура была именно такая. Но пока что не получается. Весь день бьюсь.
Дело в том, что я задал для див-а "хидер" фиксированную ширину и высоту. Когда прописываю там "имж срс=картинка", то все нормально - ее можно как угодно разместить.
Но когда потом я забабахиваю туда "горизонт.навигационное меню", то ведет себя получающая картина по-разному...
Но что самое неприятное, так это то, что параметры "margins" перестают работать и само навигационное меню, во-первых, не получается расположить так, чтобы его границы совпадали с границами див-а "хидера) (остается прогал), так плюс еще заданная фиксированная высота "хидера" увеличивается! Ужас, блин.
Я сейчас нашел еще статьи про горизонт.меню и буду изучать.. но думаю, что моя ошибка именно в распложении дивов.. Буду долбить дальше.
Как подключил Мозиллу, так вообще! В опере и ИЕ - нормально, а в ней - хер знает что.. Круто, в общем!
Я вот думаю, включить просто еще один "див" для навигационного меню, который располагался бы ниже "хидера", как думаете - что предпочтительнее: менять структуру лэйаута (т.е. 2 гориз-х полосы и 3 вертикальных) или же все-таки долбить с размещением в хидере?
Но почему могут не действовать "маргин-ы"?
Дело в том, что я задал для див-а "хидер" фиксированную ширину и высоту. Когда прописываю там "имж срс=картинка", то все нормально - ее можно как угодно разместить.
Но когда потом я забабахиваю туда "горизонт.навигационное меню", то ведет себя получающая картина по-разному...
Но что самое неприятное, так это то, что параметры "margins" перестают работать и само навигационное меню, во-первых, не получается расположить так, чтобы его границы совпадали с границами див-а "хидера) (остается прогал), так плюс еще заданная фиксированная высота "хидера" увеличивается! Ужас, блин.
Я сейчас нашел еще статьи про горизонт.меню и буду изучать.. но думаю, что моя ошибка именно в распложении дивов.. Буду долбить дальше.
Как подключил Мозиллу, так вообще! В опере и ИЕ - нормально, а в ней - хер знает что.. Круто, в общем!
Я вот думаю, включить просто еще один "див" для навигационного меню, который располагался бы ниже "хидера", как думаете - что предпочтительнее: менять структуру лэйаута (т.е. 2 гориз-х полосы и 3 вертикальных) или же все-таки долбить с размещением в хидере?
Но почему могут не действовать "маргин-ы"?
думаю 2-ой вариант проще реализовать. Да и зачем лишний геморой, если можно обойти
По поводу маргинов хз. Сам ещё не могу понять. Скорее всего просто некуда отступать.
По поводу маргинов хз. Сам ещё не могу понять. Скорее всего просто некуда отступать.
Все - добил! Оказалось, нужно было разбавить код "поситион: абсолют"! Тогда получилось выровнять маргинами блок горизонтальной менюшки.
Одинаково показывает во всех трех браузерах!
Теперь сталкнулся с другой проблемой - чтобы уточняющие надписи в горизонтальном меню, распологающиеся под названиями навигационных кнопок шли вниз (т.е. "Контакты", а под ней - "свяжитесь с нами"), а не в линию... Из-за этого меню расползается хрен знает как!
Если сталкивались с таким - поясните какой должен быть выход! Если нет - то разбирусь сам. Но пока перехожу к компоновке контента. Нужно отвлечься от этого меню!
P.S. Через некоторое время дам свой "старт-лист ссылок изучения хтмл/css для начинающих". !
Одинаково показывает во всех трех браузерах!
Теперь сталкнулся с другой проблемой - чтобы уточняющие надписи в горизонтальном меню, распологающиеся под названиями навигационных кнопок шли вниз (т.е. "Контакты", а под ней - "свяжитесь с нами"), а не в линию... Из-за этого меню расползается хрен знает как!
Если сталкивались с таким - поясните какой должен быть выход! Если нет - то разбирусь сам. Но пока перехожу к компоновке контента. Нужно отвлечься от этого меню!
P.S. Через некоторое время дам свой "старт-лист ссылок изучения хтмл/css для начинающих". !
Попробуй так:
Можешь ему и класс присвоить, чтобы в css задать стиль для всех надписей меню.
Код:
<p>Контакты<br />свяжитесь с нами</p>Привет всем.
Помогите обойти одну штуку: горизонт.навигационное меню не центрируется (по нижней границе) одинаково в ИЕ.6 и Мозилле.
В Мозилле НЕВОЗМОЖНО УБРАТЬ ВЕРХНИЙ ПАДДИНГ. Все перепробовал - достало!
В ИЕ.6.0 - все нормально, просто замечательно - результат именно тот, который я хочу.
Я регулирую позицию меню контейнером "#navmenu", задавая верхний маргинс 95пк. А из-за того, что в Мозилле не убирается верхний паддинг - не возможно выровнять его одинаково. Если выравнивать в Мозилле - в ИЕ будет слишком близко к эмблеме логотипа. Если же выравнивать в ИЕ, то в М. меню скатывается вниз..
Дайте совет..
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>home</title>
<style type="text/css">
#header {
height: 150px;
line-height: 80px;
margin: 0;
background: #f7941d;
width: 945px;
}
#logo {
position: absolute;
margin: 20px 0 0 30px;
padding: 0;
}
#navmenu {
position: absolute;
margin-top: 95px;
border: 1px solid #195a07;
}
#navcontainer ul li {
list-style-type: none;
display: block;
float: left;
font: 12px 'Trebuchet MS', sans-serif;
}
#navcontainer a {
margin: 0 5px 0 5px;
padding: 0 10px 0 5px;
color: #000;
text-decoration: none;
display: block;
border-left: 1px solid #195a07;
}
#navcontainer ul li a:hover { color: #fff; }
#navcontainer a:link#current, #navcontainer a:visited#current {
color: #000;
font-size: 14px;
}
</style>
</head>
<body>
<div id="header"><div id="logo"><image src="logo.jpg" alt="logo" width="365" height="70"></div>
<div id="navmenu">
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current"><strong>ONE</strong><br>home</a></li>
<li><a href="#"><strong>TWO</strong><br>two</a></li>
<li><a href="#"><strong>THREE</strong><br>three</a></li>
<li><a href="#"><strong>FOUR</strong><br>four</a></li>
<li><a href="#"><strong>FIVE</strong><br>five</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Помогите обойти одну штуку: горизонт.навигационное меню не центрируется (по нижней границе) одинаково в ИЕ.6 и Мозилле.
В Мозилле НЕВОЗМОЖНО УБРАТЬ ВЕРХНИЙ ПАДДИНГ. Все перепробовал - достало!
В ИЕ.6.0 - все нормально, просто замечательно - результат именно тот, который я хочу.
Я регулирую позицию меню контейнером "#navmenu", задавая верхний маргинс 95пк. А из-за того, что в Мозилле не убирается верхний паддинг - не возможно выровнять его одинаково. Если выравнивать в Мозилле - в ИЕ будет слишком близко к эмблеме логотипа. Если же выравнивать в ИЕ, то в М. меню скатывается вниз..
Дайте совет..
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>home</title>
<style type="text/css">
#header {
height: 150px;
line-height: 80px;
margin: 0;
background: #f7941d;
width: 945px;
}
#logo {
position: absolute;
margin: 20px 0 0 30px;
padding: 0;
}
#navmenu {
position: absolute;
margin-top: 95px;
border: 1px solid #195a07;
}
#navcontainer ul li {
list-style-type: none;
display: block;
float: left;
font: 12px 'Trebuchet MS', sans-serif;
}
#navcontainer a {
margin: 0 5px 0 5px;
padding: 0 10px 0 5px;
color: #000;
text-decoration: none;
display: block;
border-left: 1px solid #195a07;
}
#navcontainer ul li a:hover { color: #fff; }
#navcontainer a:link#current, #navcontainer a:visited#current {
color: #000;
font-size: 14px;
}
</style>
</head>
<body>
<div id="header"><div id="logo"><image src="logo.jpg" alt="logo" width="365" height="70"></div>
<div id="navmenu">
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current"><strong>ONE</strong><br>home</a></li>
<li><a href="#"><strong>TWO</strong><br>two</a></li>
<li><a href="#"><strong>THREE</strong><br>three</a></li>
<li><a href="#"><strong>FOUR</strong><br>four</a></li>
<li><a href="#"><strong>FIVE</strong><br>five</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Последнее редактирование модератором:
эмм... примерно так. жирным пометил что нужно было поменять.
и
Код:
#header {
background-color: #CCCCCC;
border: 1px solid #555;
height: 150px;
width: 945px;
[B]margin: 0px;
padding: 0px;[/B]
}
#logo {
background-color: #999999;
height: 110px;
}
[B]ul, li {
margin: 0;
padding: 0;
}[/B]
#navmenu {
position: absolute;
[B]margin: 0px;[/B]
/*border: 1px solid #195a07;*/
}и
Код:
<div id="header">
<div id="logo">Content for New Div Tag Goes Here</div>
<div id="navmenu">
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current"><strong>ONE</strong><br>home</a></li>
<li><a href="#"><strong>TWO</strong><br>two</a></li>
<li><a href="#"><strong>THREE</strong><br>three</a></li>
<li><a href="#"><strong>FOUR</strong><br>four</a></li>
<li><a href="#"><strong>FIVE</strong><br>five</a></li>
</ul>
</div>
</div>
</div>Привет, Всем!
Сайт полностью расписал на бумаге. Теперь в фотошопе оформляю страницы.
И понимаю, что пришло время задать пару вопросов по .php.
Прочитал (http://www.ibm.com/developerworks/ru/edu/os-phptut1/?S_TACT=105AGX99&S_CMP=EDU). Выяснил - чтобы начать создавать веб-ориентир-ые приложения на этом языке, нужно : сервер, "сам пхп" и "MySQL".
Вопросы:
1. Эти три условия нужны именно для создания (написания) кода или же для проверки работоспособности? Что будет, если я просто буду писать код в "нотепаде++" - я не увижу на странице браузера результатов?
2. Все эти три пункта - являются бесплатными "программами"? Что следует проштудировать вначале - МайЭсКьюЭл или же пхп?
3. У меня есть "Denwer3_PHP5_2008-01-13_5.2.4" пойдет ли он с дистрибутивом ПХП вер. 5.2.5? Что вообще представляет собой данный дистрибутив? Программа типа дримвивера?
Сайт полностью расписал на бумаге. Теперь в фотошопе оформляю страницы.
И понимаю, что пришло время задать пару вопросов по .php.
Прочитал (http://www.ibm.com/developerworks/ru/edu/os-phptut1/?S_TACT=105AGX99&S_CMP=EDU). Выяснил - чтобы начать создавать веб-ориентир-ые приложения на этом языке, нужно : сервер, "сам пхп" и "MySQL".
Вопросы:
1. Эти три условия нужны именно для создания (написания) кода или же для проверки работоспособности? Что будет, если я просто буду писать код в "нотепаде++" - я не увижу на странице браузера результатов?
2. Все эти три пункта - являются бесплатными "программами"? Что следует проштудировать вначале - МайЭсКьюЭл или же пхп?
3. У меня есть "Denwer3_PHP5_2008-01-13_5.2.4" пойдет ли он с дистрибутивом ПХП вер. 5.2.5? Что вообще представляет собой данный дистрибутив? Программа типа дримвивера?
Видимо вы плохо прочитали, либо усвоили саму мысль. В кратце - равносильно писать код Windows XP в блокноте не имея возможности его отлаживать и запускать приложения.
А теперь к главному.
1. PHP это язык написания сценариев. Т.е. для того чтобы они работали нужна платформа и интерпретатор. Под платформой я подразумеваю сервер apache + mysql + php, а под интерпретатором, сам php. Немного запутанно вышло... Вам потребуются все 3 части если вы планируете писать на php нормальные веб-приложения.
2. Да. GNU GPL
3. Подойдет. В данный дистр если не ошибаюсь входит apache + mysql + php. Лично я им не пользуюсь ибо мне больше по душе XAMPP
.
И снова непонятки у вас. Adobe Dreamveawer это полноценная профессиональная среда для написания чего угодно. (X)HTML/PHP/CFML/JAVA/CSS + шаблонизация + связь с БД(MSSQL/MySQL), которая стоит 400 уе Если нуно бесплатное IDE для разработки, то рекомендую Aptana IDE((X)HTML/PHP/JAVA/CSS/Ruby/Rails/AIR/RAD + связь с БД(MSSQL/MySQL)).
PS! Писать в Notepad++ что-либо серьезное завязанное на базу крайне не удобно.
А теперь к главному.
1. PHP это язык написания сценариев. Т.е. для того чтобы они работали нужна платформа и интерпретатор. Под платформой я подразумеваю сервер apache + mysql + php, а под интерпретатором, сам php. Немного запутанно вышло... Вам потребуются все 3 части если вы планируете писать на php нормальные веб-приложения.
2. Да. GNU GPL
3. Подойдет. В данный дистр если не ошибаюсь входит apache + mysql + php. Лично я им не пользуюсь ибо мне больше по душе XAMPP
.
И снова непонятки у вас. Adobe Dreamveawer это полноценная профессиональная среда для написания чего угодно. (X)HTML/PHP/CFML/JAVA/CSS + шаблонизация + связь с БД(MSSQL/MySQL), которая стоит 400 уе
Если нуно бесплатное IDE для разработки, то рекомендую Aptana IDE((X)HTML/PHP/JAVA/CSS/Ruby/Rails/AIR/RAD + связь с БД(MSSQL/MySQL)).PS! Писать в Notepad++ что-либо серьезное завязанное на базу крайне не удобно.
Подскажите, из-за чего, при ссылке на таблицу стилей <link rel="stylesheet" type="text/css" href="styles.css">
сбрасываются размеры шрифтов? И сами виды шрифтов?
Только синтаксическая ошибка?
сбрасываются размеры шрифтов? И сами виды шрифтов?
Только синтаксическая ошибка?