| |
|
|
| | Сразу же оговорюсь, что тестно работать с css начал недавно, до сего момента верстал таблицами и в основном все применение css сводилось к оформлению текста и наворотов в самих таблицах. Теперь вот решил перейти на css полностью и столкнулся с проблемой.
Описание проблемы:
делаю 2 блока подряд и задаю им все параметры, при полноразмерном окне все оке, однако при уменьшении размеров окна один блок начинает съездать под другой. Как этого избежать.
Что нужно:
2 блока сделать неразрывными, чтобы при уменьшении размера окна один блок не съезжал на строку вниз.
Код страницы 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>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="globalnav">
<img src="images/logo.gif" tppabs="http://www.dcafe.ru/images/master/logo.gif" alt="Dance Cafe - Øîó Áàëåò | Show Balet" /><a name="top_of_the_page" id="top_of_the_page"></a>
</div>
<div id="globalnav_submenu">
<img src="images/about.gif" alt="DANCE ÊÀÔÅ" width="240" height="60" class="padding" tppabs="http://www.dcafe.ru/images/menu_portfolio.gif" /><img src="images/shows.gif" alt="ÐÅÏÅÐÒÓÀÐ" width="240" height="60" class="padding" tppabs="http://www.dcafe.ru/images/menu_profile_on.gif" /><img src="images/vacancies.gif" alt="ÂÀÊÀÍÑÈÈ" width="240" height="60" class="padding" tppabs="http://www.dcafe.ru/images/menu_contact.gif" />
<img src="images/foto.gif" alt="ÔÎÒÎ" width="240" height="60" class="padding" tppabs="http://www.dcafe.ru/images/menu_portfolio.gif" /><img src="images/video.gif" alt="ÂÈÄÅÎ" width="240" height="60" class="padding" tppabs="http://www.dcafe.ru/images/menu_profile_on.gif" /><img src="images/contacts.gif" alt="ÊÎÍÒÀÊÒÛ" width="240" height="60" class="padding" tppabs="http://www.dcafe.ru/images/menu_contact.gif" /></li>
</div>
</body>
</html>
|
Код таблицы css:
body {
margin: 0;
padding: 0;
height: 100%;
font: normal 11px Tahoma, Arial, Helvetica, sans-serif;
background: #201011 url(../images/bg.jpg) no-repeat;
}
h1, h2, h3, h4 {
margin: 0;
padding: 0;
font-size: 11px;
}
img {
border: 0;
}
a,
a:hover {
color: #ffffb8;
text-decoration: underline;
}
/* main box with tables */
#box {
width: 880px;
margin-top: 5px;
margin-left: 50px;
padding: 10px;
background: #312226;
clear: left;
}
/* navigation and logo */
#globalnav {
display: inline-table;
float: left;
margin-top: 35px;
padding-top: 10px;
width: 200px;
height: 140px;
}
#globalnav_submenu{
display: inline-table;
float: left;
width: 750px;
height: 140px;
margin-left: 0px;
margin-top: 30px;
padding-top: 10px;
padding-left: 5px;
padding-right: 10px;
padding-bottom: 0px;
}
.padding {
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 3px;
}
|
Заранее спасибо за ответы и прошу не кидать в меня камнями, если ранее на форуме поднималась аналогичная тема. | |
| |
|
|
| |
|
|
| |
для: DJOV
(10.02.2007 в 01:50)
| | | По поводу существования значения inline-table у свойства display - это Вас кто-то круто обманул.
Такое значение не поддерживает ни один из известных браузеров.
Теперь о сути.
Абсолютный размер окна браузера (в пикселах) у клиента вам неизвестен.
Поэтому с помощью CSS можно сверстать только относительные конструкции.
Сиречь оперирующие процентами.
Как только эту мелочь Вы для себя уясните, к Вам моментально придёт понимание:
как именно надо записать то, что Вам нужно получить. | |
| |
|
|
| |
|
|
| |
для: DJOV
(10.02.2007 в 01:50)
| | | Итак, что касается
display: inline-table; - то Вам сюда http://css-info.narod.ru/visual-css.html#display - тут все про него подробно описано.
Теперь что касается Вашего упоминания там про размеры окна в % и px - как я понимаю.
1 - я не могу угадать точно размер окна браузера у пользователя, поэтому я могу либо выставлять все значения в %, либо намеренно выставить значения в px, тем самым сузив границы того, что он будет видеть.
2 - я так и не получил ответа на свой вопрос от Вас. Если Вы хотите выставить значения width в % везде, то это ни к чему не приведет, блоки просто разнесутся один под другим.
Еще раз. Мне нужно просто сделать так, чтобы один блок (который второй - он же правый на странице) при изменении размеров окна браузера не съезжал вниз на новую строку, а оставался на одном уровне с первым блоком (он же левый блок).
Вопрос еще раз - как это реализовать?
Ответы желательно давать четкие, а не так, мол подумайте над %, подумайте о глобальном. Я понимаю, что легче всего решить мою проблему - просто вставить таблицу с 2 столбцами и 1 рядом. | |
| |
|
|
| |
|
|
| |
для: DJOV
(10.02.2007 в 03:40)
| | | После <body>
вставь - <div style="position: absolute; top:0px; left:0px; height:1px; width:1115px;">
<div id="globalnav">
float:left
<div id="globalnav_submenu">
float:right
Размер width - можно определить скриптом, и подставить. Остальные размеры, относительно блока. | |
| |
|
|
| |
|
|
| |
для: куч1963
(10.02.2007 в 08:12)
| | | дело в том, что на Народе идет описание всех свойств css2, но реально браузеры поддерживают не все. display: inline-table; - не поддерживается.
в вашем варианте надо использовать значение minwidth - при достижение этого значения появится горизонтальный скрол. опять-таки ie6 это свойство не поддерживат, так что придется делать конструкцию из нескольких вложенных дивов.
http://softtime.ru/forum/read.php?id_forum=4&id_theme=30816&page=1
http://softtime.ru/forum/read.php?id_forum=4&id_theme=29474&page=1 | |
| |
|
|
| |
|
|
| |
для: DJOV
(10.02.2007 в 03:40)
| | | Чёткие ответы желательны, говорите?
Например, заключите ВСЁ вами написанное в <div style="width: 1234567890px"></div>.
А в стилях для body пропишите overflow-x: hidden.
Все ваши нынешние проблемы решатся кардинально. | |
| |
|
|
| |
|
|
| |
для: CNT
(10.02.2007 в 13:48)
| | | Спасибо огромное, метод, предложенный CNT действительно помог.
Если не затруднит, то, уважаемый, CNT опишите пожалуйста, что вы сделали?
Я так понимаю, что создали стиль с шириной блока 1234567890px и overflow для того, чтобы отображалась область только внутри этого блока - так? | |
| |
|
|
