Форум

bartonom · #1 (**permalink**) 07.07.2011, 20:04

Здравствуйте!

Возникла проблема при верстке. Есть шапка и верхнее меню.
Хотелось бы, чтобы при масштабировании 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>

trikadin · #2 (**permalink**) 07.07.2011, 20:47

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

trikadin · #3 (**permalink**) 08.07.2011, 09:38

Код (я удалил логотип, внизу объясню почему):

<!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;
}

Логотип я удалил, потому что он всё ломал. Если хотите, чтобы верхние три пункта стояли "в строку" и не съезжали никуда - делайте их таблицей.

Дальше. Если вы хотите масштабируемости с сохранением пропорций и позиций элементов - то вам нужна "резиновая" вёрстка с указанием размеров в процентах. Остальное посмотрите в коде. У меня всё смотрелось достаточно неплохо))

ksa · #4 (**permalink**) 08.07.2011, 09:50

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 · #5 (**permalink**) 08.07.2011, 09:52

Сообщение от trikadin

Если хотите, чтобы верхние три пункта стояли "в строку" и не съезжали никуда - делайте их таблицей.

Применять таблички для "несъежания" это круто!

trikadin · #6 (**permalink**) 08.07.2011, 10:05

ksa, это самый надёжный вариант, который я знаю. При float:left/right всегда есть вероятность, что оно выстроится в столбик. При табличках - нет.

Хм... Я чего-то не знаю?

ksa · #7 (**permalink**) 08.07.2011, 10:11

Сообщение от trikadin

Я чего-то не знаю?

Есть много ,друг Горацио, на свете, что и не снилось нашим мудрецам. (c)

bartonom · #8 (**permalink**) 08.07.2011, 10:16

Сообщение от ksa

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

bartonom, пример, сделаный тобой, конечно ооочень отвратный. Но как намёк

Можно пояснить в чем заключается "отвратность" примера?

ksa · #9 (**permalink**) 08.07.2011, 10:21

Сообщение от bartonom

Можно пояснить в чем заключается "отвратность" примера?

1. Много лишнего кода (не нужного для показа проблемы)
2. Сделан из нескольких кусков
3. Форматирование кода и само его изготовление оставляет желать лучшего

bartonom · #10 (**permalink**) 08.07.2011, 10:50

Сообщение от ksa

1. Много лишнего кода (не нужного для показа проблемы)
2. Сделан из нескольких кусков
3. Форматирование кода и само его изготовление оставляет желать лучшего

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

Форум

Справочник

Discord чат

Курсы javascript