Member Avatar for joseph.lyons.754

I am using a responsive template to make a website.

The problem I am having is with the css I need to have different images for a handful of pages. Not all pages need different images.

I attempted this by adding another div and changing the name slightly orginally it was marketing(This div is still in use for all those pages that dont need images) I added one called marketingIndex for the homepage.(This is where the problem arose).

It worked in the sense that the background was there but it messed with the footer div(the footer rose half way up the page over the body of the text) at the end of the page only when it was resized for mobile. There is no obvious interference from any other css and in theory it should work no?

Is there some sneaky code to predetermine layout of the page like Featured -> marketing -> footer and if the name is changed it doesnt work?

The css in question:

    #marketing
    {   
        max-width:1200px;
        width:auto;
        border-style: solid;
        border-width: 5px;
        border-color:#3c340d;
        margin-right:auto;
        margin-left:auto;
        background: #d0f6eb;
        background-size:cover;
        position: relative;
        font-size: 18pt;
        color: #3c340d;
        font-family: "Times New Roman", Times, serif;
        padding-left:1.3em;
        padding-right:10px;

            }

    #marketing h2{
            padding-left:1.3em;
            color: #3c340d;
    }


    #marketingHome{
        width:auto;
        max-width:1200px;
        height:850px;
        margin-right:auto;
        margin-left:auto;
        background: url("../images/backgrounds/indexBck.jpg") no-repeat center;
        background-size:100% 100%;
        position: relative;
        padding: 7em 0em;
    }
    #marketingHome p{
            font-size: 20pt;
            color: #000;
            font-family: "Times New Roman", Times, serif;
            padding-left:1.3em;
    }

The div in question:

<div id="marketingHome">
            <div class="container">


                <div class="row" >
                    <div class="8u">
                        <header>
                        </header>

                            <section >
                                <p><strong>gkvhkgklhkljkklb glkhghkgk utut  dft dfyti dityf dt  ff uifu u </strong></p>
                            <div style="max-width:560px;margin:0 auto; padding:5px;">
                            <div style="position: relative;padding-bottom: 56.25%; height: 0; overflow: hidden;">
                            <iframe width="560" height="315" frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/ofQDWmK5edA" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; max-width: 560px; max-height: 315px;"></iframe>
                            </div>
                            </div>
                                    </section>
                    </div>
                    <div class="3u">

                            <header>
                            <!-- Social Plugin Code -->

                                 <div id="share"></div>

                            <!-- End Social Plugin Code -->

                            </header>

                    </div>
                </div>
        </div>

Thanks in advance

  • 2 Contributors
  • 3 Replies
  • 157 Views
  • 4 Hours Discussion Span
  • Latest Post Latest Post by mattster
Member Avatar for mattster

So you are having problems overruling css rules to change the background image on the odd few pages?

If so, have that code in your style.css file or whatever, and then on the pages that need a different background image use the <style> tag in the <head> or embedded CSS (not so friendly) <div style="">. There's no need to have divs sat on top as an overlay if you can overwrite the css.

Member Avatar for joseph.lyons.754

Not really its that I cannot change the div id "marketing" to anything else. If i do it all goes haywire E.g

If i was to swap the second for the first it wouldnt work even though there the exact same and would have knock on effects on other css elements.

Thats why im asking is there something that can somewhat set the order the divs are to appear in?

#marketing
    {   
        max-width:1200px;
        width:auto;
        border-style: solid;
        border-width: 5px;
        border-color:#3c340d;
        margin-right:auto;
        margin-left:auto;
        background: #d0f6eb;
        background-size:cover;
        position: relative;
        font-size: 18pt;
        color: #3c340d;
        font-family: "Times New Roman", Times, serif;
        padding-left:1.3em;
        padding-right:10px;

            }


 #marketingHome
    {   
        max-width:1200px;
        width:auto;
        border-style: solid;
        border-width: 5px;
        border-color:#3c340d;
        margin-right:auto;
        margin-left:auto;
        background: #d0f6eb;
        background-size:cover;
        position: relative;
        font-size: 18pt;
        color: #3c340d;
        font-family: "Times New Roman", Times, serif;
        padding-left:1.3em;
        padding-right:10px;

            }

I tried your way(css in the header) and it worked but when its resized to mobile i would need the background to turn off as the aspect ratio gos all funky.

Thanks

Edited by joseph.lyons.754
Member Avatar for mattster

To adapt to mobiles you need to be using CSS media queries, and not changing the ids of elements (the only way you can do that is through JS).

You can change the order by using z-index, but I'm still failing to see what that would achieve. Have one element, .marketing, and use a second class on the marketing page (.marketing-home) to change the background ONLY, and use a media query to adjust for mobiles.

So normally: <div class="marketing">...</div> and then on the home: <div class="marketing marketing-home">...</div>.

style.css: (NB you shouldnt need the !important but i've put it there to be sure.)

.marketing {
    /* Normal pages */
    background: #0CF ;
    ...
}
.marketing-home {
    /* Marketing page */
    background: #CFC !important;
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.