Jump to content
Sign in to follow this  
create180design

Move titles above boxes

Recommended Posts

create180design

Hi, I am trying to move the titles of my boxes to be above the boxes and not below them. Any way I can add a line of code in the CSS box? I'm not a savvy programmer, just a beginner. Here's the site: www.aplestimating.com just want to move the home page boxes' titles to the top, not the whole site.

Share this post


Link to post
Share on other sites
Kate

Hi Helize, There's a couple different ways to do it. This is probably one of the easier ways:

.fbox{padding-top:30px;position:relative;}
	.fboxtitle{position:absolute;top:0px;}

Share this post


Link to post
Share on other sites
create180design

That's great Kate! Thanks! Any way you can tell me how to center the titles?

Share this post


Link to post
Share on other sites
cmunns

try `.fboxtitle {text-align:center;}` CSS is your friend :)

Share this post


Link to post
Share on other sites
create180design

Sorry Adam but that didn't work. Still aligning to the left.

Share this post


Link to post
Share on other sites
create180design

unfortunately that only removed the box background, and did not center the text

Share this post


Link to post
Share on other sites
timlinson

The absolute positioning prevents you from centering the text. There's not really a clean way of doing this with css, but you could set each box heading's left spacing: ` #fbox_358 .fboxtitle {left:60px} #fbox_360 .fboxtitle {left:100px} #fbox_11 .fboxtitle {left:100px} `

Share this post


Link to post
Share on other sites
canoconsulting

Kate, Adam, rest of the team...I tried doing this: .fbox{padding-top:30px;position:relative;} .fboxtitle{position:absolute;top:0px;} And it moved it to the top but it compressed my background color to fit only with the text. Still tweaking it but have not come up with a solution as of yet. Thanks, RC P.S. my site is www.RickCano.com

Share this post


Link to post
Share on other sites
catrina

Can add that code you came up with again so I can see what it looks like? Perhaps it's the right code, but additional tweaking could be done to it.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
canoconsulting

Thanks Catrina, I added the code and you'll see it now...I can get it to look nice below the image but can't seem to get it to look identical but at the top of the image. Thanks again. Rick

Share this post


Link to post
Share on other sites
catrina

Do you want the top titles to have no underline and remain black when you hover over them with the mouse? (That's the only difference I see between the titles at the top and the titles at the bottom)


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
canoconsulting

What you see on the site is the code I used above in this thread. If I don't use the code the titles are below the image and they have color the same width as the image and the text is centered. With the code, they move the titles to the top of the images but the color is compressed and only shows the same width as the text in the title area..not the full width of the image. Let me take the code out and then you'll see what they look like below the image. I think what may be throwing you off is there are no titles below the images right now. Those are the titles of other images that I've not loaded. I'll take the code off again and then look at the site again and you'll see that the titles are back at the bottom and they look exactly what I want but I'd like to have them on top. Thanks

Share this post


Link to post
Share on other sites
canoconsulting

Take a look at the site now and you'll see the title Dining goes with the image above it...first one is called "Dining"...and so on for 5 images horizontally. I have 5 columns with 6 rows. The code I used from this thread does move them to the top of the Dining image but it compresses the color and then floats the text to the left. I can't seem to get the code right to move the current titles to show above the corresponding Image. Urghhh!! Thanks again for your help. Rick

Share this post


Link to post
Share on other sites
cmunns

I think I initially misunderstood the question...You can't re-order content using CSS...maybe try adding the actual title to the image itself?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×