CSS..ให้ภาพมันชิดบนสุดทำงัยครับ...

นิติพงษ์

ช่วยดู CSS ให้ด้วยครับ..นำโค็ดไปเเปะในดรีมดูให้ทีครับ
อยากให้ภาพขวามือที่เป็นขาตั้งธง มันขึ้นไปชิดบนสุดอ่าครับ
ไม่ทราบทำงัยครับ
โดยกล่องดิฟ test test1 test2 จะใส่รูปลงไปเรื่อยๆ
และกล่อง ขวามือ side bar ที่เป็นธง จะให้มันขึ้นไปชิดบนสุดเลยอ่าครับ
ตอนนี้มันไม่ยอมขึ้นไปชิดบนครับ

<html>
<head>
<style type="text/css">
#wrap {
   width: 1000px;
   margin-top: 0;
   margin-right: auto;
   margin-bottom: 0;
   margin-left: auto;
}
#sidebar {
   width: 180px;
   float: right;
   position: relative;
}
.test {
   width: 814px;
   float: left;
   clear: both;
   margin-top: 10px;
   margin-bottom: 10px;
}
.test2 {
   width: 814px;
   float: left;
   clear: both;
   margin-top: 10px;
   margin-bottom: 10px;
}
.test3 {
   width: 814px;
   float: left;
   clear: both;
   margin-top: 10px;
   margin-bottom: 10px;
}
</style>

</head>
<body>
<div id="wrap">
<div id="container">
<div class="test"> <img src="http://www.naturecamp.asia/images/banner-main.jpg" width="800" height="303" /></div>
<div class="test2"></div>
<div class="test3"><img src="http://www.naturecamp.asia/images/banner-main.jpg" width="800" height="303" /></div>
</div>

<div id="sidebar"><img src="http://images01.olxthailand.com/ui/11/10/01/1304308356_194940901_4-x-banner-x-stand-.jpg" width="170" height="381" /></div>
<div class="clear"></div>
</div>

</body>
</html>

tuckclub

ลองดู css 2-column layout ครับ
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

ผมเอามาแก้นิดหน่อยแล้วได้แบบนี้

โค้ด เลือก



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
	<title>Simple 2 column CSS layout, final layout | 456 Berea Street</title> 
	<meta name="description" content="How to create a simple two column CSS layout with full width header and footer."> 
	<meta name="copyright" content="Copyright (c) 2004 Roger Johansson"> 
	<meta name="author" content="Roger Johansson"> 
	<style type="text/css" media="screen, print, projection"> 
	body,
	html {
		margin:0;
		padding:0;
		color:#000;
		background:#a7a09a;
	}
	#wrap {
		width:1000px;
		margin:0 auto;
		background:#99c;
	}
	#header {
    	padding:5px 10px;
		background:#ddd;
	}
	h1 {
	    margin:0;
    }
	#nav {
		padding:5px 10px;
		background:#c99;
	}
	#nav ul {
		margin:0;
		padding:0;
		list-style:none;
	}
	#nav li {
		display:inline;
		margin:0;
		padding:0;
	}
	#main {
		float:left;
		width:800px;
		padding:10px;
		background:#9c9;
	}
	h2 {
		margin:0 0 1em;
	}
	#sidebar {
		float:right;
		width:170px;
		padding:5px;
		background:#99c;
	}
	#footer {
		clear:both;
		padding:5px 10px;
		background:#cc9;
	}
	#footer p {
		margin:0;
    }
	* html #footer {
		height:1px;
	}
	</style> 
</head> 
<body> 
<div id="wrap"> 
	<div id="main"> 
		<div class="test">
			<img src="http://www.naturecamp.asia/images/banner-main.jpg " width="800" height="303" />
		</div>
		<div class="test2">
		</div>
		<div class="test3">
			<img src="http://www.naturecamp.asia/images/banner-main.jpg " width="800" height="303" />
		</div>
	</div> 
	<div id="sidebar"> 
		<img src="http://images01.olxthailand.com/ui/11/10/01/1304308356_194940901_4-x-banner-x-stand-.jpg" width="170" height="381" />
	</div> 
</div> 
</body> 
</html>

rawat2543

ใส่เข้าไปครับ คุณลืมกำหนดส่วน #container

#container {
float: left;
width: 814px;
}

นิติพงษ์

+1 ทุกท่านครับ

gam_55

ลองดึง reset.css มาเคลียร์ค่าทุกอย่างในดรีมก่อนอ่ะค่ะ

ลองเสิรช reset.css ใน google ก้อเจอแล้วค่ะ

solutioncom

อ้างถึงจาก: นิติพงษ์ ใน 18 มิถุนายน 2011, 00:52:12
ช่วยดู CSS ให้ด้วยครับ..นำโค็ดไปเเปะในดรีมดูให้ทีครับ
อยากให้ภาพขวามือที่เป็นขาตั้งธง มันขึ้นไปชิดบนสุดอ่าครับ
ไม่ทราบทำงัยครับ
โดยกล่องดิฟ test test1 test2 จะใส่รูปลงไปเรื่อยๆ
และกล่อง ขวามือ side bar ที่เป็นธง จะให้มันขึ้นไปชิดบนสุดเลยอ่าครับ
ตอนนี้มันไม่ยอมขึ้นไปชิดบนครับ

<html>
<head>
<style type="text/css">
#wrap {
   width: 1000px;
   margin-top: 0;
   margin-right: auto;
   margin-bottom: 0;
   margin-left: auto;
}
#sidebar {
   width: 180px;
   float: right;
   position: relative;
}
.test {
   width: 814px;
   float: left;
   clear: both;
   margin-top: 10px;
   margin-bottom: 10px;
}
.test2 {
   width: 814px;
   float: left;
   clear: both;
   margin-top: 10px;
   margin-bottom: 10px;
}
.test3 {
   width: 814px;
   float: left;
   clear: both;
   margin-top: 10px;
   margin-bottom: 10px;
}
</style>

</head>
<body>
<div id="wrap">
<div id="container">
<div class="test"> <img src="http://www.naturecamp.asia/images/banner-main.jpg" width="800" height="303" /></div>
<div class="test2"></div>
<div class="test3"><img src="http://www.naturecamp.asia/images/banner-main.jpg" width="800" height="303" /></div>
</div>

<div id="sidebar"><img src="http://images01.olxthailand.com/ui/11/10/01/1304308356_194940901_4-x-banner-x-stand-.jpg" width="170" height="381" /></div>
<div class="clear"></div>
</div>

</body>
</html>

เพิ่ม css ครับ
#container{
width:800px;
float: left;
margin-right: 0;
}

bonshington

#sidebar{
width: 170px;
display: inline-block;
position: fixed;
top: 0px;
right: 0px;
}

ไม่คิดจะตรวจหน่อยหรอคับว่าพิมผิด?
div id=sidebar width:180px
แต่รูปข้างใน width=170px

ถ้าจะให้มันเลื่อนตามหน้า ก็เปลี่ยนเป็น position: absolute;
ถ้าแสดงผลเพี้ยนบน ie ให้ใส่
body
{
margin: 0px;
padding: 0px;
border: 0px;
width: 100%;
height: 100%;
}

ไม่แนะนำให้ใช้ relative เพราะมันอาจมี effect กับ element ถัดไป และถ้าจะเอาไว้เหมือนอีก layer ใช้ absolute, fixed ดีที่สุด

onair

ต้องsave เลย กระทู้นี้

Bes

เซียน css กันทั้งนั้น

CSS..ให้ภาพมันชิดบนสุดทำงัยครับ...

นิติพงษ์

tuckclub

rawat2543

นิติพงษ์

gam_55

solutioncom

bonshington

onair

Bes