вопрос по верстке сайта

DeCa · 29.08.2010, 21:09

добрый день уважаемые форумчане

есть такой сайт

mediteczt точка ру / cleanrus

имеется ряд вопросов
1. скачет меню в разных браузерах вместе с контентом - особенно видно в опере. помогите отредкатировать

2. сайт представляет собой горизонтальную прокрутку которая осуществляется через ряд JS библиотек(приложил исходник) . так почему непонятно в один из BOX ов(boxaМИ называю эти самые сектора горизонтальной странички) я не могу вставить например простейшие lightbox или другие JS модальных окон? теоретически вставить можно но тогда идет конфликт с другой JS библиотекой и горизонтальная плавная анимация просто пропадает. как быть?

ccылка на пример
http://files.mail.ru/SPA4OX

заранее благодарен

Макс-Текс · 03.09.2010, 17:13

Меню почти не скачет. В IE чуть выше, в Opere чуть ниже.
Контент да, - прыгает - надо исправлять ошибки в верстке.
По второму вопросу:

Цитата:

вставить например простейшие lightbox или другие JS модальных окон

Непонятно, что вы имеете ввиду. Какие изменения нужно внести в BOX'ы?

Djeak · 14.09.2010, 14:32

Здравствуйте. Являюсь новичком в CSS. Не могу разобраться с одной хитростью, подскажите, пожалуйста.

Код:

body    
    {
        margin:0px;
        padding:0px;
        background-image:url(ima
ges/bg.png);
        background-repeat:repeat-x;
        background-color:#241e01;
    }

Вот html:

#mainwrap
    {
        width:940px;
        margin:0 auto;
        padding:0px;
        background-image:url(ima
ges/contentbg.png);
        background-repeat:repeat-y;
    }
#maincontainer
    {
        width:934px;
        float:left;
        margin:0px;
        padding:0 0 0 6px;
        background-image:url(ima
ges/contentbg.png);
        background-repeat:repeat-y;

Вот 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" />
<title>Kitty World</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="iepngfix_tilebg.js"></script>

<style type="text/css">
img,div, { behavior: url("iepngfix.htc") }
</style>
</head>

<body>
<div id="mainwrap">
<div id="maincontainer">
<div id="contentbg">
    <div id="leftPanel">
      <h3>Nullam a ligula ac turpis rhoncus consectetuer</h3>
      <h4>Donec fermentum nunc in leo sed sodales tempus dolor</h4>
      <img src="images/leftpic.jpg" alt="" class="leftpic" />
      <p class="leftpictxt">- Nunc nec quam et mauris scelerisque porta</p>
      <p class="lefttxt">Sed condimentum libero id purus feugiat placerat. Vivamus ornare bibendum dui. Vivamus sollicitudin justo sed elit. Suspendisse potenti. Quisque quam. Cras ultricies vehicula quam. Sed ac eros. Ut fringilla, neque in posuere lobortis, dolor tortor tincidunt ante, a hendrerit felis pede in risus.</p>
      <ul id="leftnav">
        <li class="topline"></li>
        <li><a href="#" class="leftnav">Sed a nunc at odio posuere sollicitudin quam neque posuere lobortis</a></li>
        <li><a href="#" class="leftnav">Proin tincidunt blandit pede</a></li>
        <li><a href="#" class="leftnav">Etiam vestibulum hendrerit purus totor tincidunt neque in poseurre suspendisse</a></li>
        <li><a href="#" class="leftnav">Aenean consequat nisl ut eros fiesta</a></li>
        <li><a href="#" class="leftnav">Etiam eget odio vitae eros convallis ultricies in order to sed amet</a></li>
        <li><a href="#" class="leftnav">Vivamus vel odio eu diam sodales lobortis of the fellista lullam hallentroupe</a></li>
      </ul>
    </div>
</div>
</div>
</body>
</html>

Не могу разобраться, почему если я убираю float:left; рамка пропадает. Если я стираю
background-image:url(images/contentbg.png);
background-repeat:repeat-y;
у #mainwrap это ни на что не влияет. Тут основное влияние: это float:left; и padding: 0 0 0 6px;
Вот сама картинка
contentbg.gif

Niemans · 14.09.2010, 14:40

потому что у заголовка h1 есть отступы.

Djeak · 14.09.2010, 14:50

В Css же не прописан заголовок h1 или Вы имеет ввиду:
#maincontainer
{
width:934px;
float:left;
margin:0px;
padding:0 0 0 6px;
background-image:url(ima
ges/contentbg.png);
background-repeat:repeat-y;

хорошо, а как сделать, чтобы была эта рамка, не используя float или применяя метод с гибкой разметкой? когда только или maincontainer или mainwrap

Niemans · 14.09.2010, 14:53

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

Djeak · 14.09.2010, 15:13

Я хочу разобраться, как это сделано и как это работает.
Почему появляются зубчики, почему используются два diva в которых вложено все содержимое, а не один. Можно ли сделать также, без float.
Вот картинка шаблона.
1035.jpg
Вот css и html
шаблон.zip
Вот что хотел изменить:
1.JPG

Niemans · 14.09.2010, 15:22

mainwrap и maincontainer можно объединить и в стилях прописать: width: 928px; margin: 0 auto; padding: 0 6px; background: url(link) 0 0 repeat-y; ну соответственно фоновая картинка 940px на 1px с "зубчиками"

Djeak · 14.09.2010, 15:25

Так фоновая картинка, это одна полоска, она без "зубчиков" Мне интересно, как получаются эти зубчики, за счет чего.

Niemans · 14.09.2010, 15:35

сорри вложение не посмотрел, внутри maincontainer блоки с флоат, также как и у родителя, убрав флоат у родителя фоновая картинка не растягивается на всю высоту контента. Можно убрать у maincontainer флоат, и тогда либо overflow: hidden для mainwrap или пустые блоки с clear: both

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Вопрос по верстке на странице	Ni_Splinter	HTML, CSS, JavaScript	5	19.04.2012 22:01
Вопрос по верстке	Niemans	Кальянная	9	10.05.2010 23:11
Вопрос по верстке	Niemans	HTML, CSS, JavaScript	108	07.05.2010 17:09
Вопрос по CSS верстке	localhost	HTML, CSS, JavaScript	4	26.03.2009 18:47
Вопрос по верстке	sanchez911	HTML, CSS, JavaScript	2	01.03.2006 21:21

29.08.2010, 21:09	#1
DeCa	добрый день уважаемые форумчане есть такой сайт mediteczt точка ру / cleanrus имеется ряд вопросов 1. скачет меню в разных браузерах вместе с контентом - особенно видно в опере. помогите отредкатировать 2. сайт представляет собой горизонтальную прокрутку которая осуществляется через ряд JS библиотек(приложил исходник) . так почему непонятно в один из BOX ов(boxaМИ называю эти самые сектора горизонтальной странички) я не могу вставить например простейшие lightbox или другие JS модальных окон? теоретически вставить можно но тогда идет конфликт с другой JS библиотекой и горизонтальная плавная анимация просто пропадает. как быть? ccылка на пример http://files.mail.ru/SPA4OX заранее благодарен Последний раз редактировалось DeCa; 29.08.2010 в 21:11..

14.09.2010, 14:40	#4
Niemans	потому что у заголовка h1 есть отступы.

14.09.2010, 14:50	#5
Djeak	В Css же не прописан заголовок h1 или Вы имеет ввиду: #maincontainer { width:934px; float:left; margin:0px; padding:0 0 0 6px; background-image:url(ima ges/contentbg.png); background-repeat:repeat-y; хорошо, а как сделать, чтобы была эта рамка, не используя float или применяя метод с гибкой разметкой? когда только или maincontainer или mainwrap

14.09.2010, 14:53	#6
Niemans	сделайте скриншоты, как есть и как хотите чтобы было, я из слов собрать предложение не могу.

14.09.2010, 15:13	#7
Djeak	Я хочу разобраться, как это сделано и как это работает. Почему появляются зубчики, почему используются два diva в которых вложено все содержимое, а не один. Можно ли сделать также, без float. Вот картинка шаблона. 1035.jpg Вот css и html шаблон.zip Вот что хотел изменить: 1.JPG

14.09.2010, 15:22	#8
Niemans	mainwrap и maincontainer можно объединить и в стилях прописать: width: 928px; margin: 0 auto; padding: 0 6px; background: url(link) 0 0 repeat-y; ну соответственно фоновая картинка 940px на 1px с "зубчиками"

14.09.2010, 15:25	#9
Djeak	Так фоновая картинка, это одна полоска, она без "зубчиков" Мне интересно, как получаются эти зубчики, за счет чего.

14.09.2010, 15:35	#10
Niemans	сорри вложение не посмотрел, внутри maincontainer блоки с флоат, также как и у родителя, убрав флоат у родителя фоновая картинка не растягивается на всю высоту контента. Можно убрать у maincontainer флоат, и тогда либо overflow: hidden для mainwrap или пустые блоки с clear: both