Помогите с position: absolute

Тема в разделе "Веб-дизайн", создана пользователем Zloboff, 19 фев 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. Zloboff

    Zloboff Прохожие

    Начал верстать макет на слоях и столкнулся с проблемкой, в IE сайт отображается нормально, а в Opere слой с background'ом в право уходит...

    Вот код index.html

    Код:
    
    			<div id="autorize">
    				<div id="autorize-form">
    				<form action="./login.php" method="post">
    					<div><img src="images/vhod.png" alt="" /></div>
    					<div id="auto-form-1">
    						<input id="f1" type="text" name="login_username" value="логин" onfocus="if(this.value=='логин') this.value='';" onblur="if(this.value=='') this.value='логин';" accesskey="l" tabindex="1" />
    					</div>
    					<div id="auto-form-2">
    						<input id="f1" type="password" name="login_password" value="пароль" onfocus="if(this.value=='пароль') this.value='';" onblur="if(this.value=='') this.value='пароль';" tabindex="2" />
    					</div>
    					<div id="auto-form-2">
                <label title="Автоматически входить при каждом посещении"><input type="checkbox" name="autologin" value="1" tabindex="3" /> Запомнить</label>
    					</div>
    				</form>
    				</div>
    				<div id="autorize-form-2">
    					<input type="image" name="login" tabindex="4" src="images/enter.png" alt="Ok" />
    				</div>
    							<div id="reg"><a href="/profile.php?mode=register">Регистрация</a> | <a href="/profile.php?mode=sendpassword">Забыли пароль?</a></div>
    			</div>
    			</div>
    
    
    Вот код css
    Код:
    
    #autorize
    	{
    		float: left;
    		width: 257px;
    		height: 137px;
    		background-image:url(../images/menu/form-autorize.jpg);
    		background-repeat:no-repeat;
    		background-position: right;
    		position: absolute;
    	}		
    
    
    Пожалуйста помогите решить проблему :confused:
     

    Вложения:

    • opera.gif
      opera.gif
      Размер файла:
      181,4 КБ
      Просмотров:
      20
    • ie.gif
      ie.gif
      Размер файла:
      199,9 КБ
      Просмотров:
      20
  2. upandhigh

    upandhigh

    Регистр.:
    11 фев 2009
    Сообщения:
    235
    Симпатии:
    89
    на сколько я помню float и position:absolute взаимоисключающие параметры. т.е. должно быть что то оно ибо float выстаривает позицию относительно, а absolute по заданным координатам относительно окна
     
  3. Zloboff

    Zloboff Прохожие

    Дело в том что нужно этот слой с id="autorize" положить на слой id="content" частично... в IE отображается отлично всё это дело в Oper'e отображается не так как нужно, вообщем задача этот слой id="autorize" прибить к левому краю слоя c id="body" да так чтобы при изменении экрана элементы дизайна отображались нормально.
     
  4. silent.3w

    silent.3w Создатель

    Регистр.:
    23 янв 2009
    Сообщения:
    47
    Симпатии:
    0
    Попробуй вот этот хак
    Код:
    <style type="opera/css">
    .right_radius { top:1px; }
    </style>
    
    соответственно и для файла 
    
    <link rel="stylesheet" type="opera/css" href="?" />
    Сам не проверял но говорят что работает. А вообще попробуй обойтиь без связки position и float, в опере это больная мазоль
     
  5. Zloboff

    Zloboff Прохожие

    Не помогает :( Могу привести полный html и css код, сроки поджимают уже :(
     
  6. upandhigh

    upandhigh

    Регистр.:
    11 фев 2009
    Сообщения:
    235
    Симпатии:
    89
    давай, глянем.
     
  7. Zloboff

    Zloboff Прохожие

    index.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>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <link rel="stylesheet" type="opera/css" href="css/main.css" />
    <title>RAP.UA &mdash; Главная страница</title>
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel="stylesheet" href="css/main.css?v=1" type="text/css" />
    <!-- Report -->
    <link rel="stylesheet" type="text/css" href="css/report_hack.css" />
    <!-- Report [END] -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <!-- Подключаем библиотеку -->
    
    <script type="text/javascript" src="js/jquery.pack.js?v=1"></script>
    
    <script type="text/javascript" src="js/main.js?v=1"></script>
    <style type="opera/css">
    .right_radius { top:1px; }
    </style>
    
    <script type="text/javascript">
    var BB_ROOT       = "./";
    var cookieDomain  = "";
    var cookiePath    = "/";
    var cookieSecure  = 0;
    var cookiePrefix  = "bb_";
    var LOGGED_IN     = 1;
    var InfoWinParams = 'HEIGHT=510,resizable=yes,WIDTH=780';
    
    var user = {
    	opt_js: {"only_new":0,"h_flag":0,"h_av":0,"h_rnk_i":0,"h_post_i":0,"h_smile":0,"h_sig":0,"sp_op":0,"tr_t_ax":0},
    
    	set: function(opt, val, days, reload) {
    		this.opt_js[opt] = val;
    		setCookie('opt_js', $.toJSON(this.opt_js), days);
    		if (reload) {
    			window.location.reload();
    		}
    	}
    }
    
    
    $(document).ready(function(){
    	$('div.post_body wbr').after('<wbr></wbr>​');
    });
    
    var ajax = new Ajax('./ajax.php', 'POST', 'json');
    
    </script>
    
    <!--[if lt IE 7]><script type="text/javascript">
    $(document).ready(ie6_make_clickable_labels);
    
    $(document).ready(function(){
    	$('div.menu-sub').prepend('<iframe class="ie-fix-select-overlap"></iframe>'); // iframe for IE select box z-index issue
    	Menu.iframeFix = true;
    });
    </script><![endif]-->
    
    <!--[if gte IE 7]><style type="text/css">
    input[type="checkbox"] { margin-bottom: -1px; }
    </style><![endif]-->
    
    <!--[if lte IE 6]><style type="text/css">
    .forumline th { height: 24px; padding: 2px 4px; }
    </style><![endif]-->
    
    <!--[if IE]><style type="text/css">
    .code-copy { display: block; }
    .post-hr   { margin: 2px auto; }
    </style><![endif]-->
    
    <script type="text/javascript" src="./misc/js/develop.js"></script>
    <script type="text/javascript">
    function OpenInEditor ($file, $line)
    {
    	$editor_path = '';
    	$editor_args = '';
    
    	$url = BB_ROOT +'develop/open_editor.php';
    	$url += '?prog='+ $editor_path +'&args='+ $editor_args.sprintf($file, $line);
    
    	window.open($url,'','height=1,width=1,left=1,top=1,resizable=yes,scrollbars=no,toolbar=no');
    }
    </script>
    
    <style type="text/css">
    .menu-sub, #ajax-loading, #ajax-error, var.ajax-params { display: none; }
    
    /* temp */
    
    
    /* temp end */
    </style>
    </head>
    <body>
    	<center>
    		<div id="body">
    			<div id="logo">
    					<div id="search">
    		<form action="" method="post" onsubmit="
    		$(this).attr('action', $('#search-action').val());
    		var txt=$('#search-text').val(); return !(txt=='поиск...' || !txt);
    	">
    		<input type="hidden" name="max" value="1" />
    		<input type="hidden" name="to" value="1" />
    		<input id="form" type="text" name="nm" onfocus="if(this.value=='поиск...') this.value='';" onblur="if(this.value=='') this.value='поиск...';" value="поиск..." />
    		<select id="form2">
    			<option value="tracker.php#results" selected="selected">*по трекеру*</option>
    			<option value="search.php">*по форуму*</option>
    		  </select>
    		<input type="submit" class="med bold" value="&raquo;" style="width: 30px;" />
    	</form>
    					</div>
    					<div id="favorite">
    					<a href="/forum/"><img src="images/home.png" alt="" /></a>&nbsp; &nbsp; 
    					<a href="mailto:admin@rap.ua"><img src="images/mail.png" alt="" /></a>&nbsp; &nbsp; 
    					<a href="/"><img src="images/map.png" alt="" /></a>
    					</div>
    			</div>
    			<div id="menu-left">
    			<div id="menu">
    				<a href="/"><img style="padding: 9px 0px 0px 45px" src="images/menu/index.png" alt="" /></a>
    				<a href="/tracker.php"><img style="padding: 9px 0px 0px 49px" src="images/menu/traker.png" alt="" /></a>
    				<a href="/search.php"><img style="padding: 9px 0px 0px 55px" src="images/menu/search.png" alt="" /></a>
    				<a href="/"><img style="padding: 9px 0px 0px 57px" src="images/menu/pravila.png" alt="" /></a>
    				<a href="/faq.php"><img style="padding: 9px 0px 0px 69px" src="images/menu/faq.png" alt="" /></a>
    				<a href="/privmsg.php?folder=inbox"><img style="padding: 9px 0px 0px 60px" src="images/menu/private.png" alt="" /></a>
    			</div>
    			<div style="background-position: right;">
    			<div id="autorize">
    				<div id="autorize-form">
    				<form action="./login.php" method="post">
    					<div><img src="images/vhod.png" alt="" /></div>
    					<div id="auto-form-1">
    						<input id="f1" type="text" name="login_username" value="логин" onfocus="if(this.value=='логин') this.value='';" onblur="if(this.value=='') this.value='логин';" accesskey="l" tabindex="1" />
    					</div>
    					<div id="auto-form-2">
    						<input id="f1" type="password" name="login_password" value="пароль" onfocus="if(this.value=='пароль') this.value='';" onblur="if(this.value=='') this.value='пароль';" tabindex="2" />
    					</div>
    					<div id="auto-form-2">
                <label title="Автоматически входить при каждом посещении"><input type="checkbox" name="autologin" value="1" tabindex="3" /> Запомнить</label>
    					</div>
    				</form>
    				</div>
    				<div id="autorize-form-2">
    					<input type="image" name="login" tabindex="4" src="images/enter.png" alt="Ok" />
    				</div>
    							<div id="reg"><a href="/profile.php?mode=register">Регистрация</a> | <a href="/profile.php?mode=sendpassword">Забыли пароль?</a></div>
    			</div>
    			</div>
    			</div>
    			<div id="site">
    				<div id="navigation">
    				
    					<div>
    						<img src="images/rating.jpg" alt="Рейтинг" />
    					</div>
    					
    					<div id="nav2">
    						<table cellpadding="0"> 
    							<tr><td>Ваш рейтинг</td><td><b>нет</b> (DL < 2&nbsp;GB)</td></tr> 
    							<tr><td>Скачано</td><td class="leechmed"><b>0&nbsp;B</b></td></tr> 
    							<tr><td>Отдано</td><td class="seedmed"><b>0&nbsp;B</b></td></tr> 
    							<tr><td><i>на своих</i></td><td class="seedmed">0&nbsp;B</td></tr> 
    							<tr><td><i>бонус</i></td><td class="seedmed">0&nbsp;B</td></tr> 
    						</table> 
    					</div>
    										<div>
    						<img src="images/bt-clients.jpg" alt="Bit Torrent кленты" />
    					</div>
    					
    					<div id="nav">
    						<ul>
    						<li><a href="">uTorrent (1.8)</a></li>
    						<li><a href="">BitComet (0.8x)</a></li>
    						<li><a href="">ABC, Azureus, BitSpirit</a></li>
    						<li><a href="">Клиенты под Linux</a></li>
    						</ul>
    					</div>
    										<div>
    						<img src="images/faq.jpg" alt="Правила пользования ресурсом" />
    					</div>
    					<div id="nav">
    						<ul>
    						<li><a href="">Правила пользования данным ресурсом</a></li>
    						<li><a href="">Как тут качать?</a></li>
    						<li><a href="">Всё о рейтинге</a></li>
    						<li><a href="">Как создать и оформить раздачу</a></li>
    						<li><a href="">Правила оформления раздачи</a></li>
    						<li><a href="">Как создать torrent</a></li>
    						<li><a href="">Как организовать дораздачу</a></li>
    						<li><a href="">Часто употребляемые выражения</a></li>
    						<li><a href="">Руководство по BBCode</a></li>
    						<li><a href="">Как залить картинку на бесплатный хост</a></li>
    						<li><a href="">Как пользоваться Поиском</a></li>
    						<li><a href="">Решатель проблем (от p1415)</a></li>
    						</ul>
    					</div>
    										<div>
    						<img src="images/donate.jpg" alt="Помощь трекеру" />
    					</div>
    					<div>
    						<a href="/donate.php"><img src="images/donate-help.jpg" alt="Помощь трекеру" /></a>
    					</div>
    				</div>
    				<div id="content">
    					<div id="con">
    						<h1>Последние новости</h1>
    				  <p>&nbsp;</p>
    				  <p>&nbsp;</p>
    				  <p>&nbsp;</p>
    				  <p>&nbsp;</p>
    				  <p>&nbsp;</p>
    				  <p>&nbsp;</p>
    				  <p>&nbsp;</p>
    				  <p>&nbsp;</p>
    				  <p>&nbsp;</p>
    				  <p>&nbsp;</p>
    				  <p>&nbsp;</p>
    				  <p>&nbsp;</p>
    				  <p>&nbsp;</p>
    				  <p>&nbsp;</p>
    				  <p>&nbsp;</p>
    				  <p>&nbsp;</p>
    				  <p>&nbsp;</p>
    				  <p>&nbsp;</p>
    				  <p>&nbsp;</p>
    				  <p>&nbsp;</p>
    				  <p>&nbsp;</p>
    				  <p>&nbsp;</p>
    				  <p>&nbsp;</p>
    
    				  <p>&nbsp;</p>
    				  <p>&nbsp;</p>
    				  <p>&nbsp;</p>
    				  <p>&nbsp;</p>
    				  <p>&nbsp;</p>
    				  <p>&nbsp;</p>
    				  <p>&nbsp;</p>
    				  <p>&nbsp;</p>
    				  <p>&nbsp;</p>
    				  <p>&nbsp;</p>
    				  <p>&nbsp;</p>
    				  <p>&nbsp;</p>
    				  <p>&nbsp;</p>
    				  <p>&nbsp;</p>
    				  <p>&nbsp;</p>
    				  <p>&nbsp;</p>
    				  <p>&nbsp;</p>
    					</div>
    				</div>
    			</div>
    			<div id="copy-sub">
    			<div id="sub1"></div>
    			<div id="sub2"></div>
    			<a href="">пользовательское соглашение</a>&nbsp; &nbsp; | &nbsp; &nbsp;      
    			<a href="">для правообладателей</a>&nbsp; &nbsp; | &nbsp; &nbsp; 
    			<a href="">реклама на сайте</a>			</div>
    			<div id="copyright">
    				<div id="c1">
    				© 2009. Rap.ua. All rights reserved.<br />
    				Design by <a target="_blank" href="http://danjii.jimdo.com">Danjii</a>.<br />
    				Developed by <a target="_blank" href="http://mcfucktor.net.ru">MC Fucktor</a>.
    				</div>
    				<div id="c2">
    				Сайт не предоставляет электронные версии произведений, а занимается лишь коллекционированием и 
    				каталогизацией ссылок, присылаемых и публикуемых на форуме нашими читателями. Если вы являетесь
    				правообладателем какого-либо представленного материала и не желаете чтобы ссылка на него находилась в
    				нашем каталоге, свяжитесь с нами и мы незамедлительно удалим её. Файлы для обмена на трекере
    				предоставлены пользователями сайта, и администрация не несёт ответственности за их содержание. Просьба
    				не заливать файлы, защищенные авторскими правами, а также файлы нелегального содержания!
    				</div>
    			</div>
    		</div>
    	</center>
    </body>
    </html>
    
    main.css

    Код:
    *
    {
    	font-family:Tahoma;
    }
    body
    	{
    		margin: 0px;
    		padding: 0px;
    		background-color: #232b3b;
    		text-align: center;
    	}
    	
    img
    	{
    		border: 0px;
    	}
    
    h1
    	{
    		font-size: 16px;
    		color: #ffe389;
    		margin: 0px;
    		padding: 10px;
    	}
    
    h2
    	{
    		font-size: 14px;
    		color: #b26a4b;
    	}
    
    a
    	{
    		
    		font-size: 0.8em;
    		color: #FFFFFF;
    		font-weight: bold;
    		font-variant:small-caps;
    		text-decoration: none;
    		text-align: center;
    	}
    	
    a:hover
    	{
    		
    		font-size: 0.8em;
    		color: #FFFFFF;
    		font-weight: bold;
    		text-decoration: underline;
    		text-align: center;
    	}
    
    #body
    	{
    		background-color: #3f434b;
    		border-left: 1px solid #585d67;
    		border-right: 1px solid #585d67;
    		width: 962px;
    	}
    
    #logo
    	{
    		background-image: url(../images/logo.jpg);
    		background-repeat: no-repeat;
    		height: 271px;
    	}
    
    #head
    	{
    		width: 962px;
    	}	
    
    #form
    	{
    		float: left;
    		width: 106px;
    		height: 20px;
    		border: 1px solid #73476d;
    		background-color: #c3a7bd;
    		
    		font-size: 12px;
    		color: #876d81;
    		padding: 0px 0px 0px 10px;
    	}
    	
    #form2
    	{
    		float: left;
    		width: 106px;
    		height: 21px;
    		border: 0px;
    		background-color: #c3a7bd;
    		
    		font-size: 12px;
    		color: #876d81;
    		margin: 0px 0px 0px 10px;
    	}
    
    .med hold
    	{
    		border: 1px solid #73476d;
    		background-color: #c3a7bd;
    		
    		font-size: 12px;
    		color: #876d81;		
    	}
    
    #search
    	{
    		float: left;
    		width: 280px;
    		padding: 19px 10px 0px 75px;
    	}
    
    #select
    	{
    		float: left;
    		width: 140px;
    		padding: 19px 0px 0px 4px;
    	}
    
    #favorite
    	{
    		float: left;
    		width: 60%;
    		text-align: right;
    		padding: 6px 0px 0px 0px;
    	}
    
    #menu-left
    	{
    		text-align: left;
    	}
    
    #menu
    	{
    		background-image:url(../images/menu.png);
    		background-repeat: no-repeat;
    		height: 57px;
    		width: 705px;
    		padding: 0px;
    		margin: 0px;
    		text-align: left;
    		float: left;
    	}
    
    #autorize
    	{
    		width: 257px;
    		height: 137px;
    		background-image:url(../images/menu/form-autorize.jpg);
    		background-repeat:no-repeat;
    		background-position: right;
    		position: absolute;
    	}
    
    #autorize-form
    	{
    		padding:0px 0px 0px 59px;
    		float: left;
    		width: 141px;
    		font-size: 10px;
    		color: #ffffff;
    	}
    	
    #autorize-form-2
    	{
    		float: left;
    		width: 30px;
    		padding: 28px 0px 0px 8px;
    	}
    	
    #auto-form-1
    	{
    		padding: 10px 0px 0px 0px;
    		font-size: 12px;
    		color: #ffffff;
    	}
    
    #auto-form-2
    	{
    		padding: 8px 0px 0px 0px;
    		font-size: 12px;
    		color: #ffffff;
    	}
    
    #reg
    	{
    		font-size: 10px;
    		color: #df9285;
    		padding: 0px 0px 0px 59px;
    	}
    
    #reg a
    	{
    		text-decoration: none;
    		font-size: 10px;
    		color: #df9285;
    	}
    
    #reg a:hover
    	{
    		text-decoration: underline;
    		font-size: 10px;
    		color: #df9285;
    	}
    
    #f1
    	{
    		background-color: #c5addb;
    		border-top: 1px solid #8266a7;
    		border-left: 1px solid #cac9cb;
    		border-right: 1px solid #c5addb;
    		border-bottom: 1px solid #cac9cb;
    	}
    
    #menu a
    	{
    		border: 0px;
    	}
    
    #menu a:hover
    	{
    		border: 0px;
    	}
    
    #site
    	{
    		background-color: #3f434b;
    		width: 962px;
    		padding: 0px;
    	}
    
    #navigation
    	{
    		float: left;
    		width: 216px;
    		padding: 41px 21px 0px 23px;
    		background-color: #3f434b;
    		background-image:url(../images/m1.png);
    		background-repeat:no-repeat;
    	}
    
    #nav
    	{
    		background-color: #343639;
    		padding: 10px;
    		margin: 1px 0px 1px 0px;		
    		font-size:11px;
    		color: #c6d9ff;
    		text-align: left;
    	}
    
    #nav2
    	{
    		background-color: #343639;
    		padding: 10px;
    		margin: 1px 0px 1px 0px;
    		font-size:11px;
    		color: #c6d9ff;
    		text-align: left;
    		filter:alpha(opacity=50);
    		-moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
    		-khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
    		opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */
    		filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
    	}
    	
    #nav a
    	{
    		font-size:10px;
    		color: #c6d9ff;
    		text-align: left;
    		text-decoration: none;
    		letter-spacing: 1px;
    	}
    	
    #nav a:hover
    	{
    		color: #c6d9ff;
    		text-align: left;
    		text-decoration: underline;
    		letter-spacing: 1px;
    	}		
    
    #content
    	{
    		float: left;
    		width: 678px;
    		border-left: 1px solid #585d67;
    		border-right: 1px solid #585d67;
    		border-top: 1px solid #585d67;
    		border-bottom: 1px solid #585d67;
    		
    		font-size:12px;
    		color: #c6d9ff;
    		letter-spacing: 1px;
    		text-align: left;
    	}
    	
    #con
    	{
    		padding: 10px;
    	}
    
    #copy-sub
    	{
    		background-image: url(../images/copy-sub.png);
    		background-repeat: no-repeat;
    		width: 962px;
    		padding: 230px 0px 22px 0px;
    		color:#FFFFFF;
    		letter-spacing: 1px;
    		text-shadow: black 0px 0px 5px;
    		background-position:bottom;
    	}
    		
    #copyright
    	{
    		background-image:url(../images/copyright.jpg);
    		background-repeat: repeat-x;
    		height: 103px;
    		
    		font-size: 11px;
    		font-style: normal;
    		color: #FFFFFF;
    		text-align: left;
    	}
    	
    #c1
    	{
    		float: left;
    		width: 30%;
    		padding: 10px 0px 0px 37px;
    		text-align: justify;
    	}
    	
    #c2
    	{
    		float: left;
    		width: 60%;
    		padding: 10px 0px 0px 0px;
    		text-align: justify; 
    	}
    
     
  8. upandhigh

    upandhigh

    Регистр.:
    11 фев 2009
    Сообщения:
    235
    Симпатии:
    89
    в FF кстати тоже не работает.

    для menu-left добавь цсс margin:auto 0; и убери position: absolute; для авторайз. и глянь то что ты хочешь получается или нет? просто без картинок нехера не понять если честно.
     
  9. upandhigh

    upandhigh

    Регистр.:
    11 фев 2009
    Сообщения:
    235
    Симпатии:
    89
    FF 3 // IE7 // OPERA 9 - done
     
  10. Zloboff

    Zloboff Прохожие

    Спасибо огромное, не могли бы удалить вложение...
     
Статус темы:
Закрыта.