Fixing gap below extra header image and fixing size

  • Resolved jfotogs

    (@jfotogs)


    11 years, 3 months ago

    Aloha all!
    First off, I’m not super versed in coding. I am, however, a very good self-teacher and able to pull off basic code tweaks with the help of google. I’m building a site for a friend and I played around with my header.php for a bit to add an extra header image above the menu so I can have that, as well as the built-in header image the theme comes with (displays below the menu).
    That said, I had to do a fair bit of tweaking to get the new header image to display centered and properly – however, when I move to a smaller screen the header looks slightly aligned-left rather than always displaying dead-centered over the content.

    I’d like to figure out how to fix this, and if possible, also add a function so that regardless of how much you zoom in the image always displays at the same width on the screen (kind of like how the menu bar functions).

    Secondly, in the process of adding the new code I ran into another placement issue – the image was displaying overlapped on the menu bar. I fixed this by adding some margin to the bottom, but regardless of how much or little I change it everything below 10px displays with a gap between the image and menu, and everything over 10px sends the image to the bottom of the page.

    Here’s the page: https://www.lopakasalohaadventures.com
    Here is the header.php function I added

    <div id= "extra-header">
		<img src="https://www.lopakasalohaadventures.com/home/wp-content/uploads/2013/11/LopakaHeader.png" style="center">
	</div>

    here is it’s placement in header.php

    <body <?php body_class(); ?>>

<?php themezee_wrapper_before(); // hook before #wrapper ?>
<div id="wrapper" class="hfeed">

	<?php themezee_header_before(); // hook before #header ?>
	<div id= "extra-header">
		<img src="https://www.lopakasalohaadventures.com/home/wp-content/uploads/2013/11/LopakaHeader.png" style="center">
	</div>
	<div id="header-wrap">

		<header id="header" class="container clearfix" role="banner">

    And here is my callout in the style.php

    #header {
	padding: 3em;
}
#extra-header {
	text-align: center;
	left-margin: auto;
	right-margin: auto;
	bottom: 5px;
	position: top;
}
#wrap {
	clear: both;
	padding: 1.5em 1.5em 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

    I know I’m an ugly coder, but I make due with what I have and I enjoy playing around…

    Also: I have a side-question. Can anybody tell me why the 1100px wide image I made in illustrator and exported as a .png somehow becomes 5000px wide every time I upload it to WP? I’m hosting on Bluehost and just upgraded to the newest build of wordpress before I took over this project

    Thanks guys – appreciate all the help!

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

  • Here is the header.php function I added

    That is not a function, it is basic HTML.

    Also, no need to provide CSS, we can see that when a URL is provided.

    You have errors in your CSS (as shown above):

    https://jigsaw.w3.org/css-validator/validator

    The padding:3em will also add a large gap all around the image.

    Might also want to review this:

    https://sitecheck.sucuri.net/results/www.lopakasalohaadventures.com/

    Thread Starter jfotogs

    (@jfotogs)

    Thanks! Like I said total beginner here. Still pretty unsure of the terminology. Really I’m a graphic designer, I just have some basic experience with WP. Much appreciated

    Thread Starter jfotogs

    (@jfotogs)

    Wow. I can see where three parts of my code that I added were basically uselesss, but I’m shocked to see how many CSS errors came already built into this theme! Not sure how I should approach this now. Most things on the site seem to be working, so I can’t help but have the fear that by fixing those things I might break ten more…

    Anyone have any thoughts on closing the gap? I fixed my code and gave the header a padding of 0.5em on top and 0em on bottom and it’s still got a large gap. I’d like the upper header logo to basically butt up against the menu with only the smallest gap.

    Thread Starter jfotogs

    (@jfotogs)

    As for the security issues that pop up on Sucuri, I have the site in maintenance mode at the moment. I’ve simply opened up the home page to be viewable for the purposes of this troubleshooting

    Thread Starter jfotogs

    (@jfotogs)

    For the record – removing the padding of 3em from the #header in the stylesheet fixed the gap… had to figure it out myself but I got it

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Fixing gap below extra header image and fixing size’ is closed to new replies.