WordPress.org

Ready to get started?Download WordPress

Forums

[Theme: Esplanade] Making div change size in header (2 posts)

  1. Svettband
    Member
    Posted 1 year ago #

    Hello!
    I use the Esplanade-theme [http://wordpress.org/themes/esplanade] and now I want to add a div to the right over the header-image that contains another image to be shown on certain posts, that part I can solve on my own I think but I cant get the div to behave like I want it to.

    The image shows up and all but it shows up 1px to high and a few more to the right than it should making it look like crap. I want it to follow the same rules as the header image, show up within the header-image height and follow the same rules as the header-image when you resize the browser.

    Maybe Im approaching this in the wrong way to begin with.

    I tried setting the height of the image with <?php echo get_custom_header()->height; ?> but that didnt help and I guess its the 'position:absolute' in the image-div and 'position:relative;' in the div containing it all that messes everything up but I cant figure out how to solve it :/

    HEADER:

    <header id="header">
    /* some stuff*/
        <div style="position: relative;">
            <?php if ( ( '' != get_header_image() ) ||  ( false != get_header_image() ) ) : ?>
                <a href="<?php echo home_url( '/' ); ?>" rel="home">
                <img id="header-image" src="<?php header_image(); ?>" alt="<?php bloginfo( 'name' ); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" /></a>
            <?php endif; ?>
            <div id="headerspecialimg">
                <img src="/wp-content/uploads/gfx/special/IMAGE.png" alt="IMAGE TO THE RIGHT" />
            </div>
        </div>
    /* more stuff*/
    </header>

    CSS:

    #header {
    	margin:0 1.76%;
    }
    #header-image {
    	display:block;
    	max-width:99.1%;
    	padding:0.45%;
    	margin-bottom:1.76%;
    	box-shadow:0 0 3px #999;
    	background:#fff;
    }
    #headerspecialimg {
    	position: absolute; bottom:0; right:0;
    }

    I cant help feeling that is should be pretty easy to solve and I tried to use properties from other elements that responds to resizing the browser with no luck so if anyone out there could help me with this it would be awesome. I only have a local version since I just started and try to play around a bit but if its impossible to solve otherwise I can upload it somewhere.

  2. Svettband
    Member
    Posted 1 year ago #

    Ok, Im almost there now.

    This is what I got now and it works pretty well but when the browser resize then the image decides to pop out of the header-image area.
    How do I prevent this?

    Here is what happens when the browser gets to small:
    Example

    I want it to stay inside the header-image all the time.

    The header and css now looks like this:
    HEADER:

    <div style="position: relative;">
    	<?php if ( ( '' != get_header_image() ) ||  ( false != get_header_image() ) ) : ?>
            <a href="<?php echo home_url( '/' ); ?>" rel="home">
            <img id="header-image" src="<?php header_image(); ?>" alt="<?php bloginfo( 'name' ); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" /></a>
        <?php endif; ?>
    	    <img src="/wp-content/uploads/gfx/special/IMAGE.png" alt="IMAGE TO THE RIGHT" id="specimg" />
    </div>

    CSS:

    #specimg {
    	position: absolute; top:0; right:0;
    	z-index: 2;
    	padding:0.45%;
    	max-height:100%;width: auto;width: auto\9; /* ie8 */
    }
    #header-image {
    	display:block;
    	max-width:99.1%;
    	padding:0.45%;
    	margin-bottom:1.76%;
    	box-shadow:0 0 3px #999;
    	background:#fff;
    	z-index: 1;
    }

    So, why does this happen and how do I solve it?

Topic Closed

This topic has been closed to new replies.

About this Topic