مشکل در کنار هم قرار دادن تصاویر در html و css

Cyletech · Feb 20, 2011

سلام دوستان،

لطفاً به تصویر زیر نگاه کنید ، مشکلم رو متوجه خواهید شد.

کدی که در صفحه HTML نوشتم اینگونه هست:

HTML:

[RIGHT]<div id="title">
<img src="images/title_right.gif" width="8px" height="38px"/><div class="ctitle">اینجا می تونیم بنویسیم</div><img src="images/title_left.gif" width="8px" height="38px"/></div>
[/RIGHT]

کدی هم که برای CSS نوشتم این است:

HTML:

[RIGHT]#title{
color: white;
}
#title .ctitle{
background-color: black;
width: 25%;
height: 38px;
}
[/RIGHT]

مطمئناً مشکلم رو متوجه شدید. فقط یک خواهشی هم دارم. اگر مشکل دیگه ای می بینید که باید برطرفش کنم (دارم تمرین می کنم) بهم بگین تا دیگه تکرار نکنم. مرسی :rose:

یک سوال دیگری هم دارم: مرورگر از کدوم سمت شروع به خوندن کد ها می کنه؟ مثلاً اول هدر بعد راست و بعد چپ یا غیره؟

tenaonline · Feb 22, 2011

شما اصلاً میخواید چیکار کنید؟
یک باکس باشه که توش بنویسید و لبه هاش گرد باشه ؟
مشکلتون رو واضح توضیح بدید

Milad · Feb 22, 2011

استفاده از Float

Cyletech · Feb 22, 2011

Roxeta گفت:
استفاده از Float

از float الان استفاده کردم. فقط مشکل الان اینجاست که زیر اون خط مشکلی تصاویر قرار گرفتن. وگرنه چپ و راستشون درسته. کد Css نهایی اینه:

HTML:

#title{
color: white;
margin: auto;
}
#title .ctitle{
background-color: black;
width: 25%;
height: 38px;
margin: auto;
}
#title .ltitle{
float: left;
}

html هم شده این:

HTML:

<div id="title">
<img src="images/title_right.gif" style="margin: auto; float: right;" width="8px" height="38px"/><div class="ctitle">اینجا می تونیم بنویسیم</div><img src="images/title_left.gif" class="ltitle" width="8px" height="38px"/></div>

Mohammad · Feb 22, 2011

فقط مشکل الان اینجاست که زیر اون خط مشکلی تصاویر قرار گرفتن

یعنی چی ؟؟؟ لطف کنید مثل قبل یه عکس بذارید

sharktech · Feb 22, 2011

PHP:

<style>
#title {
    direction:rtl;
    font-family:Tahoma, Geneva, sans-serif;
    margin: 5px auto;
    width: 200px;
    height:30px;
    border:1px solid #000;
    background:#000;
    color:#FFF;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    padding:8px 10px 0 0
}
</style>
<p id="title">اینجا می تونی بنویسیم</p>

Milad · Feb 22, 2011

همینی که دوستمون sharktech گفتند بهترین روشه ، فقط تو ie ساپرت نمیشه که نسخه 9 برطرف شده این مشکل ! و اینکه برای استفاده از عکس باید یک کمی position هم قاطی مسئله کنی .

Cyletech · Feb 23, 2011

ممنونم از همه ولی ای کاش یکم بیشتر توجه می کردید. خب آخه چند درصد کاربران از IE9 الان استفاده می کنن؟ تازشم خودم ندارم. چطوری امتحانش کنم؟ با مرورگر دیگری هم نمیخوام کار کنم. یعنی واقعاً این همه کار بلد اینجا هست نمی دونه چطوری عکسها رو با Css مرتب کنیم کنار هم؟ الان اینطوری هست با کدی که قبلاً گذاشتم.

Mohammad · Feb 23, 2011

با فایرفاکس 3 و اینترنت اکسپلورر 8 امتحان کردم

PHP:

<style>
.text-style {
    padding:0px;
    margin:0px;
    text-align:center;
    color:#fff;
    font-size:8pt;
    font-family:Tahoma;
    line-height:3.5em;
    }
.left {
    background:#313131 url('1.png') left no-repeat;
    width:300px; 
    height:40px;
    float:left;
    padding:0px;
    margin:0px;
    }
.right {
    background:url('2.png') right no-repeat;     float:left;
    width:10px;
    height:40px;
    padding:0px;
    margin:0px;
    }
</style>

<div class="text-style">
    <div class="left">
    محل نوشتن</div><div class="right"></div>
</div>

روش های بهتر از این هم زیاده

echessdesign · Feb 26, 2011

درود بر شما
من استفاده از span در لینک رو پیشنهاد می کنم:

کد:

<!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>
<title></title>
	<style type="text/css">
		a.linkStyle:link, a.linkStyle:visited {
			text-decoration:none;
			display:block;
			float:right;
			direction:rtl;
			background:transparent url('r-bg.gif') right center no-repeat;
			padding:8px 10px 0 0;
			color:#fff;
			height:29px;
		}
		a.linkStyle:hover {
			color:red;
		}
		a .spanStyle {
			background:#000 url('l-bg.gif') left center no-repeat;
			padding:9px 10px 10px 30px;
		}
	</style>
</head>

<body>

	<a href="" class="linkStyle">
		<span class="spanStyle">حسین سعیدی</span>
	</a>
	<a href="" class="linkStyle">
		<span class="spanStyle">حسین سعیدی</span>
	</a>
</body>
</html>