Проблема с CSS - мой DIV рухнул! - PullRequest
1 голос
/ 27 мая 2009

На домашней странице моего сайта - www.mobiuspc.com, у меня есть несколько отдельных разделов, которые я выделил цветом, чтобы я мог видеть, как все это выложено. Есть раздел главной страницы, который работает просто отлично (это панель загара с кнопками типа «Компоненты» и т. Д.), И на этом уровне и выше все работает так хорошо, как я мог бы пожелать.

Внизу у меня есть некоторые проблемы. Есть 3 основных DIV, которые я использую, чтобы разбить страницу:

<div id="mainarea" runat="server" >

Это что-то среднее между областью заголовка / главной страницы и областью с желтым цветом. Предполагается, что эта большая область имеет высоту 700px, ширину 1024px и окрашена в серебристый цвет. Если вы зайдете на сайт, вы увидите, что это не так. Есть панель с повторяющимся образом жесткого диска, которая является моей зоной перетаскивания для функции перетаскивания (не связанной с этим вопросом). Я настроил его на запуск сервера, потому что если я этого не сделаю, то Drag 'n Drop, похоже, сломается.

<div id="categorybar">

Это область с желтым цветом, которая содержит все мои кнопки. Я рада этому. Нажмите кнопку «Дисплей» и посмотрите, что происходит с DIV над ним. Это выходит за пределы! Мой CSS для установки его ширины и высоты, похоже, отменен.

<div id="detailbox">

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

Первоначально можно было подумать, что мой CSS не работает. Если это так, я не вижу где! Я установил высоту / ширину и все такое хорошее. Я попытался добавить float: left в случайные секции, безрезультатно. Вот соответствующие выдержки из моего файла CSS "

#mainarea
{
background-color:Silver;
height:700px;
width:1024px;
}

#categorybar
{
background-color:Yellow;
height:80px;
width:1024px;
}

#detailbox
{
background-color:Blue;
height:420px;
width:1024px;
}

Я создаю объекты во время выполнения, когда вы нажимаете кнопку «Показать», и все эти объекты добавляются в панель, которая находится в #mainarea DIV. Эта панель известна как набор инструментов, и вот ее свойства CSS:

#toolboxpanel
{
height:700px;
width:324px;
max-height:700px;
max-width:324px;
overflow:scroll;
}

По какой-то причине он продолжает расширяться за пределы своего предопределенного размера, когда я добавляю элементы управления во время выполнения вместо простой полосы прокрутки, как мне хотелось бы. Панель со всеми изображениями жесткого диска в качестве зоны перетаскивания, которая также находится в #mainarea DIV, и вот CSS на тот случай, если он уместен:

#droppanel
{
height:700px;
width:700px;
margin-top:-700px;
margin-left:324px;
}

Должен ли я избавиться от бита runat = server? Если я сделаю это и нажму на кнопку отображения, я все равно получу эту ужасную панель, расширяющуюся до самого конца страницы, но по крайней мере серебристый цвет #mainarea DIV остается нужного размера (панель просто выходит из-под контроля ). Если я пойду по этому пути, есть идеи, почему он ломает мое сопротивление? Я надеюсь, что мне не нужно идти по этому пути, и вместо этого в моем CSS есть что-то глупое, что я пропускаю ...

Спасибо за вашу помощь! Билл

1 Ответ

3 голосов
/ 27 мая 2009

runat = "server" изменит идентификатор клиента элемента управления, на котором вы его используете, что означает, что ваша #mainarea css не будет применяться.

Вы можете обойти это, назначив mainarea класс css и используя его для применения стилей, а не его идентификатора.

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