Overlapping H1 div

  • TiesGDesign

    (@tiesgdesign)


    12 years, 7 months ago

    Hi there,

    Let’s start with some little introduction to my case, I’m working on the website of my cousin and I got this little CSS problem:

    I want an image overlap the H1 background bar

    h1 {
    font-size: 24px;
    margin: 20px 10px;
	padding: 6px 20px;
    line-height: 1.2em;
	background: #ea1325;
	border-radius: 100px;
	position:relative;
}

    but when I add the image url it gets cropped in the div, what is kinda logical. Now I have tried to look for answers but none of the two seemed to work, this is what I have tried so far:

    – negative margin

    h1 {
    font-size: 24px;
    margin: -20px;
	padding: 6px 20px;
    line-height: 1.2em;
	background: #ea1325;
	border-radius: 100px;
	position:relative;
}

    – adding a class (where can I find the php to add class=”” ?)

    h1 {
    font-size: 24px;
    margin: 20px 10px;
	padding: 6px 20px;
    line-height: 1.2em;
	background: #ea1325;
	border-radius: 100px;
	position:relative;
}

h1 .overlay {
	background-image: url('../Bodega/images/structure/Globe.png') right center no-repeat;
	padding: 20px;
}

    If anyone could solve this I’d be so grateful!

    site: http://smartnetworking.nl
    (don’t mind the yet unfinished website, I just want to focus on this little detail first before moving to the next)

    theme: bodega

Viewing 5 replies - 1 through 5 (of 5 total)
  • esmi

    (@esmi)

    12 years, 7 months ago

    I’m sorry but it is really beyond the scope of these forums to deal with general CSS issues. Try a dedicated CSS resource such as http://www.css-discuss.org/ instead. In the meantime, try using Firefox with the Firebug add-on for this kind of CSS work. Or use whatever developer tool is available in your web browser.
    http://getfirebug.com/

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 7 months ago

    Just to clarify, are you asking here because your theme’s vendors aren’t providing you with support?

    Thread Starter TiesGDesign

    (@tiesgdesign)

    12 years, 7 months ago

    The theme’s creators haven’t got any support forums, and it isn’t mastermind CSS right? I just can’t think of an solution 🙁

    esmi

    (@esmi)

    12 years, 7 months ago

    The wordpress.org support forums are meant for the core application, themes and plugins that are distributed on wordpress.org. We do not support themes downloaded from elsewhere.

    Thread Starter TiesGDesign

    (@tiesgdesign)

    12 years, 7 months ago

    Hey guys, I found it out myself, I created another id with another padding and positioning. I will post it below to help people with the same problem, it was pure coding in CSS (and referring to the CSS in PHP)

    The main cause why I didn’t see any change I did in the PHP was because I didn’t look carefully what page template was used for the page, so before you edit a PHP file, be sure it’s the right one. I messed up the page.php with the template-fullwidth.php .

    Adding an id (by changing width and top values you can position the image):

    #heading-img {
	position:absolute;
	background:url('../Bodega/images/structure/Globe.png') right center no-repeat;
	margin: 20px 10px;
	padding: 30px;
	width: 852px;
	top:225px;
}

    I called it heading-img because it’s an image overlapping the page-heading id

    Then I found out what PHP file I had to edit and added the div like this:

    <div id="page-heading">
    <h1><?php the_title(); ?></h1>
</div>
<div id="heading-img"></div>

    I hope this is useful, and to be honest, creating an id sounds time-consuming (it does to me), it isn’t necessarily!

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

The topic ‘Overlapping H1 div’ is closed to new replies.