آموزش طراحی وب سایت جلسه هشتم – طراحی یک تمپلیت تدریس طراحی وب برای اطلاعات بیشتر تماس بگیرید تاو شماره تماس: پست الکترونیک :

Web Design Training Template Designing Part 08 Author :Babak Tavatav

CSS float Property The float property sets where an image or a text will appear in another element. Note: If there is too little space on a line for the floating element, it will jump down on the next line, and continue until a line has enough space. Note: Content, background, and borders of inline elements should go in front of the float. Background and borders of a block element should go behind the float, but the content of the block element should go in front of the float. Possible Values ValueDescription left : The image or text moves to the left in the parent element right : The image or text moves to the right in the parent element None : (Default) The image or the text will be displayed just where it occurs in the text

img { float:right; }

In the paragraph below, we have added an image with style float:right. The result is that the image will float to the right in the paragraph. This is some text. This is some text. This is some text...

.thumbnail { float:left; width:110px; height:90px; margin:5px; }

CSS Clear Property Image and text elements that appear in another element are called floating elements. The clear property sets the sides of an element where other floating elements are not allowed. ValueDescription Left : No floating elements allowed on the left side Right: No floating elements allowed on the right side Both: No floating elements allowed on either the left or the right side None : Default. Allows floating elements on both sides

.html

خوش آمدید ! ورود به سایت - ثبت نام درباره سبد کالا | آگهی ها | سوالات متداول | همکاری با ما | تماس با ما خوش آمدید ! ورود به سایت - ثبت نام --%>

تمامی حقوق این سایت به سبد کالا مربوط است

.css body { margin-right: 3%; margin-left: 3%; }

#wrapper { width:900px; margin:0 auto; }

#Header-Logo { width: 275px; float: right; padding: 10px; background-image: url( Images/Logo.jpg ); height: 70px; background-repeat: no-repeat; }

* { margin:0; padding:0; border:0; }

#header { background-color: #eee; background-image: url(image/bg_menu.jpg); height: 80px; padding-bottom: 10px; padding-left: 10px; background-repeat: no-repeat; }

#Header-Menu { width: 580px; float: left; padding: 0px 0px 0px 0px; font-family:tahoma; font-size:11px; }

#main { background-repeat: repeat-y; background-color: #FFFFFF; width: 887px; }

#navi-left { width: 194px; float: left; color: #fff; background-image: url( 'Images/bar_sabad.jpg' ); background-repeat: no-repeat; height: 60px; }

#navi-center { margin-left: 194px; margin-right:572px; background-image: url( 'Images/bar_supprt.jpg' ); background-repeat: no-repeat; width: 698px; height: 60px; }

#navi-right { width: 580px; height: 60px; float: right; background-image: url( 'Images/bar_bg.jpg' ) }

/* Menu & Slideshow */ #row03 { clear: both; padding-top: 10px; width: 887px; }

#slideshow { width:670px; float: left; background-image: url( 'Images/Store_Slice_19.jpg' ); color:#fff; height: 271px; }

#mainmenu { width: 200px; margin-left:670px; }

#menu-header { background-image: url( 'Images/menu_top.jpg' ); background-repeat: no-repeat; width: 215px; height: 37px; }

#menu-content { background-image: url( 'Images/menu_bg.jpg' ); height: 234px; width: 215px; }

/* Row */ #row04" { clear: both; width: 847px;} #row04-left {width:240px; float: left; }

#t1 { background-image: url( 'Images/tabliq1.jpg' ); width: 240px; height: 152px; background-repeat: no-repeat; }

#t2 { background-image: url( 'Images/tabliq2.jpg' ); width: 240px; height: 153px; background-repeat: no-repeat; }

#t3 { background-image: url( 'Images/tabliq3.jpg' ); width: 240px; height: 201px; background-repeat: no-repeat; } #row04-right { width: 660px; margin-left:240px;}

#adv01 { background-image: url( 'Images/Store_Slice_38.jpg' ); width: 650px; height: 194px; } #adv02 { background-image: url( 'Images/Store_Slice_38.jpg' ); width: 650px; height: 194px; } #adv03 { background-image: url( 'Images/Store_Slice_38.jpg' ); width: 650px; height: 194px; }

# clearer { clear:both; } #footer { padding: 10px; font-size: 11px; text-align: center; }

The End