mojtaba5
چهارشنبه 08 آذر 1391, 00:18 صبح
یه مشکل توی طراحی این پیح برام پیش اومده
1. توی این قسمت column واسه عکسها float:right; گذاشتم ولی نمیدونم چرا اون دو تا عکس کوچیک میفته پایین.در صورتی که باید کنار نوشته ها باشه مثل این:
باید مث این بشه:http://www.pic1.iran-forum.ir/images/up10/11398831275702648123.jpg
2. و یه مشکل دیگه اینکه توی div دومی همون 4 تا عکس وقتی پیج رو باز میکنم سمت چپ رفتن وقتی یه بار رفرش میکنم درست میشه به نظرتون مشکل از کجا هست؟
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>OS Templates | Template Demos | Demo of the Prestigious Free Website Template</title>
<link rel="stylesheet" href="site.css" type="text/css" />
<style type="text/css">
#osfooter{display:block;position:fixed;bottom:0;le ft:0;width:100%;height:300px;margin-bottom:-300px;overflow:hidden;background-color:transparent;z-index:5000;text-indent:-5000px;}
#osfooter div{margin-bottom:-1000px;}
#osfooter a{display:block; text-indent:-5000px;}
</style>
</head>
<body id="top">
<div class="wrapper col2">
<div id="header">
<div id="topnav">
</div>
<div id="logo">
<h1>Prestigious</h1>
<p>Free CSS Website Template</p>
</div>
<br class="clear" />
</div>
</div>
<div class="wrapper col1">
<div id="Menu">
<ul>
<li><a style="color:yellow" href="http://www.test.com">Home</a></li>
<li><a href="http://www.test.com">Products</a></li>
<li><a href="http://www.test.com">Support</a></li>
<li ><a href="http://www.test.cim">About Us</a></li>
<li><a href="http://www.test.com">Contact</a></li>
</ul>
<br />
</div>
</div>
<div class="wrapper col3">
<div id="images">
<ul>
<li><img src="1.jpg"/></li>
<li><img src="2.jpg" </li>
<li><img src="3.jpg" </li>
<li class="last"><img src="4.jpg" </li>
</ul>
<br class="clear" />
</div>
</div>
<div class="wrapper col4">
<div id="container">
<div id="content">
<h2>About This Free CSS Template</h2>
<img class="imgl" src="5.jpg" width="125" height="125" />
<p><b>Indonectetus facilis leo nibh</b></p>
<p>This is a W3C standards compliant free website template from <a href="http://www.test.com/" title="Free Website Templates">OS Templates</a>.</p>
<p>This template is distributed using a <a href="http://www.test.com">Website Template Licence</a>, which allows you to use and modify the template for both personal and commercial use when you keep the provided credit links in the footer.</p>
<p>For more CSS templates visit <a href="http://www.test.com/">Free Website Templates</a>.</p>
<p>Lacusenim inte trices lorem anterdum nam sente vivamus quis fauctor mauris wisinon vivamus. Condimentumfelis et amet tellent quisquet a leo lacus nec augue accumsan. Sagittislaorem dolor ipsum at urna et pharetium malesuada nis consectus odio.</p>
</div>
<div id="Column">
<div class="holder">
<h2>Nullamlacus loborttis</h2>
<ul id="latestnews">
<li><img class="imgl" src="6.jpg"/>
<p><b>Indonectetus facilis leo nibh.</b></p>
<p>Nullamlacus dui ipsum cons eque loborttis non euis que morbi penas dapibulum orna.</p>
<p class="readmore"><a href="http://www.test.com">Continue Reading »</a></p>
</li>
<li class="last"><img class="imgl" src="7.jpg"/>
<p><b>Indonectetus facilis leo nibh.</b></p>
<p>Nullamlacus dui ipsum cons eque loborttis non euis que morbi penas dapibulum orna.</p>
<p class="readmore"><a href="http://www.test.com">Continue Reading »</a></p>
</li>
</ul>
</div>
</div>
<br class="clear" />
</div>
</div>
<div class="wrapper col5">
</div>
</div>
<div class="wrapper col6">
<div id="copyright">
<p class="fl_left">Copyright © 2012 - All Rights Reserved - Domain Name</p>
<p class="fl_right">Template by OS Templates</p>
</div>
</div>
</body>
اینم css ام:
body{
margin:0;
padding:0;
font-size:12px;
font-family:verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
background-color:#333333;
}
img{border:0; padding:0; margin:0;}
.bold{font-weight:bold;}
.center{text-align:center;}
.right{text-align:right;}
br.clear{clear:both; margin-top:-15px;}
a{outline:none; text-decoration:none;}
.fl_left{float:left;}
.fl_right{float:right;}
.imgl, .imgr{border:1px solid #666666; padding:5px; color:#666666; background-color:#FFFFFF;}
.imgl{float:left; margin:0 15px 0 0; clear:left;}
.imgr{float:right; margin:0 0 15px 15px; clear:right;}
/* ----------------------------------------------Wrapper-------------------------------------*/
div.wrapper h1, div.wrapper h2, div.wrapper h3, div.wrapper h4, div.wrapper h5, div.wrapper h6{
margin:0 0 15px 0;
padding:0;
font-size:20px;
font-weight:normal;
font-family:Georgia, "Times New Roman", Times, serif;
}
.col1, .col1 a{color:white; background-color:#982216;}
.col2{color:#666666; background-color:#FFFFFF;}
.col3{color:#666666; background-color:#FFFFFF;}
.col4{color:#666666; background-color:#FFFFFF;}
.col4 a{color:#982216; background-color:#FFFFFF;}
.col5{color:#999999; background-color:#F8F8F8;}
.col5 a{color:#982216; background-color:#F8F8F8;}
.col6, .col6 a{color:#FFFFFF; background-color:#333333;}
/* ----------------------------------------------Generalise-------------------------------------*/
#topbar, #header, #intro, #breadcrumb, #container, #footer, #copyright{
position:relative;
margin:0 auto 0;
display:block;
width:960px;
}
/* ----------------------------------------------TopBar-------------------------------------*/
#Menu{
padding:10px ;
}
#Menu ul{
float:right;
margin:0;
padding:0;
list-style:none;}
#Menu li{
display:inline;
margin:0 8px0;
padding:0 10px 0 0;
border-right:1px solid White;color: solid white;
}
/* ----------------------------------------------Header-------------------------------------*/
#header{
padding:20px ;
}
#header h1, #header p{
margin:2;
padding:2;
}
#header h1{
margin:0;
font-size:38px;
border:none;
}
/* ----------------------------------------------Homepage Intro-------------------------------------*/
#images{
padding:0 0 30px 0;
border-bottom:1px solid #CCCCCC;
}
#images ul{
margin:0;
padding:0;
list-style:none;
}
#images li{
display:block;
float:left;
width:234px;
margin:20 8px 0 ;
}
#images li.last{
margin-right:0;
}
#images img{
display:block;
width:224px;
margin: 8px ;
padding:4px;
border:1px solid #E9E9E9;
}
#images a{
display:block;
width:234px;
margin:0;
padding:15px;
font-weight:bold;
text-align:center;
background-color:#F8F8F8;
}
/* ----------------------------------------------BreadCrumb-------------------------------------*/
/* ----------------------------------------------Content-------------------------------------*/
#container{
padding:20px ;
}
#container h1, #container h2, #container h3, #container h4, #container h5, #container h6{
padding-bottom:10px;
border-bottom:1px dotted #CCCCCC;
}
#content{
display:block;
float:left;
width:600px;
}
/* ------Comments-----*/
/* ----------------------------------------------Column-------------------------------------*/
#column{
display:block;
float:right;
width:300px;
}
.flickrbox ul{
margin:0;
padding:0;
list-style:none;
}
.flickrbox li{
display:block;
float:left;
width:80px;
height:80px;
margin:0 15px 15px 0;
padding:4px;
color:#666666;
background-color:#FFFFFF;
border:1px solid #CCCCCC;
}
.flickrbox li.last{margin-right:0;}
#column .holder, #column #featured{
display:block;
width:300px;
margin-bottom:20px;
}
#column .holder h2.title{
display:block;
width:100%;
height:65px;
margin:0;
padding:15px 0 0 0;
font-size:20px;
line-height:normal;
border-bottom:1px dashed #666666;
}
#column .holder h2.title img{
float:left;
margin:-15px 8px 0 0;
padding:5px;
border:1px solid #666666;
}
#column div.imgholder{
display:block;
width:290px;
margin:0 0 10px 0;
padding:4px;
color:#666666;
background-color:#FFFFFF;
border:1px solid #CCCCCC;
}
#column .holder p.readmore{
display:block;
width:100%;
font-weight:bold;
text-align:right;
line-height:normal;
}
/* Featured Block */
#column #featured a{
color:#666666;
background-color:#F9F9F9;
}
#column #featured ul, #column #featured h2, #column #featured p{
margin:0;
padding:0;
list-style:none;
}
#column #featured a{
color:#982216;
background-color:#F9F9F9;
}
#column #featured li{
display:block;
width:250px;
margin:0;
padding:20px 25px;
color:#666666;
background-color:#F9F9F9;
}
#column #featured li p.imgholder{
display:block;
width:240px;
height:90px;
margin:20px 0 15px 0;
padding:4px;
border:1px solid #CCCCCC;
}
#column #featured li h2{
margin:0;
padding:0 0 14px 0;
font-weight:normal;
font-family:Georgia, "Times New Roman", Times, serif;
line-height:normal;
border-bottom:1px dashed #666666;
}
#column #featured p.readmore{
display:block;
width:100%;
margin-top:15px;
font-weight:bold;
text-align:right;
line-height:normal;
}
#column #latestnews{
display:block;
width:100%;
margin:0;
padding:0;
list-style:none;
}
#column #latestnews li{
display:block;
margin:0 0 20px 0;
padding:0 0 15px 0;
border-bottom:1px dotted #CCCCCC;
}
#column #latestnews li.last{
margin-bottom:0;
}
#column #latestnews p{
margin:0 0 5px 0;
padding:0;
}
#column #latestnews p.readmore{
margin:0;
padding:0;
}
#column #latestnews .imgl{
margin:0 10px 10px 0;
padding:4px;
}
/* ----------------------------------------------Footer-------------------------------------*/
#footer{
padding:30px 0;
}
#footer h2{
padding-bottom:8px;
border-bottom:1px dotted #999999;
}
#footer p, #footer ul, #footer a{
margin:0;
padding:0;
font-weight:normal;
list-style:none;
line-height:normal;
}
#footer .footbox{
display:block;
float:right;
width:190px;
margin:0 0 0 30px;
padding:0;
}
#footer li{
margin-bottom:3px;
}
#footer .last{
margin:0;
}
#newsletter{
display:block;
float:left;
width:300px;
}
/* ----------------------------------------------Copyright-------------------------------------*/
#copyright{
padding:20px 0;
}
#copyright p{
margin:0;
padding:0;
}
1. توی این قسمت column واسه عکسها float:right; گذاشتم ولی نمیدونم چرا اون دو تا عکس کوچیک میفته پایین.در صورتی که باید کنار نوشته ها باشه مثل این:
باید مث این بشه:http://www.pic1.iran-forum.ir/images/up10/11398831275702648123.jpg
2. و یه مشکل دیگه اینکه توی div دومی همون 4 تا عکس وقتی پیج رو باز میکنم سمت چپ رفتن وقتی یه بار رفرش میکنم درست میشه به نظرتون مشکل از کجا هست؟
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>OS Templates | Template Demos | Demo of the Prestigious Free Website Template</title>
<link rel="stylesheet" href="site.css" type="text/css" />
<style type="text/css">
#osfooter{display:block;position:fixed;bottom:0;le ft:0;width:100%;height:300px;margin-bottom:-300px;overflow:hidden;background-color:transparent;z-index:5000;text-indent:-5000px;}
#osfooter div{margin-bottom:-1000px;}
#osfooter a{display:block; text-indent:-5000px;}
</style>
</head>
<body id="top">
<div class="wrapper col2">
<div id="header">
<div id="topnav">
</div>
<div id="logo">
<h1>Prestigious</h1>
<p>Free CSS Website Template</p>
</div>
<br class="clear" />
</div>
</div>
<div class="wrapper col1">
<div id="Menu">
<ul>
<li><a style="color:yellow" href="http://www.test.com">Home</a></li>
<li><a href="http://www.test.com">Products</a></li>
<li><a href="http://www.test.com">Support</a></li>
<li ><a href="http://www.test.cim">About Us</a></li>
<li><a href="http://www.test.com">Contact</a></li>
</ul>
<br />
</div>
</div>
<div class="wrapper col3">
<div id="images">
<ul>
<li><img src="1.jpg"/></li>
<li><img src="2.jpg" </li>
<li><img src="3.jpg" </li>
<li class="last"><img src="4.jpg" </li>
</ul>
<br class="clear" />
</div>
</div>
<div class="wrapper col4">
<div id="container">
<div id="content">
<h2>About This Free CSS Template</h2>
<img class="imgl" src="5.jpg" width="125" height="125" />
<p><b>Indonectetus facilis leo nibh</b></p>
<p>This is a W3C standards compliant free website template from <a href="http://www.test.com/" title="Free Website Templates">OS Templates</a>.</p>
<p>This template is distributed using a <a href="http://www.test.com">Website Template Licence</a>, which allows you to use and modify the template for both personal and commercial use when you keep the provided credit links in the footer.</p>
<p>For more CSS templates visit <a href="http://www.test.com/">Free Website Templates</a>.</p>
<p>Lacusenim inte trices lorem anterdum nam sente vivamus quis fauctor mauris wisinon vivamus. Condimentumfelis et amet tellent quisquet a leo lacus nec augue accumsan. Sagittislaorem dolor ipsum at urna et pharetium malesuada nis consectus odio.</p>
</div>
<div id="Column">
<div class="holder">
<h2>Nullamlacus loborttis</h2>
<ul id="latestnews">
<li><img class="imgl" src="6.jpg"/>
<p><b>Indonectetus facilis leo nibh.</b></p>
<p>Nullamlacus dui ipsum cons eque loborttis non euis que morbi penas dapibulum orna.</p>
<p class="readmore"><a href="http://www.test.com">Continue Reading »</a></p>
</li>
<li class="last"><img class="imgl" src="7.jpg"/>
<p><b>Indonectetus facilis leo nibh.</b></p>
<p>Nullamlacus dui ipsum cons eque loborttis non euis que morbi penas dapibulum orna.</p>
<p class="readmore"><a href="http://www.test.com">Continue Reading »</a></p>
</li>
</ul>
</div>
</div>
<br class="clear" />
</div>
</div>
<div class="wrapper col5">
</div>
</div>
<div class="wrapper col6">
<div id="copyright">
<p class="fl_left">Copyright © 2012 - All Rights Reserved - Domain Name</p>
<p class="fl_right">Template by OS Templates</p>
</div>
</div>
</body>
اینم css ام:
body{
margin:0;
padding:0;
font-size:12px;
font-family:verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
background-color:#333333;
}
img{border:0; padding:0; margin:0;}
.bold{font-weight:bold;}
.center{text-align:center;}
.right{text-align:right;}
br.clear{clear:both; margin-top:-15px;}
a{outline:none; text-decoration:none;}
.fl_left{float:left;}
.fl_right{float:right;}
.imgl, .imgr{border:1px solid #666666; padding:5px; color:#666666; background-color:#FFFFFF;}
.imgl{float:left; margin:0 15px 0 0; clear:left;}
.imgr{float:right; margin:0 0 15px 15px; clear:right;}
/* ----------------------------------------------Wrapper-------------------------------------*/
div.wrapper h1, div.wrapper h2, div.wrapper h3, div.wrapper h4, div.wrapper h5, div.wrapper h6{
margin:0 0 15px 0;
padding:0;
font-size:20px;
font-weight:normal;
font-family:Georgia, "Times New Roman", Times, serif;
}
.col1, .col1 a{color:white; background-color:#982216;}
.col2{color:#666666; background-color:#FFFFFF;}
.col3{color:#666666; background-color:#FFFFFF;}
.col4{color:#666666; background-color:#FFFFFF;}
.col4 a{color:#982216; background-color:#FFFFFF;}
.col5{color:#999999; background-color:#F8F8F8;}
.col5 a{color:#982216; background-color:#F8F8F8;}
.col6, .col6 a{color:#FFFFFF; background-color:#333333;}
/* ----------------------------------------------Generalise-------------------------------------*/
#topbar, #header, #intro, #breadcrumb, #container, #footer, #copyright{
position:relative;
margin:0 auto 0;
display:block;
width:960px;
}
/* ----------------------------------------------TopBar-------------------------------------*/
#Menu{
padding:10px ;
}
#Menu ul{
float:right;
margin:0;
padding:0;
list-style:none;}
#Menu li{
display:inline;
margin:0 8px0;
padding:0 10px 0 0;
border-right:1px solid White;color: solid white;
}
/* ----------------------------------------------Header-------------------------------------*/
#header{
padding:20px ;
}
#header h1, #header p{
margin:2;
padding:2;
}
#header h1{
margin:0;
font-size:38px;
border:none;
}
/* ----------------------------------------------Homepage Intro-------------------------------------*/
#images{
padding:0 0 30px 0;
border-bottom:1px solid #CCCCCC;
}
#images ul{
margin:0;
padding:0;
list-style:none;
}
#images li{
display:block;
float:left;
width:234px;
margin:20 8px 0 ;
}
#images li.last{
margin-right:0;
}
#images img{
display:block;
width:224px;
margin: 8px ;
padding:4px;
border:1px solid #E9E9E9;
}
#images a{
display:block;
width:234px;
margin:0;
padding:15px;
font-weight:bold;
text-align:center;
background-color:#F8F8F8;
}
/* ----------------------------------------------BreadCrumb-------------------------------------*/
/* ----------------------------------------------Content-------------------------------------*/
#container{
padding:20px ;
}
#container h1, #container h2, #container h3, #container h4, #container h5, #container h6{
padding-bottom:10px;
border-bottom:1px dotted #CCCCCC;
}
#content{
display:block;
float:left;
width:600px;
}
/* ------Comments-----*/
/* ----------------------------------------------Column-------------------------------------*/
#column{
display:block;
float:right;
width:300px;
}
.flickrbox ul{
margin:0;
padding:0;
list-style:none;
}
.flickrbox li{
display:block;
float:left;
width:80px;
height:80px;
margin:0 15px 15px 0;
padding:4px;
color:#666666;
background-color:#FFFFFF;
border:1px solid #CCCCCC;
}
.flickrbox li.last{margin-right:0;}
#column .holder, #column #featured{
display:block;
width:300px;
margin-bottom:20px;
}
#column .holder h2.title{
display:block;
width:100%;
height:65px;
margin:0;
padding:15px 0 0 0;
font-size:20px;
line-height:normal;
border-bottom:1px dashed #666666;
}
#column .holder h2.title img{
float:left;
margin:-15px 8px 0 0;
padding:5px;
border:1px solid #666666;
}
#column div.imgholder{
display:block;
width:290px;
margin:0 0 10px 0;
padding:4px;
color:#666666;
background-color:#FFFFFF;
border:1px solid #CCCCCC;
}
#column .holder p.readmore{
display:block;
width:100%;
font-weight:bold;
text-align:right;
line-height:normal;
}
/* Featured Block */
#column #featured a{
color:#666666;
background-color:#F9F9F9;
}
#column #featured ul, #column #featured h2, #column #featured p{
margin:0;
padding:0;
list-style:none;
}
#column #featured a{
color:#982216;
background-color:#F9F9F9;
}
#column #featured li{
display:block;
width:250px;
margin:0;
padding:20px 25px;
color:#666666;
background-color:#F9F9F9;
}
#column #featured li p.imgholder{
display:block;
width:240px;
height:90px;
margin:20px 0 15px 0;
padding:4px;
border:1px solid #CCCCCC;
}
#column #featured li h2{
margin:0;
padding:0 0 14px 0;
font-weight:normal;
font-family:Georgia, "Times New Roman", Times, serif;
line-height:normal;
border-bottom:1px dashed #666666;
}
#column #featured p.readmore{
display:block;
width:100%;
margin-top:15px;
font-weight:bold;
text-align:right;
line-height:normal;
}
#column #latestnews{
display:block;
width:100%;
margin:0;
padding:0;
list-style:none;
}
#column #latestnews li{
display:block;
margin:0 0 20px 0;
padding:0 0 15px 0;
border-bottom:1px dotted #CCCCCC;
}
#column #latestnews li.last{
margin-bottom:0;
}
#column #latestnews p{
margin:0 0 5px 0;
padding:0;
}
#column #latestnews p.readmore{
margin:0;
padding:0;
}
#column #latestnews .imgl{
margin:0 10px 10px 0;
padding:4px;
}
/* ----------------------------------------------Footer-------------------------------------*/
#footer{
padding:30px 0;
}
#footer h2{
padding-bottom:8px;
border-bottom:1px dotted #999999;
}
#footer p, #footer ul, #footer a{
margin:0;
padding:0;
font-weight:normal;
list-style:none;
line-height:normal;
}
#footer .footbox{
display:block;
float:right;
width:190px;
margin:0 0 0 30px;
padding:0;
}
#footer li{
margin-bottom:3px;
}
#footer .last{
margin:0;
}
#newsletter{
display:block;
float:left;
width:300px;
}
/* ----------------------------------------------Copyright-------------------------------------*/
#copyright{
padding:20px 0;
}
#copyright p{
margin:0;
padding:0;
}