ورود

View Full Version : آموزش: تگ div به صورت مربعی


mashhadpix
سه شنبه 15 مرداد 1392, 09:35 صبح
سلام
من یک منو میخام درست کنم به صورتی که افقی باشد ولی با div هر کاری می کنم درست عمل نمی کند حتی با float هم همین مشکل را دارم. کدهاشو میزارم:
کد html:

<head runat="server">
<title></title>
<link type="text/css" rel="Stylesheet" href="Style.css" />
</head>
<body>
<form id="form1" runat="server">
<div class="wrapper">
<div class="header">


</div>
<div class="menu">
<div class="menu-bar"></div>
<div class="menu-bar"></div>
<div class="menu-bar"></div>
<div class="menu-bar"></div>
<div class="menu-bar"></div>
<div class="menu-bar"></div>
</div>


</div>
</form>
</body>

کد CSS:
.wrapper
{
width:970px;
height:1000px;
background-color:#e4e4e4;
margin:0 auto;
}
.header
{
width:950px;
height:243px;
background: linear-gradient(#0d0d0d,#282828);
margin:2px auto;
font-family:Tahoma;
direction:rtl;
}
.menu
{
width:100px;
height:59px;
background: linear-gradient(#212020,#151515);
margin:2px auto;
float:right;
}
.menu-bar
{
width:100px;
height:56px;
background: linear-gradient(#212020,#151515);
float:right;
border:2px solid #000000;

}

ممنون میشم راهنمایی کنید
tazeha
سه شنبه 15 مرداد 1392, 10:25 صبح
به این خاطر هست که اندازه ی افقی کلاس (width) .menu 100 هست باید به 950 افزایش بدید.
این رو امتحان کنید


.menu
{
width:950px;
height:59px;
background: linear-gradient(#212020,#151515);
margin:0 auto;

}

ولی استاندارش استفاده از لیست های نامرتب یا ul هست.

موفق باشید.
mashhadpix
سه شنبه 15 مرداد 1392, 10:41 صبح
به این خاطر هست که اندازه ی افقی کلاس (width) .menu 100 هست باید به 950 افزایش بدید.
این رو امتحان کنید


.menu
{
width:950px;
height:59px;
background: linear-gradient(#212020,#151515);
margin:0 auto;

} ولی استاندارش استفاده از لیست های نامرتب یا ul هست.

موفق باشید.

ul تو css یعنی به چه صورت؟
منظورتون کلاس ul است:
.ul-menu
{
width:950px;
height:59px;
background: linear-gradient(#212020,#151515);
margin:2px auto;
float:right;
}

این کارو که گفتید انجام دادم درست شد
به این صورت یا جور دیگه ای است
ممنون میشم راهنمایی کنید؟
mashhadpix
سه شنبه 15 مرداد 1392, 10:46 صبح
بعد یه سوال دیگه، اینکه می خواهم اندازه متن را درست سر جای خودش باشه. دیگه برای هر متن که نمیخاد کلاس تعریف کنم.
108611
فقط برای متن یک کلاس نوشتم.
کد html:

<head runat="server">
<title></title>
<link type="text/css" rel="Stylesheet" href="Style.css" />
</head>
<body>
<form id="form1" runat="server">
<div class="wrapper">
<div class="header">


</div>
<div class="menu">
<div class="menu-bar">
<div class="text">صفحه اصلی</div>
</div>
<div class="menu-bar">
<div class="text">اخبار</div>
</div>
<div class="menu-bar"></div>
<div class="menu-bar"></div>
<div class="menu-bar"></div>
<div class="menu-bar"></div>
</div>


</div>
</form>
</body>

کد CSS:
.wrapper
{
width:970px;
height:1000px;
background-color:#e4e4e4;
margin:0 auto;
}
.header
{
width:950px;
height:243px;
background: linear-gradient(#0d0d0d,#282828);
margin:2px auto;
font-family:Tahoma;
direction:rtl;
}
.menu
{
width:950px;
height:59px;
background: linear-gradient(#212020,#151515);
margin:2px auto;

}
.text
{
color:#ffffff;
font-family:Tahoma;
font-size:14px;
margin:10px 5px 5px 10px;
}
.menu-bar
{
width:100px;
height:54px;
background-color:#151515;
float:right;
border:2px solid #000000;

}


ممنون میشم راهنمایی کنید؟
mashhadpix
چهارشنبه 16 مرداد 1392, 14:17 عصر
کسی نیست بتونه منو راهنمایی کنه؟:ناراحت:
2undercover
چهارشنبه 16 مرداد 1392, 15:07 عصر
برای اینکه متن از نظر عمودی بیاد وسط عنصر باید به اندازه ی Height اون عنصر بهش استایل line-height رو اضافه کنید و برای اینکه از نظر افقی بیاد وسط با این استایل:


text-align: center;
tadayoni
چهارشنبه 16 مرداد 1392, 16:36 عصر
برای اینکه متن از نظر عمودی بیاد وسط عنصر باید به اندازه ی Height اون عنصر بهش استایل line-height رو اضافه کنید و برای اینکه از نظر افقی بیاد وسط با این استایل:


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