Go Back   vb.org Archive > vBulletin 4 Discussion > vB4 Design and Graphics Discussions
  #1  
Old 03-30-2013, 05:49 PM
Chadi's Avatar
Chadi Chadi is offline
 
Join Date: May 2004
Location: USA
Posts: 2,043
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default center div / css

Hey folks,

I added below in mobile skin footer for easy color changes. Problem is, I cannot for the life of me get them centered in the page. I tried span, div, margin auto, margin left/right 50%, etc. Nothing works.

Quote:
<div style="font-size:8px;color:#777;margin-bottom:8px;">Change Style:</div>

<div style="float:left;width:4%;margin-right:2px;border: 8px solid #43A6DF;background-color:#43A6DF;color:#43A6DF;height:10px;text-align:center">
<a href="http://www.talkjesus.com/index.php?styleid=199" style="text-decoration:none" style="text-decoration:none">&nbsp;&nbsp;&nbsp;</a>
</div>

<div style="float:left;width:4%;margin-right:2px;border: 8px solid #189900;background-color:#189900;color:#189900;height:10px;text-align:center">
<a href="http://www.talkjesus.com/index.php?styleid=200" style="text-decoration:none">&nbsp;&nbsp;&nbsp;</a>
</div>

<div style="float:left;width:4%;margin-right:2px;border: 8px solid #E66B1B;background-color:#E66B1B;color:#E66B1B;height:10px;text-align:center">
<a href="http://www.talkjesus.com/index.php?styleid=201" style="text-decoration:none">&nbsp;&nbsp;&nbsp;</a>
</div>

<div style="float:left;width:4%;margin-right:2px;border: 8px solid #603CBB;background-color:#603CBB;color:#603CBB;height:10px;text-align:center">
<a href="http://www.talkjesus.com/index.php?styleid=202" style="text-decoration:none">&nbsp;&nbsp;&nbsp;</a>
</div>

<div style="float:left;width:4%;margin-right:2px;border: 8px solid #B21A41;background-color:#B21A41;color:#B21A41;height:10px;text-align:center">
<a href="http://www.talkjesus.com/index.php?styleid=203" style="text-decoration:none">&nbsp;&nbsp;&nbsp;</a>
</div>

<div style="float:left;width:4%;margin-right:2px;border: 8px solid #82BA1B;background-color:#82BA1B;color:#82BA1B;height:10px;text-align:center">
<a href="http://www.talkjesus.com/index.php?styleid=204" style="text-decoration:none">&nbsp;&nbsp;&nbsp;</a>
</div>

<div style="float:left;width:4%;margin-right:2px;border: 8px solid #808080;background-color:#808080;color:#808080;height:10px;text-align:center">
<a href="http://www.talkjesus.com/index.php?styleid=205" style="text-decoration:none">&nbsp;&nbsp;&nbsp;</a>
</div>

<div style="float:left;width:4%;margin-right:2px;border: 8px solid #E2A600;background-color:#E2A600;color:#E2A600;height:10px;text-align:center">
<a href="http://www.talkjesus.com/index.php?styleid=206" style="text-decoration:none">&nbsp;&nbsp;&nbsp;</a>
</div>

<div style="float:left;width:4%;margin-right:2px;border: 8px solid #169EAB;background-color:#169EAB;color:#169EAB;height:10px;text-align:center">
<a href="http://www.talkjesus.com/index.php?styleid=207" style="text-decoration:none">&nbsp;&nbsp;&nbsp;</a>
</div>

<div style="float:left;width:4%;margin-right:2px;border: 8px solid #C71585;background-color:#C71585;color:#C71585;height:10px;text-align:center">
<a href="http://www.talkjesus.com/index.php?styleid=208" style="text-decoration:none">&nbsp;&nbsp;&nbsp;</a>
</div>

<br />

<div style="border: 3px dashed #43A6DF; margin-top: 30px; width: 95%"></div>
Reply With Quote
  #2  
Old 03-30-2013, 11:37 PM
kNeo kNeo is offline
 
Join Date: Jun 2009
Posts: 34
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Can't center floats... also that code is crazy >.>;;

here try this:

stick this in additional.css for the mobile styles (if one mobile style is a parent of the rest, modify that parent's additional.css and footer templates), or you can stick it in inline right before the html by sticking it in between <style> CSS HERE </style>

Code:
.mobile-style-change {text-align:center;}
.mobile-style-change li { display:inline-block;}
.mobile-style-change li a {padding:13px;display:block;}

#blue {background:#43A6DF;}
#green {background:#189900;}
#orange {background:#E66B1B}
#purple {background:#603CBB}
#maroon {background:#B21A41}
#lightgreen {background:#82BA1B}
#grey {background:#808080}
#darkyellow {background:#E2A600}
#teal {background:#169EAB}
#pink {background:#C71585}
actual html:

Code:
<div style="font-size:8px;color:#777;margin-bottom:8px;border-bottom: 3px dashed #43A6DF;padding-bottom:30px;width:95%;">Change Style:

<ul class="mobile-style-change">
<li id="blue"><a href="http://www.talkjesus.com/index.php?styleid=199"><img src="http://www.talkjesus.com/clear.gif" width="30" height="10" alt="" /></a></li>
<li id="green"><a href="http://www.talkjesus.com/index.php?styleid=200"><img src=http://"www.talkjesus.com/clear.gif" width="30" height="10" alt="" /></a></li>
<li id="orange"><a href="http://www.talkjesus.com/index.php?styleid=201"><img src="http://www.talkjesus.com/clear.gif" width="30" height="10" alt="" /></a></li>
<li id="purple"><a href="http://www.talkjesus.com/index.php?styleid=202"><img src="http://www.talkjesus.com/clear.gif" width="30" height="10" alt="" /></a></li>
<li id="maroon"><a href="http://www.talkjesus.com/index.php?styleid=203"><img src="http://www.talkjesus.com/clear.gif" width="30" height="10" alt="" /></a></li>
<li id="lightgreen"><a href="http://www.talkjesus.com/index.php?styleid=204"><img src="http://www.talkjesus.com/clear.gif" width="30" height="10" alt="" /></a></li>
<li id="grey"><a href="http://www.talkjesus.com/index.php?styleid=205"><img src="http://www.talkjesus.com/clear.gif" width="30" height="10" alt="" /></a></li>
<li id="darkyellow"><a href="http://www.talkjesus.com/index.php?styleid=206"><img src="http://www.talkjesus.com/clear.gif" width="30" height="10" alt="" /></a></li>
<li id="teal"><a href="http://www.talkjesus.com/index.php?styleid=207"><img src="http://www.talkjesus.com/clear.gif" width="30" height="10" alt="" /></a></li>
<li id="pink"><a href="http://www.talkjesus.com/index.php?styleid=208"><img src="http://www.talkjesus.com/clear.gif" width="30" height="10" alt="" /></a></li>
</ul>
<br /></div>
looks like this: http://beta.kupatrix.com/test2.html
Reply With Quote
  #3  
Old 03-31-2013, 12:21 AM
Chadi's Avatar
Chadi Chadi is offline
 
Join Date: May 2004
Location: USA
Posts: 2,043
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

You rock! Works thanks so much
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 01:51 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.03624 seconds
  • Memory Usage 2,187KB
  • 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
  • (2)bbcode_code
  • (1)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)navbar
  • (3)navbar_link
  • (120)option
  • (3)post_thanks_box
  • (3)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (3)post_thanks_postbit_info
  • (3)postbit
  • (3)postbit_onlinestatus
  • (3)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