سوال: فاصله ی بین دو عکس [بایگانی]

ravand

چهارشنبه 09 مرداد 1392, 19:42 عصر

این برنامه ی منه.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.radif{
border:1px #CCCCCC solid;
width:220px;
margin-left:auto;
margin-right:auto;
font-size:0pt;
direction:rtl;
}
</style>
</head>
<body>
<div style="text-align:center;">
<div class="radif">
<img src="watermark.jpg" width="70" border="0">
<img src="watermark.jpg" width="70" border="0">
</div>
</div>
</body>
</html>

دو تا تصویر در خروجی بهم نشون میده. این دو تصویر بدون هیچ فاصله ای باید بهم بچسبند و این اتفاق توی همه ی مرورگر ها به غیر از سفری رخ میده.
چون ارتفاع تصاویرم با هم فرق داره نمیتونم از float:right; استفاده کنم. چون بهم میریزه. و اون تصویری که ارتفاعش کمه میره بالا. که نمیخوام بره بالا. پیشنهادی ندارید؟
تصویر صحیح:
108256
تصویری که توی مرورگر سفری نشان میدهد و فاصله دارد که نباید داشته باشد:
108257
ضمناً اینا تصاویر اصلیم نیست تصاویر اصلیم یکیش کوچیکه یکیش بزرگ. اینا رو به عنوان مثال گذاشتم.
متشکرم.

سعید کشاورز

چهارشنبه 09 مرداد 1392, 19:56 عصر

از CSS Reset استفاده کردی؟

H:Shojaei

چهارشنبه 09 مرداد 1392, 19:57 عصر

سلام
شما تو اين استايلي كه داديد margin:auto; دادين اگه همين رو صفر بذاريد فكر كنم درست بشه.

aliv.2022

چهارشنبه 09 مرداد 1392, 21:01 عصر

تو تگ عکس سمت چپ بنویس
style="margin-left:0"

H:Shojaei

چهارشنبه 09 مرداد 1392, 21:35 عصر

تو تگ عکس سمت چپ بنویس
style="margin-left:0"

دوست عزيز بايد تو عكس سمت راست اين رو بنويسه و واسه سمت چپي هم ميشه margin-right:0px;
البته در كل بگيد margin:0px; بهتره.

aliv.2022

چهارشنبه 09 مرداد 1392, 21:47 عصر

دوست عزيز بايد تو عكس سمت راست اين رو بنويسه و واسه سمت چپي هم ميشه margin-right:0px;
البته در كل بگيد margin:0px; بهتره.

آره حواسم نبود:خجالت: اگه بزنه margin:0px از بالا هم میچسبه به شیپ بالایی حالا هرچی که هست بعد اونیکی عکسه نمیچسبه اونوقت بالا پایین میشن margin-right بزنه بهتره فک کنم

ravand

چهارشنبه 09 مرداد 1392, 22:02 عصر

از CSS Reset استفاده کردی؟

این کار رو کردم:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
:focus {
outline: 0;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ولی جواب نداده.

ravand

چهارشنبه 09 مرداد 1392, 22:04 عصر

آره حواسم نبود:خجالت: اگه بزنه margin:0px از بالا هم میچسبه به شیپ بالایی حالا هرچی که هست بعد اونیکی عکسه نمیچسبه اونوقت بالا پایین میشن margin-right بزنه بهتره فک کنم
این کارم فایده ای نداشت!
ببخشید ولی کدهایی که من گذاشتم خیلی ساده هستن و html هم هستن. من عمداً ساده نوشتم تا شما راحت بتونید تست کنید. و نیازی نباشه همینطوری یه چیزی بگید تا درست از آب در بیاد.
اگه کمکم کنید یه دنیا ممنون میشم.

webdesign2

چهارشنبه 09 مرداد 1392, 22:29 عصر

سلام دوست عزيز اين رو تست كن

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.radif{
border:1px #CCCCCC solid;
width:220px;
margin:0 auto;

font-size:0pt;
direction:rtl;
display:table;
}
</style>
</head>
<body>
<div style="text-align:center;">
<div class="radif">
<div style="margin-right:38px">
<img src="1.jpg" width="70" border="0" align="right">
<img src="1.jpg" width="70" border="0" align="right">
</div>
</div>
</div>
</body>
</html>

H:Shojaei

چهارشنبه 09 مرداد 1392, 23:40 عصر

این کار رو کردم:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
:focus {
outline: 0;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ولی جواب نداده.

خب شما كه نوع اندازه ها رو مشخص نكرديد اينطوري كار نميكنه.
بايد با پيكسل مشخص بشن.

azamicu

پنج شنبه 10 مرداد 1392, 03:01 صبح

ravand

پنج شنبه 10 مرداد 1392, 10:18 صبح

عرض عکسهاتو اشتباه ست کردی px بزار بعد از 70
اگر درست نشد عرض radif رو برابر عرض دوتا عکست قرار بده
اگه نشد margin , padding عکساتو 0 کن
اگه نشد float دوتاشونو 0 کن
و در آخر اگه نشد pos والد رو relative بکن و عکساتو absulote تاپ هردوشون 0 و right اولی 0 و دومی 70
اگه نشد بازم بگو تا بازم راه دیگه ای بهت بگیم

float رو چطوری صفر کنم؟ اینطوری؟

float:0

یا اینطوری؟

float:none;
شما این روشی که گفتید رو تست کردید؟ برای من که کار نکرد. شاید درست انجام ندادم نمیدونم.

ravand

پنج شنبه 10 مرداد 1392, 10:20 صبح

خب شما كه نوع اندازه ها رو مشخص نكرديد اينطوري كار نميكنه.
بايد با پيكسل مشخص بشن.
چطوری در قسمت ریست نوع اندازه ها رو مشخص کنم اینطوری؟

border-spacing: 0px;
margin: 0px;
padding: 0px;
border: 0px;

aliv.2022

پنج شنبه 10 مرداد 1392, 11:23 صبح

این کارم فایده ای نداشت!
ببخشید ولی کدهایی که من گذاشتم خیلی ساده هستن و html هم هستن. من عمداً ساده نوشتم تا شما راحت بتونید تست کنید. و نیازی نباشه همینطوری یه چیزی بگید تا درست از آب در بیاد.
اگه کمکم کنید یه دنیا ممنون میشم.

خب شاید مشکل از سفری باشه! من تست کردم خودم رو دوتا عکس اینو!:متفکر:با یه مرورگر دیگه تست کن

azamicu

پنج شنبه 10 مرداد 1392, 11:23 صبح

ببخشید float رو right کن
خوب ضریب اشتباه نصفه شب بالا میره دیگه

H:Shojaei

پنج شنبه 10 مرداد 1392, 11:24 صبح

چطوری در قسمت ریست نوع اندازه ها رو مشخص کنم اینطوری؟

border-spacing: 0px;
margin: 0px;
padding: 0px;
border: 0px;
آره همين درسته.
اين هم كار نكرد؟

ravand

پنج شنبه 10 مرداد 1392, 11:35 صبح

من برام عجیبه که چرا شما درست سوال منو نمیخونید.

خب شاید مشکل از سفری باشه! من تست کردم خودم رو دوتا عکس اینو!با یه مرورگر دیگه تست کن
خب من از همون اول گفتم مشکل من با مرورگر سفر هست.

ببخشید float رو right کن
خوب ضریب اشتباه نصفه شب بالا میره دیگه
من از همون اول گفتم از float نمیتونم استفاده کنم. چون برخی تصاویر اندازه اش کوچیکه و میره بالا که نباید بره.

آره همين درسته.
اين هم كار نكرد؟
بله کار نکرد!
اصلا من کدم رو ساده اش کردم که شما راحت تست کنید. و زیادم تست کردنش وقت نمیگیره!

s2/mri

پنج شنبه 10 مرداد 1392, 11:36 صبح

سلام

این کد ها رو من تو safari تست کردم جواب داد. امیدوارم با chrome مشکلی نداشته باشه(چون من کروم رو سیستم ندارم که تستش کنم)

img{
border:thin solid #ccc;
-webkit-margin-start:-2px !important;
-webkit-margin-end:-2px !important;
-webkit-padding-start:-2px !important;
-webkit-padding-end:-2px !important;
}

موفق باشی

ravand

پنج شنبه 10 مرداد 1392, 11:41 صبح

نمیدونم چرا توی همه ی مرورگر ها یه فاصله ی خیلی کمی ایجاد میشه:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

.radif{
border:1px #CCCCCC solid;
width:260px;
margin-left:auto;
margin-right:auto;
font-size:0px;
direction:rtl;
}

img{
width:70px;
border:thin solid #ccc;
-webkit-margin-start:-2px !important;
-webkit-margin-end:-2px !important;
-webkit-padding-start:-2px !important;
-webkit-padding-end:-2px !important;
}

</style>
</head>
<body>
<div style="text-align:center;">
<div class="radif">
<img src="watermark.jpg">
<img src="watermark.jpg">

</div>
</div>
</body>
</html>

css reset رو اینبار براش نذاشتم مشکلم چیه؟

s2/mri

پنج شنبه 10 مرداد 1392, 11:51 صبح

فک کنم به خاطر این قسمته.

margin-left:auto; margin-right:auto;
این قسمت رو حذف کن.چون خودم حذفش کردم
من به جای css reset شما از این استفاده میکنم . اکثر مواقع هم جواب میده

*{
margin:0px;
padding:0px;
}

ravand

پنج شنبه 10 مرداد 1392, 11:54 صبح

ببخشید ولی هیچ فرقی نکرد:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.radif{
border:1px #CCCCCC solid;
width:220px;
font-size:0pt;
direction:rtl;
}
img{
width:70px;
border:thin solid #ccc;
-webkit-margin-start:-2px !important;
-webkit-margin-end:-2px !important;
-webkit-padding-start:-2px !important;
-webkit-padding-end:-2px !important;
}
</style>
</head>
<body>
<div style="text-align:center;">
<div class="radif">
<img src="watermark.jpg">
<img src="watermark.jpg">
</div>
</div>
</body>
</html>

s2/mri

پنج شنبه 10 مرداد 1392, 11:59 صبح

!!!!
این کد

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.radif{
border:1px #CCCCCC solid;
width:220px;
font-size:0pt;
}
img{
border:1px solid #ccc;
-webkit-margin-start:-2px !important;
-webkit-margin-end:-2px !important;
-webkit-padding-start:-2px !important;
-webkit-padding-end:-2px !important;
}
</style>
</head>
<body>
<div style="text-align:center;">
<div class="radif">
<img src="2.png" width="70" />
<img src="2.png" width="70" />
</div>
</div>
</body>
</html>

اینم اسکرین شات
108282
نمیدونم چون برا من درسته!

H:Shojaei

پنج شنبه 10 مرداد 1392, 12:19 عصر

اگه اون نشد اين رو هم يه تست بزنيد شايد شد:

<!DOCTYPE html>
<html>
<head>


<style type="text/css" >
*{
margin:0px;
padding:0px;
}
.radif{
border:1px #CCCCCC solid;
margin-left:0px auto;
margin-right:opx auto;
font-size:0pt;
direction:rtl;
}
#a1
{
background-color:#333;
width:220px;
height:100px;
}
#a2
{
position:relative;
background-color:#333;

margin:0px;
padding:0px;
width:220px;
height:100px;
}
</style>
</head>
<body>

<div style=" position:absolute;text-align:center;left:200px;">
<div class="radif">
<img id="a1" src="fire1.png">
<img id="a2" src="fire1.png">
</div>
</div>
</body>
</html>

آخه ميدونيد مشكل چيه مشكل اينه كه تو مرورگرهايي كه من دارم تو همش درسته سفري(سافاري) هم ندارم...

ravand

پنج شنبه 10 مرداد 1392, 14:09 عصر

مشکلم به کمک کدی که آقای s2/mri دادن با مرورگر سفری حل شد ولی متاسفانه با کروم مشکل پیدا کرد و عکس سمت راستی افتاد روی سمت چپی. فکر میکنم چاره ای ندارم جز اینکه به برنامه بگم وقتی با مرورگر سفری برخورد کردی این کدها رو نشون بده. برای اکسپلورر همچین کدی داشتم ولی برای سفری نمیدونم.
کسی همچین برنامه ای سراغ داره؟
متشکرم.

s2/mri

پنج شنبه 10 مرداد 1392, 14:22 عصر

اره . میشه برا هر مرورگر یه کد جدا نوشت

این کد php رو امتحان کنین . ولی چون مرورگر chrome و safari هر دو از موتور webkit استفاده میکنن . نمیدونم...!

اینجاست که میگم فقط FireFox

<?php
$msie = strpos($_SERVER["HTTP_USER_AGENT"], 'MSIE') ? true : false;
$firefox = strpos($_SERVER["HTTP_USER_AGENT"], 'Firefox') ? true : false;
$safari = strpos($_SERVER["HTTP_USER_AGENT"], 'Safari') ? true : false;
$chrome = strpos($_SERVER["HTTP_USER_AGENT"], 'Chrome') ? true : false;
?>

امیدوارم جواب بده

این سایت (http://browserhacks.com/) هم هست نکات جالبی داره

ravand

پنج شنبه 10 مرداد 1392, 14:35 عصر

مشکل اینه که من یا باید به سفری دستور بدم یا کروم.
این دستورات رو پیدا کردم ولی نمیدونم چرا کار نمیکنه!

<!if firefox>
.element { top:4px; }
<![endif]>
<!if chrome>
.element { top:6px; }
<![endif]>
<!if ie>
.element { top:8px; }
<![endif]>
<!if opera>
.element { top:10px; }
<![endif]>
<!if safari_webkit>
.element { top:12px; }
<![endif]>
یه مثال:

<style type="text/css">
<!if safari_webkit>
p { color:blue; }
<![endif]>
</style>

<p>متن ما</p>

s2/mri

پنج شنبه 10 مرداد 1392, 14:45 عصر

مشکل اینه که جفتشون از موتور webkit استفاده میکنن.

دستورات شرطی if باید داخل html نوشته بشن . فک نکنم این جواب بده

<style type="text/css"> <!if safari_webkit> p { color:blue; } <![endif]> </style>

من برا ie اینو نوشتم جواب داده



این کد هم برا سافاری جواب داد . برا کروم خودتون امتحان کنین

if (strpos($_SERVER['HTTP_USER_AGENT'], 'Safari') !== false) {
// Chrome user agent string contains both 'Chrome' and 'Safari'
if (strpos($_SERVER['HTTP_USER_AGENT'], 'Chrome') !== false) {
echo '<body class="chrome">';
} else {
echo '<body class="safari">';
}
} elseif (strpos($_SERVER['HTTP_USER_AGENT'], 'Opera') !== false) {
echo '<body class="opera">';
} else {
echo '<body>';
}

موفق باشی

2undercover

جمعه 11 مرداد 1392, 12:10 عصر

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

word-spacing: -3px;

ravand

جمعه 11 مرداد 1392, 15:54 عصر

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

word-spacing: -3px;

شما این چیزی که میگید رو قبلاً تست کردید؟
من همینطوری که شما میگید عمل کردم ولی هیچ فرقی نکرد:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.radif{
border:1px #CCCCCC solid;
width:220px;
margin-left:auto;
margin-right:auto;
font-size:0pt;
direction:rtl;
word-spacing: -3px;
</style>
</head>
<body>
<div style="text-align:center;">
<div class="radif">
<img src="watermark.jpg" width="70" border="0">
<img src="watermark.jpg" width="70" border="0">
</div>
</div>
</body>
</html>

qartalonline

جمعه 11 مرداد 1392, 16:39 عصر

2undercover

جمعه 11 مرداد 1392, 16:40 عصر

من خودم تست کردم و به خوبی جواب داد.

با این استایل توی همه ی مرورگر ها فاصله ای که بین عناصر inline و inline-block هست حذف میشه!

ravand

جمعه 11 مرداد 1392, 16:52 عصر

کد زیر رو تست کنید:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*{
margin:0;
padding:0;
}
.radif{
border:1px #CCCCCC solid;
width:220px;
margin-left:auto;
margin-right:auto;
font-size:0pt;
direction:rtl;
}
</style>
</head>
<body>
<div style="text-align:center;">
<div class="radif"><img src="watermark.jpg" width="70" border="0"><img src="watermark.jpg" width="70" border="0"></div>
</div>
</body>

داداش این که کد خودمه که از همون اول گذاشتم. این که هیچ تغییری نکرده! شما تاپیک اول منو بخون. نوشتم توی مرورگر سفری این مشکل رو داره!

ravand

جمعه 11 مرداد 1392, 16:54 عصر

من خودم تست کردم و به خوبی جواب داد.

با این استایل توی همه ی مرورگر ها فاصله ای که بین عناصر inline و inline-block هست حذف میشه!

شما توی مرورگر سفری تست کن!

qartalonline

جمعه 11 مرداد 1392, 17:12 عصر

داداش این که کد خودمه که از همون اول گذاشتم. این که هیچ تغییری نکرده! شما تاپیک اول منو بخون. نوشتم توی مرورگر سفری این مشکل رو داره!

بهتره بود ابتدا کد رو بادقت نگاه میکردید سپس تست میکردید.
دنبال راه حل های پیچیده نباشید.

به کد زیر دقت کنید:

<div class="radif"><img src="watermark.jpg" width="70" border="0"><img src="watermark.jpg" width="70" border="0"></div>

ravand

جمعه 11 مرداد 1392, 17:24 عصر

بهتره بود ابتدا کد رو بادقت نگاه میکردید سپس تست میکردید.
دنبال راه حل های پیچیده نباشید.

به کد زیر دقت کنید:

<div class="radif"><img src="watermark.jpg" width="70" border="0"><img src="watermark.jpg" width="70" border="0"></div>

الان من کد را نگاه کردم چه فرقی با کدی داره که من نوشتم؟ الان شما چه تغییری دادید؟

qartalonline

جمعه 11 مرداد 1392, 17:25 عصر

فضاهای خالی و سطرها حذف شده.

ravand

جمعه 11 مرداد 1392, 17:33 عصر

فضاهای خالی و سطرها حذف شده.
ببخشید ولی واقعا من منظور شما رو متوجه نمیشم

این کد منه:

<div class="radif">
<img src="watermark.jpg" width="70" border="0">
<img src="watermark.jpg" width="70" border="0">
</div>

اینم کد شماست:

<div class="radif">
<img src="watermark.jpg" width="70" border="0">
<img src="watermark.jpg" width="70" border="0">
</div>
اینا رو من هیچ فرقی بینشون نمی بینم. شاید شما منظور خاصی دارید میشه بیشتر توضیح بدید؟

qartalonline

جمعه 11 مرداد 1392, 17:38 عصر

کد شما :

<div class="radif">
<img src="watermark.jpg" width="70" border="0">
<img src="watermark.jpg" width="70" border="0">
</div>

کد من :

<div class="radif"><img src="watermark.jpg" width="70" border="0"><img src="watermark.jpg" width="70" border="0"></div>

کد شما در 4 سطر نوشته شده و کد من در 1 سطر.

سطرها و فضاهای خالی باعث ایجاد فاصله بین عناصر ها میشه. وقتی کد من 1 سطره دیگه فاصله بین عناصر وجود نخواهد داشت .

ravand

جمعه 11 مرداد 1392, 17:42 عصر

بله کاملاً حق با شماست فکر نمیکردم مرورگر سفری به این چیزها هم اهمیت بده. همیشه شنیده بودم html به اینطوری فاصله ها حساس نیست برای همین هیچ وقت فکر نمیکردم این یک عیب باشه. یه دنیا متشکرم.