Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,027

HOME > กระทู้สำหรับภาษาต่าง ๆ > ช่วยแนะนำหน่อยครับมันต้องทำยังไง เรื่อง CSS ครับ ไม่รู้จะต้องทำยังไงครับ (มือใหม่)

ช่วยแนะนำหน่อยครับมันต้องทำยังไง เรื่อง CSS ครับ ไม่รู้จะต้องทำยังไงครับ (มือใหม่)

เริ่มหัวข้อใหม่

DavidCopter

โพสกระทู้ ( 82 )
บทความ ( 0 )

:)
สวัดดีครับ คือว่าผมเป็นมือใหม่อ่ะนะ แล้วเพิ่หัดเขียน เทมเพจ อ่ะครับ แล้วผมมีปัญหา อ่ะครับ อยากจะมาถามอ่ะครับ เกี่ยวกับเทมเพจที่ผมเขียนมาอ่ะครับ

ผมเขียนเป็น 3 ส่วนอ่ะครับ
header = สีเขียว
body =สีแดง
footer = สีน้ำเงิน
คือผมเขียนแล้วมันแยกกันอ่ะครับ แล้วผมอยากให้มันมาอยู่ติดกันครับทำยังไงดีครับ
O0
โค้ด index or html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="images/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page">
<div id="header"><p> </p></div>
<div id="body"><p> </p></div>
<div id="footer"><p> </p></div>
</div>
</body>
</html>

โค้ด CSS

/*STYLE*/
/*-----BOBY------*/
body {
background-color:#6CF;
background-attachment:fixed
}
div {
padding:0px auto;
margin:0px auto;
width:1000px
}
/**page**/
#page {
height:auto;
width:auto;
}
/*---- header----*/
#header {
background-image:url(images/images/header.png);
background-position:top center;
background-repeat:no-repeat;
margin:auto;
padding-bottom:1px;
height:144px;
width:1000px;
clear:both
}
/*body*/
#body {
background-image:url(images/images/body.png);
background-repeat:repeat-y;
background-position:center;
margin:auto;
padding:0px;
height:auto;
width:1000px;
float:none
}
/***footer***/
#footer {
background-image:url(images/images/footer.png);
background-position:top center;
background-repeat:no-repeat;
margin:auto;
padding:0px;
height:96px;
width:1000px;
clear:both
}

ผมต้องทำยังไงครับเพื่อที่จะให้ 3 ส่วนมาอยู่ติดกันครับในแนวตั้ง นะครับ ใครรู้ก็ช่วยแนะนำหน่อยนะครับ
หรือว่า แก้โค้ดให้เลยก็ได้นะครับ

= ขอขอบคุณล่วงหน้านะครับ :)

Tag : - - - -

Date : 2010-12-26 13:55:30

By : zoneme

View : 1071

Reply : 8

No. 1

chineji

โพสกระทู้ ( 318 )
บทความ ( 2 )

ผมก็ไม่เก่ง css หรอกนะ แต่ผมว่าน่าจะเป็นที่ตัวรูปมากกว่า
มันเป็น transparent อาจจะมีพื้นที่ว่างด้านบนกับด้านล่างของในส่วน body ที่คุณตัดมาหรือเปล่า
แล้วอีกอย่างที่เป็นไปได้คือแท็ก div ของส่วน header มีขนาดความสูงกว่าแบคกราว
มันเลยทำให้มีพื้นที่ว่างเหลืออยู่ตามความสูงที่คุณกำหนดไว้ และเท่าที่ผมลองดูมันก็ชิดกันอยู่นะผมเลยเดาว่าจะเป็นตามที่ผมพูดไว้ข้างต้น
ลองดูก่อน หรือคอยผู้รู้ท่านอื่นมาตอบเพิ่มเติมก็ได้ครับ

Date : 2010-12-26 14:28:51

By : chineji

No. 2

DavidCopter

โพสกระทู้ ( 82 )
บทความ ( 0 )

ขอบคุณนะครับ
รูปที่ผมตคัดมา ส่วน ของ ทุกส่วนมันจะไม่มีพื้นที่ว่างนะครับ

Date : 2010-12-26 15:04:30

By : zoneme

No. 3

Lightz

โพสกระทู้ ( 70 )
บทความ ( 0 )

ผมว่าน่าจะทำเป็น table แทนที่จะเป็น div จะเขียน code ง่ายกว่าน่ะครับ

ตามความถนัด แต่ผมจะถนัดการเขียนเป็น table มากกว่า

ยังไง ขอ รูป top body footer ให้หน่อยนะครับ ผมจะลองแก้ให้ดูครับ

Date : 2010-12-27 00:15:39

By : lightkung

No. 4

Guest

[/URL]
/*header

**Body

/**footer

Date : 2010-12-27 08:16:35

By : ♥CETA

No. 5

Lightz

โพสกระทู้ ( 70 )
บทความ ( 0 )

ลองเอาตรง <p> </p> ออกดูนะครับ

Code (PHP)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="images/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page">
<div id="header">&nbsp;</div>
<div id="body">&nbsp;</div>
<div id="footer">&nbsp;</div>
</div>
</body>
</html>

Date : 2010-12-27 11:57:27

By : lightkung

No. 6

PlaKriM

โพสกระทู้ ( 11,835 )
บทความ ( 10 )

ถ้าไม่เอาออก

#body p{margin:0px;padding:0px;}

Date : 2010-12-27 12:02:04

By : PlaKriM

No. 7

Lightz

โพสกระทู้ ( 70 )
บทความ ( 0 )

อันนี้แบบ table ที่ผมแนะนำนะครับ

ลองดู ง่ายกว่าเยอะเลยครับ

Code (PHP)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
	body {
	background-color:#00FFFF;
	margin: 0;
	}
</style>
</head>

<body leftmargin="0" topmargin="0" rightmargin="0">
<table align="center" width="1000" border="0" cellpadding="0" cellspacing="0">
<tr><td valign="top" align="left" background="images/top.png" width="1000" height="144" style="background-repeat:no-repeat;"></td></tr>
<tr><td valign="top" align="left" background="images/body.png" width="1000" style="background-repeat:repeat-y;">&nbsp;&nbsp;&nbsp;</td></tr>
<tr><td valign="top" align="left" background="images/footer.png" width="1000" height="96" style="background-repeat:no-repeat-y;"></td></tr>
</table>
</body>

</html>

Date : 2010-12-27 12:03:04

By : lightkung

No. 8

DavidCopter

โพสกระทู้ ( 82 )
บทความ ( 0 )

ขอบคุณสำหรับคอบคุณ ทั้งหลายนะครับ
...พอดีว่าได้บะครับ
เอาเทมเพจ นอกมาแกะเอาครับ
อิอิ

Date : 2010-12-28 07:23:14

By : zoneme

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : ช่วยแนะนำหน่อยครับมันต้องทำยังไง เรื่อง CSS ครับ ไม่รู้จะต้องทำยังไงครับ (มือใหม่)

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก