Показать сообщение отдельно
  #1 (permalink)  
Старый 07.07.2011, 20:04
Аспирант
Отправить личное сообщение для bartonom Посмотреть профиль Найти все сообщения от bartonom
 
Регистрация: 05.05.2011
Сообщений: 48

Проблема прижать div к правому краю
Здравствуйте!

Возникла проблема при верстке. Есть шапка и верхнее меню.
Хотелось бы, чтобы при масштабировании 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>
Вложения:
Тип файла: doc Образец.doc (292.5 Кб, 3 просмотров)

Последний раз редактировалось bartonom, 08.07.2011 в 09:01.
Ответить с цитированием