I've designed a header in Photoshop, sliced it up in to sections/buttons etc, saved for web and devices, uploaded the pictures (slices) to my server, now where exactly do I enter the HTML?

 

I'm using Wordpress. I've tried putting it in to the header.php section, but it stretches the website and doesen't appear where it should. I've also tried putting it in to the style.css section, but it doesn't appear at all.

 

My website is here if someone wouldn't mind taking a look.

 

EDIT: Title should read; 'Designed header - where to insert the code?'

Edited April 18, 201115 yr by shaneo85

The html should be placed in header.php and then you can use style.css to style it and make it appear in the correct place.

The html should be placed in header.php and then you can use style.css to style it and make it appear in the correct place.

 

Photoshop only seems to provide the HTML.

 

Am I expected to know how to use style.css to style/make appear? Can you tell me if it's a few lines of code or a bit more?

 

Thanks for your help, it's much appreciated.

 

EDIT: Here is the code I've got...

 

 

<table id="Table_01" width="1301" height="251" border="0" cellpadding="0" cellspacing="0">

<tr>

<td colspan="24">

<img src="/wp-content/uploads/2011/04/topblank.gif" width="1300" height="30" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/spacer.gif" width="1" height="30" alt=""></td>

</tr>

<tr>

<td rowspan="6">

<img src="/wp-content/uploads/2011/04/leftblank.gif" width="157" height="220" alt=""></td>

<td colspan="4" rowspan="3">

<a href="http://www.strappedstudent.com">

<img src="/wp-content/uploads/2011/04/logo.gif" width="289" height="157" border="0" alt=""></a></td>

<td colspan="18">

<img src="/wp-content/uploads/2011/04/adsection.gif" width="697" height="115" alt=""></td>

<td rowspan="6">

<img src="/wp-content/uploads/2011/04/Rightblank.gif" width="157" height="220" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/spacer.gif" width="1" height="115" alt=""></td>

</tr>

<tr>

<td colspan="2">

<img src="/wp-content/uploads/2011/04/login.gif" width="55" height="23" alt=""></td>

<td rowspan="2">

<img src="/wp-content/uploads/2011/04/testerheader159_07.gif" width="11" height="42" alt=""></td>

<td colspan="2">

<img src="/wp-content/uploads/2011/04/signup.gif" width="56" height="23" alt=""></td>

<td rowspan="2">

<img src="/wp-content/uploads/2011/04/testerheader159_09.gif" width="12" height="42" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/contact.gif" width="54" height="23" alt=""></td>

<td rowspan="2">

<img src="/wp-content/uploads/2011/04/testerheader159_11.gif" width="10" height="42" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/about.gif" width="56" height="23" alt=""></td>

<td colspan="2" rowspan="2">

<img src="/wp-content/uploads/2011/04/testerheader159_13.gif" width="26" height="42" alt=""></td>

<td colspan="3">

<img src="/wp-content/uploads/2011/04/searchbox.gif" width="165" height="23" alt=""></td>

<td rowspan="2">

<img src="/wp-content/uploads/2011/04/testerheader159_15.gif" width="6" height="42" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/searchbutton.gif" width="58" height="23" alt=""></td>

<td rowspan="2">

<img src="/wp-content/uploads/2011/04/testerheader159_17.gif" width="12" height="42" alt=""></td>

<td rowspan="4">

<img src="/wp-content/uploads/2011/04/signmeup.gif" width="176" height="86" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/spacer.gif" width="1" height="23" alt=""></td>

</tr>

<tr>

<td colspan="2">

<img src="/wp-content/uploads/2011/04/testerheader159_19.gif" width="55" height="19" alt=""></td>

<td colspan="2">

<img src="/wp-content/uploads/2011/04/testerheader159_20.gif" width="56" height="19" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/testerheader159_21.gif" width="54" height="19" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/testerheader159_22.gif" width="56" height="19" alt=""></td>

<td colspan="3">

<img src="/wp-content/uploads/2011/04/testerheader159_23.gif" width="165" height="19" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/testerheader159_24.gif" width="58" height="19" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/spacer.gif" width="1" height="19" alt=""></td>

</tr>

<tr>

<td>

<img src="/wp-content/uploads/2011/04/home.gif" width="79" height="30" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/offers.gif" width="79" height="30" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/money.gif" width="88" height="30" alt=""></td>

<td colspan="2">

<img src="/wp-content/uploads/2011/04//news.gif" width="77" height="30" alt=""></td>

<td colspan="3">

<img src="/wp-content/uploads/2011/04/jobs.gif" width="71" height="30" alt=""></td>

<td colspan="3">

<img src="/wp-content/uploads/2011/04/advice.gif" width="83" height="30" alt=""></td>

<td colspan="3">

<img src="/wp-content/uploads/2011/04/games.gif" width="84" height="30" alt=""></td>

<td colspan="2">

<img src="/wp-content/uploads/2011/04/pics.gif" width="68" height="30" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/video.gif" width="78" height="30" alt=""></td>

<td colspan="3">

<img src="/wp-content/uploads/2011/04/reviews.gif" width="91" height="30" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/rightmenu.gif" width="12" height="30" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/spacer.gif" width="1" height="30" alt=""></td>

</tr>

<tr>

<td colspan="21" rowspan="2">

<img src="/wp-content/uploads/2011/04/bottomblank.gif" width="810" height="33" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/spacer.gif" width="1" height="14" alt=""></td>

</tr>

<tr>

<td>

<img src="/wp-content/uploads/2011/04/bottomsignmeup.gif" width="176" height="19" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/spacer.gif" width="1" height="19" alt=""></td>

</tr>

<tr>

<td>

<img src="/wp-content/uploads/2011/04/spacer.gif" width="157" height="1" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/spacer.gif" width="79" height="1" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/spacer.gif" width="79" height="1" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/spacer.gif" width="88" height="1" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/spacer.gif" width="43" height="1" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/spacer.gif" width="34" height="1" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/spacer.gif" width="21" height="1" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/spacer.gif" width="11" height="1" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/spacer.gif" width="39" height="1" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/spacer.gif" width="17" height="1" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/spacer.gif" width="12" height="1" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/spacer.gif" width="54" height="1" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/spacer.gif" width="10" height="1" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/spacer.gif" width="56" height="1" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/spacer.gif" width="18" height="1" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/spacer.gif" width="8" height="1" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/spacer.gif" width="60" height="1" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/spacer.gif" width="78" height="1" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/spacer.gif" width="27" height="1" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/spacer.gif" width="6" height="1" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/spacer.gif" width="58" height="1" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/spacer.gif" width="12" height="1" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/spacer.gif" width="176" height="1" alt=""></td>

<td>

<img src="/wp-content/uploads/2011/04/spacer.gif" width="157" height="1" alt=""></td>

<td></td>

</tr>

</table>

Edited April 18, 201115 yr by shaneo85

That is a horrible way to code the header, mainly because it uses so many unnecessary images and will not be flexible across different screen resolutions and browsers.

 

Anyway, Do you have an image of how this is supposed to look?

That is a horrible way to code the header, mainly because it uses so many unnecessary images and will not be flexible across different screen resolutions and browsers.

 

Anyway, Do you have an image of how this is supposed to look?

 

I had a feeling it wasn't a good way of doing it, but after hours on Google, I couldn't seem to find any tutorials.

 

I've updated the site with the header as I want it, if you wouldn't mind taking another look.

 

Thanks

Ok here you go buddy, I've quickly recoded it for you (its not perfect but you can tweak it, but it's a lot better than before)

 

Have a look here: iaintodd.co.uk/testing/shane/

 

Then download these images: iaintodd.co.uk/testing/images/

and this stylesheet: iaintodd.co.uk/testing/shane/style.css

 

and upload the images into the root images folder and style.css into the root folder then replace your html in header.php between

 

<div class="container">
and
<div class="ct_w">

 

with: iaintodd.co.uk/testing/shane/html.txt

 

(Sorry I cannot post links yet and the code contains links so just open the .txt and copy the html)

 

 

and obviously you will need to change the links to point to the correct pages etc

Ok here you go buddy, I've quickly recoded it for you (its not perfect but you can tweak it, but it's a lot better than before)

 

Have a look here: iaintodd.co.uk/testing/shane/

 

Then download these images: iaintodd.co.uk/testing/images/

and this stylesheet: iaintodd.co.uk/testing/shane/style.css

 

and upload the images into the root images folder and style.css into the root folder then replace your html in header.php between

 

<div class="container">
and
<div class="ct_w">

 

with: iaintodd.co.uk/testing/shane/html.txt

 

(Sorry I cannot post links yet and the code contains links so just open the .txt and copy the html)

 

 

and obviously you will need to change the links to point to the correct pages etc

 

Thats very kind of you, thank you very much.

 

I'll let you know how I get on...

Sorry posted the wrong link for the images: iaintodd.co.uk/testing/shane/images/

Ok here you go buddy, I've quickly recoded it for you (its not perfect but you can tweak it, but it's a lot better than before)

 

Have a look here: iaintodd.co.uk/testing/shane/

 

Then download these images: iaintodd.co.uk/testing/images/

and this stylesheet: iaintodd.co.uk/testing/shane/style.css

 

and upload the images into the root images folder and style.css into the root folder then replace your html in header.php between

 

<div class="container">
and
<div class="ct_w">

 

with: iaintodd.co.uk/testing/shane/html.txt

 

(Sorry I cannot post links yet and the code contains links so just open the .txt and copy the html)

 

 

and obviously you will need to change the links to point to the correct pages etc

 

Sorry to be a pain but I've had a few goes at it, but I can't seem to get it to work.

 

I've uploaded the images and changed the links in the code to make them show.

 

I've copy and pasted the style.css in to my current style.css

 

I've added the HTML in to the Header.php section, but the two bits you mentioned above, to place the HTML between, were not there in the header.php section.

 

Anyway it came out all over the place, there were 2 logos and 2 menus. I'm sure it's something I've done rather than your instructions. Can you spot the error from what I've mentioned?

 

EDIT: I messed up my style sheet there and updated the original by mistake, so a lot of stuff has gone back to the original theme

 

Not sure if your able to make out what I'm doing wrong...

Edited April 18, 201115 yr by shaneo85

Sure I'll take a look.

 

Ok you inserted the code in the wrong place, so inbetween these two lines of code (they may be in header.php or not as I cannot see what header.php contains)

 

<link rel="pingback" href="(HTTP CANT POST LINK)strappedstudent.com/xmlrpc.php" />

<div id="top1">

 

Paste these lines of code

 

</head> 
<body class="home blog"> 
<div class="container"> 

 

 

Also after this these two lines of code

<div id="top2">
</div>

delete everything from </head> until this line

</div><div class="ct_w">

and then replace this line ^^

with just

<div class="ct_w">

(ie. delete </div> from it)

 

EDIT: Also, delete the css from style.css and add it again, its become all jumbled in your .css file

Edited April 18, 201115 yr by itodd

Sure I'll take a look.

 

Ok you inserted the code in the wrong place, so inbetween these two lines of code (they may be in header.php or not as I cannot see what header.php contains)

 

<link rel="pingback" href="(HTTP CANT POST LINK)strappedstudent.com/xmlrpc.php" />

<div id="top1">

 

Paste these lines of code

 

HEADER.PHP

</head> 
<body class="home blog"> 
<div class="container"> 

 

 

Also after this these two lines of code

<div id="top2">
</div>

delete everything from </head> until this line

</div><div class="ct_w">

and then replace this line ^^

with just

<div class="ct_w">

(ie. delete </div> from it)

 

EDIT: Also, delete the css from style.css and add it again, its become all jumbled in your .css file

 

I'm afraid I can't spot where in the Header.php you want me to put the code, so I've copied and pasted the header.php section below, if you wouldn't mind pointing out exactly where I need to put the code.

 

Thanks again.

 

<!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" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">

<title>

<?php

if ( is_single() ) { single_post_title(); print ' - '; bloginfo('name'); }

elseif ( is_home() || is_front_page() ) { bloginfo('name'); print ' - '; bloginfo('description'); }

elseif ( is_page() ) { single_post_title(''); }

elseif ( is_search() ) { bloginfo('name'); print ' - Search results: ' . wp_specialchars($s); }

elseif ( is_404() ) { bloginfo('name'); print ' - Not Found'; }

else { bloginfo('name'); wp_title('-'); }

?>

</title>

<meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />

<link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/img/favicon.ico" type="image/x-icon" />

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

 

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.4.2.min.js"></script>

 

<?php wp_head(); ?>

<?php if(get_option("theme_rss_url") != "") { $rss_url = get_option("theme_rss_url"); } else {$rss_url = get_bloginfo('rss2_url');} ?>

 

<link rel="alternate" type="application/rss+xml" href="<?php echo $rss_url; ?>" title="<?php printf( __( '%s latest posts', 'get_bloginfo("name")' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" />

<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('comments_rss2_url') ?>" title="<?php printf( __( '%s latest comments', 'get_bloginfo("name")' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" />

 

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php if(is_single()) { ?>

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/scripts.js"></script>

<?php } ?>

 

 

</head>

header.php looks fine, leave it as it is, can you copy and paste the file which contains the website header html?

 

in your style.css file replace:

.hd_w {
background-color:#211f1f;
background-image:url() !important;
height:286px;
margin:0;
}

.hd {
background:url() no-repeat top left;
height:186px;
margin:0 auto;
padding:0;
}

 

with

 

.hd_w {
background-color:#211f1f;
height:186px;
margin:0;
}

.hd {
background:url(/wp-content/uploads/2011/04/logo.png) no-repeat top left #211f1f;
height:186px;
margin:0 auto;
padding:0;
width:1000px;
}

 

also in style.css replace

ul#main-nav {font-family:"Trebuchet MS";font-size:18px;font-weight:bold;margin:0;padding:0;

float:left;width:100%;text-shadow:#000 -1px -1px 1px;}ul#main-nav li {margin:0;padding:0;list-

style:none;float:left;margin:0 0 0 0;}ul#main-nav li a {text-decoration:none;display:block;p

adding:6px 12px;border-top:1px solid #444;border-right:1px solid #444;color:#fff;}ul#main-nav li a:hover {border-top:1px solid #555;border-right:1px solid #555;color:#fff;text-shadow:#333 -1px -1px 1px;}

 

with

 

ul#main-nav {font-family:"Trebuchet MS";font-size:18px;font-weight:bold;margin:0;padding:0;float:left;width:100%;text-shadow:#000 -1px -1px 1px;}
ul#main-nav li {margin:0;padding:0;list-style:none;float:left;margin:0 0 0 0;}
ul#main-nav li a {text-decoration:none;display:block;padding:6px 12px;border-top:1px solid #444;border-right:1px solid #444;color:#fff;}
ul#main-nav li a:hover {border-top:1px solid #555;border-right:1px solid #555;color:#fff;text-shadow:#333 -1px -1px 1px;}

Edited April 19, 201115 yr by itodd

I can't seem to locate the header HTML. I've sent you a PM with my login details if you want to take a look yourself, mate.

 

Cheers

Ok I've done it for you! The file you need to update is top.php. Message me if you need any further help

Ok I've done it for you! The file you need to update is top.php. Message me if you need any further help

 

Absolute legend thank you very much!

 

I think the style.css may need a slight tweeking. Since you've updated it, all the pictures have a blue border around them, and I think some of the text font/weight/size has changed (not for the articles, but if you look on the right sidebar at the bottom under categories, it seems to be larger than before).

 

I've got a million other things I need help with, but I wouldn't dream of taking up anymore of your time. If there's anything I can do in return, please don't hesitate to ask.

Thanks for sorting the problem with the blue borders, the pics look perfect now.

 

There's still one or two problems with what I assume is the style.css...

 

The top two categories, student news and student life, they should be paralell with the advert on the right (height wise I mean).

 

Theres also too big of a gap between the first story in student life and the second story. I think this may be effecting the above.

 

Also the read more tag doesn't seem to be working.

 

I've included a screenshot to better explain what I mean...

Edited April 19, 201115 yr by shaneo85

I've fixed those little problems, and for the overflow I suggest using the post excerpt feature and displaying that on the homepage. Or removing the height and overflow hidden css styles

Edited April 19, 201115 yr by itodd