WordPress.org

Ready to get started?Download WordPress

Forums

Overlapping H1 div (6 posts)

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

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

  3. Andrew
    Forum Moderator
    Posted 11 months ago #

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

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

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

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

Reply

You must log in to post.

About this Topic