ورود

**homahelp** · 94-2-29، 12:34 عصر

سلام می خواستم یه قالب طراحی کنم ولی با این مشکل مواجه شدم که وقتی دو تا div رو پشت سر هم میگذاشتم قالب به هم می ریخت کد clear: both رو به css اضافه کردم مشکلی که در تصویر ضمیمه شده می بینید به وجود اومد لطفا راهنمایی کنید

~~moeinansari~~ · 94-2-29، 01:03 عصر

کد قالبو بذارید

**homahelp** · 94-3-1، 11:35 صبح

کد:

کد: 

<html>

<head>

<title>وبسایت</title>

<style>

body {

background-color: #ffffff;

background-image: url(Untitled-3.jpg);

background-repeat: repeat;

}

.post{

width: 90%

line-height: 28px;

font: 12px B Yekan;

margin-bottom: 5px;

}

.post1{ 

width: 100%;

background: #aa41b6;

border:0px;

border-bottom-left-radius: 10px;

border-bottom-right-radius: 10px;

border-top-left-radius: 10px;

line-height: 28px;

color: #fff;

text-shadow: 1px 1px 1px #000; 

font: 13px B Yekan;

padding: 7px 0px;

margin-bottom: 5px; 

}

.left{

border-top-left-radius: 10px;

float: left;

background: #cccccc;

width: 200px;

font: 12px B Yekan;

margin-bottom: 5px;

clear:both;

}

.right{

border-top-left-radius: 10px;

float: right;

background: #cccccc;

width: 200px;

font: 12px B Yekan;

margin-bottom: 5px;

clear:both;

}

.center{

text-align:right;

border-top-left-radius: 10px;

background: #cccccc;

width: 600px;

clear:both;

}

</style>

</head>

<body>

<div class="right" align="center">

<div class="post1">

عنوان مطلب شماره 1

</div>

مطلب

</div>

<div align="center">

<div class="right" align="center">

<div class="post1">

عنوان مطلب شماره 1

</div>

مطلب

</div>

<div align="center">

<div class="left" align="center">

<div class="post1">

عنوان مطلب شماره 1

</div>

مطلب

</div>

<div align="center">

<div class="left" align="center">

<div class="post1">

عنوان مطلب شماره 1

</div>

مطلب

</div>

<div align="center">

<div class="center">

<div class="post1" align="center">

عنوان مطلب شماره 1

</div>

<div class="post">

متن مطلب شماره 1

</div>

</div>

</div>

<div align="center">

<div class="center">

<div class="post1" align="center">

عنوان مطلب شماره 1

</div>

<div class="post">

متن مطلب شماره 1

</div>

</div>

</div>

<div align="center">

<div class="center">

<div class="post1" align="center">

عنوان مطلب شماره 1

</div>

<div class="post">

متن مطلب شماره 1

</div>

</div>

</div>

</body>

</html>

**ar-blogger**

احتمالا باید خصوصیت

کد: 

FLOAT:RIGHT;

رو به قالبتون اضافه کنید.

**parsa123**

این مشکلو منم داشتم
هیچ نیازی به clear: both نیست .
برای هر ستون یک div جدا بساز بعد محتویات هر ستون رو در div خودش قرار بده .
اگه وقت کردم کدشم درست می کنم برات می زارم
Float : right هم یادت نره

**parsa123**

اینم کدش :
یکمی هم استاندارد ترش کردم

کد: 

<html>

<head>

<title>وبسایت</title>

<style>

body {

background-color: #ffffff;

background-image: url(Untitled-3.jpg);

background-repeat: repeat;

}

.post{

line-height: 28px;

font: 12px B Yekan;

margin-bottom: 5px;

}

.post1{ 

width: 100%;

background: #aa41b6;

border:0px;

border-bottom-left-radius: 10px;

border-bottom-right-radius: 10px;

border-top-left-radius: 10px;

line-height: 28px;

color: #fff;

text-shadow: 1px 1px 1px #000; 

font: 13px B Yekan;

padding: 7px 0px;

margin-bottom: 5px; 

}

.left{

border-top-left-radius: 10px;

float: left;

background: #cccccc;

width: 200px;

font: 12px B Yekan;

margin-bottom: 5px;

}

.right{

border-top-left-radius: 10px;

float: right;

background: #cccccc;

width: 200px;

font: 12px B Yekan;

margin-bottom: 5px;

}

.center{

text-align:right;

border-top-left-radius: 10px;

background: #cccccc;

width: 600px;

}

.center-post{

float:center;

margin-left:350px;

}

.left-post{

width:200px;

float:left;

margin-left:10px;

}

.right-post{

width:200px;

float:right;

margin-right:10px;

}

</style>

</head>

<body>

<div class="right-post">

<div class="right" align="center">

<div class="post1">

عنوان مطلب شماره 1

</div>

مطلب

</div>

<div align="center">

<div class="right" align="center">

<div class="post1">

عنوان مطلب شماره 1

</div>

مطلب

</div>

</div>

</div>

<div class="left-post">

<div align="center">

<div class="left" align="center">

<div class="post1">

عنوان مطلب شماره 1

</div>

مطلب

</div>

<div align="center">

<div class="left" align="center">

<div class="post1">

عنوان مطلب شماره 1

</div>

مطلب

</div>

</div>

</div>

<div class="center-post">

<div align="center">

<div class="center">

<div class="post1" align="center">

عنوان مطلب شماره 1

</div>

<div class="post">

متن مطلب شماره 1

</div>

</div>

</div>

<div align="center">

<div class="center">

<div class="post1" align="center">

عنوان مطلب شماره 1

</div>

<div class="post">

متن مطلب شماره 1

</div>

</div>

</div>

<div align="center">

<div class="center">

<div class="post1" align="center">

عنوان مطلب شماره 1

</div>

<div class="post">

متن مطلب شماره 1

</div>

</div>

</div>

</div>

</body>

</html>

~~roxanna alp~~

ممنون از اموزشتون

طراحی اختصاصی سایت

ورود
نام کاربری:
گذرواژه‌:	گذرواژه‌تان را فراموش کرده‌اید؟
	مرا به خاطر بسپار

بک لینک