vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vB4 Design and Graphics Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=253)
-   -   center div / css (https://vborg.vbsupport.ru/showthread.php?t=296676)

Chadi 03-30-2013 05:49 PM
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>

kNeo 03-30-2013 11:37 PM
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

Chadi 03-31-2013 12:21 AM
You rock! Works thanks so much :)


All times are GMT. The time now is 02:47 AM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01065 seconds
  • Memory Usage 1,731KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (2)bbcode_code_printable
  • (1)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (3)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.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/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete