...

View Full Version : Div with dynamic background img and text on top



Persistent1
05-31-2012, 11:26 PM
Hello.

*Disclosure--I'm really not that knowledgeable with css so any help on this is much appreciated.

I'm trying to get this effect (http://www.freeimagehosting.net/rz8ao) as my masthead on pages within my Virb site http://thatguy.virb.com/featured

However, the page description is dynamically changed using Virb's admin and I don't know where to begin to change the description CSS to get it to look like this.

SeattleMicah
05-31-2012, 11:31 PM
you do or don't know where the CSS code is located? so you can edit it. if you do I can tell you what code to edit and what to change it too, but I have never worked with virb so I dont know how get to their code.

Persistent1
05-31-2012, 11:47 PM
you do or don't know where the CSS code is located? so you can edit it. if you do I can tell you what code to edit and what to change it too, but I have never worked with virb so I dont know how get to their code.

Thanks, SeattleMicah. Yes, I think so. I have the following code for my page that I believe is what I must edit
div#page_wrapper {
background: <virb get="customize.colors.background_page" />;
z-index: 1;
overflow: hidden;
}
div#page {
width:960px;
margin:0 auto;
padding:25px 0 15px;
overflow: hidden;http://trentwalton.com/2011/01/18/controlling-web-typography/
border-top: 1px solid <virb get="customize.colors.line_page" />;
border-bottom: 1px solid <virb get="customize.colors.line_page" />;
}
body.index div#page {padding-bottom: 0;}
#page div#description {
position: relative;
padding: 0;
width:600px;
}





#page #description p, #page #description h2, #page #description h3, #page #description h4, #page #description h5, #page #description h6 {
padding: 0 0 15px 0;
}

#page #description ul li, #page #description ol li {padding: 0 0 5px 0;}
#page #description h2 {line-height: 1.3;}
div#share {
display: block;
position: relative;
clear: both;
padding: 10px 0 0 0;
}
#page #title {
display: none;
}

Thanks for your help!

SeattleMicah
05-31-2012, 11:57 PM
just wondering, but is there a paragraph or description you can enter in? that might overlay the image? if so can you insert a description and update it please.

also can you find where to edit the html?

this is what we need to edit, and it looks like to get what you want we need to put a class on this H1 tag so we can edit this header.



<div id="description">
<h1>Title Here</h1>
<p>
<img width="960" height="600" src="http://g.virbcdn.com/_f/cdn_images/resize_1024x1365/1f/ContentImage-2471-31075-testMasthead.jpg">
</p>
</div>

hopefully you can find the html, if you can try this



<div id="description">
<h1 class="titleoverlay">Title Here</h1>
<p>
<img width="960" height="600" src="http://g.virbcdn.com/_f/cdn_images/resize_1024x1365/1f/ContentImage-2471-31075-testMasthead.jpg">
</p>
</div>

and add this to your css page



h1.titleoverlay {margin-top:50px;
<!--if you need left margin-->
margin-left:50px;
}

Persistent1
06-01-2012, 04:17 PM
Thanks, SeattleMicah. But no luck with the that code change (css and html) I republished the page http://thatguy.virb.com/featured ..thought that would do it, but it's unaffected.

Other ideas?

SeattleMicah
06-01-2012, 04:26 PM
Do you mean you changed wat i suggested and it didn't work? or you couldn't find where to make those changes?

Persistent1
06-01-2012, 04:27 PM
I made the changes you recommended.

SeattleMicah
06-01-2012, 04:31 PM
ah I see ya its pushing everything down.

You could try and put a z-index:10; inside of that new h1.titleoverlay {z-index:10;} along with those changes that should bring the header forward.

nevermind that wont seem to work, ill have to look at this further since adding that class didn't work. hopefully someone else can chime in.

Persistent1
06-01-2012, 05:12 PM
Is it an inheritance thing? What I mean is ..are the styles being over-ruled because this page inherits a parent style or something?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum