Need help with fixing header and footer

Viewing 15 replies - 1 through 15 (of 32 total)

  • Begin with fixing you markup. Invalid markup might be misread by the browser, resulting in strange rendering :

    1. the <body> opening tag is missing
    2. you included 
      <a name="top"></a>
<div id="wrapper">

      twice

    Didn’t investigate further but this CSS should work.

    Can you give a link to the blog? It’s easier to debug when seeing it running live, rather than in multiple files.

    Thread Starter Zulaika

    (@zulaika)

    Prosalamander.com/dev/

    If it prompts you for a password it’s:

    Account: Guest

    Password: guest

    Thread Starter Zulaika

    (@zulaika)

    Did you find the problem?

    Yeah, like I said, you have to fix your markup first. See this : https://validator.w3.org/check?uri=http%3A%2F%2Fprosalamander.com%2Fdev%2F&charset=utf-8&doctype=XHTML+1.0+Transitional&ss=1&outline=1&group=0&No200=1&verbose=1&st=1&user-agent=W3C_Validator%2F1.2
    Focus on the firsts errors, they are very important : There’s a <body> start-tag missing, and then `<a name=”top”></a>
    <div id=”wrapper”>` is appearing twice, so keep the first, and get rid of the second occurence.

    At this point everything will become more clear. You’ll see your complete navigation bar.
    Then it’s all about positionning. Remove the <center> tags around your nav (it’s deprecated, you’d prefer using CSS). Ok so now the nav bar should be right under the logo and left-aligned with it.
    But post and sidebar are still strange .In fact, this theme seems to mostly rely on position: relative and position: absolute. I’d suggest putting #post and #sidebar in the same div, removing their position: absolute and using float:right on the sidebar and margin-right on the post instead.
    But yeah that’s a lot of work as there’s many things to fix to my mind but maybe you don’t wanna take so much time…

    So begin with the markup fix and come back here, we’ll see what we can do.

    Thread Starter Zulaika

    (@zulaika)

    I did the markup fix, you can now see the bar.

    But the post, like you said, are now strange.

    What should I do next?

    You may want to backup your files because I’m gonna give you many changes to do. This way if it doesn’t suits you, you will be able to restore from this version.

    Ok let’s go.
    Just under the <ul> of your nav bar, you’ve got an extra </div>, remove it.

    In this css you linked https://pastebin.com/dzd6YDY3, remove the background : white; for div elements. If blocks overlap, you won’t see the ones underneath. Maybe you would prefer background: transparent;
    Remove margin: auto; also.
    Well, let’s keep it simple, I suggest you erase all this code :

    div {
    background: white;
    width: 65%;
    margin: auto;
}

    Then remove position: absolute for div#post and div#sidebar, in your style.css, around line 72 and 132. Clean also any left, right, top, bottom you find for #post and #sidebar, they’re useless without position: absolute. Remove margin-left: 0; too (for your #post, still line 132 of style.css).

    Remove margin: 20px; for your ul#list-nav.

    What do you think about that? It’ better now, no? The last big thing you have to do, is make the sidebar floating on the right of the content.

    But let’s make it step by step. Begin with this and come back show me the result. The end is near ??

    Thread Starter Zulaika

    (@zulaika)

    I did exactly what you told me. What next?

    Thank you for all the help you’ve given me so far I really appreciate it.

    Also, is there anyway I can cut the gap between the logo and navigation bar.

    Thread Starter Zulaika

    (@zulaika)

    (Sorry for another question)

    Is there a way I could put the nav bar’s CSS in the main CSS without messing anything up? I’ve tried a few times.

    Tried to put a space under the nav bar too and that didn’t work. What should I do?

    style.css line 72: replace everything in #sidebar{…} with:

    #sidebar {
    /* make the sidebar stick to the right */
    float: right;
    width: 250px;
    padding-bottom: 25px;
    text-align: left;
    color: #FF0000;
}

    style.css line 132 : replace everything in .post{…} with:

    .post {
    text-align: justify;
    /* leave some space on the right to the floating sidebar. Width of div#sidebar MINIMUM (250px) else the sidebar won't find enough place to display and will be rendered under div.post */
    margin-right: 280px;
}

    add these lines to reset the float so the footer show under post and sidebar :

    #footer{
    /* reset any float: left and float: right */
    clear:both;
}

    Also, is there anyway I can cut the gap between the logo and navigation bar.

    Yes, style.css line 55 in #header{…}, the width is at 150px, set it to something around 100px instead.

    Is there a way I could put the nav bar’s CSS in the main CSS without messing anything up? I’ve tried a few times.

    hmmm don’t know why it doesn’t work. Try it again, even if it messes things up, I’ll tell you why and how to fix this.

    Tried to put a space under the nav bar too and that didn’t work. What should I do?

    yeah that’s because the <a> tags in your menu have a float: left. You could delete it, but it will force you to redesign your entire menu.
    So the quick fix is :
    margin-top: NNpx;
    in .post{…} line 132. NN is any number you want. this will push the post this amount of pixels below the nav.

    Well, we made some progress. Let’s see what’s the result.

    Thread Starter Zulaika

    (@zulaika)

    Awesome, thank you so much you fixed it.

    But, for some reason the sidebar didn’t want to come up to see the navigation bar, I keep looking over to see if it’s my problem.

    hmmmm add this to the css class .post{} :

    float: left;
width: 500px;

    and remove the margin-right I told you to add.

    Did you create this file : https://prosalamander.com/dev/wp-content/themes/ub_modicus2c/style.php ? or was it here before? Could you paste its content to pastebin ? Just wanna check smthg… And meanwhile let’s finish this !!! We’re gonna merge style.php and style.css, cause there’s some duplicates.
    So, in style.css,
    -> line 62, body : change the rule ‘font’ to :

    font: 62.5%/200% Helvetica,Arial,sans-serif;

    -> line 48, # wrapper : change the width to 700px;

    -> We won’t move .post & #sidebar rules, because some of these rules are either useless, or we already defined them before. So tell’em “hasta la vista” ^^

    AAAAAAAAAAAAAAAAAAAAAAAAND the last thing. Remove the import of style.php in your <head></head> tag, as we don’t need it anymore and it overrides some rules in styles.css

    Now this should look like the screenshot you gave in your first post.

    Tell me if it doesn’t ??

    Thread Starter Zulaika

    (@zulaika)

    https://pastebin.com/bGaEwJug

    Thread Starter Zulaika

    (@zulaika)

    It brought the sidebar up, but it’s still sticking out a bit.

    Yes, because there’s still an import of the file prosalamander.com/dev/wp-content/themes/ub_modicus2c/style.php in your <head>...</head> tag :
    <link type="text/css" rel="stylesheet" href="https://prosalamander.com/dev/wp-content/themes/ub_modicus2c/style.php">
    I don’t think you’ll find it hard-written in the header, might be added by the theme with some hook…

    Analyzing the code you pasted, this style.php is meant to overwrite some css rules with some options managed in the admin panel. Did you see something related in your admin?
    Anyway, if you wanna get rid of it, you can finish all this by editing style.php and put all the code into comments. Replace the first line of the file :

    <?php

    with

    <?php /*

    and the last line

    ?>

    with

    */ ?>

Viewing 15 replies - 1 through 15 (of 32 total)
  • The topic ‘Need help with fixing header and footer’ is closed to new replies.