Go Back   vb.org Archive > vBulletin 3 Discussion > vB3 Design and Graphics Discussions
  #1  
Old 04-29-2011, 06:18 PM
Dj Smuggla Dj Smuggla is offline
 
Join Date: Sep 2009
Posts: 148
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default CSS Help Styling Divs

Im tring to make a custom page for vbulletin, but im having trouble styling the div containers.



See the colored boxes, i want them to look like this:



Here's my code: (Code Removed)

I've added the background image at the top of the box to the div, thats ok
but then how do i add a alt image inside the box? Below that image?

And a separate little box around the date posted?

Reply With Quote
  #2  
Old 04-29-2011, 11:06 PM
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Location: California/Idaho
Posts: 41,180
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

How about a link to see the results of the code you've posted.
Reply With Quote
  #3  
Old 04-30-2011, 12:55 PM
Dj Smuggla Dj Smuggla is offline
 
Join Date: Sep 2009
Posts: 148
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Here's a link to the page:
http://www.hiphopdownloadz.com/music.php

I just need to know how to split each box into sections, so i can use tcat for the top of the box, & alt for the rest of it. Right now when i add the tcat image to the css for the box, i then cant add another image for below it.
Reply With Quote
  #4  
Old 04-30-2011, 04:15 PM
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Location: California/Idaho
Posts: 41,180
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

I'm not sure exactly what you want. Something like...
HTML Code:
<div class="first">
<div class="title">N.O.R.E.</div>
<div class="date">Posted: 04-29-2011>
<div class="image_background">N.O.
<img scr="download.jpg" alt="" />
</div>

</div>
Reply With Quote
  #5  
Old 04-30-2011, 08:30 PM
Dj Smuggla Dj Smuggla is offline
 
Join Date: Sep 2009
Posts: 148
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Thanks for helping me, but this is the result from what you give me:



See its all squashed up the top.

What do i need to add to the <div class="title"><div class="date"><div class="image_background"> CSS to make it display how i want it like this:



Basically how do i tell it to show the top image (with green line) behind the title, then i want to use the alt1 for the date (just underneth) then alt2 for the rest of the box.
Reply With Quote
  #6  
Old 04-30-2011, 10:12 PM
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Location: California/Idaho
Posts: 41,180
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

I just posted class names in there. You will have to make them the font-size and color you want and also put in any padding and then the background image. I don't know any of those details - only you do.
Reply With Quote
  #7  
Old 05-01-2011, 08:05 PM
Dj Smuggla Dj Smuggla is offline
 
Join Date: Sep 2009
Posts: 148
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Thanks a lot Lynne, ive managed to make them display how i wanted them now.
Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 06:41 PM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.04356 seconds
  • Memory Usage 2,213KB
  • Queries Executed 13 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (1)ad_showthread_firstpost
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)bbcode_html
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)navbar
  • (3)navbar_link
  • (120)option
  • (7)post_thanks_box
  • (7)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (7)post_thanks_postbit_info
  • (7)postbit
  • (7)postbit_onlinestatus
  • (7)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • fetch_musername
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete