Проблема прижать div к правому краю
Вложений: 1
Здравствуйте!
Возникла проблема при верстке. Есть шапка и верхнее меню. Хотелось бы, чтобы при масштабировании 100, 200, 300% и т.д. Ссылки "Войти" и "Регистрация" были прижаты к краю. Все вроде работает, но при 100% эти ссылки далеко от края. А в Firefox еще ломается верстка при max. Можно ли исправить? Можно ли прижать к правому краю при 100% без таблицы? Попытка вынести правую часть верхнего меню <div class="um_r_box"> в <div id="um_backgr"> не удается. Так как в этом случае, при масштабировании выше 175% съезжает вниз под левую часть. А так (когда <div class="um_r_box"> в контейнере <div id="upper_menu"> ) проблема при 100% Если можно, подскажите как решить проблему? Примеры в нескольких браузерах – ниже в файле "Образец.doc": Код:.
<?php
header('Content-type: text/html; charset=utf-8');
?>
<!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>Макет </title>
<style type="text/css">
/* -------- ОБЩИЕ ДЛЯ ВСЕГО ДОКУМЕНТА --------------------------------------------------------------------------------- */
body {
margin:0; font:12px/18px Tahoma,Verdana,Arial,Helvetica,sans-serif;
background-color: #FFF;
font-size: 1em; /* default page font size is 10px (1em) */
}
html, body {height:100%;}
body{ margin: 0; padding: 0; /*outline: none;*/
}
div.case {
margin:0 auto;
padding:0;
background: #FFF;
}
a img { border: none } /* убираем синюю рамку */
a:link { color:#06F; text-decoration:none }
a:hover {color:#06F; text-decoration:underline} /*цвет и стиль при нахождении над ссылкой верхнего меню*/
/* ******************ШАПКА **********************/
#logo { /* логотип */
width:250px;
height:85px;
float:left;
padding:10px;
}
.notify_box {
width: 290px;
float:left;
line-height:15px;
text-align:justify;
padding:10px 25px 0 25px;
font-size:0.825em;
}
#header_backgr, #header {
background-image:url(../img/bkgr1.png);
background-repeat:repeat-x;
}
#header { /* div, вмещающей логотип и контент шапки */
width:1000px;
float:left;
}
#header_content { /* div, вмещающей только контент шапки (без логотипа) */
padding-right:23px;
float:left;
}
/* *************ВЕРХНЕЕ МЕНЮ **************************************** */
#um_backgr {
position:relative;
}
#um_backgr, #upper_menu, #um_backgr .um_r_box {
background-image:url(../img/upperMenu1.gif);
background-repeat:repeat-x;
border:1px solid #999;
margin: 0 0;
}
#upper_menu {
width:1000px;
float:left;
margin:-1px;
padding:0;
border-right:0;
overflow:visible;
}
.um_l_box { /* левая часть верхнего меню */
float:left;
padding:10px 0px 10px 10px;
font-size:0.925em;
}
#um_backgr .um_r_box { /* правая часть верхнего меню */
float:right;
font-size:0.925em;
padding:10px 0px 10px 10px;
border:none;
}
#upper_menu span, #upper_menu span.sr, #um_backgr .um_r_box span {
padding:5px 15px 5px 0px;
font-size:1em;
}
#upper_menu a {
color: #000;
font-weight: 600;
text-decoration: none;
}
#upper_menu a:hover { /*цвет и стиль при нахождении над ссылкой верхнего меню*/
color: #C90;
text-decoration:underline;
}
</style>
</head>
<body>
<div class = "case">
<div id="header_backgr">
<div id="header">
<div id="logo"><a href="/"><img src="/img/logo1.png" width="230px" height="75px" /></a></div>
<div id="header_content">
<div class="notify_box"><a href="#">
Lorem ipsum dolor sit amet</a><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa. Cum sociis natoque penatibus.
</div>
<div class="notify_box"><a href="#">Aenean massa. Cum sociis natoque </a><br />
Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</div>
</div>
</div>
<div style="clear: both;"></div>
</div>
<div id="um_backgr">
<div id="upper_menu">
*!*
<div class="um_l_box">
<span><a href="#">Главная </a></span> <!-- &cat=all" -->
<span><a href="#">Каталог </a></span>
<span><a href="#">Помощь</a></span>
</div>
<div class="um_r_box">
<span><a href='/login_form.php'>Войти</a></span>
<span><a href='/form_reg.php'>Регистрация</a></span>
</div>
*/!*
</div> <!-- end div#upper_menu -->
<div style="clear: both;"></div> <!-- div чтобы не схлопывался div id="um_backgr"-->
</div> <!-- end div#um_backgr -->
</div> <!-- end div.case -->
</body>
</html>
|
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Код (я удалил логотип, внизу объясню почему):
<!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=windows-1251">
<title>Макет </title>
<link rel="stylesheet" type="text/css" href="my.css" />
</head>
<body>
<div class = "case">
<div id="header_backgr">
<div id="header">
<div id="header_content">
<div class="notify_box"><a href="#">
Lorem ipsum dolor sit amet</a><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa. Cum sociis natoque penatibus.
</div>
<div class="notify_box"><a href="#">Aenean massa. Cum sociis natoque </a><br />
Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</div>
</div>
</div>
<div style="clear: both;"></div>
</div>
<div id="um_backgr">
<div id="upper_menu">
<div class="um_l_box">
<span><a href="#">Главная </a></span> <!-- &cat=all" -->
<span><a href="#">Каталог </a></span>
<span><a href="#">Помощь</a></span>
</div>
<div class="um_r_box">
<span><a href='/login_form.php'>Войти</a></span>
<span><a href='/form_reg.php'>Регистрация</a></span>
</div>
</div> <!-- end div#upper_menu -->
<div style="clear: both;"></div> <!-- div чтобы не схлопывался div id="um_backgr"-->
</div> <!-- end div#um_backgr -->
</div> <!-- end div.case -->
</body>
</html>
Стиль:
/* -------- ОБЩИЕ ДЛЯ ВСЕГО ДОКУМЕНТА --------------------------------------------------------------------------------- */
body {
margin:0; font:12px/18px Tahoma,Verdana,Arial,Helvetica,sans-serif;
background-color: #FFF;
font-size: 1em; /* default page font size is 10px (1em) */
}
html, body {height:100%;}
body{ margin: 0; padding: 0; /*outline: none;*/
}
div.case {
margin:0 auto;
padding:0;
background: #FFF;
}
a img { border: none } /* убираем синюю рамку */
a:link { color:#06F; text-decoration:none }
a:hover {color:#06F; text-decoration:underline} /*цвет и стиль при нахождении над ссылкой верхнего меню*/
/* ******************ШАПКА **********************/
#logo { /* логотип */
width:250px;
height:85px;
float:left;
padding:10px;
}
.notify_box {
width: 290px;
float:left;
line-height:15px;
text-align:justify;
padding:10px 25px 0 25px;
font-size:0.825em;
}
#header_backgr, #header {
background-image:url(../img/bkgr1.png);
background-repeat:repeat-x;
}
#header { /* div, вмещающей логотип и контент шапки */
width:1000px;
float:left;
}
#header_content { /* div, вмещающей только контент шапки (без логотипа) */
padding-right:23px;
float:left;
}
/* *************ВЕРХНЕЕ МЕНЮ **************************************** */
#um_backgr {
position:relative;
}
#um_backgr, #upper_menu, #um_backgr .um_r_box {
background-image:url(../img/upperMenu1.gif);
background-repeat:repeat-x;
border:1px solid #999;
margin: 0 0;
}
#upper_menu {
width:100%;
float:left;
margin:-1px;
padding:0;
border-right:0;
overflow:visible;
}
.um_l_box { /* левая часть верхнего меню */
float:left;
padding:10px 0px 10px 10px;
font-size:0.925em;
}
#um_backgr .um_r_box { /* правая часть верхнего меню */
float:right;
font-size:0.925em;
padding:10px 0px 10px 10px;
border:none;
}
#upper_menu span, #upper_menu span.sr, #um_backgr .um_r_box span {
padding:5px 15px 5px 0px;
font-size:1em;
}
#upper_menu a {
color: #000;
font-weight: 600;
text-decoration: none;
}
#upper_menu a:hover { /*цвет и стиль при нахождении над ссылкой верхнего меню*/
color: #C90;
text-decoration:underline;
}
Логотип я удалил, потому что он всё ломал. Если хотите, чтобы верхние три пункта стояли "в строку" и не съезжали никуда - делайте их таблицей. Дальше. Если вы хотите масштабируемости с сохранением пропорций и позиций элементов - то вам нужна "резиновая" вёрстка с указанием размеров в процентах. Остальное посмотрите в коде. У меня всё смотрелось достаточно неплохо)) |
bartonom, пример, сделаный тобой, конечно ооочень отвратный. Но как намёк
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
body {
margin:0; font:12px/18px Tahoma,Verdana,Arial,Helvetica,sans-serif;
background-color: #FFF;
font-size: 1em; /* default page font size is 10px (1em) */
}
html, body {height:100%;}
body{ margin: 0; padding: 0; /*outline: none;*/
}
div.case {
margin:0 auto;
padding:0;
background: #FFF;
}
a img { border: none } /* убираем синюю рамку */
a:link { color:#06F; text-decoration:none }
a:hover {color:#06F; text-decoration:underline} /*цвет и стиль при нахождении над ссылкой верхнего меню*/
#logo { /* логотип */
width:250px;
height:85px;
float:left;
padding:10px;
}
.notify_box {
width: 290px;
float:left;
line-height:15px;
text-align:justify;
padding:10px 25px 0 25px;
font-size:0.825em;
}
#header_backgr, #header {
background-image:url(../img/bkgr1.png);
background-repeat:repeat-x;
}
#header { /* div, вмещающей логотип и контент шапки */
width:1000px;
float:left;
}
#header_content { /* div, вмещающей только контент шапки (без логотипа) */
padding-right:23px;
float:left;
}
#um_backgr {
position:relative;
}
#um_backgr,
#upper_menu,
#um_backgr .um_r_box {
background-image:url(../img/upperMenu1.gif);
background-repeat:repeat-x;
border:1px solid #999;
margin: 0 0;
}
#upper_menu {
width:1000px;
float:left;
margin:-1px;
padding:0;
border-right:0;
overflow:visible;
}
.um_l_box { /* левая часть верхнего меню */
float:left;
padding:10px 0px 10px 10px;
font-size:0.925em;
}
#um_backgr .um_r_box { /* правая часть верхнего меню */
/*float:right;*/
position: absolute;
right: 0;
font-size:0.925em;
padding:10px 0px 10px 10px;
border:none;
}
#upper_menu span, #upper_menu span.sr, #um_backgr .um_r_box span {
padding:5px 15px 5px 0px;
font-size:1em;
}
#upper_menu a {
color: #000;
font-weight: 600;
text-decoration: none;
}
#upper_menu a:hover { /*цвет и стиль при нахождении над ссылкой верхнего меню*/
color: #C90;
text-decoration:underline;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class = "case">
<div id="header_backgr">
<div id="header">
<div id="logo"><a href="/"><img src="/img/logo1.png" width="230px" height="75px" /></a></div>
<div id="header_content">
<div class="notify_box"><a href="#">
Lorem ipsum dolor sit amet</a><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa. Cum sociis natoque penatibus.
</div>
<div class="notify_box"><a href="#">Aenean massa. Cum sociis natoque </a><br />
Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</div>
</div>
</div>
<div style="clear: both;"></div>
</div>
<div id="um_backgr">
<div id="upper_menu">
<div class="um_l_box">
<span><a href="#">Главная </a></span> <!-- &cat=all" -->
<span><a href="#">Каталог </a></span>
<span><a href="#">Помощь</a></span>
</div>
<div class="um_r_box">
<span><a href='/login_form.php'>Войти</a></span>
<span><a href='/form_reg.php'>Регистрация</a></span>
</div>
</div> <!-- end div#upper_menu -->
<div style="clear: both;"></div> <!-- div чтобы не схлопывался div id="um_backgr"-->
</div> <!-- end div#um_backgr -->
</div> <!-- end div.case -->
</body>
</html>
|
Цитата:
|
ksa, это самый надёжный вариант, который я знаю. При float:left/right всегда есть вероятность, что оно выстроится в столбик. При табличках - нет.
Хм... Я чего-то не знаю? |
Цитата:
|
Цитата:
Цитата:
|
Цитата:
2. Сделан из нескольких кусков 3. Форматирование кода и само его изготовление оставляет желать лучшего |
Вложений: 1
Цитата:
Насчет примера, мнение понятно. Но проблему ваш "намек" не решает: при увеличении масштаба правая часть меню наезжает на левую и далеко отступает от правого края контейнера |
| Часовой пояс GMT +3, время: 11:45. |