Header Image not centered and 'tweaking' Static Page (gaps,division line,center)

  • Hi!

    We are having some trouble with our blog https://multicorechina.com

    If you pay attention to our header image (banner) it doesn’t look completely centered with the ‘main title’ and with the ‘site description’..there’s a little gap at the right (header image)..so, it’s not perfectly centered.

    Besides that, we need to reduce the gap between the ‘static page title’ and the ‘menu bottom division line’, we want to remove the ‘blank space’ below the dotted line at the bottom of the static page too..and finally, it would be awesome if we can remove the left ‘division line’ acting as a column while centering the overall ‘static page title’.

    Here you have our CSS stuff:

    Edit CSS

    Full CSS

    And…I’m sure there’s something with the defined link colour, because if you write a post and underline a word with (let’s say) RED it will show up GREY or BLACK ..can’t remember right now.

    THanks a bunch!

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter multicorechina

    (@multicorechina)

    Oh nearly forgot…could it be possible to set for the static page ONLY a the same width as the HEADER IMAGE?

    Would be awesome!

    Hi,

    regarding the banner image, it is bigger than the container. The width of the container is 800px and the size of the image is 800px as well. However the menu part in which the image is enclosed has padding 10px on each side, therefore the image is slightly off.

    To reduce the gap between the menu bottom division line and the static page title, you need to reduce the padding for the class “main”. However this will reduce the gap for your posts too.

    The blank space bellow the dotted line is reserved for comments. You probably need to disable them for your static page.

    To remove the left column for your static page, you should set this in you “page attributes” – right column when you click to edit page.

    Hope at least something of this will help. ??

    Thread Starter multicorechina

    (@multicorechina)

    Thanks Ivana!

    But we need something more specific? Can anyone out there help us?

    Thanks a bunch

    Thread Starter multicorechina

    (@multicorechina)

    This is what is going on basically

    Ok, I try to explain more clearly:

    You have div “container” in which you have divs:
    “header”
    “menu”
    “contents”
    “navigation”
    “widgets”
    “footer”

    Your image is inside div “menu” and is 800px wide.
    The div “menu” has 10px padding on each side, that makes it 10 + 800 + 10 = 820px wide.
    The div “container” however is 800px wide => the div “menu” is WIDER than your div “container” by 20px. And that is why it wouldn’t center.

    Maybe this will be helpful.

    Cheers

    Thread Starter multicorechina

    (@multicorechina)

    Ok…let me grab those scissors…where do am I supposed to cut those extra 20px ?

    As you can see in our blog…now the site description is centered, used float: center (if I’m not mistaken)…

    So, what is your advice on how to match the ‘menu’ and the ‘container’..?

    Remove the ‘extra’ padding perhaps?

    With what?

    margin-left: 0
    margin-right: 0

    Huh?

    And then, how do I change the Static Page title colour?

    And, how do I remove the white gap at the bottom (already NO COMMENTS activated)?

    How do I remove the left margin and spread all the text to fit those 800px width?

    Tough…yeah I know :C

    First of all: there is no “float: center;”

    Second: So you centered the header by adding padding to it, big deal.
    There are 3 other possibilities to do it, but you may start to ask about them when you find out that now your division line above your footer is not centered with the content above (if ever).

    And last: I was only trying to help. I didn’t say I know how to solve everything. Or that everything I suggest is something you didn’t try yet.

    Hope someone else will have all answers for you…
    Best of luck.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Header Image not centered and 'tweaking' Static Page (gaps,division line,center)’ is closed to new replies.