WordPress.org

Forums

Overlapping H1 div (6 posts)

  1. TiesGDesign
    Member
    Posted 1 year 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

  2. esmi
    Forum Moderator
    Posted 1 year 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/

  3. Andrew
    Forum moderator
    Posted 1 year ago #

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

  4. TiesGDesign
    Member
    Posted 1 year 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 :(

  5. esmi
    Forum Moderator
    Posted 1 year 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.

  6. TiesGDesign
    Member
    Posted 1 year 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!

Topic Closed

This topic has been closed to new replies.

About this Topic