ورود

View Full Version : کنار هم قرار گرفتن مستطیل ها


omidparkour
چهارشنبه 25 دی 1392, 19:38 عصر
سلام
من برای منوها از مستطیل استفاده کردم و حالا میخوام مستطیل ها کنار همدیگر باشن نه زیر هم چی باید بکنم؟؟؟


<!doctype html>
<html>
<style>

a {
text-decoration:none;
}

.example-textselect ::selection {
background:#C33; /* for WebKit & Opera */
}

.example-textselect ::-moz-selection {
background: #C33; /* for Firefox */
}


</style>
<head>
<meta charset="utf-8">
<title>رها دیزاینر</title>
</head>
<style type="text/css" >@import url(style.css);</style>
<body>
<div class="example example-textselect">
<div class="menu">

<ul class="menuul">
<div class="boxmenu"><a href=""><li >خانه</li></a></div>
<div class="boxmenu"><a href=""><li >نمونه کار</li></a></div>
<div class="boxmenu"><a href=""><li >تعرفه ها</li></a></div>
<div class="boxmenu"><a href=""><li >تماس با ما</li></a></div>
</ul>
</div>


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



@font-face {
font-family: 'yekan';
src: url('fonts/yekan.eot') format('eot'), /* IE6–8 */
url('fonts/yekan.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('fonts/yekan.ttf') format('truetype'); /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
font-weight: normal;
font-style: normal
}
@font-face {
font-family: 'A dast nevis';
src: url('../fonts/ADastNevis.eot') format('eot'), /* IE6–8 */
url('fonts/ADastNevis.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('fonts/ADastNevis.ttf') format('truetype'); /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
font-weight: normal;
font-style: normal
}
@charset "utf-8";
/* CSS Document */
body p::moz-selection {background:#933;}
body{background-image:url(images/bg.jpg)}
.menu{background-color:#C33; width:100%; height:50px; text-align:right;}
.menuul{list-style:none; font-family:"B Yekan", "Century Gothic" ; font-size:30px; position:relative;overflow: hidden;margin-right:150px;
}
.menuul li{

top: 0px;
left: 0px;
overflow: hidden;

font-family:"B Yekan", "Century Gothic" ; font-size:30px;
display:inline;
margin-left:20px;


}

.menuul li:hover{border-color:#333;
}
.boxmenu{width: 100px;
height: 50px;
background:#999}
p30online
چهارشنبه 25 دی 1392, 20:00 عصر
استایل آن ها را برابر
float: right
thinkdiff
چهارشنبه 25 دی 1392, 20:04 عصر
قسمت منو هاتون در فایل html رو تغییر بدی:

کد قدیمی یا فعلی :

<ul class="menuul">
<div class="boxmenu"><a href=""><li >خانه</li></a></div>
<div class="boxmenu"><a href=""><li >نمونه کار</li></a></div>
<div class="boxmenu"><a href=""><li >تعرفه ها</li></a></div>
<div class="boxmenu"><a href=""><li >تماس با ما</li></a></div>
</ul>

کد جدید :

<ul class="menuul">
<a class="boxmenu" href=""><li >خانه</li></a>
<a class="boxmenu" href=""><li >نمونه کار</li></a>
<a class="boxmenu" href=""><li >تعرفه ها</li></a>
<a class="boxmenu" href=""><li >تماس با ما</li></a>
</ul>

اگر یک مقدار هم بهش استایلی زیباتری بدی خیلی بهتر میشه
موفق باشید
SA_Developer
چهارشنبه 25 دی 1392, 20:33 عصر
سلام
اگر بخوای استاندارد بنویسی اینطور میشه:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
@import url(style.css);

a {
text-decoration: none;
}

.example-textselect ::selection {
background: #C33; /* for WebKit & Opera */
}

.example-textselect ::-moz-selection {
background: #C33; /* for Firefox */
}
</style>


<title>رها دیزاینر</title>
</head>
<body>
<div class="example example-textselect">
<div class="menu">
<ul class="menuul">
<li class="boxmenu"><a href="">خانه</a></li>
<li class="boxmenu"><a href="">نمونه کار</a></li>
<li class="boxmenu"><a href="">تعرفه ها</a></li>
<li class="boxmenu"><a href="">تماس با ما</a></li>
</ul>
</div>
</div>
</body>
</html>
چک کن! (http://validator.w3.org/#validate_by_input)

اگر بخوای یه دستی هم روش بکشی کد CSS هم اینطوری میشه(مشکل زیاد داشت :) )


@CHARSET "ISO-8859-1";

@font-face {
font-family: 'yekan';
src: url('fonts/yekan.eot') format('eot'), /* IE6–8 */
url('fonts/yekan.woff') format('woff'),
/* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('fonts/yekan.ttf') format('truetype');
/* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
font-weight: normal;
font-style: normal
}

@font-face {
font-family: 'A dast nevis';
src: url('../fonts/ADastNevis.eot') format('eot'), /* IE6–8 */
url('fonts/ADastNevis.woff') format('woff'),
/* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('fonts/ADastNevis.ttf') format('truetype');
/* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
font-weight: normal;
font-style: normal
}

body p::moz-selection {
background: #933;
}

body {
background-image: url(images/bg.jpg)
}

.menu {
background-color: rgb(204, 51, 51);
overflow: hidden;
}

.menuul {
margin: 0;
}

.menuul li {
float: right;
border-right: 1px solid rgb(165, 159, 159);
overflow: hidden;
font-family: "B Yekan", "Century Gothic";
font-size: 30px;
padding: 3px 10px;
margin: 3px;
display: inline;
background: rgb(221, 221, 221);
}

.menuul li:hover {
background: rgb(241, 241, 241);
}