Register();

تراز کردن متن و تصویر در یک خط

بازدید34.9kپست ها5آخرین فعالیت9 سال پیش
0
0
hasti
-1
hasti برنامه نویس
PHPJavascriptشبکه
9 سال پیش

درود بر شما
من یه کدی نوشتم که مربوط میشه به قسمت headerسایت.حالا میخوام که سمت راست صفحه لوگوم باشه و سمت چپ شماره تلفن و ایگون تلفن ولی تراز کردنش رو نمیدونم میشه کمکم کنید

body
{
	margin:0; 
	padding:0; 
	/*direction:rtl*/
	font-family:Tahoma;
}

#main
{
	width:1000px;
	height:600px;/*removed*/
	background-color:#fff;
	margin:0 auto;
	
	
}
#header
{
	width:1000px;
	height:109px; 
	float:left;
	margin-top:15px;
}

#bg-header-left
{
	width:11px;
	height:109px;
	
	background-image:url(../images/bg-header-left.png);
	background-repeat:no-repeat;
	float:left;
	
} 

#bg-header-center
{  

	width:978px;
	height:109px;
	
	float:left;
	background-image:url(../images/bg-header-center.png); 
	background-repeat:repeat-x;
}

#bg-header-right
{ 

	width:11px;
	height:109px;
	
	background-image:url(../images/bg-header-right.png);
	background-repeat:no-repeat;
	float:left;
	

}

#logo
{
	width:218px;
	height:32px;
	
	float:left; 
	margin-left:58px;
	margin-top:30px;
	
} 


#logo_right
{
	width:220px;
	height:23px;
	float:right; 
	margin-left:58px;
	margin-top:30px; 
	text-align:right;
	
}
	
	<!--Main Start-->
	<div id="main"> 
    
    	<!--Header Start-->
    	<div id="header">
        	<div id="bg-header-left"></div>
            <div id="bg-header-center">
            
            
            	<div id="logo_left"> 
                	
                    <a href="#">
                
                	<img src="images/logo.png" alt="" />
                    
                   </a>
                    
                </div>
                
                <div id="logo_right">
                
                	<p align="left"><img src="images/icon_phone.png" align="icon_phone" /><img src="images/phone.png" align="phone" /></p>
                
                </div>
            
            </div>
            <div id="bg-header-right"></div>
        
        </div>
        <!--Header End-->
    
    
    
    
    </div>
    <!--Main End-->
0
rockstar
44
rockstar Moderator
JoomlaوبمسترPHP
9 سال پیش

کد رو نگاهی کردم شما برای جابجایی div ها از margin-top و... استفاده کرده در اینطور حالت ها وقتی میخوای به راحتی یه div یا هرچی رو جابجا کنید بجای استفاده از margin ابتدا position: relative; تعیین کنید و با استفاده از دستور top و bottom بخش مورد نظر رو جابجا کنید. :32:مثال:

#id {
float: left;
position: relative;
top: 10px;
}

حتی میتونید از مقادیر منفی استفاده کنید:

#id {
float: left;
position: relative;
top: -10px;
}
0
hasti
-1
hasti برنامه نویس
PHPJavascriptشبکه
9 سال پیش

شرمنده من متوجه عرض شما نشدم من میخوام یه چیزی مثل این درست کنم

0
hasti
-1
hasti برنامه نویس
PHPJavascriptشبکه
9 سال پیش

یخورده بهش نزدیک شدم ولی همچنان بر از مشکله

body
{
	margin:0; 
	padding:0; 
	/*direction:rtl*/
	font-family:Tahoma;
}

#main
{
	width:1000px;
	height:600px;/*removed*/
	background-color:#FFF;
	margin:0 auto;
	
	
}
#header
{
	width:1000px;
	height:109px; 
	float:left;
	margin-top:15px;
}

#bg-header-left
{
	width:11px;
	height:109px;
	
	background-image:url(../images/bg-header-left.png);
	background-repeat:no-repeat;
	float:left;
	
} 

#bg-header-center
{  

	width:978px;
	height:109px;
	
	float:left;
	background-image:url(../images/bg-header-center.png); 
	background-repeat:repeat-x;
}

#bg-header-right
{ 

	width:11px;
	height:109px;
	
	background-image:url(../images/bg-header-right.png);
	background-repeat:no-repeat;
	float:left;
	

}

#logo_left
{
	width:218px;
	height:32px;
	float:left; 
	margin-left:58px;
	margin-top:30px;
	
}

.img1
{ 
	float: right;
	position: relative;
	top: -10px;

} 

.img2
{ 
	float:right;
	position: relative;
	top: -10px;

}
	<!--Main Start-->
	<div id="main"> 
    
    	<!--Header Start-->
    	<div id="header">
        	<div id="bg-header-left"></div>
            <div id="bg-header-center">
            
            
            	<div id="logo_left"> 
                	
                    <a href="#">
                
                	<img src="http://www.softafzar.net/images/logo.png" alt=""/>
                  
                    
                   </a>
                   </div>
                    <img src="http://www.softafzar.net/images/icon_phone.png" alt="icon" class="img1"/>
                     <img src="http://www.softafzar.net/images/phone.png" alt="phone" id="img2" />
                    
                </div>
                
            
            </div>
            <div id="bg-header-right"></div>
        
        </div>
        <!--Header End-->
    
    
    
    
    </div>
    <!--Main End-->
آخرین ویرایش: 08-09-2014 ???? 22:36، توسط رضا رمضانپور
0
rockstar
44
rockstar Moderator
JoomlaوبمسترPHP
9 سال پیش
<br> > ![](E:/pickweb/handman) شرمنده من متوجه عرض شما نشدم من میخوام یه چیزی مثل این درست کنم <br> اینجا که چیزی نیست! منم حرف پیچیده ای نزدم: شما میخوای لوگو سمت راست باشه از float: right استفاده میکنی و میخوای شماره تلفن سمت چپ باشه از float: left استفاده میکنی. حالا میخوای این دوتا از بالای صفحه یک فاصله داشته باشن یا به قول خودتون ترازشون کنید برای این کار اول position: relative رو برای هر دو در css تعریف کنید سپس میتونید با استفاده از دستور های top و bottom در css هرکدوم رو به هر اندازه که لازمه از بالای صفحه فاصله بدین! اشتباه شما اینه که از margin برای فاصله دادن عناصر و تراز کردنشون استفاده می کنید
0
hasti
-1
hasti برنامه نویس
PHPJavascriptشبکه
9 سال پیش

دوست عزیز ممنون مشکلم با راهنمائی شما کاملا برطرف شد

سوال برنامه نویسی دارید؟

ندونستن عیب نیست، نپرسیدن چرا!

حالا بپرسید

خوش آمدید

برای طرح سوال، ایجاد بحث و فعالیت در سایت نیاز است ابتدا وارد حساب کاربری خود شوید. در صورتی که هنوز عضو سایت نیستید میتوانید در عرض تنها چند ثانیه ثبت نام کنید.

عضویت