center div / css [Archive]

Chadi

03-30-2013, 04:49 PM

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.

<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">   </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">   </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">   </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">   </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">   </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">   </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">   </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">   </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">   </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">   </a>
</div>

<br />

<div style="border: 3px dashed #43A6DF; margin-top: 30px; width: 95%"></div>

kNeo

03-30-2013, 10: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>

.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:

<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-30-2013, 11:21 PM

You rock! Works thanks so much :)