PDA

View Full Version : Code CSS


minhhd
05-03-2008, 15:19
Em vừa làm một cái như thế này bằng IR sau đó em lấy code CSS nhưng em ko thể canh cho nó vào giữa được có pác nào giúp em với em xin cám ơn nhiều:
Code:
<html>
<head>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (Untitled-1) -->
<script type="text/javascript">
<!--

userAgent = window.navigator.userAgent;
browserVers = parseInt(userAgent.charAt(userAgent.indexOf("/")+1),10);
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function findElement(n,ly) {
if (browserVers < 4) return document[n];
var curDoc = ly ? ly.document : document;
var elem = curDoc[n];
if (!elem) {
for (var i=0;i<curDoc.layers.length;i++) {
elem = findElement(n,curDoc.layers[i]);
if (elem) return elem;
}
}
return elem;
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
var img;
for (var i=0; i<changeImages.arguments.length; i+=2) {
img = null;
if (document.layers) {
img = findElement(changeImages.arguments[i],0);
}
else {
img = document.images[changeImages.arguments[i]];
}
if (img) {
img.src = changeImages.arguments[i+1];
}
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
home_over = newImage("images/home-over.gif");
link1_over = newImage("images/link1-over.gif");
link2_over = newImage("images/link2-over.gif");
link3_over = newImage("images/link3-over.gif");
link4_over = newImage("images/link4-over.gif");
preloadFlag = true;
}
}

// -->
</script>
<!-- End Preload Script -->
<!-- ImageReady Styles (Untitled-1) -->
<style type="text/css">
table{
table-layout: automatic
}
<!--

<table>
<tr>
<td>
#Table_01 {
position:absolute;
left:0px;
top:0px;
width:800px;
height:600px;
}

#shark-01 {
position:absolute;
left:0px;
top:0px;
width:90px;
height:600px;
}

#shark-02 {
position:absolute;
left:90px;
top:0px;
width:710px;
height:26px;
}

#home {
position:absolute;
left:90px;
top:26px;
width:150px;
height:24px;
}

#link1 {
position:absolute;
left:240px;
top:26px;
width:139px;
height:24px;
}

#link2 {
position:absolute;
left:379px;
top:26px;
width:141px;
height:24px;
}

#link3 {
position:absolute;
left:520px;
top:26px;
width:130px;
height:24px;
}

#link4 {
position:absolute;
left:650px;
top:26px;
width:150px;
height:24px;
}

#shark-08 {
position:absolute;
left:90px;
top:50px;
width:710px;
height:550px;
}

-->
</style>
<!-- End ImageReady Styles -->
</head>
<body onload="preloadImages();" style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<!-- ImageReady Slices (Untitled-1) -->
<table align=center>
<tr>
<td>
<div id="Table_01">
<div id="shark-01">
<img src="images/shark_01.gif" width="90" height="600" alt="">
</div>
<div id="shark-02">
<img src="images/shark_02.jpg" width="710" height="26" alt="">
</div>
<div id="home">
<a href="home.htm" target="_parent"
onmouseover="changeImages('home', 'images/home-over.gif'); return true;"
onmouseout="changeImages('home', 'images/home.gif'); return true;"
onmousedown="changeImages('home', 'images/home-over.gif'); return true;"
onmouseup="changeImages('home', 'images/home-over.gif'); return true;">
<img name="home" src="images/home.gif" width="150" height="24" border="0" alt=""></a>
</div>
<div id="link1">
<a href="link1.htm" target="_parent"
onmouseover="changeImages('link1', 'images/link1-over.gif'); return true;"
onmouseout="changeImages('link1', 'images/link1.gif'); return true;"
onmousedown="changeImages('link1', 'images/link1-over.gif'); return true;"
onmouseup="changeImages('link1', 'images/link1-over.gif'); return true;">
<img name="link1" src="images/link1.gif" width="139" height="24" border="0" alt=""></a>
</div>
<div id="link2">
<a href="link2.htm" target="_parent"
onmouseover="changeImages('link2', 'images/link2-over.gif'); return true;"
onmouseout="changeImages('link2', 'images/link2.gif'); return true;"
onmousedown="changeImages('link2', 'images/link2-over.gif'); return true;"
onmouseup="changeImages('link2', 'images/link2-over.gif'); return true;">
<img name="link2" src="images/link2.gif" width="141" height="24" border="0" alt=""></a>
</div>
<div id="link3">
<a href="link3.htm"
onmouseover="changeImages('link3', 'images/link3-over.gif'); return true;"
onmouseout="changeImages('link3', 'images/link3.gif'); return true;"
onmousedown="changeImages('link3', 'images/link3-over.gif'); return true;"
onmouseup="changeImages('link3', 'images/link3-over.gif'); return true;">
<img name="link3" src="images/link3.gif" width="130" height="24" border="0" alt=""></a>
</div>
<div id="link4">
<a href="link4.htm" target="_parent"
onmouseover="changeImages('link4', 'images/link4-over.gif'); return true;"
onmouseout="changeImages('link4', 'images/link4.gif'); return true;"
onmousedown="changeImages('link4', 'images/link4-over.gif'); return true;"
onmouseup="changeImages('link4', 'images/link4-over.gif'); return true;">
<img name="link4" src="images/link4.gif" width="150" height="24" border="0" alt=""></a>
</div>
<div id="shark-08">
<img src="images/shark_08.jpg" width="710" height="550" alt="">
</div>
</div>
</td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
2_lua_IT
06-03-2008, 09:13
Trời, pác sử dụng code CSS này thì chạy kô đúng là phải rồi. "position:absolute; left:0px; top:0px;" là để xác định chính xác vị trí bên trái và top rồi. Mà code CSS như vậy thì chạy từa lưa là cái chắc. hihi. Thanks bro.
trhthong
07-03-2008, 20:42
Ông IT_hai lúa sao không chịu trả lời mà lại chê bạn í vậy?
Tui đưa ra ý kiến thử nghen: (nói trước cái này tui học lỏm trong CSSYEAH đó)
Bạn thử áp dụng kỹ thuật này xem:
Nếu muốn đưa một đối tượng nào vào giữa, trong phần body, bạn có thể thêm vào như sau:
body {
text-alignt: center;
/*......*/
}
hoặc bạn có thể thêm vào width: abc px; và margin-left: auto; margin-right: auto;
VD:
.banner {
width: 778px;
height: 220px;
margin: 0 auto;
}
Làm thử nghen! Có ai thấy mình sai thì chỉ thêm cho!
Spirit
07-03-2008, 20:47
text-align chứ ko phải text-align nha. :)

Anyway, bị chê là phải rồi, ai đời lại position: absolute tất tần tật thì làm sao chạy cho ngon dc :))