ورود

View Full Version : سوال: درخواست راهنمایی


aliyaghobi
جمعه 01 شهریور 1392, 17:17 عصر
سلام دوستان,دارم این قسمت عکس رو طراحی میکنم.دو بخش داره عکس رو نگاه کنید متوجه میشید
من قسمت اولشو بدست آوردم ... میشه لطف کنید کد ها رو تکمیل کنید تا مثل عکس بشه
با سپاس
109614

<html>
<body>



<table cellpadding="0" cellspacing="0"><tbody><tr>


<td valign="top" style="padding-left: 13px;" width="220px">
<div class="pbax-tabbed-container" >
<div class="pbax-tabline"><a href="#">Nikname</a></div>
<div class="pbax-box-content">

<br /> <br /> <br />

</div>
</div>



</tr></tbody></table>

</body></html>

.pbax-tabbed-container {
width:auto;
border: solid 1px #CCCCCC;
-moz-border-radius:6px;
border-radius:6px;
-webkit-border-radius:6px;
background-color:#ffffff;
margin:0;
}
.pbax-tabline {
font-family: Arial;
font-size:24px;
color:#c33;
background-color:#E7E7E7;
padding-top:5px;
padding-bottom:5px;
text-align:center;
}
.pbax-tabline a {
font-family: Arial;
font-size:22px;
font-weight: bold;
color:#c33;
text-decoration:none;
}
.pbax-tabline a:hover {
font-family: Arial;
font-size:22px;
font-weight: bold;
color:#c33;
text-decoration:underline;
}
.pbax-box-content{padding:9px 9px;background:#FFFFFF;}
azamicu
جمعه 01 شهریور 1392, 18:06 عصر
سلام دوست عزیز لطف بکن کامل تر توضیح بده
و خود اون قسمت رو آپ بکن تا بشه کمکت کرد
aliyaghobi
جمعه 01 شهریور 1392, 22:44 عصر
تو عکس دو تا کادر وجود داره,کادر زیری که بالاش نام کاربری داره رو خودم کدشو بالا گذاشتم.کادری که عکس کاربر توش قرار میگیره رو نمیتونم به همین صورتی که تو عکس هست در بیارم.
کدهای بالا رو تو یه صفحه html قرار بدین متوجه میشین
منتظر کمکتون هستم
با سپاس
azamicu
جمعه 01 شهریور 1392, 23:12 عصر
دوست عزیز این کدها که فقط مربوط به باکس داخلیه
کدهاتو کامل بزار برات درست کنم
mehbod.rayaneh
جمعه 01 شهریور 1392, 23:39 عصر
درود
از اونجایی ک table ب زمان ناصرالدین شاه برمیگرده بنده خودم عکسه را برای شما کدش کردم! امیدوارم شما هم برید ب سمت یادگیری css و html !
در ابتدای کار کد ریست کردن css را قرار میدیم! این کد فقط مقادیر پیش فرض مرورگرها را صفر میکنه!

html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,footer,hea der,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}

البته این برای html5 هست! شما میتونید متناسب با ورژن html از این سایت کد مورد نظر را دریافت کنید :
http://www.cssreset.com/
خوب! حالا کد css مربوط ب کار خودمون را به فایل اضافه میکنیم :

body{background:#ff9f03}
#main{
margin:40px auto;
width:250px;
min-height:500px;
background:#f8fbf0;
border:1px solid #ff6f0e;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px
}
.head{
width:230px;
height:30px;
line-height:30px;
font-size:18px;
font:arial;
color:#ffeac5;
background:#ff6f0e;
padding:0 10px
}
.total-profile{
margin:15px 0 0 -15px;
width:250px;
border:1px solid #ff6f0e;
background:#fff;
color:#000;
font-size:12px
}
.profile{
width:228px;
padding:5px;
margin:5px;
border:1px solid #d2d2d2;
color:#979797;
font-size:12px
}
.image{margin-top:25px;text-align:center;clear:both}
.image img{border:1px solid #c1c1c1;}
.blue-text{color:3d71ba;text-align:center;font:tahoma}
h1{font-size:13px}
h2{font-size:11px}
h1,h2{line-height:25px;}
.buttom-text{
margin:8px;
line-height:25px
}

و در آخر هم این فایل کدهای html :


<div id="main">
<div class="head">mehbod.rayaneh</div>
<div class="total-profile">
<div class="profile">
www.mehbod.ir
<div class="image">
<img align="center" src="http://barnamenevis.org/image.php?u=219320&dateline=1361487108" alt="mehbod.rayaneh">
</div>
<div class="blue-text">
<h1>mehbod.rayaneh</h1>
<h2>web designer</h2>
</div>
</div>
<div class="buttom-text">
SAEED - MAN - 24y
<br>
IRAN - ESFAHAN
</div>
</div>
</div>

حله؟ فقط من 1 ذره متنا را عوض کردم! :لبخند:
فایل کامل ضمیمه شد
موفق باشید.