calling mga master website designers

**tulodos** · 06-18-2008, 01:01 PM

Mga bro, patabang unta ko saon pagcenter sa display sa website.

kay nkatry mn gd ko nga gamit rko layout tables sa dreamweaver then sa akong screen resolution

ok ra kau ang display but when viewed sa higher resolution kay d naman sya center.

patabang ko sa mga master dha og website designing. Assignment mn ni namo gd sa skol.

unsay gamiton mga bro pra macenter ang display bsag iview sa different screen resolution?

Thanks kau daan.

**flashfreak** · 06-18-2008, 03:19 PM

I think this will help you with your problem ^____^

HTML Code:

<html>
<head>
<title>ABSOLUTE CENTER CONTENT</title>
<style type="text/css">
<!--
.style1 {color: #FFFFFF}
body {
	background-color: #666666;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>

<body>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td width="600" height="400" align="center" valign="middle" bgcolor="#000000"><span class="style1"><strong>ABSOLUTE CENTER CONTENT</strong><br>
    <small>(600x400 px)</small></span></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

View sample

although it's a table based layout... you can do this on css as well.

HTML Code:

<html>
<head>
<title>ABSOLUTE CENTER CONTENT (CSS version)</title>

<style>
body {
	padding: 0px;
	margin: 0px;
	height: 100%;
	width: 100%;
	background-color: #666666;
}
#container {
	height: 100%;
	width: 100%;
	display: table;
}
#container #mainContent {
	width: 600px;
	height: 400px;
	position: absolute; 
	display: table-cell;
	top: 50%;
	left: -300px;
	margin-top: -200px;
	margin-left: 50%;
	background-color: #000000;
}
#container #mainContent #textCenter {
	width: 600px;
	height: 400px;
	color: #ffffff;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
</style>

</head>

<body>
<div id="container">
	<div id="mainContent">
  	<div id="textCenter">
    <strong>ABSOLUTE CENTER CONTENT (CSS version)</strong><br /><small>(600x400 px)</small></p>
  </div>
</div>
</body>
</html>

View sample

if you notice, on IE browsers, the text on the css version is not centered horizontally. you may need to insert some javascript in order to fix that issue.

^______^

**tulodos** · 06-18-2008, 03:42 PM

bro flashfreak daghan kau salamat bay...ako ni suwayan gamiton imong gihatag nga code. Salamat kau bay.

**Dondon** · 06-18-2008, 04:00 PM

If horizontal lang ang pag center kay pde nimo isulod sa <div> dayon add margin: 0 auto; nalang.

**harvz86** · 06-18-2008, 05:00 PM

Originally Posted by Dondon2d

If horizontal lang ang pag center kay pde nimo isulod sa <div> dayon add margin: 0 auto; nalang.

kani, effective sad kaayo pag pa center, i've also tried this one

**GOSPELofROCH** · 06-18-2008, 09:36 PM

kanang pwede mo hirit ug pangutana? hehehehe

gi unsa na ang kanang pix ang gigamit pic sa background sa table?

gi try nko putol2x (murag puzzle style) nya gibutang sa tables dli man masumpay ug dli ma porma hehehe
unsa gigamit ana <div> or <table>? hehe

**flashfreak** · 06-18-2008, 10:54 PM

@GOSPELofROCH: unsa imong pasabot sa "pix ang gigamit pic sa background sa table?"?? libog ko

anyway, if your having problems with slicing up images on tables... just make sure your table dimensions is the same with your sliced images.

for example if you have 3 images with 100px x 200px each, the table should be written as:

HTML Code:

<table width="300" height="200" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100" height="200" align="center" valign="middle" background="[YOUR_IMAGE_1.jpg]">
      TEXT HERE
    </td>
    <td  width="100" height="200"align="center" valign="middle" background="[YOUR_IMAGE_2.jpg]">
      TEXT THERE
    </td>
    <td width="100" height="200" align="center" valign="middle" background="[YOUR_IMAGE_3.jpg]">
      ANOTHER TEXT HERE
    </td>
  </tr>
</table>

**GOSPELofROCH** · 06-19-2008, 09:32 AM

@flashfreak

tnx bro now i get it, kalimot ko naa man d ay attributes ang tables nga background wahahaha ako gibuhat kay <td><img src="blahblah.jpg"></td> mao d ay sayup. hehehe tnx kau bro.

**flashfreak** · 06-19-2008, 10:05 AM

way blema bai ^_____^ glad i could help.

**Dondon** · 06-19-2008, 10:48 AM

Mura deprecated naman na background nga attrib tingali.

Thread: calling mga master website designers

Thread Tools

Search Thread