Absolute Postitioned Image in header

  • Resolved tkthebadomen

    (@tkthebadomen)


    16 years ago

    I’ve been looking around at the different help topics but haven’t found anything quite like my problem.

    I have my header as an image already, that’s not the problem. The problem is, I would like to add another element to things. I have a letter as a .png file I would like to place somewhere on the page. Absolute positioning is required, I know that. But I can’t figure out how or where to put in the code that will work. Currently in my header.php I have this:

    <!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 if ( is_home() ) { ?><?php bloginfo('description'); ?> | <?php bloginfo('name'); ?><?php } ?>
		<?php if ( is_search() ) { ?><?php echo $s; ?> | <?php bloginfo('name'); ?><?php } ?>
		<?php if ( is_single() ) { ?><?php wp_title(''); ?> | <?php bloginfo('name'); ?><?php } ?>
		<?php if ( is_page() ) { ?><?php wp_title(''); ?> | <?php bloginfo('name'); ?><?php } ?>
		<?php if ( is_category() ) { ?><?php _e('Archive', 'elegant-grunge') ?> <?php single_cat_title(); ?> | <?php bloginfo('name'); ?><?php } ?>
		<?php if ( is_month() ) { ?><?php _e('Archive', 'elegant-grunge') ?> <?php the_time('F'); ?> | <?php bloginfo('name'); ?><?php } ?>
		<?php if ( is_tag() ) { ?><?php single_tag_title();?> | <?php bloginfo('name'); ?><?php } ?>
</title>

<?php elegant_grunge_the_favicon() ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<?php if ( get_option('header_image') ) : ?>
<style type="text/css">
#header div {
	background: url(<?php echo get_option('header_image') ?>) no-repeat center top;
	width: 100%;
	height: 100%;
	display: block;
}
#title {
 position:absolute;
 top:240;
 left:500;
}

#header * {
	display: none;
}
</style>
<?php endif; ?>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/ie.css" />
<style type="text/css">
#footer #subscribe a {
	background:none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='<?php bloginfo('template_url')?>/images/rss.png');
}
<?php if ( get_option('header_image') ) : ?>
#header div {
	background: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='<?php echo get_option('header_image')?>');
}
<?php endif; ?>
</style>
<![endif]-->

<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'); ?>" />

<?php echo get_option("extra_header") ?>

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

<?php wp_head(); ?>

</head>

<?php
if ( !defined('EG_BODY_CLASS') && get_option('page_setup') != 'right-sidebar' )
	define('EG_BODY_CLASS', get_option('page_setup'));
?>

<body <?php if ( defined('EG_BODY_CLASS') ) echo 'class="'.EG_BODY_CLASS.'"'; ?>>

<div id="page">

<div id="title">
<img src="https://summerrona.com/wp-content/themes/elegant-grunge/images/s.png"/>
</div>

<div id="menu">
	<ul>
		<li class="page_item <?php if ( is_home() ) { ?>current_page_item<?php } ?>"><a href="<?php bloginfo('url'); ?>"><?php _e('Home', 'elegant-grunge') ?></a></li>
		<?php wp_list_pages('title_li=&depth=1&exclude=35'); ?>
	</ul>
	<div class="clear"></div>
</div>

<div id="header-wrap">
<div id="header">

	<div>
                <h1><a href="<?php bloginfo('home') ?>"><?php bloginfo('name'); ?></a></h1>
		<span id="blog-description"><?php bloginfo('description'); ?></span>
	</div>

</div>
</div>

<!-- end header -->

    I’m currently trying to absolute the div container, because I don’t know of any other way to do it. Some help would be greatly appreciated.

  • The topic ‘Absolute Postitioned Image in header’ is closed to new replies.