Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Styling the header


mediad

Recommended Posts

Hi, I am new to the world of oscommerce. I have started to design my shop but need some help regarding the header. The following is what I have managed to write using the grid system.

 

<code><div id="header" class="grid_24">

                <div class="cl_both">

            <a class="grid_4 logo fl_left" href="<?php echo tep_href_link(FILENAME_DEFAULT);?>"><?php echo tep_image(DIR_WS_IMAGES.'store_logo.png', STORE_NAME, '', '', '')?></a>

                                                <div class="navigation_block">

                                                <div class="grid_13 searchbg">

                                                                                <?php echo tep_draw_form('quick_find', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', $request_type, false), 'get') ,

tep_draw_input_field('keywords', '', 'value="Type Here..." onFocus="javascript:this.value=\'\'" size="39" maxlength="30" style="width: ' . (BOX_WIDTH-90) . 'px; background: #ffffff; color: #000000;font: Arial; font-size:13;" ') . ' ' . tep_hide_session_id() . tep_draw_hidden_field('search_in_description' , '1') . tep_image_submit('button_quick_find.gif', BOX_HEADING_SEARCH, 'align="middle"') . '</form>';?></div>

 

                                                <div class="grid_5 telnom omega fl_right">

                                                                                <?php if ($cart->count_contents() > 0) { echo '<a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '">' . tep_image(DIR_WS_IMAGES . 'cart_full.gif', HEADER_TITLE_CART_CONTENTS) . '</a>' ; }

 

  else {

    echo '<a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '">' . tep_image(DIR_WS_IMAGES . 'cart.gif', HEADER_TITLE_CART_CONTENTS) . '</a>';

  }

?>

<font face="Arial" size="3"><?php

  echo $cart->count_contents() ;

 

  if ($cart->count_contents() > 0) {

    echo ' ' . $currencies->format($cart->show_total());

  }

?></font></div></div></div>

 </code>

 

The problem I have is that I would like to add some style to the searchbox and also the cart images need to be aligned to the bottom as I have added a background image for the shopping cart box.

 

If somebody could please help.

Link to comment
Share on other sites

multimixer, thanks for your response. The grid 4 is shown as "a class", and closed off with </a> would i still require a </div> at the end?

 

<a class="grid_4 logo fl_left" href="<?php echo tep_href_link(FILENAME_DEFAULT);?>"><?php echo tep_image(DIR_WS_IMAGES.'store_logo.png', STORE_NAME, '', '', '')?></a>

 

Also from the code I have, the divs are all closed at the end, is it better to not have this all at the end. Thanks for your help btw, want to make sure I have it written correctly so appreciate your help.

 

Thanks for these pointers, also when i change grid_13 to grid_14 and grid_5 to grid_6, this then moves it into another line? As 4+ 6 + 14 comes up to 24, so must be going wrong somewhere...

Link to comment
Share on other sites

You can't apply grid_xy to an <a>

You need to make sure that each div is opening and closing in the correct order, the last opened need to close first etc

 

Some useful links: learn html the 960 grid system

Link to comment
Share on other sites

multimixer, I have managed to design my header using alot of help from the links you provided as well as the following links:

 

http://grid.mindplay.dk/#[[0,0,0,0,0,0,0],['Verdana','','','','','',''],[0,0,0,0,0,0,0],[0,0,0,0,0,0,0],[1,2,2,2,2,2,2],[10,16,16,16,16,16,16],[0,0,0,0,0,0,0],[0,0,0,0,0,0,0],[2,10,16,0,196],{},[0,1]]

 

The code I have managed to write is the following and this seems to sit better, just need to use the same concept to add this into the header file.

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css/default.css" />
<link rel="stylesheet" href="css/1200.css" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/text.css" />

<title>Test Page</title>
</head>
<body>
<div id="container" class="container_24">
<div id="header" class="grid_24">
<div id="logo" class="grid_6 alpha"><a href="#"><img src="images/store_logo.png" border="0"></a></div>
<div id="search" class="grid_12">Search Bar</div>
<div id="shoppingbasket" class="grid_6 omega">
<div class="grid">My Shopping Basket</div>
<div class="grid2">
<div class="grid-c1">Item</div>
<div class="grid-c2">Qty</div>
<br style="clear:both" />
</div>
<div class="grid3">
<div class="grid-m1"></div>
<div class="grid-c1">£9.99</div>
<div class="grid-c2">10</div>
<br style="clear:both" />
</div>
</div>
</div>
</body>
</html>

 

Thanks for your help, really appreciate. Once again thanks.

Link to comment
Share on other sites

Apologies, This is what I have managed to write so far within the header file.

 

if ($messageStack->size('header') > 0) {
   echo '<div class="grid_24">' . $messageStack->output('header') . '</div>';
 }

?>
<div id="container" class="container_24">
<div id="header" class="grid_24">
 <div id="logo" class="grid_6 alpha"><a href="<?php echo tep_href_link(FILENAME_DEFAULT);?>"><?php echo tep_image(DIR_WS_IMAGES.'store_logo.png', STORE_NAME, '', '', '')?></a></div>
 <div id="search" class="grid_12"><?php echo tep_draw_form('quick_find', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', $request_type, false), 'get') ,
tep_draw_input_field('keywords', '', 'value="Type Here..." onFocus="javascript:this.value=\'\'" size="39" maxlength="30" style="width: ' . (BOX_WIDTH-90) . 'px; background: #ffffff; color: #000000;font: Arial; font-size:13;" ') . ' ' . tep_hide_session_id() . tep_draw_hidden_field('search_in_description' , '1') . tep_image_submit('button_quick_find.gif', BOX_HEADING_SEARCH, 'align="middle"') . '</form>';?></div>
 <div id="shoppingbasket" class="grid_6 omega">
<div class="grid">My Shopping Basket</div>
<div class="grid2">
   <div class="grid-c1">Item</div>
   <div class="grid-c2">Qty</div>
  <br style="clear:both" />
</div>
<div class="grid3">
   <div class="grid-m1"></div>
   <div class="grid-c1"><?php echo $cart->count_contents() ;?></div>
   <div class="grid-c2"><?php if ($cart->count_contents() > 0) { echo $currencies->format($cart->show_total());
 }
?></div>
  <br style="clear:both" />
</div>
</div>
</div>

Link to comment
Share on other sites

ok, i thought I had cracked it, but im stuck again! i have managed to rewrite my divs (as shown above) and I have added my search bar and shopping basket but i am stuck on trying to align my search box as it is covering a background image that i have and also when trying to increase the height of the search box, nothing happens so back to my original question.

 

How can i add some alignment/padding to move my search box slightly to the right and also increase my search box's height?

 

The following is the code for the searchbox:

 

<div id="searchbg" class="grid_12"><?php echo tep_draw_form('quick_find', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', $request_type, false), 'get') ,
tep_draw_input_field('keywords', '', 'value="Type Here..." onFocus="javascript:this.value=\'\'" size="50" maxlength="30" style="width: ' . (BOX_WIDTH-120) . 'px; "height: ' . [b](BOX_HEIGHT-200) [/b]. 'px; color: #000000; font: Arial; font-size:15;" ') . ' ' . tep_hide_session_id() . tep_draw_hidden_field('search_in_description' , '1') . tep_image_submit('button_quick_find.gif', BOX_HEADING_SEARCH, 'align="middle"') . '</form>';?></div>

 

my style for searchbg:

 

#searchbg {
background-image: url("images/search.gif");
background-position: 0px 12px;
background-repeat:no-repeat;
padding-top: 47px;
}

 

If somebody could please help. Thnx in advance

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...