fix header

polaris_girlz · Post time 12-4-2008 06:02 PM

saya nak wat header tu web site saya..
tp masalah nyer...dia xmo fix betul2...
kat pc pola ok jer...tp kat pc org lain cam cacat lak....
so maknya dia ikut resolution monitor screen kita lah kan....

Then pola test kat sini http://www.anybrowser.com/ScreenSizeTest.html

kalo kat 1024 x 768 cun

kalo kat 800 x 600, ok la...
tp kat 640 x 480 & 544x 384..Hancuurrrr

adoii...skang ni nak guna coding camne ek..nak kasi dia FIX betul2 tanpa
mengira resolution monitor screen org tu....

info :

pola guna phpbb...
so header ni nak kena edit kat overall_header.html la....kan..
tp nak edit tang mana lak tu

[ Last edited by trunks at 16-4-2008 03:27 PM ]

0001 · Post time 12-4-2008 08:06 PM

Apa maksud u cacat tu? Leh tepek sceenshot ke?

Also sekarang ni sesangat sket orang yg guna screen res yg kecik dari 800x600... aku personally design for screens 800x600 and above jer.

polaris_girlz · Post time 12-4-2008 08:18 PM

kalo header kat blog ok jek.....
tp tuk phpbb ni..alahaiii xpahm la...

ni lak 1280 x 1024 (dia kuar jadi separuh)

ni lak coding kat overall_header.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" dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}" xml:lang="{S_USER_LANG}">
<head>

<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-language" content="{S_USER_LANG}" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="copyright" content="2002-2006 phpBB Group" />
<meta name="keywords" content="" />
<meta name="description" content="" />
{META}
<title>{SITENAME} • {L_MCP} • {L_UCP} • {PAGE_TITLE}</title>

<link rel="stylesheet" href="{T_STYLESHEET_LINK}" type="text/css" />

<script type="text/javascript">
// <![CDATA[

if ({S_NEW_PM})
{
popup('{UA_POPUP_PM}', 400, 225, '_phpbbprivmsg');
}


function popup(url, width, height, name)
   {
   if (!name)
   {
      name = '_popup';
   }

   window.open(url.replace(/&/g, '&'), name, 'height=' + height + ',resizable=yes,scrollbars=yes,width=' + width);
      return false;
   }

function jumpto()
{
var page = prompt('{LA_JUMP_PAGE}:', '{ON_PAGE}');
var perpage = '{PER_PAGE}';
var base_url = '{A_BASE_URL}';

if (page !== null && !isNaN(page) && page > 0)
{
document.location.href = base_url.replace(/&/g, '&') + '&start=' + ((page - 1) * perpage);
}
}

/**
* Find a member
*/
function find_username()
   {
   popup(url, 760, 570, '_usersearch');
      return false;
   }

/**
* Mark/unmark checklist
* id = ID of parent container, name = name prefix, state = state [true/false]
*/
function marklist(id, name, state)
{
var parent = document.getElementById(id);
if (!parent)
{
eval('parent = document.' + id);
}

if (!parent)
{
return;
}

var rb = parent.getElementsByTagName('input');

for (var r = 0; r < rb.length; r++)
{
if (rb[r].name.substr(0, name.length) == name)
{
rb[r].checked = state;
}
}
}



/**
* Play quicktime file by determining it's width/height
* from the displayed rectangle area
*
* Only defined if there is a file block present.
*/
function play_qt_file(obj)
{
var rectangle = obj.GetRectangle();

if (rectangle)
{
rectangle = rectangle.split(',')
var x1 = parseInt(rectangle[0]);
var x2 = parseInt(rectangle[2]);
var y1 = parseInt(rectangle[1]);
var y2 = parseInt(rectangle[3]);

var width = (x1 < 0) ? (x1 * -1) + x2 : x2 - x1;
var height = (y1 < 0) ? (y1 * -1) + y2 : y2 - y1;
}
else
{
var width = 200;
var height = 0;
}

obj.width = width;
obj.height = height + 16;

obj.SetControllerVisible(true);

obj.Play();
}


// ]]>
</script>
<script type="text/javascript" src="{U_SHOUT_STATIC}"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/editor.js"></script>
<script type="text/javascript" src="{U_SHOUT}"></script>
</head>
<body class="{S_CONTENT_DIRECTION}">

<a name="top"></a>

<div id="wrapheader">

<div id="logodesc">
<table width="100%" cellspacing="0">
<tr>

</tr>
</table>
</div>

<div id="menubar">
<table width="100%" cellspacing="0">
<tr>
<td class="genmed">
<a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a> 
  <a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a>
  <span style="color: red;">{L_BOARD_DISABLED}</span>


  <a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}, {PRIVATE_MESSAGE_INFO_UNREAD}</a>
  <a href="{U_REGISTER}">{L_REGISTER}</a>


</td>
<td class="genmed" align="{S_CONTENT_FLOW_END}">
<a href="{U_FAQ}">{L_FAQ}</a>
   <a href="{U_SEARCH}">{L_SEARCH}</a>

   <a href="{U_MEMBERLIST}">{L_MEMBERLIST}</a>
   <a href="{U_PROFILE}">{L_PROFILE}</a>

</td>
</tr>
</table>
</div>

<div id="datebar">
<table width="100%" cellspacing="0">
<tr>
<td class="gensmall">{LAST_VISIT_DATE}</td>
<td class="gensmall" align="{S_CONTENT_FLOW_END}">{CURRENT_TIME}<br /></td>
</tr>
</table>
</div>

</div>

<div id="wrapcentre">


<p class="searchbar">
<span style="float: {S_CONTENT_FLOW_BEGIN};"><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a> | <a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a></span>

<span style="float: {S_CONTENT_FLOW_END};"><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a> | <a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></span>

</p>


<br style="clear: both;" />



<br />

0001 · Post time 12-4-2008 10:00 PM

Kalau ikut codes, memang takleh buat apa2 pasal header image tu... tapi ada workaround utk problem ni...

Ko buat new header banner image tu... tapi kali ni, make sure semua benda2 penting (macam nama site ko) terletak kat belah kiri image tu... bagi ngam2 boleh baca semua tu kalau screen 640 wide.

Pastu biar image tu panjang lebih sket dari 1440... so that tak kira apa size screen dia (melainkan 1600) akan tunjuk semua header image tu.

polaris_girlz · Post time 12-4-2008 10:32 PM

skang ni lebar dia 780..so makna nyer kena wat lebih lebar lagi lah ek
tp kalo buat lagik lebar.....tuk monitor size cam aku...jadi buruk la...

0001 · Post time 12-4-2008 11:08 PM

No... jgn stretch dia... tu akan buat gambar/text tu lebar semacam... buat semula... tapi biar lebar dia maybe 1440 pixels. Make sure semua benda2 penting cam nama forum ko tu kat belah kiri - tak melebihi 640 pixels dari kiri.

polaris_girlz · Post time 12-4-2008 11:52 PM

makna nyer lebar dia wat 1440 pixels...tulisan dia buat belah kiri..
camtu ek?

hmm...apa beza nyer nanti...
kat screen yg besoo nampak cantik lah header tu..
tp kat pc yg screen dia kecik....header tu nampak cam xabis jek....
walaupon tulisan dia nampak full...

xgitu?

0001 · Post time 13-4-2008 10:43 AM

Yup... so tu jadi satu design challenge utk u... bagi belah kiri tu ada semua info and graphic design elements yg penting... and biarkan belah kanan tu sebaik mungkin tapi takkan dilihat oleh ramai viewers sebab diaorang guna screen res 1024 atau less.

polaris_girlz · Post time 13-4-2008 11:10 AM

i..c....cuma tu je jln yg ada ek...

hmm..harap2 dorg xpasan yg itu satu trick

0001 · Post time 13-4-2008 11:19 AM

Semua orang guna 'trick' tu... jgn risau.

polaris_girlz · Post time 13-4-2008 11:56 AM

kat pc pola jadik jek..
tp kat pc member yg 19"...nampak separuh jek....separuh lagi blank..
cam pic kat atas tu

leh tak kasi coding kar css tuk header ni...

dah byk kali sgt tukar codex ni...

ni yg pola guna skang...

}
#logodesc {
background: url(styles/GlossyGreen/theme/images/header_bg14.jpg) no-repeat;
margin-bottom:0px;
height:171px;
background-repeat:repeat-x;
}

Copy the Code

tul ker?

0001 · Post time 13-4-2008 06:03 PM

Code tu betul... and dia tu letakkan header banner image tu as background image kat table tu and takkan repeat/tile.

Header banner image ko tu berapa pixels lebar? Kawan ko nyer 19" guna screen resolution baper? Kalau screen res (width) kawan ko tu lebih dari width banner ko tu, then dia akan nampak kosong kat tepi kanan tu. So in that case, ko kena buat header banner image tu lebar lagi. Aku suggest ko buat 1440 pixels lebar jer... sebab very few people guna screen res lebih dari tu sekarang.

polaris_girlz · Post time 13-4-2008 09:04 PM

dia guna 1280 x 1024

dlm 19" la....

huhuhuhu...besoo bebenor....
code yg atas tu, bkn code yg asal...
yg asal dia repeat...dah byk kali sgt tukar2 code kat css ni....

0001 · Post time 13-4-2008 10:10 PM

Yeah, aku pun guna 1280x1024 kat 19" aku ni... yg lagi satu 1440x900 (wide screen yg dah semakin banyak kat pasaran). Tu aku suggest ko buat 1440 pixels wide header banner tu.

polaris_girlz · Post time 13-4-2008 10:26 PM

i...c....

[ Last edited by polaris_girlz at 14-4-2008 07:59 PM ]

polaris_girlz · Post time 15-4-2008 09:18 PM

alaaaa kasim

.....header ku still cacat lagi la

0001 · Post time 15-4-2008 09:44 PM

Cacat camna header image tu? Kalau ko nak, aku leh try buat satu utk ko besok... maybe tu boleh guna. Post jer apa text yg ko nak dalam header image tu.

artgeex · Post time 15-4-2008 09:49 PM

kelam kabut tu jangan buat dalam bentuk graphic

buat dalam bentuk text biasa

jadi background ko tu, ko ikut cara 0001, tapi buat lebih kurang camni

h1 {background-image: url('images/backgroundko.jpg');width: 100%; padding: 20px 0;}

lepas tu dekat h1 ko tu letak la tajuk website ko contohnya <h1>Nama Website</h1>

dengan cara tu background tu boleh pakai sampai hujung tak sekerat, dan tulisan pun nampak

atau pun cara lain, ko jangan guna flexible width, ko guna yang fixed. tolak ketepi orang yang pakai 640 sebab di jaman sekarang, almost takde orang yang guna 640, even 800 pun. stay pada 1024 ke atas, dan always remember, you cant satisfy everyone

[ Last edited by artgeex at 15-4-2008 09:51 PM ]

polaris_girlz · Post time 16-4-2008 08:46 AM

Originally posted by artgeex at 15-4-2008 09:49 PM
h1 {background-image: url('images/backgroundko.jpg');width: 100%; padding: 20px 0;}

lepas tu dekat h1 ko tu letak la tajuk website ko contohnya <h1>Nama Website</h1>

xleh la....kalo guna coding ni....header langsg xkuar

lagi nampak pelik

cam skang ni sy guna code ni kat css :