Div Positioning and background images

  • Hi,

    I have created I child theme and CSS, then imported the parent CSS as recommended. I then proceeded to create my own ids and classes and adjust/add divs where necessary.

    I have encountered a few very frustration problems.

    Firstly, My pages are moving around. I have only touch the header.php and index.php files. I added a div to wrap the entire index page and header, so by my logic that should hold every within that div, but if I click on a menu item, loading another section, the page elements move out of alignment. see https://www.essentialopals.com. How can I force all elements to stay within my divs? I assume there is something in the parent CSS or structure throwing it off.

    Secondly, how can I clear all the default background images from my template? I have tried overriding them from the parent CSS, (copying the id from the parent into mine then setting the background to none or removing it) but they won’t disappear.

    Thirdly, why do I need to put in the entire url (from https://) in order for my CSS background images to appear. it makes sense that I might need to go up to the wp-content file, but I don’t get why I would need the go all the wat back to the root.

    Fourthly, I put my ‘home’ link in a separate div to the other menu items and floated it left, after the header image, however sometimes when I load the page this div jumps to the left of the image, and sometimes it stays on the right, where it is supposed to be. I changed it and floated it right to fix these issues, but I still don’t understand why it would happen.

    Also this ‘home’ div is not aligning correctly. It has the same top margin and padding as the other menu, but is sitting below. What’s causing this?

    Any help please…

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter Perfect Circle

    (@perfect-circle)

    Fixed the ‘home’ div alignment issue. just need to delete the default id=”main-nav” and class=”nav fl” from my ‘home’ div.

    for your third point try this in css instead of background-image:
    background: url(“eoImages/bg-HomeContent.png”)

    Thread Starter Perfect Circle

    (@perfect-circle)

    Yeah, tried that before, as well as level by level. Only worked when I included the enture path.

    with my templates I need to go up to wp-content before they are read, but with images I need to go up to the root.

    You have code above the DOCTYPE – the wrapper code you added – that’s the wrong place for it – it has to go inside the body tags.

    After fixing that, make sure you validate your mark-up and CSS code:

    https://codex.www.ads-software.com/Validating_a_Website

    Also, if your changes to the CSS are not working, it’s likely that you either have errors, are not clearing your caches, and/or are not using specific enough selectors in the CSS in your child theme.

    Thread Starter Perfect Circle

    (@perfect-circle)

    Regarding the code above the DOCTYPE, if you are referring to the Header.php, I didn’t add that, it was part of the original parent wootheme mystile. The id=”wrapper”, which is in the body, is also part of the parent.

    If you are referring to the <div id=”WrapOverall”> in the index.php, yes I added that, but there isn’t any body or head tags in this file. Perhaps they are pulled in with php, but where? Does the get_header(); query pull in the header.php, in which case, should I drop the <div id=”WrapOverall”> in the header.php file, but leave the end tag in the index?

    Regarding the CSS, It’s not the cache, so probably one of the other issues, but all I have done is copy a css block from the parent and paste it in my child, then changed some of the attributes, such as setting the background to none, replacing the colour that was there. Is this the normal technique for overriding the parent? If so perhaps I’m not change the correct id or something else is overriding it.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Div Positioning and background images’ is closed to new replies.