Messed up CSS Help!

  • Resolved pauldickinson

    (@pauldickinson)


    15 years, 7 months ago

    I recently changed my theme around so that on the post pages, the blog title wasn’t a H1 tag, but the post title was a H1 tag. I changed the blog title on the post page to a <span> using the php code below. That part all works fine. The problem I’m having is making the <span> look like the blog title does on the homepage. It’s nearly there, but it seems that there is no padding at the top, which there should be. What I did was to copy the CSS attributes of the H1 header tag, to the <span> tag in the CSS, as far as I know that should have worked. But it seems that the padding is being ignored!

    Can anyone see whats going wrong here??

    My header code:

    <!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 wp_title(''); ?><?php if ( ! is_home() ) { ?> | <?php } ?><?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/print.css" type="text/css" media="print" />
<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 wp_head(); ?>
</head>
<body>
<div id="head">
	<div class="innerhead">
		<div class="inner">
			<?php if(is_home()) : ?>
			<h1><a>"><?php bloginfo('name'); ?></a></h1>
			<?php else : ?>
			<span class="blogTitle">
		        <a>"><?php bloginfo('name'); ?></a>
    			</span>
			<?php endif; ?>

			<p class="description"><?php bloginfo('description'); ?></p>

		</div>
	</div>
</div>
<div id="pagine">
	<div class="innerhead">
		<div class="inner">

<ul>
<li><a>/" title="<?php bloginfo('name'); ?>">Home</a></li>
				<?php wp_list_pages('title_li=&amp;depth=1'); ?>
			</ul>
		</div>
	</div>
</div>
<div id="page">
	<div id="body">
		<div id="content">
			<div class="inner">

    My CSS code 

    /* ----- Reset ----- */

html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,
acronym,address,big,cite,code,del,dfn,em,
font,img,ins,kbd,q,s,samp,small,strike,
strong,sub,sup,tt,var,b,u,i,center,dl,dt,
dd,ol,ul,li,fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td	{ background:transparent; border:0; font-size:100%; margin:0; outline:0; padding:0; vertical-align:baseline; }
body						{ line-height:1; }
ol,ul						{ list-style:none; }
blockquote,q					{ quotes:none; }
del						{ text-decoration:line-through; }
table						{ border-collapse:collapse; border-spacing:0; }
code						{ font-family:'courier new',courier,monospace; }
body						{ background:#fff; color:#333; font:80%/150% arial,tahoma,verdana,sans-serif; }
.print 						{ display:none; }

/* ----- Blocks ----- */

#page						{ width:960px; margin:10px auto 80px auto; background:#fff; }
#head						{ height:100px; border-bottom:1px solid #333; background:#069 url(images/back-body.jpg) repeat-x left top; }
#body						{ overflow:hidden; height:1%; }
#content					{ width:60%; float:left; }
#sidebar					{ float:left; width:40%; font-size:0.93em; margin-top:42px; }
#footer						{ text-align:right; font-size:0.9em; clear:both; padding:20px  0 5px 0; background:#333 url(images/bottom.jpg) repeat-x left top; border-bottom:1px solid #333; }
div.inner					{ padding:10px; }
div.innerhead					{ margin:0 auto 0 auto; width:960px; }
div.innerbox 					{ float:left; width:46%; }
div.innerbox-right 				{ float:right; width:46%; }
span.blogTitle { font:2.7em/100% "trebuchet ms",arial,tahoma,verdana,sans-serif; color:#fff; letter-spacing:-2px; font-variant:small-caps; margin-top:10px; }
span.blogTitle a { text-decoration:none; color:#fff; }
span.blogTitle a:hover { color:#fff; }

/* ----- Header ----- */

#head h1					{ font:2.7em/100% "trebuchet ms",arial,tahoma,verdana,sans-serif; color:#fff; letter-spacing:-2px; font-variant:small-caps; margin-top:10px; }
#head h1 a					{ text-decoration:none; color:#fff; }
#head h1 a:hover				{ color:#fff; }
#head p.description				{ color:#86ACDB; letter-spacing:2px; font-size:0.93em; text-transform:uppercase; }

    Any help would be appreciated! Thanks.

Viewing 3 replies - 1 through 3 (of 3 total)

  • provide a url.

    I don’t have much experience with the span tag, but perhaps there are some issues with it and it’s padding.
    It might be an easier way to just keep the blogtitle a h1 tag with a h1 class listed to it.
    Since if the code works for the h1 tag for your post titles. it should surely work for the blog title aswel.

    So that would mean make it a
    <h1 class=”blogtitle”> </h1>
    tag or something similair

    and just copy paste the css to the class
    h1.blogtitle{ }

    if that doesn’t work either, eventhough they’re both h1 tags, then there might be some issue with inheriting padding or margin from another id or class.

    Thread Starter pauldickinson

    (@pauldickinson)

    Solved it! Brilliant! Thank you very much!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Messed up CSS Help!’ is closed to new replies.