چسباندن به سقف با css

M

Mehrdad.T

New Member
سلام دوستان
من میخوام با استفاده از css عکس یا متنی رو به سقف بچسبونم.
برای اینکار مقدار margin-top رو 0 گذاشتم ولی نشد.
با position: relative; top: ?px هم امتحان کردم ولی بازم نشد.

نمیدونم باید چیکار کنم.

ضمنا چطوری میتونم یک تصویر بکگراند رو در وسط قرار بدم. من اون رو توی div گذاشتم و text-align:center گذاشتم ولی نشد.
مجبور شدم از طریق margin-right و left عمل کنم.
آیا راه دیگه ای وجود داره؟

لطفا راهنماییم کنید.

ممنون
 
justpersian

justpersian

Member
سوال اول :
کد: 
.test {margin:0; padding:0;}
سوال دوم :
یعنی چی ؟
می خوای بک گراند وسط باشه یا مثلا یک متن ؟
این دوتا خیلی با هم فرق داره
سوال دوم رو بیشتر توضیح بده
 
M

Mehrdad.T

New Member
justpersian گفت:
سوال اول :
کد: 
.test {margin:0; padding:0;}
سوال دوم :
یعنی چی ؟
می خوای بک گراند وسط باشه یا مثلا یک متن ؟
این دوتا خیلی با هم فرق داره
سوال دوم رو بیشتر توضیح بده
کلیک کنید تا باز شود...

سلام دوست عزیز
ممنون از پاسختون
در مورد سوال اول متاسفانه بازهم کار نکرد. باید توی body بذارم یا فقط باید به div مورد نظر اختصاص بدم؟
هر چند هر دو مورد رو چک کردم و عمل نکرد.
id باشه یا class که فرقی نمیکنه؟
چون من از id استفاده کردم.

در مورد سوال دوم، همونطور که توی پست اول هم عرض کردم منظورم بکگراند هستش.
متن رو که با text-align میشه براحتی در وسط قرار داد.

ممنون
 
justpersian

justpersian

Member
سلام .
اگه کدت رو بدی من بهتر می تونم کمکت کنم :wink:
در مورد بک گراند :
HTML: 
<html>
<head>
<style>
.test {
    background:url(test.png) center no-repeat;
    border:1px solid black;
    height:200px;
}
</style>
</head>
<body>

<div class="test"></div>

</body>
</html>
کد بالا رو تست کن ببین همونیه که می خوای ؟
در ضمن به جای test.png تو این کد آدرس یه عکس رو بذار !
 
M

Mehrdad.T

New Member
justpersian گفت:
سلام .
اگه کدت رو بدی من بهتر می تونم کمکت کنم :wink:
در مورد بک گراند :
HTML: 
<html>
<head>
<style>
.test {
    background:url(test.png) center no-repeat;
    border:1px solid black;
    height:200px;
}
</style>
</head>
<body>

<div class="test"></div>

</body>
</html>
کد بالا رو تست کن ببین همونیه که می خوای ؟
در ضمن به جای test.png تو این کد آدرس یه عکس رو بذار !
کلیک کنید تا باز شود...

ُسلام
این کد هم قبلا چک کردم ولی کار نمیکنه :(
خیلی عجیبه.
این قسمتی از کدهای منه:

HTML: 
<html>

<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>

<div class="menu" align="center">
<ul>
<li><a href="index.php" title="Home"><span>Home</span></a></li>
<li><a href="service.php" title="Services"><span>Services</span></a></li>
<li><a href="login.php" title="Members"><span>Members</span></a></li>
<li><a href="about.php" title="About"><span>About</span></a></li>
<li><a href="contact.php" title="Contact"><span>Contact</span></a></li>
</ul>
</div>

<div id="universe" align="center">
  <div id="header">
    <div width="800" height="50" id="tlinks"><br /> &nbsp; &nbsp; Home &nbsp; &nbsp; Services &nbsp; &nbsp; Login &nbsp; &nbsp; About &nbsp; &nbsp; Contact
      <br /><br />
    </div>
  </div>

</div>

</body>

</html>
HTML: 
\\\Styles///

body {
     margin: 0px;
     padding: 0px
     font-family: Tahoma, sans-serif;
     font-size: 11px;
     font-weight: normal;
     color: #484848;
     text-decoration: none;
}


#universe {
     width: 840px;
     height: auto;
     text-align: center;
}

#header {
     width: 800px;
     height: auto;
     text-align: center;
     margin-bottom: 5px;
}

#tlinks {
     width: 800px;
     height: 50px;
     text-align: center;
     background: url('menubg.png') center no-repeat;
     font-family:tahoma;
     font-size:11px;
}

.tmenu {
      margin: 0px
      padding: 0px;
      height:25px;
      font-size:11px;
      background:#fff url(images/greenwax_bottom.gif) repeat-x top left;
}

.tmenu ul {
      margin:0px;
      padding:0 0 4px 0;
      list-style-type:none;
      width:auto;
      float:left;
}

.tmenu ul li {
      display:block;
      float:left;
      margin:0 1px;
}

.tmenu ul li a {
      display:block;
      float:left;
      color:#3BA507;
      text-decoration:none;
      padding:0 0 0 12px;
      height:32px;
      line-height:295%;
}

.tmenu ul li a span {
      padding:0 12px 0 0;
}

.tmenu ul li a:hover,.tmenu ul li a.current {
      color:#fff;
      background:#6DBE45 url(images/greenwax_navtopleftbottom.gif) no-repeat bottom left;
}

.tmenu ul li a:hover span,.tmenu ul li a.current span {
      display:block;
      width:auto;
      background:#6DBE45 url(images/greenwax_navtoprightbottom.gif) no-repeat bottom right;
}
خیلی عجیبه. چون من قبلا این منو رو توی یک پروژه دیگه هم استفاده کردم و کاملا به سقف چسبید ولی وقتی کپیش میکنم توی این صفحه جدید درست عمل نمیکنه.

اگر لازم بود بگید آپلود کنم تا بتونید ببینید.
 
آخرین ویرایش:
A

alimosavi

Active Member
اگر لایه داخلی نداشته باشی با این کد ها باید بتونی عکسو جابجا کنی. و اگر نتونستی معلومه تو لایه بندی ایراد داری .
background:url(test.png) center no-repeat;
background:url(test.png) right no-repeat;
background:url(test.png) left no-repeat;
background:url(test.png) bottom no-repeat;
کلیک کنید تا باز شود...

هر کاری رو داخل همین کد انجام بده مثلا بالا پایین رو فاصلش رو اینطوری ست کن

background:url(test.png) no-repeat 0 10em;
کلیک کنید تا باز شود...
 
Webber

Webber

Well-Known Member
سلام
تا جایی که یادمه این مشکل برای بنده هم ایجاد شد ،یک کد در یک صفحه کار می کرد ولی در یک صفحه ی دیگر نه.فکر کنم شما صفحه تون رو utf-8 ذخیره کردید.لطفا یک بار با ansi ذخیره کنید.اگر نشد،صفحه رو در یک ویرایشگر مانند ++notepad باز کنید و مثل
http://forum.majidonline.com/showpost.php?p=764683&postcount=4 عمل کنید.انشا الله درست خواهد شد.

موفق باشید
 
justpersian

justpersian

Member
من در مرورگرهای IE و Firefox تست کردم و به سقف چسبیده بود !
اما در مورد اون بک گراند من قسمتی از کدت رو به صورت زیر تغییر دادم ، فکر کنم مشکلت اینطوری حل بشه :
HTML: 
<div align="center">
<div id="universe">
  <div id="header">
    <div width="800" height="50" id="tlinks"><br /> &nbsp; &nbsp; Home &nbsp; &nbsp; Services &nbsp; &nbsp; Login &nbsp; &nbsp; About &nbsp; &nbsp; Contact
      <br /><br />
    </div></div>
  </div>

</div>
 
M

Mehrdad.T

New Member
ممنون از پاسخ دوستان

متاسفانه با تغییر unicode هم هیچ تغییری حاصل نشد :sad:

justpersian گفت:
من در مرورگرهای IE و Firefox تست کردم و به سقف چسبیده بود !
اما در مورد اون بک گراند من قسمتی از کدت رو به صورت زیر تغییر دادم ، فکر کنم مشکلت اینطوری حل بشه :
HTML: 
<div align="center">
<div id="universe">
  <div id="header">
    <div width="800" height="50" id="tlinks"><br /> &nbsp; &nbsp; Home &nbsp; &nbsp; Services &nbsp; &nbsp; Login &nbsp; &nbsp; About &nbsp; &nbsp; Contact
      <br /><br />
    </div></div>
  </div>

</div>
کلیک کنید تا باز شود...
خیلی ممنونم
اون عکس اومد وسط:)

ولی در مورد چسبیدن به سقف متاسفانه واسه من اینطوری نیست.
من توی IE 6, Firefox 3 و Opera 9.5 چک کردم و هنوز یه فاصله ای وجود داره.
بد طور اعصابمو ریخته به هم
دیگه مخم داره سوت میکشه:shock:
 
برای ارسال پاسخ شما باید وارد سیستم شوید.

آخرین مطالب مجیدآنلاین

جدیدترین ارسال ها

بالا