• Locked
4 replies [Last post]
Sat, 2014-06-07 18:54
wmike_1503
wmike_1503's picture
Offline
newbie
Last seen: 8 years 34 weeks ago
Timezone: GMT+1
Joined: 2014-05-29
Posts: 2
Points: 3

Hi all,

My sitesite has a header with a line to the right of it.

I can see no code in my CSS file to make changes.

Can anyone suggest the code I need to make changes to the code. Basically, I want to recreate a similar style for of 'H tags' - I also can't work out how to center the background image vertically inline with the tag.

Many thanks,

Mike

Top
Tags:
Sun, 2014-06-08 06:06
#1
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 48 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Looks centered to me

The target css seems to be 

.symple-heading {
  background: url("images/heading-bg.png") repeat-x scroll center center rgba(0, 0, 0, 0);
  clear: left;
  font-size: 1em;
  font-weight: 900;
  margin: 30px 0;
  text-align: center;
  }
 
.symple-heading.text-align-left span {
  padding-left: 0 !important;
  }
 
.symple-heading span {
  background: none repeat scroll 0 0 #FFFFFF;
  padding: 0 40px;
  }

Frankly, this page does not look like the work of a professional web developer.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
Sun, 2014-06-08 08:07
#2
wmike_1503
wmike_1503's picture
Offline
newbie
Last seen: 8 years 34 weeks ago
Timezone: GMT+1
Joined: 2014-05-29
Posts: 2
Points: 3

Thanks

Hi Gary,

Thanks for the comments - my problem is getting the code to work with my current 'H' tags font-sizes.

A little surprised at your 'does not look like the work of a professional web developer' - this is a site based on a Wordpress theme, produced by a Wordpress developer.

Thanks anyway.

Mike

Top
Sun, 2014-06-08 16:00
#3
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 48 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Show me

an example of the heading element you want your bg image to work with.

Regarding WP themes and plugins: Very few are written by knowledgeable html/css developers. Most are written by "web designers" with little understanding of document structure or the presentation cascade.

It is my belief that WP dropped their original strict structuring in order to make entry easier, which has resulted in a serious lowering of code quality. Unless you're satisfied with out-of-the-box themes, etc., maintenance, including modifications are expensive. How much time have you needlessly spent on this? Do you work cheap?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
Sun, 2014-06-08 16:44
#4
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 48 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Follow-up

Here are sane markup and css.

<!DOCTYPE HTML>
 
<html>
<head>
  <meta content="text/html; charset=utf-8"
        http-equiv="Content-Type">
 
  <title>Test page</title>
  <style type="text/css">
/*<![CDATA[*/
 
  body {
    font: normal 100%/1.25% sans-serif;
    }
 
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    background: white url(images/hblackline.gif) repeat-x center;
    line-height: 125%;
    }
 
  h1 span,
  h2 span,
  h3 span,
  h4 span,
  h5 span,
  h6 span {
    background-color: white;
    padding-right: 1em;
    }
 
 
  /*]]>*/
  </style>
</head>
 
<body>
  <h1><span>h1 heading</span></h1>
 
  <h2><span>h2 heading</span></h2>
 
  <h3><span>h3 heading</span></h3>
 
  <h4><span>h4 heading</span></h4>
 
  <h5><span>h5 heading</span></h5>
 
  <h6><span>h6 heading</span></h6>
</body>
</html>

cheers,

gary

AttachmentSize
hblackline.gif 91 bytes

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
  • Locked