• We’re currently investigating an issue related to the forum theme and styling that is impacting page layout and visual formatting. The problem has been identified, and we are actively working on a resolution. There is no impact to user data or functionality, this is strictly a front-end display issue. We’ll post an update once the fix has been deployed. Thanks for your patience while we get this sorted.

CSS question

QueBert

QueBert

Lifer
I'm trying to get this figured out, not having much luck. Here's the code

#slider { width:516px; height:304px; position:relative; overflow:hidden; }
#mask-gallery { overflow:hidden; }
#gallery {list-style:none; margin:0; padding:0; z-index:0;width:900px; overflow:hidden; }
#gallery li {float:left; }
#mask-excerpt { position:absolute; top:150; left:0; z-index:525px; width:525px; height:85px; overflow:hidden; }
#excerpt { filter:alpha(opacity=75); -moz-opacity:0.75; -khtml-opacity:0.75; opacity:0.75; list-style:none; margin:0; padding:0; z-index:10; position:absolute; top:150; left:0; width:525px; height:85px; background-color:#000; overflow:hidden; font-family:arial; font-size:10px; color:#fff; }
#excerpt li { padding:5px; }
#excerpt li h2 { font-size:18px; }
#buttons { z-index:88; position:relative; margin-top:-305px; padding-left:6px; font-size:15px; background:#000; width:94px; height:30px; }
.clear { clear:both; }

It works, but I'd like to get to get the #excerpt to show up at the bottom of the slider and not the top. I read up on absolute positioning and setting the top value should effect where it shows up in my slider box. But, if I set it for anything besides 0 it vanishes. I didn't create the original code, it's from a WP theme I purchased. I'm assuming I need to edit both bolded right? I've tried a few dozen things with no luck what-so-ever. I Edited just one, edited both. Even tried to make it relative. With the code as it is pasted I get no box, the original top on both were set to 0.

*EDIT* just noticed that if I have the height=:85px; my scroller isn't changing.
 
Last edited:
That's a good question, I have no idea. I thought all the CSS for that section is in what I posted. I'm still a CSS n00b so I'm not really sure what to check for here to know how to answer your question. I'm guessing this is it?

/* Show - Featured Post Image, Audio Player */
#show .featuredPost { float:left; width:500px; }
#show .featuredPost h1 { color:#fff; font-size:22px; }
#show .aPlayer { float:right; width:411px; text-align:right; padding-left:10px; position:relative; z-index:30; }
 
Last edited:
If you're using Firefox, the Firebug extension is a god send when trying to debug these kinds of issues. It will break down the CSS on a per HTML element and tell you exactly where the element got it's current style information.
 
Is this live somewhere? Looking at css in absence of it's associated HTML isn't going to allow us to solve anything but very simple problems.
 
So, you're what, exactly? Trying to get the equivalent of "Featured Item 1: yadda yadda" to align to the bottom of the box instead of the top?

If so, that means arguing with whatever that <cufon> tag is. I can't help you with that - I've never seen the thing before.
 
PhatoseAlpha said:
So, you're what, exactly? Trying to get the equivalent of "Featured Item 1: yadda yadda" to align to the bottom of the box instead of the top?

If so, that means arguing with whatever that <cufon> tag is. I can't help you with that - I've never seen the thing before.
Click to expand...

Yes, I want it along the bottom, cufon's a TTF plugin for WordPress, all it does it takes a font and turns it into a .JS file so people viewing the page who don't have have the font installed on their system can still see it.
 
PhatoseAlpha said:
So, you're what, exactly? Trying to get the equivalent of "Featured Item 1: yadda yadda" to align to the bottom of the box instead of the top?

If so, that means arguing with whatever that <cufon> tag is. I can't help you with that - I've never seen the thing before.
Click to expand...

Yes, I want it along the bottom with the mask being 85px in height, cufon's a TTF plugin for WordPress. All it does it takes a font and turns it into a .JS file so people viewing the page who don't have have the font installed on their system can still see it. this is all that's in my cufon script section

Cufon.replace('h1', { fontFamily: 'Boston Traffic' });
Cufon.replace('h2', { fontFamily: 'Boston Traffic' });
Cufon.replace('.menu a', { fontFamily: 'Boston Traffic' });
Cufon.replace('#mainSearch label', { fontFamily: 'Boston Traffic' });
Cufon.replace('#content .post h3', { fontFamily: 'Boston Traffic' });
Cufon.replace('#contentfull .postfull h3', { fontFamily: 'Boston Traffic' });
Cufon.replace('.taghead ', { fontFamily: 'Boston Traffic' });
Cufon.replace('#buttons ', { fontFamily: 'Boston Traffic' });
Cufon.replace('.navigation a', { fontFamily: 'Boston Traffic' });
Cufon.replace('.postMeta', { fontFamily: 'Boston Traffic' });
Cufon.replace('.postMetafull', { fontFamily: 'Boston Traffic' });

none of that should effect what I'm trying to do, but since I don't know CCS I could very well be mistaken.
 
Well, from what I can tell, #mask-excerpt and #excerpt are not the elements you need to be working with. Mask-excerpt is a parent div used for clipping off the unselected portions of the list, and excerpt is the list itself.

Sounds like you'll need to put in a new div within each of the list item elements, and position that absolutely. Additionally, you'll need to change

#excerpt li { padding:5px; }

to

#excerpt li { padding:5px; position: relative; top: 0px; left: 0px; }

for positioning to work properly.
 
PhatoseAlpha said:
Well, from what I can tell, #mask-excerpt and #excerpt are not the elements you need to be working with. Mask-excerpt is a parent div used for clipping off the unselected portions of the list, and excerpt is the list itself.

Sounds like you'll need to put in a new div within each of the list item elements, and position that absolutely. Additionally, you'll need to change

#excerpt li { padding:5px; }

to

#excerpt li { padding:5px; position: relative; top: 0px; left: 0px; }

for positioning to work properly.
Click to expand...

Thanks for your help, I just assumed #excerpt was where I needed to start because when I change the width from 100 to 525 the transparent black box fills up the entire size of the slider. I changed what you suggested and will keep playing with it. Gotta be close to something lol.

I think your change suggestion worked, I got it just how I want it. thank yoooou!

*edit* spoke too soon the box is now where I want it, except the scrollers creating a biiiiig box for the next text when the article changes. 🙁 HELL I need to go buy a CSS book and read it this weekend. I need to just take a break been at this all morning. Thanks again for your help. I will definitely have it working by tonight.
 
Last edited:
Not sure if this is something that can be figured out without having access to the entire source, but it can't hurt to ask

http://cunni-ling.us/ is my site, it looks almost how I want it, but when the article changes in the box the scroller expands upwards for the next story and stays like that. I'd like that box to always be 85px in height. I spent the past few days playing the css and have made no progress. The actually scrollers using jqueryscrollTo.js but I have no ides where to set the parameters for this, or if that's even the problem here.
 
I'm having a real hard time understanding what you mean. You talking about the box with next/prev and Bums life and times? What's 85px?
 
PhatoseAlpha said:
I'm having a real hard time understanding what you mean. You talking about the box with next/prev and Bums life and times? What's 85px?
Click to expand...

Sorry, I'm talking about the semi transparent black box with the article title + start of article in it. When the page first loads it looks good, the box is 85px in height, but as soon as it goes to display the next article the box scrolls up and stays like that. I like how the articles scroll up but I want the box to stay at 85px. I searched all the PHP/CSS files for my site for any instances of the .JS but nothing with any parameters are coming up.


*EDIT* welp I installed the default XML for the theme and played with the CSS some more. I have it almost right, the 1st box doesn't show up, but after that it looks perfect. So close, yet so far...
 
Last edited:
You must log in or register to reply here.

TRENDING THREADS

Back
Top