Links in Header

  • I need some help finishing up my site with coding and hoping someone can help me,I am a newbie and am trying my best but not quite getting there.
    My site is https://www.seaofsavings.com and as you can see I have icons for facebook/RSS/twitter on my site. Can anyone tell me what coding I need to make my header with the buttons work? Also as you can see for some reason my side bar has gone off center once I inserted my header. Any idea why? Here is the coding I have in the editor below.

    Any help would be SOOOO Appreciated! 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head profile="https://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> ? Blog Archive <?php } ?> <?php wp_title(); ?></title>

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<!--[if IE]>
<link rel="stylesheet" href="<?=bloginfo('template_url')?>/style-ie.css" type="text/css" media="screen" />
<script type="text/javascript">
	var png_blank = "<?=bloginfo('template_url')?>/images/transparent.gif";
</script>
<![endif]-->

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

	<!-- Main Menu -->	

<script type="text/javascript">
</script>

<?php wp_head(); ?>
</head>

<body>
<div id="page">

<div id="header">
	<div id="logo"><a>/"><?php bloginfo('name'); ?></a><span class="description"><?php bloginfo('description'); ?></span></div>
</div>

<div id="menu">
	<div id="mainmenu">

<ul>
			<li class="first <? if(is_home()) echo 'current_page_item'; ?>"><a>/">Home</a>
			<?php wp_list_pages2('title_li=')?>
		</ul>
	</div>
    <div id="main_search">
        <form method="get" id="searchform_top" action="<?php bloginfo('url'); ?>/">
            <div>
                <input type="text" value="Type your search here..." name="s" id="searchform_top_text" onclick="this.value='';" />
                <input type="image" src="<?php bloginfo('template_url')?>/images/button_go.gif" id="gosearch" />
            </div>
        </form>
        </div>
<img src="https://seaofsavings.com/wp-content/uploads/2010/12/sea-saving-header-Ions.jpg"/>
       </div>
       </div>
<div id="board">
	<div id="board_center">
		<div id="board_items">
			<div id="board_body">
				</div>
			</div>
				</div>
	<div id="board_links">
			</div>
</div>

<div id="body">
<div id="body_top">
<div id="body_end">

	<div id="body_left">
    	<div id="body_left_content">
	<div id="body_left">
    	<div id="body_left_content">
Viewing 3 replies - 1 through 3 (of 3 total)

  • Your Facebook, Twitter and RSS buttons are all part of your header graphic. They have to be removed from here and used as separate individual graphics.

    Your HTML should open the division header (this you have done), the CSS then adds the header graphic as a background to the division. You now need to add your icon graphics (via HTML over the background image). In the HTML you now add your links to the icon graphics.

    Personally I would use three divisions in my CSS to do what you want to do. A header-background division with its width set to the width of your site. This division would hold the header image as a background.

    A header-left division which would be half the width of the header and floated to the left over the header-background division. This division would show the blog name as well as the description.

    A header right division which would be half the width of the header and floated to the right over the header-background division. This division would show the social icons along with their relevant links.

    Let’s make this simple, shall we?

    Sea of Savings banner is slightly bellow the div called <div id=”board”>
    try moving the image inside of that and I am sure that it will center. You can keep this in one piece, since you’re using shapes for the links.

    My wild guess would be <div id=”board_left”>, since I see this above your banner.

    One thing I noticed in your code above is that the theme you are using has some PHP short tags i.e. <?=bloginfo(‘template_url’)?>, please change that to at least <?php bloginfo(‘template_url’)?> Short tags are not the greatest in any PHP coding.

    Emil

    in opera use Ctrl+F for search needing text of link

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Links in Header’ is closed to new replies.