-
-
-
May 4th, 2016 22:00
# ADS
-
عضو انجمن
پاسخ : کمک در کد نویسی css
نوشته اصلی توسط
mhmd741
سلام دوستان من عکس رو لطفا ببینید و بهم کمک کنید
من اولین تجربه کاریمه و ددارم برا پروژه پایانیم ی سایت طراحی و کد نویسی میکنم ( با برنامه Expersion web کار میکنم)
مشکل من اینه بلوک با css درست کردم (به صورت عکس ذخیرش کردم) وقتی عکس رو از برنامه insert میکنم نمیتونم عکس رو جای دلخواهی ک میخوا بزارم
با هزار بدبختی عکس رو جابجا میکنم در قسمت 1 عکس ک توضیح هم دادم وقتی صفحه رو ذخیره میکنم توی مرورگر دو باره بهم میریزه
چیکار کنم که توی این برنامه عکسی که وارد میکنم رو هرجای دلخواه بزارم؟
کد رو هم ببینید مشکلی داره یا نه؟
و سوال دیگه اینه که من وقتی ی کلاس رو ایجاد میکنم و توی css کد براش مینویسم چطور مختصات دلخواهی ک میخوام پیدا کنم و باکس رو اونجا قرار بدم؟
لطفا راهنماییم کنین؟
لطفا کد رو کامل تر بزارید
احتمالا مشکل از فلوت هست چون فلوت اجازه نمیده یک جایگاه بست داده بشه
پروردگارا مرا فهم ده:: تا متوقع نباشم. دنیا و مردمانش باید مطابق میل من رفتار کنند.
-
تعداد تشکر ها از hegza به دلیل پست مفید
-
عضو دائم
پاسخ : کمک در کد نویسی css
absolute لازم نیست، کل ساید بار را در یک div و float right قرار دهید مشکل حل خواهد شد.
-
تعداد تشکر ها ازT.Toosi به دلیل پست مفید
-
پاسخ : کمک در کد نویسی css
کد:
<img height="252" src="images/images/images/images/category_04_03.png" width="144" style="position: absolute; z-index: 1; left:756px; top: 534px" />
- - - Updated - - -
نوشته اصلی توسط
T.Toosi
absolute لازم نیست، کل ساید بار را در یک div و float right قرار دهید مشکل حل خواهد شد.
folat right جواب نمیده ساید بار پایینی میفته بغل اولی
من میخوای با ی فاصله بیفته دقیق زیر ولی
قسمتی که توی عکس مشخص کردم همون (ساید بار ک شما میگید ) چون دقیق بلد نبودم بدون عکس و با موقعیت دقیق از طریق css بسازم مجبور به استفاده از عکس شدم
سوال من اینه چرا عکسی رو که توی نرم افزار وارد میکنم به راحتی هر جای جابجا کنم؟
اگه بهم یاد بدبد مثلا چطور موقعیت سایدبار اولی که جاش درسته توی عکس رو پیدا کنم و با css سایدبار رو بسازم ممنون میشم
من میخوام بلوک های ک با css بسازم اینجور مثل عکس (قالبی که طراحی کردم بیفته)
مثه بلاک تبلیغات،موضوعات،کد جاوا،تصاویر انتخابی،جدیدترین مطالب اشتراک مطالب و عنوان متن
http://s7.picofile.com/file/8250032126/theme.jpg
ویرایش توسط mhmd741 : May 4th, 2016 در ساعت 22:54
-
-
عضو دائم
پاسخ : کمک در کد نویسی css
نوشته اصلی توسط
mhmd741
کد:
<img height="252" src="images/images/images/images/category_04_03.png" width="144" style="position: absolute; z-index: 1; left:756px; top: 534px" />
- - - Updated - - -
قسمتی که توی عکس مشخص کردم همون (ساید بار ک شما میگید ) چون دقیق بلد نبودم بدون عکس و با موقعیت دقیق از طریق css بسازم مجبور به استفاده از عکس شدم
سوال من اینه چرا عکسی رو که توی نرم افزار وارد میکنم به راحتی هر جای جابجا کنم؟
اگه بهم یاد بدبد مثلا چطور موقعیت سایدبار اولی که جاش درسته توی عکس رو پیدا کنم و با css سایدبار رو بسازم ممنون میشم
شما با عکس و پوزیشن relative میتونستین ساید بار درست کنید چون absolute زدید مجبورید مختصات پوزیشن بدید و مختصات دادن هم از جایی که المنت قرار گرفته است نسبت به صفحه مقدار دهی میکنیم با آزمون خطا مقدار های top left right و.. میتونید مکان دقیق ای که میخواهید را بدست آورید، به شکل خیلی ساده اینطوری باید باشد :
کد:
<div style="width:144px;float:right;margin-top:15px;">
<div><img src="images/images/images/images/category_04_03.png"/></div>
<div><img src="images/images/images/images/category_04_03.png"/></div>
</div>
- - - Updated - - -
تبلیغات، موضوعات، کد جاوا همه در یک div با float right، (نمونه کد بالا)، تصاویر انتخابی و مطالب و .. همه در یک div با float left.
-
تعداد تشکر ها ازT.Toosi به دلیل پست مفید
-
عضو انجمن
پاسخ : کمک در کد نویسی css
نوشته اصلی توسط
T.Toosi
شما با عکس و پوزیشن relative میتونستین ساید بار درست کنید چون absolute زدید مجبورید مختصات پوزیشن بدید و مختصات دادن هم از جایی که المنت قرار گرفته است نسبت به صفحه مقدار دهی میکنیم با آزمون خطا مقدار های top left right و.. میتونید مکان دقیق ای که میخواهید را بدست آورید، به شکل خیلی ساده اینطوری باید باشد :
کد:
<div style="width:144px;float:right;margin-top:15px;">
<div><img src="images/images/images/images/category_04_03.png"/></div>
<div><img src="images/images/images/images/category_04_03.png"/></div>
</div>
- - - Updated - - -
تبلیغات، موضوعات، کد جاوا همه در یک div با float right، (نمونه کد بالا)، تصاویر انتخابی و مطالب و .. همه در یک div با float left.
بله دقیقا و بهتره برای فلوت ها درصد انتخاب کنید تا سایز
از همین الان تمرین کنید css رو در فایل جداگانه بنویسید. همیشه یک شروع خوب با تاخیر بهتر از شروع سریع ولی پر عیب است
یک فلوت کلی برای کل بادی
و بعد فلوت های دیگه و هر کدام را با کلاس خاصی تعریف کنن و براش استایل بنویس
پروردگارا مرا فهم ده:: تا متوقع نباشم. دنیا و مردمانش باید مطابق میل من رفتار کنند.
-
تعداد تشکر ها ازhegza به دلیل پست مفید
-
پاسخ : کمک در کد نویسی css
نوشته اصلی توسط
T.Toosi
شما با عکس و پوزیشن relative میتونستین ساید بار درست کنید چون absolute زدید مجبورید مختصات پوزیشن بدید و مختصات دادن هم از جایی که المنت قرار گرفته است نسبت به صفحه مقدار دهی میکنیم با آزمون خطا مقدار های top left right و.. میتونید مکان دقیق ای که میخواهید را بدست آورید، به شکل خیلی ساده اینطوری باید باشد :
کد:
<div style="width:144px;float:right;margin-top:15px;">
<div><img src="images/images/images/images/category_04_03.png"/></div>
<div><img src="images/images/images/images/category_04_03.png"/></div>
</div>
- - - Updated - - -
تبلیغات، موضوعات، کد جاوا همه در یک div با float right، (نمونه کد بالا)، تصاویر انتخابی و مطالب و .. همه در یک div با float left.
ی سوال دیگه
من اگه یه ساید بار سفید با کد ساختم
کد:
<div style="background-color:white; height:252px; width:144px;"/></div>
حالا چطور 144*37 از قسمت بالاش رو به این کد رنگ #249cf0 در بیارم
- - - Updated - - -
نوشته اصلی توسط
hegza
بله دقیقا و بهتره برای فلوت ها درصد انتخاب کنید تا سایز
از همین الان تمرین کنید css رو در فایل جداگانه بنویسید. همیشه یک شروع خوب با تاخیر بهتر از شروع سریع ولی پر عیب است
یک فلوت کلی برای کل بادی
و بعد فلوت های دیگه و هر کدام را با کلاس خاصی تعریف کنن و براش استایل بنویس
میشه لطفا کنین این چیری که در مورد فلوت گفتین رو برای بلاکی که دکمه های منو هست و بلاک باید برام مثال بزنین با کد نویسی
http://s7.picofile.com/file/8250032126/theme.jpg
-
-
پاسخ : کمک در کد نویسی css
-
-
عضو دائم
پاسخ : کمک در کد نویسی css
کل css و html قرار دهید والی رو عکس نمیشود مشکل را پیدا کرد.
-
تعداد تشکر ها ازT.Toosi به دلیل پست مفید
-
پاسخ : کمک در کد نویسی css
نوشته اصلی توسط
T.Toosi
کل css و 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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
a {
text-decoration:none;
}
a:hover {
background-color: #249cf0;
display:block;
border-radius:2px;
text-decoration:none;
}
.style1 {
text-align: center;
}
.style2 {
border-width: 0px;
}
.style3 {
text-align: right;
}
.style4 {
margin-right: 22px;
margin-left: 1px;
}
.style5 {
margin-left: 8px;
}
.style6 {
font-family: "B Titr";
}
.style7 {
margin-top: 5px;
}
.style8 {
margin-right: 22px;
margin-left: 1px;
margin-bottom: 0px;
}
.style9 {
font-family: "B Titr";
font-size: medium;
}
.style10 {
margin-top: 4px;
margin-left: 1px;
}
.style12 {
font-family: "B Nazanin";
}
.style13 {
margin-bottom: 0px;
}
</style>
<script type="text/javascript">
<!--
function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}
function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}
function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}
// -->
</script>
</head>
<body style="background-image: url('img/back-pic.png')" onload="FP_preloadImgs(/*url*/'img/home-button2.png',/*url*/'img/about-button2.png',/*url*/'img/news-button2.png')">
<div class="style1">
<div class="style1">
<img height="205" src="img/theme_02.png" width="902" style="position:relative; left: 0px; top: -5px;" /></div>
<div class="menu">
<div style="background-color:#249cf0; box-shadow: 1px 1px 1px 1px black, 0 0 5px blue, 0 0 5px darkblue;; width:902px; height:58px; border-width:0px; margin:0px 16px; margin-left:auto; margin-right:auto; border-radius: 10px" class="style3">
<a href="default.htm">
<img height="36" src="img/home-button.png" style=" position: relative; float: right; left: -12px; top: 13px;" width="108" id="img1" class="style2" onclick="FP_swapImg(1,0,/*id*/'img1',/*url*/'img/home-button2.png')" /></a>
<img height="45" src="img/line-button.png" width="14" style=" position: relative; float: right; left: -12px; top: 12px;" width="108" />
<a href="news.htm">
<img height="36" src="img/news-button.png" width="108" style="position:relative; left: -13px; top: 13px;" id="img2" class="style2" onclick="FP_swapImg(1,0,/*id*/'img2',/*url*/'img/news-button2.png')" /></a><br />
<br />
<br/>
<img height="21" src="img/linebutton2.png" width="1" style="position:relative; left: -250px; top: -745px;" /></div>
</div>
<a href="about.htm">
<img height="36" src="img/about-button.png" width="107" style="position:relative; top: -45px; left: 140px;" id="img3" class="style2" onclick="FP_swapImg(1,0,/*id*/'img3',/*url*/'img/about-button2.png')" /></a>
<div style="background-color:#aeb9ba; width:902px; margin:0px auto; border-radius: 10px; box-shadow: 2px 4px 4px 2px blue, 0 0 5px blue, 0 0 5px darkblue; position:relative; height:685px; left: 0px; top: -10px;">
<div class="style5" style=" background-color:white; height:180px; width:144px; float:right; margin-top:20px; border-radius: 10px; position:relative; left: -16px; top: -2px;">
<img height="115" src="img/ads.gif" width="115" style="margin-top:45px" />
</div>
<div class="style4" style=" background-color:#249cf0; height:38px; width:144px; float:right; margin-top:20px; border-top-left-radius: 10px; border-top-right-radius: 10px; position:relative; left: 158px; top: -3px;">
<p class="style7"><span class="style6" lang="fa">تبلیغات</span></p>
</div>
<div class="style5" style=" background-color:white; height:252px; width:144px; float:right; margin-top:214px; border-radius: 10px; position:relative; left: 304px; top: -2px;">
</div>
<div class="style8" style=" background-color:#249cf0; height:38px; width:144px; float:right; margin-top:214px; border-top-left-radius: 10px; border-top-right-radius: 10px; position:relative; left: 478px; top: -3px;">
<p class="style10"><span class="style9" lang="fa"><strong>
موضوعات</strong></span></p>
</div>
<div class="style13" style="width: 76px; padding-top:5px; direction:rtl; position:relative; left: 591px; top: 254px; float:right; height: 141px;">
<span class="style12" style="text-decoration:none"><a href="lerning.htm">آموزش حرکات</a> </span>
<br class="style12">
<span class="style12" lang="fa"><a href="img.htm">تصـاویـر</a></span><span class="style12"> </span>
<br class="style12">
<span class="style12"><a href="mokamel.htm">مکمل ها </a> </span>
<br class="style12">
<span class="style12"><span lang="fa"><a href="food.htm">
تغـذیـه</a></span> </span>
<br class="style12">
<span class="style12" lang="fa"><a href="rezhim.htm">رژیـم</a></span><span class="style12"> </span>
<br class="style12">
<span class="style12"><a href="link.htm">لینک دوستان</a></span>
</div>
</div>
</div>
</body>
</html>
-