Сделайте пожалуйста)

[xoff]

Вот нужно сверстать такую шапку, где Project number, это вроде ссылок и когда наводишь на одну из ссылок справа появляется описание проекта, не знаю можно ли это сделать без ява скриптов чисто на хсс и хтмл, и если можно то сделайте мини урок где по шагам объясняется как вы верстали и желательно русские пометки в коде оставить) я как новичок был бы очень признателен.

p.s. не забудьте про белый блик сверху)

Psd file: Скачать

Edited November 19, 2011 by xoff

[ceil100]

вы не туда выложили

надо в: "Раздел для ленивых, лодырей и бездельников. Для тех, кто сам не хочет ничего делать, а хочет, чтобы всё сделали за него."

уже там

Edited November 19, 2011 by ceil100

[xoff]

вы не туда выложили

надо в: "Раздел для ленивых, лодырей и бездельников. Для тех, кто сам не хочет ничего делать, а хочет, чтобы всё сделали за него."

уже там

Спасибо, а тут реально получить помощь?) или тут не любят таких как я?

[ceil100]

почему не любят

кто-нибудь, у кого есть время и желание заглянет и, возможно, поможет

просто жди

[sigma77]

почему не любят

Я не люблю

На html и css это можно сделать как минимум двумя способами.

[xoff]

почему не любят

Я не люблю

На html и css это можно сделать как минимум двумя способами.

Если не сложно, опишите эти 2 способа)

[sigma77]

xoff,

hover - http://jsfiddle.net/wdLz5/

click - http://jsfiddle.net/dG3g2/

[gurylyov]

xoff, вам повезло, я не поленился заняться. сделал по методу, который предложила выше sigma77.

Никогда в жизни не писал столько комментариев. Но меня радуют люди, которые хотят понимать. Куда лучше было бы, если бы вы сами разобрались на самом деле, ну да ладно. Хватит разглагольствовать. Держите.

Edited November 19, 2011 by gurylyov

[xoff]

xoff, вам повезло, я не поленился заняться. сделал по методу, который предложила выше sigma77.

Никогда в жизни не писал столько комментариев. Но меня радуют люди, которые хотят понимать. Куда лучше было бы, если бы вы сами разобрались на самом деле, ну да ладно. Хватит разглагольствовать. Держите.

Спасибо большое) От души)

Только вот когда на весь экран делаешь блик съезжает, его можно зафиксировать как нибудь?)

result full screen

Edited November 20, 2011 by xoff

[Softlink]

xoff, вам повезло, я не поленился заняться. сделал по методу, который предложила выше sigma77.

Никогда в жизни не писал столько комментариев. Но меня радуют люди, которые хотят понимать. Куда лучше было бы, если бы вы сами разобрались на самом деле, ну да ладно. Хватит разглагольствовать. Держите.

Радиальные градиенты пока что лучше делать все-таки картинкой. Сейчас градиент не работает в Опере и ИЕ(9).

[xoff]

И еще если не сложно как убрать подчеркивание ссылок?

fiddle-вот пример

[sammasati]

http://jsfiddle.net/LDFNX/12/

Убрать подчеркивание ссылок, у которых class="link":

a.link {
text-decoration: none;
}

Edited November 20, 2011 by sammasati

[gurylyov]

Радиальные градиенты пока что лучше делать все-таки картинкой. Сейчас градиент не работает в Опере и ИЕ(9).

не обратил внимания на кроссбраузерность. спасибо за замечание, буду знать.

[xoff]

Только вот когда на весь экран делаешь блик съезжает, его можно зафиксировать как нибудь?)

result full screen

Помогите с этим все же)

[xoff]

Только вот когда на весь экран делаешь блик съезжает, его можно зафиксировать как нибудь?)

result full screen

Помогите с этим все же)

Туплю) сделал...

[xoff]

Помогите снова)

Вот что есть CSSDesk

http://xoffka.ru/ вот как смотрится на сайте.

Что нужно:

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

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

И самое главное что я не знаю как сделать это зафиксировать блик... я сделал картинкой ее, но когда меняешь размер окна браузера, то блик ездит.

P.S. Если не сложно опишите что вы изменяете комментариями в коде, я новичок и хочу вникнуть немного)

Edited November 24, 2011 by xoff

[sammasati]

1) Добавляем блок с текстом:

<div id="hr"></div>
<!-- вставляем контент после нижней черты -->
<div class="content">
<p>
Текст здесь
</p>
</div>
<!-- до последнего закрывающего дива -->
</div>

Прописываем стиль контента:

.content {
width: 740px; /* ширина блока. берется из ширины сайта минус ширина полей */
background: #ededed; /* цвет фона */
margin-top: 10px; /* отступ сверху от горизонтальной черты */
padding: 30px; /* поля внутри блока */
}

2) Дописываем в .text:

.text
{
    ...

    width: 580px; /* сначала устанавливаем ширину блока с текстом */
    text-align: center; /* потом выравниваем текст по центру */
}

3) Закрепить блик можно примерно так:

<div id="blick">
<!-- Удаляем картину отсюда -->
</div>

Удаляем старый стиль блика и пишем новый:

#blick  /* долгожданный блик */
{
    width: 557px; /* ширина блока под размер картинки*/
height: 167px; /* высота блока под размер картинки */
background: url(http://xoffka.ru/blick.png) left top no-repeat;  /* устанавливаем картинку в качестве фона, позиционируем слева-сверху, без повторений */
position: absolute;  /* абсолютное расположение блока */
top: 0; /* прижимаем блок к верху */
left: 50%; /* оступ слева на 50% размера онка. левый край картинки будет расположен в середине окна (по горизонтали) */
margin-left: -400px; /* смещаем картинку относительно центра на 400 пикселей влево */
}

Блик все-равно будет немного ездить, но это почти не заметно.

[xoff]

1) Добавляем блок с текстом:

<div id="hr"></div>
<!-- вставляем контент после нижней черты -->
<div class="content">
<p>
Текст здесь
</p>
</div>
<!-- до последнего закрывающего дива -->
</div>

Прописываем стиль контента:

.content {
width: 740px; /* ширина блока. берется из ширины сайта минус ширина полей */
background: #ededed; /* цвет фона */
margin-top: 10px; /* отступ сверху от горизонтальной черты */
padding: 30px; /* поля внутри блока */
}

2) Дописываем в .text:

.text
{
    ...

    width: 580px; /* сначала устанавливаем ширину блока с текстом */
    text-align: center; /* потом выравниваем текст по центру */
}

3) Закрепить блик можно примерно так:

<div id="blick">
<!-- Удаляем картину отсюда -->
</div>

Удаляем старый стиль блика и пишем новый:

#blick  /* долгожданный блик */
{
    width: 557px; /* ширина блока под размер картинки*/
height: 167px; /* высота блока под размер картинки */
background: url(http://xoffka.ru/blick.png) left top no-repeat;  /* устанавливаем картинку в качестве фона, позиционируем слева-сверху, без повторений */
position: absolute;  /* абсолютное расположение блока */
top: 0; /* прижимаем блок к верху */
left: 50%; /* оступ слева на 50% размера онка. левый край картинки будет расположен в середине окна (по горизонтали) */
margin-left: -400px; /* смещаем картинку относительно центра на 400 пикселей влево */
}

Блик все-равно будет немного ездить, но это почти не заметно.

Спасибо большое)

[xoff]

1) Добавляем блок с текстом:

<div id="hr"></div>
<!-- вставляем контент после нижней черты -->
<div class="content">
<p>
Текст здесь
</p>
</div>
<!-- до последнего закрывающего дива -->
</div>

Прописываем стиль контента:

.content {
width: 740px; /* ширина блока. берется из ширины сайта минус ширина полей */
background: #ededed; /* цвет фона */
margin-top: 10px; /* отступ сверху от горизонтальной черты */
padding: 30px; /* поля внутри блока */
}

2) Дописываем в .text:

.text
{
    ...

    width: 580px; /* сначала устанавливаем ширину блока с текстом */
    text-align: center; /* потом выравниваем текст по центру */
}

3) Закрепить блик можно примерно так:

<div id="blick">
<!-- Удаляем картину отсюда -->
</div>

Удаляем старый стиль блика и пишем новый:

#blick  /* долгожданный блик */
{
    width: 557px; /* ширина блока под размер картинки*/
height: 167px; /* высота блока под размер картинки */
background: url(http://xoffka.ru/blick.png) left top no-repeat;  /* устанавливаем картинку в качестве фона, позиционируем слева-сверху, без повторений */
position: absolute;  /* абсолютное расположение блока */
top: 0; /* прижимаем блок к верху */
left: 50%; /* оступ слева на 50% размера онка. левый край картинки будет расположен в середине окна (по горизонтали) */
margin-left: -400px; /* смещаем картинку относительно центра на 400 пикселей влево */
}

Блик все-равно будет немного ездить, но это почти не заметно.

Спасибо большое)

Сделал как сказали но блик вообще пропал)

http://jsfiddle.net/3jT6d/

[sammasati]

Сделал как сказали но блик вообще пропал)

http://jsfiddle.net/3jT6d/

Лишняя закрывающая скобка:

    width: 580px; /* сначала устанавливаем ширину блока с текстом */
    text-align: center; /* потом выравниваем текст по центру */
}
} /* <——————- */

#blick  /* долгожданный блик */
{

[xoff]

Сделал как сказали но блик вообще пропал)

http://jsfiddle.net/3jT6d/

Лишняя закрывающая скобка:

    width: 580px; /* сначала устанавливаем ширину блока с текстом */
    text-align: center; /* потом выравниваем текст по центру */
}
} /* <——————- */

#blick  /* долгожданный блик */
{

А да)

Ну и еще немного нужна ваша помощь)

В общем тут же http://xoffka.ru/

1.Надо как нибудь сделать что бы когда переходишь в раздел "Услуги" например, на открытой странице ссылка "услуги" была синий и текст который появлялся при наведении мыши показывался сразу.

2.И как сделать что бы заголовок xoffka был кликабельным и кидал на главную страницу сайта.

И опять если можно с комментариями в коде) спасибо.

Edited November 24, 2011 by xoff